이슈 발생경로와 원인사내에서 새로운 서비스를 개발하던 도중, 파스칼 케이스로 생성한 폴더명을스네이크 케이스로 변경하자는 동료분 의견이 있어 스네이크 케이스로 폴더명을 변경 후깃허브에 push 했지만 여전히 파스칼 케이스가 적용되어 있었는데요. 알고보니 git은 파일명 또는 폴더명의 대소문자를 구분하지 못하는 문제가 있었습니다.해결 방안git config core.ignorecase falsegit rm -r --cached .git add . git config core.ignorecase false을 터미널에 입력해주면 이후엔  대소문자를 인식하게 됩니다. 추가로 git 저장소에 캐싱된파일이 남아 있다면 터미널에 캐싱 관련 메시지가 보여지게 되는데캐시 관련 명령어로 캐시를 삭제해주면 해결됩니다.

vercel에서 가장 최근 내역인 사파리 브라우저 오류 관련 커밋을redeploy했고, 에러로 처리된 배포 결과를 받았는데요. 해당 기록은 Delete 했고, 일단 main에 머지를 한다면어떻게 보여질까 궁금해 깃허브의 PR을 통해 결과를 확인하니PR에서 체크가 완전히 이뤄지지 않아 문제가 되고 있었어요. conflict는 없었지만 이대로 합쳤을 때 100%어떤 문제가 발생할 것이라는 것은 확신했습니다.어떤 부분을 놓치고 있었을까redeploy할 때, 이전 cache를 유지하는 것에 체크를 안한 것이 문제였습니다.이전에 캐싱된 데이터와 redeploy 시도를 할 때 캐싱하는 데이터의 차이가 발생해문제가 일어난다고 예상했는데요.이유를 명확히 파악하지 못했지만 이유 파악 후, 나중에 업데이트를 하겠습니다.해..

문제 발생사내 프로젝트 진행 중, react-hook-form의watch로 email 값을 감지하는 부분에서 문제가 발생했습니다. 이메일로 전달받은 인증코드와 이메일 주소를 API를 통해 전달 후다음 화면으로 넘어가려던 타이밍이었는데요. 'Enter'키로 통신 함수를 호출하면통신을 마친 뒤 Chrome에서는 watch로 감지하던 email 값이 유지되는 반면,Safari에서는 값이 유지되지 않고 undefined로 초기화가 이뤄지는 오류가 발생했습니다. 드디어 크로스 브라우징 이슈를 경험하게 되었네요ㅎㅎㅎ원인 파악여기저기 console로 확인하며 체크해본 결과,특정 useEffect가 동작 후 email 값도 초기화가 이뤄지는 것을 확인했는데요.문제가 발생하는 곳으로 추정되는 useEffect 부분에 집..

1. 문제 발생development 환경에서 작업을 완료 후 vercel을 활용해 production 환경으로 배포 후API 통신 동작을 체크했을 때, https통신이 중간에서 http로 변경되어져요청이 들어가는 문제를 경험했습니다.2. 해결하기 위한  시도Api 엔드 포인트를 변경하거나, 백엔드에 변경 사항이 있는지 질문도 해보고vercel 환경 변수도 재설정해줬지만 계속 http로 요청이 이뤄졌는데요.3. 해결 방법next.js의 src > app > layout.tsx에 meta tag를 설정해주는 것으로 해결할 수 있었습니다. 위의 meta tag를 적용하면 http 콘텐츠를 자동으로 https로 변환이 이뤄집니다.

Refresh 동작과 token을 cookie로 관리해주는 것으로 로그인-로그아웃-리프레시의 여정이 종료된 줄 알았다.이것은 나의 착각이었다.쿠키로 token 문제를 처리한 바로 다음 날, 백엔드 동료분께서 또 하나의 문제를 제기해주셨다.2개의 서비스 사이트에서 동일한 계정으로 로그인 후, 하나의 탭에서 로그아웃을 해도다른 탭에서 로그아웃 처리가 이뤄져야 하는데 특정 페이지에서는로그인이 된 채로 기능들이 동작한다는 것이었다. 문제 접근 방법 01localStorage는 오리진이 같은 경우 모든 탭과 창에서 데이터를 공유한다는 점을 떠올려  1) 로그아웃 시 localStorage에 로그아웃을 증명하는 데이터를 저장2) _app.tsx에서 useEffect를 사용해 로그아웃 함수를 호출하며만약 localS..

useRef와 setInterval, clearInterval가 사용된 기능의 타입을 지정하던 중, 현재 ref에 대한 타입 에러가 발생했습니다. 이전 코드는 any로 작성되어있었지만 명확한 타입 설정에 대한 필요를 느꼈거든요. const exampleRef = useRef(); 문제 해결 시도 저의 경우엔 ref를 number로 사용하고 있었기에 number 타입을 설정해주었는데요. ref의 current가 타입 에러를 발생시키는 것을 확인할 수 있었습니다. const exampleRef = useRef(); 처음에는 ref가 number 타입만을 취급할 것이라 예상해 number | undefined 등의 여러 설정을 시도하다 아무래도 setInterval과 연관이 있겠다 생각해 구글링을 통해 서칭했..

며칠 전 detail tag와 custom data와 state를 사용한 간단한 기능을 만들었다. 기존엔 토글 버튼의 열고 닫힘이 자유롭게 이뤄졌는데, 하나의 토글이 열리면 나머지 토글은 닫히는 기능이었다. 너무 간단했고, 또 실제로 금방 만들어냈지만 한 가지 문제가 발생했다. details 태그에 state를 사용하는 경우 open 특성이 state와 반응하도록 구현했는데 한 번 함수가 실행되고 나서야 두번째에 정상 작동하는 것이었다. 해당 오류를 해결하기 위해 리서치한 결과, 나와 같은 문제를 겪은 개발자를 발견했고, 해답을 얻을 수 있었다. 해결 detail tag의 기본 동작으로 벌어진 문제 1️⃣ 사용자가 details 태그 요소를 클릭했을 때 onClick 이벤트가 동작히고 state가 fal..

next.js로 만든 개인 프로젝트를 배포하기 위해 로컬에서 빌드를 해봤고, 용량은 무식하게 높았지만 빌드는 완료되었기에 vercel을 이용하기로 결정 후 곧장 배포 단계를 밟았다. 하지만 수많은 오류에 봉착했고, 정말 머리가 30가닥도 넘게 빠질 정도로 스트레스를 받아가며 오류를 해결하기 위한 시도들이 있었다. 놓쳤던 부분 나의 경우엔 node - 16버전, next- 9버전, 그리고 여러 라이브러리들을 사용했다.(next-redux-wrapper, chart.js등) 하지만 vercel로 빌드에 들어갈 때부터 새빨갛게 물든 화면을 볼 수 있었다. 여기서부터 환상의 삽질이 시작되었다. error:0308010C:digital envelope routines 이 에러의 의미를 아무리 찾아봐도 나오질 않았..