코드노트

Race Condition?- 두 개 이상의 작업이 동시에 실행되거나 예상치 못한 순서로 완료될 때 발생하는 문제점이다. 리액트를 사용하면서 한번쯤은 만나본 문제이기도 하다. 이로 인해서 데이터 상태가 예측할 수 없는 상태로 변경될 수 있다. 특히 비동기 코드에서는 필수적으로 생각하고 코드를 작성해야한다! 그럼 Race Condition는 왜 일어나며 어떤 문제점을 가지고 있을까? - 여러 비동기 작업이 동시에 실행되면서 서로 경쟁하는 상황이 발생할 수 있다. 비동기 작업이 순차적으로 이뤄지지 않고 병렬적으로 실행되기 때문에 동시에 업데이트가 된다면 예상치 못한 상태 변경이 발생할 수 있다. - 리엑트를 사용할 때 컴포넌트가 비동기적으로 데이터를 가져오고 동시에 setState를 통해 상태를 업데이트를 ..

리액트 네이티브를 공부하고 있는데 svg를 import하여 사용할 수 있게 설정을 하면서 문제가 생겼다. png를 사용하는 경로들을 못찾는 문제.. 다들 리액트 네이티브 svg를 구글에 검색하고 react-native-svg / react-native-svg-transformer 라이브러리를 사용할 것 같다. 나도 그랬고.. GitHub - software-mansion/react-native-svg: SVG library for React Native, React Native Web, and plain React web projects. SVG library for React Native, React Native Web, and plain React web projects. - software-mans..

이번 프로젝트를 하면서 정말 많은걸 경험하고 배우게 되었다. 규모가 크기도 했지만 SSR, CSR 관련해서도 다시한번 정리가 되었고, 프로젝트가 끝난 후 QA를 진행하고 생각하지도 못했던 에러들을 만나고 수정했다. 그 중에서도 처음에는 원인을 찾지 못했던 에러가 있다. - 웹페이지의 일부분을 코드 스니펫으로 나타나고 있었다. 장시간동안 페이지를 켜두거나 재시동 또는 다시 시작을 한 후 사용하던 페이지가 열리면 이렇게 에러가 발생했다. 만약 router로 다시 그 페이지에 접근하게 되더라도 이러한 문제가 발생했다. SSR로 작업을 했지만 SSG로 빌드되었고, 정적인 파일로 동작을 하다보니 미리 서버측에서 가져온 HTML파일을 생성하다보니 그 뒤에는 서버와 연결이 되지 않아서 나오는 문제인걸로 파악했다. 우..

현재 진행하고 있는 사이트에서 푸터 컴포넌트를 넣었다. 모든 페이지에서 보여주지 않고 특정 페이지에서는 보여주지 않게 하고 싶었다. Next.js 13버전을 사용하고 있었고, 서버컴포넌트를 사용하려고 했지만 현재경로를 가져오려면 클라이언트 컴포넌트를 사용해야했다. 푸터는 변화가 없기 때문에 특정 페이지의 path만 얻어올 수 있으면 SSR을 사용하는게 맞다고 판단하였다. 그럼 어떻게 SSR에서 use 훅을 사용하지 않고 들고올 수 있을까? [Next 13] Server Component + Layout.tsx - Can't access the URL / Pathname · Issue #43704 · vercel/next.js Verify canary release I verified that the is..

이번 팀 프로젝트에서 리액트쿼리를 사용하고있다. 팀프로젝트를 하면서 공통된 로직들을 줄이는게 가장 좋다고 생각이 들었고, 로직구현이 완료되고 API 연동 작업을 하면서 에러핸들링에 있어서 팀원들끼리 상의를 하여 나온 공통 에러 핸들링! 공통 에러 핸들링을 구현하면서 만난 문제들 1. trt catch를 사용하면 useMutation에서 onSuccess에서 에러가 잡힌다. 2. useQuery에서는 onSuccess, onError를 사용할 수 없다. - 공식문서에서 나오길 무한루프이슈때문에 더 이상 사용할 수 없다고 한다...ㅜㅜ 우리는 axios를 사용하면서 then이 아닌 try catch를 사용하기로 컨벤션을 정하였고, 에러핸들링을 하면서 문제들이 생겼다. 그렇게 구글링을 했지만 try catch..

팀원들하고 브랜치로 작업을하다가 pr후 CONFLICT를 만날 때 해결 방법은? - 첫 브랜치 TIL에서도 느꼈지만 다시 보게 되니깐 또 혼란스러웠다. - pull을 했는데 왜 안들어와지지? 그렇게 pull, fetch에 대해서도 알아보려고 한다. 우선 Merge가 되면서 충돌을 일으킨거다. 같은 파일을 작업하게 된다면 더욱 만나게 되는...! CONFLICT githup에서 pr을 하면서 충돌이 계속 났고, 단계적으로 pr을 하고 충돌이 나지 않게 에러가 나지않게 확인하며 작업을 해야한다. - pr을 연속적으로 팀원들이 하게 되면 안되는걸 알게 되었다. - pr을 하더라도 꼭 팀리더에게 확인요청을 하고 컨펌 후 다음 pr을 하자. - 순차적으로 pr을 보내고 merge를 하면 CONFLICT 에러도 가..

Parcel 번들러를 사용하면서 이번에 처음 만난 에러이다. 평소와 같이 git에서 clone을 했고 똑같이 번들러를 설치 후 autoprefixer를 설정하면서 버전을 변경했다. prostcss와 버전 호환문제가 있어서 버전을 다시 변경하고 시작했는데 똑같이 Error: Could not locate the bindings file. Tried: 이 Error코드를 만나게 되었다. https://github.com/nodejs/node-gyp/issues/1511 Error: Could not locate the bindings file · Issue #1511 · nodejs/node-gyp Facing the below issue while running the node in VSC: Node Ve..

mac을 사용하는 사람들이라면 자주 만나게 되는 오류... 매번 새로운 디렉토리를 열때마다 VScode에서 이렇게 오류가 나는거 같다. 매일 파일을 지워주고 새로 'Shell Command: Install 'code' command in PATH' 이렇게 검색을 하려니 너무 귀찮아져서 해결방법을 정리하려고 한다.! EACCES: permission denied, unlink 'user/local/bin/code' 이런 메세지가 났을때 해결하는 방법은? cd /usr/local/bin sudo rm -rf code 간단하다. 저 경로로 들어가서 code 파일을 지워주면 끝 설치가 완료되고 원하는 디렉토리에 들어갈 수 있는걸 확인할 수 있다.. 근복적으로 해결하고 싶은데 아직 찾지 못했다.. 우선 에러가 날..

- branch 치려는데(생성) fatal: Not a valid object name: 'master'. 오류 문구가 나오는걸 볼 수 있다. - branch를 연습하는 과정에서 누구나 볼 수 있는 오류 문구인거 같다. - fatal: Not a valid object name: 'master'. 이 문구가 나오는 이유는? 문구 그대로 master branch 에서 commit이 되지 않았기 때문이다. branch를 사용하는 이유에서 만큼 최소 1번의 commit을 진행 후 branch를 사용하도록 하자! 이 외에도 브랜치를 생성했던 디렉토리가 있다면 그 디렉토리 내에서는 바로 사용이 가능하다. 내가 지금 브랜치를 치려는 디렉토리가 처음 브랜치를 사용하는 곳이라면 이 문구가 나온다!

prettier을 사용하는 경우는 당연히 코드를 쉽게 정리하고 작성하기 위해서이다. 근데 지금까지 플러그인으로 설치 후 제대로 사용을 못하고 있었다... 안되는 경우가 많을텐데 내가 해결한 방법은 Editor.Default Formatter을 검색하여서 포맷터가 설정되어 있는지 확인해야한다. 다른 format on save 체크를 확인도 해봤고, .prettierrc파일도 생성해봤지만 해결이 되지 않았었다 ㅠㅠ 혹시나 나처럼 해결이 안된다면 이방법으로 해결해보면 될 것 같다.