[💁🏻‍♀️ mbti 테스트 만들기] 토큰 만료 이슈... 😵‍💫

프로젝트를 진행하던 중 프로필 조회에서 갑자기 오류가 발생했다.  오류네트워크 탭에서 확인한 오류 원인은 토큰 만료 이슈..!  토큰 만료 시간을 확인해 보니.. 1시간인 것을 확인했다...  해결 과정...우선 빠른 테스트를 위해 토큰을 1분짜리 발급하도록 했다.export const login = async (userData) => { return await authInstance.post("/login?expiresIn=1m", userData);}; 처음 생각한 해결 방법은 응답이 status 가 401 인 경우 로그아웃 처리하고 로그인 페이지로 돌리면 되겠지 했는데, 다른 오류도 다 401을 주고 있었다.그러면 응답으로 "토큰이 만료되었습니다. 다시 로그인 해주세요." 라는 메세지를 주고 있으..

• format_list_bulleted 🔥 프로젝트
• · 2024. 9. 11.
• textsms

import 오류... 라이브러리 설치 오류... (인줄 알았던..) 😨

팀 프로젝트에서 야심 차게 alert 창을 이쁘게 변경하고 싶어서 sweetalert2 라이브러리를 사용하고 깃허브에 push 를 했다. 근데..? 팀원분들께서 내가 수정 사항을 풀 받으니까 import 오류가 발생한다고 하였다. 설치한 라이브러리가 package.jason 에 잘 들어가있는것을 보니 잘 설치한 것으로 판단했지만... 팀원분들께 yarn add sweetalert2 로 설치해 봐달라고 부탁했지만 여전히 오류가 발생했다.  어쩔 수 없이 일단 내 잘못 같아서 롤백했지만.. 나중에 알게 된 원인은 아래와 같다. 원인원인을 이해하려면 모듈이 설치되는 위치와 gitignore 에 대해서 이해하고 있어야 한다. 라이브러리(모듈)를 설치할 때 yarn add 혹은 npm install 명령어로 설치..

• format_list_bulleted 🐞 버그 모음
• · 2024. 9. 4.
• textsms

[React] Props Children

자식 컴포넌트에 정보를 전달하는 방법은 props 로 전달하는 것이다. 그중 children 이 있는데 해당 내용을 정리해 보려 한다! children children 은 부모 컴포넌트의 자식으로 감싸진 요소를 props 를 통해 자식 컴포넌트로 전달해 주는 역할을 한다. 이는 부모가 자식의 내부 구조를 유연하게 정의할 수 있어서 재사용성과 컴포넌트의 유용성이 높아진다. function Child(props) { console.log("props :>> ", props); return ;}function App() { return 안녕하세요;}export default App;App 컴포넌트는 자식 컴포넌트 Child 를 가지고 있다. 자식으로 데이터를 보낼 때 와 같은 방식 말고도 다른 방법이 ..

• format_list_bulleted React
• · 2024. 8. 31.
• textsms

[React] 리액트에서 불변성

리액트에서 불변성을 지키는 것이 중요하다는 말을 많이 들어봤다. 리액트에서 불변성에 대해 이해하기 위해서 불변성이 무엇인가불변성이 지키는 것은 무엇인가리액트에서 불변성이 중요한 이유위와 같은 내용을 알아보자. 불변성이란?불변성(immutability) 이란 네이버 국어사전에 의하면 '변하지 아니하는 성질' 을 의미한다.그러면 프로그래밍 세계에서 불변성이란 데이터가 한 번 생성되면 변경되지 않는 성질을 말한다. 불변성을 지킨다의 의미자바스크립트에서 객체와 배열은 참조 타입이다. 따라서 직접적으로 값을 수정할 경우 원본 데이터를 변경하는 현상이 일어난다. 원본 데이터를 변경시켜서 불변성을 지키지 않은 예시를 먼저 알아보자.const fruits = ["apple", "banana"];const newFrui..

• format_list_bulleted React
• · 2024. 8. 29.
• textsms

React 에서 Sweetalert2 사용

브라우저에서 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..

• format_list_bulleted React
• · 2024. 8. 26.
• textsms

NPM, NPX, YARN 는 무엇일까?

npm, npm, yarn 모두 라이브러리를 설치할 때 한 번쯤 명령어로 입력해 봤을 거다. 라이브러리 설치 명령어를 보면 어쩔 때는 npm 어쩔 때는 npx 이렇게 각각 다른 방식을 사용하는 것을 보다가 자주 봐왔던 3개에 대해서 공통점과 차이점을 알아보려고 한다. 3가지 모두 패키지 관리자이다.  NPM (Node Package Manager)특징Node.js 의 공식 패키지 관리자이며 Node.js 와 함께 설치되는 친구이다.npm 레지스트리에(저장소) 수많은 자바스크립트 오픈 소스 라이브러리가 등록되어 있어서 이를 통해 설치와 관리가 용이하다.패키지 설치 방법npm install [패키지명] 으로 패키지를 설치한다. npm install -g [패키지명] : 글로벌 설치, 컴퓨터 전역에서 사용할 ..

• format_list_bulleted Node.js
• · 2024. 8. 25.
• textsms