프로젝트

React18의 concurrent 기능의 useDeferredValue를 사용하여 사용성을 높이다.

react-query의 useQuery의 원리를 파악하고, 이를 프로젝트에 적용해보았다.

Firestore의 onSnapshot을 이용해서 실시간 state 변경 감지를 하였다.

불필요한 api 호출을 줄이기 위해 react-query에 디바운싱을 적용하였다.

리팩토링 중 발견한 이미지 호출 시 레이아웃 무너짐 현상 해결 과정..

사이트 완성 후의 lighthouse 점수 85점에서 98점으로 올리기까지의 최적화 과정을 정리해보았다.

사용자의 로그인 상태나 권한에 따라 접근할 수 있는 경로가 다르다. 물론 서버쪽에서 체크를 해주긴 하지만, 해당 URL로 넘어간다는 것 자체를 프론트측에서 막아주는 것이 바람직하다. 그렇기 때문에 React의 라우터를 이용하여 접근 제한(Access Control)을

프로젝트 과제를 하면서 끊임없이 발견한 오류 중에 하나가 CORS 관련 오류였다.Access to XMLHttpRequest at '주소A' from origin '주소B' has been blocked by CORS policy: No 'Access-Control-A

프로젝트에 Intersection Observer api를 이용하여 무한스크롤 구현한 이야기.

현재 '고양이와 책을' 팀 프로젝트는 백엔드인 Django와 프론트엔드의 React를 연동한 후 axios를 이용하여 데이터를 주고 받는 걸 통해 회원가입과 로그인 기능을 구현하는 중이다. 회원가입과 로그인 기능을 구현하기 위해 프론트엔드에서는 axios의 post를

원티드에서의 첫 기업 프로젝트 시작.

그립 컴퍼니 기업 개인 과제를 시작했다. 기업이 요구하는 기능들을 확인한 후 메인 검색 페이지부터 구현해야겠다고 생각하였다. 기업에서 요구하는 기능들은 다음과 같았다.

드디어 정말 정말 긴 시간동안 해결이 되지 않던 서평 공간에 사진이 띄워지지 않는 오류 문제를 해결하였다. 문제는 서평 공간을 띄울 때 백엔드로 부터 불러오는 review 데이터 값을 이용해서 서평 내용은 map을 이용해 쉽게 보여줄 수 있었다. 하지만, 책과 관련된

recoil을 이용해서 왜 recoil은 안 됐는지 알기recoil-persist을 설치한 후 설명(https://www.npmjs.com/package/recoil-persist)을 읽고 하나하나 따라서 코드 수정을 하기로 하였다. 하지만 이게 웬걸 설치를

서평의 수정의 정보가 서버로 잘 들어가는지 확인을 하는 시간을 가졌다. 하지만 이상하게 자꾸 데이터에 null값이 뜨면서 오류가 나는 것이었다. 어떤 부분에서 문제가 생겼는지 확인하기 위해 데이터를 카카오 api를 통해 받아오는 과정부터 차근차근 확인해나가고 있었다.

전체적인 고양이와 책을 서평 사이트의 프론트엔드와 백엔드 기능이 완성되었다. 이제 서버에 올리는 일만 남아있었다. 배포를 하게 되면 우리가 만든 웹 사이트를 사용하는 유저들이 생겨날텐데 서평 키워드를 구글에 검색했을 때 우리 사이트가 되도록 많이 노출될 수 있도록 SE

브라우저 Layout 리렌더링 과정을 고려하여 animation 속도 최적화를 해보았다.

OPTIONS 메서드 그리고 preflight 최적화 방법에 대해 알아보자.