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

refresh는 해결되었지만 큰 문제가 하나 더 남았었습니다.바로 token인데요.token을 cookie에 싣는 방법으로 빠르게 개발을 진행하기 위해제가 발표에 사용했던 자료를 포스팅하고자 합니다.1. 문제점과 해결 방안 제시그동안 서비스에서 로그인 시, 서버로부터 받아온 response의token(= refresh, access)을 localstorage에 보관해왔습니다.해당 방식의 문제점은 크래커가 localStorage에 접근하는 코드 한 줄로token에 쉽게 접근이 가능하다는 점인데요.(XSS Attack) token 조작으로 타 유저의 이미지 변경, 원치 않는 정보 변경 등이 이뤄질 수 있으므로이에 대한 대응이 필요한데 여러 대응책 중 하나가 바로 Cookie를 활용하는 것입니다.2. 왜 Co..

회사 개발자 동료분들 중 한 분께서 로그아웃을 했음에도 자동으로 로그인이 되었다는 이야기로 문제가 시작되었습니다.네트워크 탭을 확인해보니 로그아웃을 했음에도 refresh 요청이 전달되었고로그인 유지가 이뤄지고 있었는데요. 원하지 않는 로그인 유지가 이뤄지게 된다면 제 3자가 유저의 계정을 사용해범죄를 저지르거나 피해를 입힐 수 있는 보안 문제와 직결되어 해결이 시급했습니다. 우선 현 문제를 파악했으니 문제 해결을 위한 프로세스를 크게 2단계로 확립해봤어요.1) 문제 해결 프로세스1단계로는 임시로 refresh 요청 시, 백엔드에서 유저 토큰을 비교해 만료된 token이라면 오류를 보내 로그인을 막고만료되지 않은 token이라면 그대로 로그인을 유지할 수 있도록 처리해달라고 부탁드렸습니다. 2단계로 re..

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") ..