혼자 적어보는 노트

Next.js를 사용하여 프로젝트를 진행중이었는데 SSR로 작성된 페이지로 진입 시 csr보다 1초정도 느리게 페이지가 이동되는 현상이 있었다. (이전 프로젝트에서도 마찬가지) 이 부분을 개선하고 싶어서 여러 방면으로 알아보았지만 마땅한 해결 방법을 찾지 못했고 계속 신경쓰이던 부분이었는데,이번에 reactQuery를 테스트삼아 도입을 하며 조금은 개선을 하게 되었다. (아직 이후 발견하는 문제를 찾지는 못함) 📝 과정 1. 질문 목록을 클릭하면 해당 질문의 카테고리 정보와 함께 상세 페이지([id].tsx)로 이동한다. 2. 상세 페이지에서는 상세정보를 요청을 하고(SSR) 응답받은 데이터를 페이지에 내려준다. 3. 2번에서 받은 상세 정보에는 이전,다음 질문에 대한 (prevId, nextId)가 존..

모바일로 로컬 환경을 확인해봐야 할 일이 있어서 알게된 ngrok https://ngrok.com/docs/getting-started 설치 brew install ngrok/ngrok/ngrok 기본 실행 방법은 로컬 개발 서버 띄우고 아래의 명령어를 입력하면 된다. ngrok http (port번호) 명령어 입력 후 터미널 창에 나타난 주소를 클릭하면 공유할 수 있는 링크로 연결된다. Invalid Host header Error 개인적으로 하는 프로젝트에서는 위의 기본 실행 명령어로 접속이 가능했지만 회사에서 테스트 할 때는 위 명령어로 진행이 되지 않아서 host-header를 지정해주는 명령어를 추가했다. http (port번호) --host-header="localhost:(port번호)" 이..

폴더명을 select-> Select로 변경하고 다른 추가작업을 하고 커밋을 했는데 git에서 대소문자를 구분을 못해서 변경이 적용이 안되었다. git config core.ignorecase false 위와 같이 git설정을 하고나니 대소문자 구분은 하게 되었는데 git설정을 변경하고 develop에 적용하기 전에 만들어야 했던 브랜치들이 있었고 그 브랜치를 돌아다니던 과정에서 아래와 같은에러가 발생했다. The following untracked working tree files would be overwritten by checkout 해결 방법 1. untracked file 제거 git clean -fd --dry-run 파일을 인식을 못하는건지 위의 명령어로 해결이 안되어서 다른 방법을 알아보..

프로젝트를하며 API를 통해 로그인 요청을 테스트하던 중 다른 API들은 정상적으로 호출이 되는데 로그인 부분만 CORS가 발생하여 이후 진행이 안되던 상태였다. 백엔드쪽에서 바로 처리가 안되기도 했고 일단 개발 진행을 위해 크롬 확장 프로그램을 사용하여 해결을 해보려 했지만 해결이 되지 않아서 프론트쪽에서 proxy를 사용해보기로 했고, rewrites로 대체할 수 있다는걸 알게되어 글을 작성하게 되었다. Rewrites rewrites는 프록시 역할을 해주기도 하고 요청으로 들어온 경로를 다른 경로로 보내줄 수도 있다. Next.js rewrites axios 요청 export const getUerInfo = () => { return axios.get('/user'); }; next.config...

이전 프로젝트를 진행하며 예상한 날짜에 API가 완성되지 않거나 응답이 제대로 되지 않을 경우 작업에 딜레이가 생겼던 적이 있었다. 뒤늦게 MSW의 존재를 알게 되긴 했지만 그 때 도입하기엔 조금 늦은감이 있어서 적용을 못했었다. 그래서! 조금은 여유로운(?) 새로운 프로젝트를 진행하며 비슷한 상황이 생기는 듯 하여 MSW를 도입해보기로 했다. MSW란? MSW는 Mock Service Worker로 서비스 워커를 이용하여 API를 모킹할 수 있는 라이브러리이다. 서비스 워커는 서버로 요청이 발생하면 요청을 가로채서 MSW에 전달하고 handler에 정의해둔 응답을 받을 수 있다. MSW를 사용하면 백엔드 API가 완성되지 않았을 때 API를 모킹하여 가상으로 데이터를 불러올 수 있기 때문에 미리 코드를..

이전에 2개의 프로젝트를 진행하면서 SVG파일의 경우 img태그로 불러와서 처리를 했었는데 size는 컨트롤 할 수 있었으나 img로 svg를 불러올 경우 컬러 변경이 안되기 때문에 각 컬러별로 svg파일을 불러왔었다. 이렇게 하다보니 여간 불편한게 아니었고 실무에서는 왠지 이렇게 사용할 것 같지가 않았다.. 때마침 새로운 프로젝트를 진행하며 나와 비슷한 시행착오를 겪었던 팀원을 만나게 되었고, 그 팀원분이 SVG Icon 컴포넌트를 담당해서 맡아주시기로 했고 공유를 해주셨다.🙌 SVGR svgr은 svg 파일을 React 컴포넌트로 변환을 시켜주는 라이브러리이다. // assets/icons/close.svg 이런 svg파일을 아래와 같은 컴포넌트 형태로 만들어준다. import * as React f..

직접 적용해서 사용해본 적은 없지만 useLayoutEffect의 존재에 대해 알게 되어 useEffect와 비교하며 정리를 해보기로 했다. useEffect 컴포넌트들이 layout과 paint과정을 거친 이후에 실행된다. 비동기적으로 실행 되며 paint가 된 이후에 실행되기 때문에 useEffect 내부에 dom을 변경하는 코드가 있다면 사용자가 깜빡임을 경험하게 된다. const Home = () => { const [number, setNumber] = useState(0); useEffect(() => { setNumber(333); }, []); return ( {number} ); }; 이와 같은 코드를 작성했다면, 컴포넌트가 렌더링, paint 된 이후에 setNumber로 인해 numb..

display: inline속성의 특징을 다시 알아보면서 의문점이 생겼다. inline요소는 text요소이기 때문에 width, height를 따로 지정할 수 없다, 그리고, 좌우 margin은 적용이 되지만 상하 margin은 적용이 안된다. 그럼 inline 요소는 padding top, bottom이 적용되는건가? 프로젝트 할 때 span에 padding적용이 잘 안되서 block으로 바꿨었던 기억도 있었고, 상하 margin, padding이 전부 안된다고 했던 글들이 봐왔어서 그 텍스트만 기억하고 안된다고 생각하고 있었었다. 그런데 갑자기 상하 padding이 된다는 글을 보게 되었고 확인하기로 했다. inline inline + padding 이렇게만 보면 padding-top만 적용되지 않는..