프로젝트를 진행하던 중 프로필 조회에서 갑자기 오류가 발생했다. 오류네트워크 탭에서 확인한 오류 원인은 토큰 만료 이슈..! 토큰 만료 시간을 확인해 보니.. 1시간인 것을 확인했다... 해결 과정...우선 빠른 테스트를 위해 토큰을 1분짜리 발급하도록 했다.export const login = async (userData) => { return await authInstance.post("/login?expiresIn=1m", userData);}; 처음 생각한 해결 방법은 응답이 status 가 401 인 경우 로그아웃 처리하고 로그인 페이지로 돌리면 되겠지 했는데, 다른 오류도 다 401을 주고 있었다.그러면 응답으로 "토큰이 만료되었습니다. 다시 로그인 해주세요." 라는 메세지를 주고 있으..
팀 프로젝트에서 야심 차게 alert 창을 이쁘게 변경하고 싶어서 sweetalert2 라이브러리를 사용하고 깃허브에 push 를 했다. 근데..? 팀원분들께서 내가 수정 사항을 풀 받으니까 import 오류가 발생한다고 하였다. 설치한 라이브러리가 package.jason 에 잘 들어가있는것을 보니 잘 설치한 것으로 판단했지만... 팀원분들께 yarn add sweetalert2 로 설치해 봐달라고 부탁했지만 여전히 오류가 발생했다. 어쩔 수 없이 일단 내 잘못 같아서 롤백했지만.. 나중에 알게 된 원인은 아래와 같다. 원인원인을 이해하려면 모듈이 설치되는 위치와 gitignore 에 대해서 이해하고 있어야 한다. 라이브러리(모듈)를 설치할 때 yarn add 혹은 npm install 명령어로 설치..
브라우저에서 alert 를 호출하면 뜨는 알림창은 브라우저 자체에서 제공하는 기본적인 UI 이다. 그러다 보니 따로 손봐주지 않으면 굉장히 밋밋하고 못생긴(?) 알림창이 나온다. 나는 이쁜 것을 좋아하기 때문에 라이브러리를 사용해서 알림창을 이쁘게 만드는 법을 알아보았다. 사용할 라이브러리는 sweetalert2 이다. 라이브러리 적용 전아래 이미지는 alert 를 호출한 UI 이다. 이 밋밋한 UI 를 라이브러리를 사용해서 변경해 볼 것이다. Sweetalert2 적용 방법1. 설치yarn add sweetalert2 2. importimport Swal from "sweetalert2"; 3. 코드에 적용import "./App.css";import Swal from "sweetalert2";func..
props drilling 방식으로 구현한 코드를 Context 를 사용하여 리팩토링해 보려 한다. Context API 사용 전 구조아래 이미지는 리팩토링 전 props drilling 방식으로 구현한 컴포넌트 구조이다. Dashboard 에서 사용하지 않는 removedPokemon 을 PokemonCard 를 위해서 props 로 전달해 주고 있다. 또한 PokemonList 에서 사용하지 않는 addPokemon 을 props 로 전달해 주고 있다. 이 프로젝트는 간단한 구조로 되어있어서 충분히 props drilling 방식으로 필요한 정보를 전달해 줘도 괜찮겠지만 만약 컴포넌트가 몇백 개 되면 props 를 전달 전달 전달.... 해야될 것이다. 이를 해소하기 위해 Context 를 사용해..
주어진 포켓몬 중에서 원하는 포켓몬을 추가할 수 있는 프로젝트를 진행하고 있다. 포켓몬은 총 6개를 선택할 수 있고 포켓몬 3개를 선택했으면 3개의 포켓몬이 보이고 선택하지 않은 3개는 기본 이미지가 보여야 한다. 선택한 3개와 선택하지 않은 기본 이미지가 한 번에 렌더링이 이루어져야 하는데, 이 렌더링 방식을 어떻게 해주어야 할지 고민한 것을 정리해 보려고 한다. 처음 접근 방식과 이슈처음 생각한 방식은 useState 초기화를 크기가 6인 배열로 만들어버리기 아래와 같이 각각의 요소를 null 로 초기화한 크기가 6인 배열을 useState 로 설정하였다. (당시엔 이게 최선이라고 생각함)하지만 이렇게 해버리니까 사소한 문제점들이 발생하기 시작했다. 😇 const [selectedPokemon, s..
라액트를 사용해서 개발하는 것을 처음 경험해 보았다! 프로젝트를 하면서 프로젝트 구조에도 신경 쓰게 되었다. 개발하다 보니 컴포넌트 파일이 많이 생기게 되어서 컴포넌트별로 CSS 도 따로 관리하고 싶어서 CSS 파일을 분리하게 되었다. 파일 분리 후 이슈엇 그런데 문제가 생겼다. 분명 난 A, B 두 개의 컴포넌트가 있고 A.css 와 B.css 를 만들었고 해당하는 컴포넌트에 맞는 css 를 import 해서 사용을 했는데 A.css 에 추가한 스타일이 B 컴포넌트에도 적용이 되고 있었다. 🤯 띠용그 이유를 찾아보니까 css 파일의 스타일은 기본적으로 전역으로 적용된다고 한다. React 는 css 를 특별히 제한하지 않는다나 뭐라나... 아무튼 이러한 이유로 파일 분리가 의미없나 싶었는데 다른 방..