전체 글

메인 프로젝트에서 템플릿을 사용할때, 왜 사용하는지 정리하는 중에 알게 된 사실이다. 왜 fetch 보다 axios를 쓰는 것이 좋을까? axios와 fetch는 모두 HTTP 요청을 보내는 데 사용되는 도구입니다. 하지만 axios는 fetch보다 편리한 API와 기능을 제공하며, 프로미스 기반으로 비동기 작업을 처리하는 데 있어서 더 직관적이고 편리한 방법을 제공합니다. 아래 예시 코드를 통해 axios가 fetch보다 어떻게 편리한지 알아보겠습니다. 1. GET 요청 axios로 GET 요청을 보내는 예시 코드는 다음과 같습니다: axios.get('/api/users') .then(response => { // 응답 데이터 처리 console.log(response.data); }) .catch(..

Pre-project 44기 삼땡오버플로우 팀 깃허브: https://github.com/codestates-seb/seb44_pre_033 노션: https://www.notion.so/codestates/f93bef9f78744dc8a362e8e58f22a005 피그마: https://www.figma.com/file/rZQ9dlYffNx9ynTCKaqPtC/pre_project_033?type=design&node-id=2%3A19&mode=design&t=94ODJ6UaRZwP6CFm-1 요약회고 1. api 명세서 (어떤 데이터가 어디에 쓰일것인지, 어떤 데이터를 어떻게 저장할건지, 어떻게 가져올지) 기획이 중요하구나... api 명세서를 자세하게 적어야 하는구나 swagger api 문서화 h..

json 서버 설치와 여는방법 https://www.npmjs.com/package/json-server json-server Get a full fake REST API with zero coding in less than 30 seconds. Latest version: 0.17.3, last published: 3 months ago. Start using json-server in your project by running `npm i json-server`. There are 316 other projects in the npm registry using json-ser www.npmjs.com npm install -g json-server npx json-server --watch posts..

이미 json server에 있는 유저정보라, 가입이 불가능한 입력값인 데도 페이지가 넘어가는 문제가 생겼다 이미 존재하는 이메일 비번 입력하면 에러메세지가 변경되어야 하는데, 변경안되고 초기 상태로 있는게 문제였다. Navigate를 안넣으면, 에러메세지는 변경되고 페이지는 안넘어간다. Navigate 를 넣으면, 에러메세지 변경 안되고 페이지는 넘어간다. 이유는 에러메세지 변경은 state로 관리하기 때문에, 비동기적으로 실행된다. 즉, Navigate보다 에러메세지 변경이 늦게 실행된다. 그래서 바로 클릭을 누르자마자 (에러메세지 변경없이) 페이지가 넘어가는 것이었다 고민을 많이 했는데 팀원분이 같이 고민해서 해결을 해주셨다 !! (짝짝) 해결 ==> 진솔님! useState훅으로 변경되는 값들은 ..

대표적인 토큰 기반 인증기술로는 JWT 가 있습니다. JWT (JSON Web Token) 데이터 전송에 사용하는 대표적인 토큰기반 인증기술로, JSON 형식으로 저장한 정보(payload)를 암호화(서명)하여 전송합니다. 클라이언트가 서버에 요청을 보낼때 인증정보를 암호화된 JWT 토큰으로 제공하고, 서버는 이 토큰을 검증하여 인증정보를 확인할 수 있습니다. JWT의 구성요소 JWT는 어떻게 토큰을 암호화하고 이를 검증하는 지 알아봅시다 JWT 기술로 만든 토큰은 보통 다음과 같은 형식의 문자열로 이루어집니다 여기에서 점(.)이 찍힌 부분을 기준으로 헤더(Header) , 페이로드(Payload), 시그니쳐(Signiture) 이렇게 3부분으로 나뉩니다 헤더(Header) 가장 앞에 위치한 헤더에는 마..

세션이란 사용자가 인증에 성공한 상태를 말하고, 토큰이란 교통승차권과 같이, 무언가를 이용할 수 있는 권한이나 자격을 나타내는 징표입니다 토큰 기반 인증방식은 세션 기반 인증이 가지고 있던 한계를 극복하고자 만들어졌습니다. 세션 기반인증은 서버에서 유저의 상태를 관리합니다. 그래서 개발자들은 서버의 부담을 줄이기 위해서, 서버에 사용자의 인증상태를 저장하는 것이 아닌 클라이언트에 이를 저장하는 방법을 고안하였고, 그게 바로 토큰입니다. 세션 기반 인증방식 먼저, 토큰 기반 인증방식이 생겨난 배경인, 세션 기반 인증에 대한 간단하게 알아볼까요? 1. 유저가 인증정보를 담아 서버에 로그인 요청을 보냅니다 2. 서버는 데이터베이스에 저장된 유저의 인증정보를 확인합니다 3. 인증에 성공했다면, 해당 유저에 대한..

나중에 더 추가예정

현재 useReducer로 만든 프로젝트를 중앙 집중적 전역상태 관리를 위해 RTK으로 리팩토링하는 중이다. (쓰이는 용어는 비스무리 하지만, 다른 점이 있어서 리팩토링 하면서 배우는중~) 그런데, Components에 보이는 것처럼 TodoCard(-TodoItem) , CompletedCard(-CompletedItem) 각각 컴포넌트를 만들었음에도 불구하고, 문제가 생겼다. TodoCard의 모달창을 열어서 정보를 입력하면, CompletedCard 아래에 메모가 누적된다는 점이다. 타겟이 잘못되었나 싶어 import와 export 등을 확인했지만, 경로 문제는 없었고, 오타의 문제도 아니었다... 데브툴을 봐도, 자꾸 modalCompletedItem이 업데이트 되는 상황이다... const He..