프론트엔드 개발을 하다보면 로그인 방식으로 JWT 방식을 사용하는 경우가 있을 것이다. JWT 방식은 구현하는 방법은 조금씩 차이가 있지만 기본적으로 로그인을 하는 경우 AccessToken과 RefreshToken을 서버에서 클라이언트로 넘겨주고 이것을 통해서 로그인 유지와 사용자 검증을 한다. 결국 Token을 통해서 로그인 정보를 관리하는 것이다. 여기서 이번에 쿠키를 통해서 Token을 관리하는 방법으로 개발을 진행했는데, 배포 환경은 문제가 없겠지만 개발 환경에서 서버가 보낸 Cookie를 브라우저가 저장하지 못하는 문제가 있었다. 서버 ( 192.168.45.123 ) 이고, 클라이언트 ( 192.168.45.321 )일 때, 가장 먼저 할 일이 서버에 cors 설정을 했다. // ... co..

What are Polymorphic Components ? React를 공부할 때 가장 먼저 배우는 개념 중 하나는 재사용 가능한 컴포넌트를 만드는 것이다. 컴포넌트를 한 번 작성하고 여러번 재사용하는 기술이다. 고전적인 재사용 가능한 컴포넌트의 필수 구성요소는 Props와 State이며, Props는 외부에 있으며, State는 내부에 존재한다. 재사용성의 필수 구성요소인 Props와 State는 Polymorphic Components에서도 여전히 유효하지만 최종적으로 렌더링할 요소를 결정할 수 있도록 element를 활용할 것이다. const MyComponent = (props) => { return ( This is an excellent component with props {JSON.str..

프로젝트를 진행하면서 개발자 도구를 확인하니 위와 같은 오류가 있었다. 화면이 렌더링되지 않는 것 같은 치명적인 문제는 없었지만 오류가 나왔으니 해결을 하려고 코드를 확인했다. 확인해보니 state의 업데이트를 useEffect에서 하는 것이 아닌 if문을 사용해서 조건부로 컴포넌트 내부에서 실행해서 발생한 문제였다. 문제를 해결하기 위해서 해당 조건문을 useEffect 내에서 실행하니 오류는 사라졌다. 예상하기론 if문을 사용하더라도 같은 조건인 상황에 여러번 리렌더링이 발생하면 그때마다 state가 변경되기 때문에 문제가 된다고 알려주는 것 같다!

React 애플리케이션에서 과도한 최적화는 최악의 상황을 나타낸다. 몇몇의 개발자들은 useMemo와 useCallback을 개발에서 기본 사항으로 넣어서 모든 곳에 사용한다. 하지만 useMemo는 오히려 애플리케이션의 속도를 저하시킬 수 있다. 명심해야할 것은 메모이제이션은 공짜가 아니다! 우리는 왜 useMemo를 사용할까? useMemo는 컴포넌트의 리렌더링 사이에서 계산 결과를 캐시에 저장하는 Hook이다. React.memo, useCallback, 디바운싱, 동시 렌더링(Concurrent Rendering) 등과 함께 사용해서 성능상 이점을 준다. 이것이 특정 상황에선 정말 도움이 되고 중요한 역할을 하는 것은 맞지만, 대부분은 부적절한 방법인, 모든 변수를 useMemo로 래핑한다. 당연..

React 18버전에 새롭게 추가된 Hook이 몇가지 있다. ▶ useId ▶ useTransition ▶ useDeferredValue ▶ useSyncExternalStore ▶ useInsertionEffect 사실 추가가 되었다고 사용해보지는 않았다. ( 사용성이 있는지는 의문...! ) useId 유니크한 Id 값을 만들어주는 Hook이다. 이게 끝이다 ㅋㅋ.... 태그에 id 값을 넣어야 하는 경우 const passwordField = () => { const passwordId = useId(); return ( ... ) } 다음과 같이 사용할 수 있다. 이렇게 사용하면 id 가 중복으로 들어가는 경우를 방지할 수 있겠지만, 굳이 사용해야할까? 라는 의문은 있다. id 를 고민하는 일이 ..

상태를 관리할 때 사용하는 것으로 useState와 useReducer 가 있다. 하지만 일반적으로 useState를 사용하고 useReducer를 사용하는 일은 거의 없었다. 그러다보니 궁금함이 생겼다. useReducer는 언제 사용하고, 왜 사용하는 것일까? 먼저 간략하게 둘의 차이를 알아보자. useState ▶ 간단한 상태 관리 ▷ 값이 하나인 경우 ▷ 상태들이 서로 관련이 없는 경우 ▶ 컴포넌트 내에서 사용 const [state, setState] = useState(initialState); useReducer ▶ 복잡한 상태 관리 ▷ 상태들이 서로 관련이 있거나, 참조가 필요한 경우 ▷ ex) 로그인된 사용자의 권한을 확인하여 다른 화면에 보여줘야 하는 경우 ▶ 여러 컴포넌트에서 상태가 ..

본인은 프로젝트를 만들 때 CRA를 사용해서 사용한다. 그런데, 프로젝트를 진행하다보면 다른 경로의 모듈을 import할 때 상대 경로를 사용하면 길어지는 문제가 있다. 절대 경로를 사용해서 src/ 에서부터 받아온다면 길이가 짧아진다. 이것은 어찌보면 사소할 수 있는데, 개인적으로 코드에서 이런 사소한 부분을 해소하면 전체적인 코드의 가독성이 좋게 느껴져서 신경을 쓰고 있다. 다시 본론으로 넘어가서 상대 경로의 프로젝트를 절대 경로로 변경하기 위해서 craco를 사용하면 해결된다. craco는 cra로 만든 프로젝트의 경우 eject을 해야 설정이 변경 가능한 것을 설정을 덮어씌워서 변경시켜준다. npm i --save @craco/craco 프로젝트를 설치해준다. 그 다음에 루트에 craco.conf..

React를 사용해서 개발하다가 터미널을 열었을 때 제목과 같은 오류가 발생했다. Assign object to a variable before exporting as module default warning 기능상 문제가 되는 부분은 없었지만 무엇이 문제인지 알아봤다. 확인을 해보니 나의 export 습관에서 비롯된 문제였다. export default { value: "123", key: "toto" } 다음과 같이 export 를 할 때 default에 객체로 바로 반환해서 발생한 문제였다. 해결하는 방법도 간단했는데, const object = { value : "123", key: "toto", } export default object 다음과 같이 변수로 명칭을 정해주고 export를 하면 문..