힘내봐요 개발의 숲

웹 프론트엔드 개발에 대한 이해도를 높이고 기초부터 숙달하기 위하여, 새로운 프로젝트를 Vanilla JS로 진행해 보기로 했다. 페이지 전환 속도를 감소하여 사용자 경험을 향상시키기 위하여, React처럼 SPA(Single Page Application)로 구현했다.꽤나 어렵고 번거로운 일이었지만, 직접 구현해보며 어떤 식으로 돌아가는지 공부해 볼 수 있었고, 프레임워크나 라이브러리를 쓰며 얼마나 편하게 작업할 수 있었던 것인지 깨달을 수 있었던 유익한 시간이었다. 구현 시 아래 목표들을 달성하기 위해 많은 고민을 하며 진행했다.페이지 이동 시 URL의 경로도 변경될 것URL의 경로가 깔끔할 것뒤로 가기가 가능할 것해당 페이지의 CSS가 적용될 것URL의 경로를 직접 수정하여도 해당 페이지로 이동될 ..

메인페이지에서 새로고침 시 Recoil state 에 저장해둔 토큰이 초기화되어서 API 호출 에러가 발생했다.(아직 API 호출 에러를 핸들링 하지 않았다.) 리프레쉬 토큰 없이 진행하다 보니, 토큰을 보호하기 위해 로컬 스토리지에 저장하지 않고 내부 변수로 들고 있으려 했던 것인데, 지금 상태로는 새로고침 시 다시 로그인이 필요한 상황이기 때문에 사용자 경험이 좋지 않다고 판단 되었다. Recoil Persist 라이브러리를 사용하면, 간단하게 필요한 변수를 로컬 스토리지에 저장시킬 수 있다.  1. recoil-persist 를 설치한다.npm install recoil-persist//oryarn add recoil-persist2. state 를 관리하는 파일에 recoil-persist를 im..

모달창이 close 될 때마다 관련 state 를 초기화해주는 함수를 호출하는데, 세개의 파일에서 동일한 함수를 추가해 쓰고 있었다.반복되는 코드를 줄이기 위해서, 함수를 새 파일로 뺀 후 컴포넌트처럼 호출해서 쓰려고 수정했더니 아래처럼 에러가 났다. Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:1. You might have mismatching versions of React and the renderer (such as React DOM)2. You might be br..