이슈 발생경로와 원인사내에서 새로운 서비스를 개발하던 도중, 파스칼 케이스로 생성한 폴더명을스네이크 케이스로 변경하자는 동료분 의견이 있어 스네이크 케이스로 폴더명을 변경 후깃허브에 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과 연관이 있겠다 생각해 구글링을 통해 서칭했..

Next.js에서 D3 라이브러리로 도형을 그려내던 중 이상한 점을 발견했는데요.제가 작성한 요소는 사각형, 원, 선,텍스트 4개였는데 이보다 많은 요소가 화면에 출력되고 있었습니다.문제의 코드import React, { useEffect } from "react";import * as d3 from "d3";const Lesson02 = () => { useEffect(() => { const canvas = d3.select(".canvas"); const svg = canvas.append("svg").attr("width", 600).attr("height", 600); const group = svg.append("g"); group .append("rect") ..

naver Maps를 사용한 프로젝트를 만들며 배포를 먼저 시도했을 때 해당 에러를 마주하게 되었다. 2. 문제 인지 및 해결 배포 시 환경변수도 추가를 해줬기에 문제가 일어나는 부분은 네이버 클라우드측이라 확신했고, 역시 네이버 클라우드에 도메인을 추가해주지 않아서 발생한 에러였다. 네이버 클라우드에서 Web 서비스 URL 부분에 배포한 주소를 넣어줘 저장 후, 다시 도메인으로 돌아가 새로고침을 하면 정상 동작하는 것을 확인할 수 있다.