?? = Nullish coalescing operator A??B A가 null 또는 undefined 이면 B를 반환, 아니면 A를 리턴(이 경우는 null or undefined 리턴됨) !! = Double Exclamation Marks Operator !!A null, undefined, 0, '', false, NaN 은 false, 이외의 값은 true !(NOT)의 반대 ?. = Optional chaining Operator A?.B A가 null 또는 undefined 이면 에러 대신에 undefined로 띄워줌 삼항 연산자 조건 ? A : B 조건이 true면 A, false면 B 논리 연산자 || OR && AND ! NOT
Toggle 컴포넌트에서 아이콘을 누르면 토글이 보이고 토글 밖을 클릭했을 때 토글이 사라지는 걸 구현하려고 했다. 나는 아이콘을 감싸는 div 태그에 onClick과 onBlur를 넣고 div 클릭 시 onClick 이벤트로 isOpen을 true or false div 밖 클릭 시 onBlur 이벤트로 isOpen을 false 하면 된다고 생각하고 구현했다. Toggle 컴포넌트 예시 // Toggle 컴포넌트 예시 const [isOpen, setIsOpen] = useState(false); return ( setIsOpen((prev) => !prev)} onBlur={() => setIsOpen(false)} tabIndex="0" > {isOpen && ( console.log('라벨 클릭!..
프로젝트 중 회원가입 로직을 짜다가 한가지 문제가 발생했다. FormData 객체를 통해 유저의 프로필 이미지와 유저의 정보를 저장하여 백엔드로 보내야 한다. 프로필 이미지는 multipart/form-data, 유저 정보는 application/json 형식으로 보내려고 이렇게 작성했다. const formData = new FormData(); userData = { ... }; formData.append('img', img); formData.append('userData', new Blob([JSON.stringify(data)], {type: 'application/json'})); SignUp.mutate(formData); 이미지는 File로 저장되고, 유저의 정보는 json을 Blob 객..
import React from 'react'; import PropTypes from 'prop-types'; import * as Style from 'components/Input/Input.styles'; export default function Input ({ status, icon, ...props }) { return ( {icon && {icon}} ); }; Input.propTypes = { status: PropTypes.oneOf(['default', 'error']), icon: PropTypes.element, }; Input.defaultProps = { status: 'default', }; Input 컴포넌트를 만들고 useRef를 사용해서 접근하려고 했지만 이런 오류가 ..
객체(Object) 자바스크립트의 객체는 키와 값으로 구성된 프로퍼티의 집합이다. 사용자, 주문 같은 실제 존재하는 개체(entity)를 표현하고자 할 때 생성된다. let user = { name: "Kang", age: 23 }; 프로퍼티(Property) 프로퍼티(property)는 프로퍼티 키(이름)와 프로퍼티 값으로 구성된다. 기본적으로 어떤 값을 나타내는데, 이 값이 다른 값과 연관되어 있을 때 property라고 한다. JS에서는 객체 내부의 속성을 의미한다. 그럼 위의 코드에서 user의 name과 age가 프로퍼티이다! 메소드(Method) 프로퍼티 안에 함수를 받는 프로퍼티를 일반적으로 메소드라고 한다. 객체 안에서 속해있으니까 프로퍼티아니냐!라고 할 수 있지만 약간 다르다. 프로퍼티 ..