🔥 Trouble Shooting

Text content did not match. Server: "x" Client: "o"

위와 같은 오류가 간헐적으로 발생. 말 그대로 됐다 안됐다 해서.. ㅎㅎㅎㅎㅎㅎ 혼란스러웠다. 오류 원인 Next.js 는 기본적으로 SSR 을 따름. 위의 오류는 브라우저에서 렌더링 한 HTML과 서버의 HTML 이 일치하지 않다는 오류다. 사실 여기서부터 이해가 안 됨.. 서버에서 다 만들어서 보내주는데 왜 브라우저랑 비교해서 오류가 난다는 거지..? 😭 근데, 참고한 첫 번째 링크를 보면, 브라우저에서 DOM을 만들고 Hydrate 하는 작업에서 각자 가지고 있는 HTML 이 다르다는 것. 내 오류의 경우 저 Hey 뒤에 있는 사용자가 x와 o를 랜덤 하게 갖도록 초기화가 되어 있는데, 여기서 브라우저랑 서버가 둘 다 같은 사용자(둘 다 x, 둘 다 o) 면 오류가 안 나고 다르면 오류가 나는 거였..

Github Action test 가 끝나지 않는다..

Github Action으로 CICD 적용하려는데, test 가 계속 돌아가며 끝나지 않았다. 39분 걸린 것도 내가 중간에 취소해서 저 정도.. test 가 로컬에선 성공했고, action에서도 성공은 함! 근데 다음으로 넘어가지는 않았다. 🥲 그래서 yarn 으로 바꿨다가 env: CI=true를 추가했다가 난리 치다가 결국 찾아냄. package.json의 script의 test에 --watchAll 옵션을 준 것을 삭제했더니 됐다! 그 옵션 때문에 계속 테스트가 돌아가는 거였다.. 저것도 모르고 2시간 가까이 삽질했다 😭 아래 처럼 지워주었더니 잘 된다! 참고 https://github.com/orgs/community/discussions/25250

Husky pre-commit fails with code 1 (error)

yml 파일에 문법이 틀린 곳이 없는데 커밋하려고 하면 계속 이런 오류가 떴다. 해당 파일은 eslint 무시한다고 명시를 해줘도 계속 커밋이 안됨. git commit -m "message" --no-verify 커밋할 때 이렇게 명시하여 해결함! 참고 https://github.com/typicode/husky/issues/1014

Netlify 배포 process.env.CI = true 오류 / Preview 기능 이용하기

Netlify 배포는 굉장히 쉽다! vercel 만큼 쉬움. 깃헙을 연결하고 환경 변수를 사용하고 있다면, 넣어주면 끝! 근데 배포하다가 이런 오류가 떴다. 변수가 true 로 되어 있어서 그랬다. 배포 세팅으로 들어간다. 빌드 세팅 부분에서 CI=false 를 yarn build 앞에 추가해주면 된다! 빌드가 성공적으로 됐다! 🤭 Netlify 사용 이유! 현 프로젝트는 모바일 기준이라 필수적으로 모바일로 UIUX 를 체크해야 한다. 때문에 main 에 합치기 전, 내가 수정한 것이 모바일에서도 원하는 것처럼 보이는지 수시로 확인을 해줘야 한다. 이럴 때 유용하게 쓰이는 Netlify 의 프리뷰 기능!!!!! 이걸 이제서라도 알게 된 것에 정말 감사하다 ㅠㅠ dev 에 pr 을 보내고 merge 가 되..

렌더링이 3번 된다..

리액트에서 렌더링 되는 이유. 1. state 변경이 있을 때 2. 새로운 props 가 들어올 때(props 업데이트) 3. 부모가 렌더링 될 때 4. forceUpdate 가 실행될 때. 문제 원인 1. 부모로부터 받은 editForm 함수를 이용해 setState를 해주기 때문에 부모의 state가 변경되어 자식의 자식 컴포넌트인 TagList 도 재렌더링 됨. 2. TagList 컴포넌트의 tagList state 는 최초에 변경되고 그다음 렌더링부터는 변경으로 인지되지 않아 useEffect 안의 editForm 이 실행되지 않음. 3. 때문에 부모 editForm 함수엔 가장 처음엔 수정된 정보로 나오고 그 후엔 계속 초기 지정 값으로 나옴. 문제 해결 1. editForm 함수가 아닌 ta..

github pages 로 배포시 react-router 설정 feat. 배포했는데 흰 화면만 나올 때

로컬에서는 잘 실행되던 프로젝트가 github pages 로 배포 후 하얀 화면만 나온다면? 원인 아래 공식 문서를 보면 CRA 웹, 앱은 기본적으로 서버 루트에서 호스팅 된다고 가정하여 빌드됩니다. 때문에 빌드를 하게 되면 프로젝트는 https://leeseul-moon.github.io/todo_list/ 에 존재합니다. (todo_list 는 프로젝트 폴더) 하지만 라우터는 제가 에 작성한 것을 따라 https://leeseul-moon.github.io/ 로 이동시킵니다. 프로젝트 위치와 라우터가 가리키는 위치가 다르기 때문에 라우터가 제대로 작동하지 않습니다. 해결 라우터에 기본 URL 옵션을 주어 / 가 아닌 /todo_list/ 로 이동시킵니다. package.json 에 5번 줄 heme..

React.memo 써도 컴포넌트 계속 렌더링 됨... -> 해결!✌🏻 feat. useMemo, useCallback

불필요한 렌더링을 안 하고 싶다..! 서론이 깁니다. 바쁘신 분들은 아래로 쭉쭉 내려서 문제점, 원인은? 해결! 이 부분만 보세요! 리액트 공부 5일차에 이제까지 배운 것을 실습하기 위해 Habit Tracker 를 만들었다. 습관을 추가할 수 있고 옆에 +, - 버튼으로 카운트를 수정할 수 있다. 맨 위에 Habit Tracker 옆 숫자는 습관 리스트 중 체크가 된 것들의 갯수다. 세 항목 다 0이 아니니 숫자 3이 나온다. 초초초초 단순한 습관 추적기(?) 😉 클래스 컴포넌트로 해빗 트레커 만드는 인강 2배속으로 보고 혼자서 함수형 컴포넌트로 만들어 본 거라 좀 헷갈렸다. 생각보다 시간이 더 걸렸다. 근데 이거 만드는 것보다 React.memo 공부하는데 시간 더 걸림 ㅎ 리액트 컨셉은 단순하다. ..

2주차 실습 과제 - 에러나는 이유 설명

let b = 1; function hi() { const a = 1; let b = 100; b++; console.log(a, b); } // console.log(a); // ReferenceError: a is not defined // 전역 스코프에서 로컬 스코프의 변수를 참조할 수 없습니다. // h1() 안에서 출력하면 값이 잘 나옵니다. console.log(b); // 1 hi(); // 1, 101 console.log(b); // 1 스코프의 개념을 알고 있다면 쉽게 풀 수 있는 실습 과제 였습니다. 참고 https://lazygay.tistory.com/17 JS 스코프와 스코프 체인 스코프 Scope 스코프는 식별자(변수, 함수, 클래스 이름) 접근 규칙에 따른 유효 범위입니다. ..

nodemon 설치 오류 zsh : command not fount : nodemon

nodemon 은 저장과 동시에 스크립트를 콘솔에 실행시킬 수 있는 아주 유용한 패키지입니다! (참고로 저는 zsh 터미널을 사용합니다.) nodemon 하고 npm install nodemon -g 하고 nodemon 하면 되야 하는데, 아래와 같은 오류 발생. zsh : command not fount : nodemon 해결책 - 폴더를 생성해서 전역 설치 (global) 위치를 변경 아래를 순서대로 따라 친다. mkdir ~/.npm-global npm config set prefix '~/.npm-global' vi ~/.zprofile 이렇게 하면 vi 편집기로 들어간다. i 를 눌러 편집하기 모드로 전환 export PATH=~/.npm-global/bin:$PATH 편집모드에서 위와 같이 써..