본문 바로가기

전체 글368

[인프런 강의][Cookie] 사용자 인증이 필요한 api를 호출할 때, client와 server에 해줘야 하는 작업

개요 강의에서 커뮤니티(그룹)을 생성하는 기능을 구현하고 있다. 사용자 인증을 거쳐야 서버에서 클라이언트에서의 요청작업을 수행해줘야 한다. 클라이언트에서 서버로 요청할 때, Request Header에 Cookie를 넣어서 보내야 하는데, 서버랑 도메인이 다르다보니, cookie가 전송되지 않았다. 뿐만 아니라, 클라이언트에서 서버로 쿠키를 넘겨도, 서버에서는 받지 못하고 있었다. 이제 이 문제를 강의를 들으면서 해결한 방법을 소개한다. Client에서 cookie를 헤더에 넣어서 쏘는 방법은. axios 인스턴스에 withCrediential: true 옵션을 설정해주는 것이다. // src/api/core/index.ts import axios from "axios"; const request = a.. 2023. 1. 24.

[React] useReducer를 사용하면, dispatch 후, 로직 순서 보장이 안 된다.

useReducer를 사용하면, dispatch 후, 로직 순서 보장이 안 된다. 그 이유. useReducer는 기본적으로 '비동기 로직'을 포함하는 '비동기 액션'을 dispatch 하지 않아요. 개요 context를 사용해서, app.tsx에 authContext를 추가했다. auth.tsx에 context관련 코드는 넣었다. auth.tsx에서 export로 useStateContext와 useDispatchContext란 이름으로 UI컴포넌트에서 import할 수 있게끔했다. 로그인을 요청 후, 서버로부터 유저 정보를 응답받고, 유저 정보를 context에 저장시키려고 했다. context에서는 useRouter를 사용했다. 하지만, 코드가 실행되는 타임라인은 다음과 같았다. 1. '로그인' 버.. 2023. 1. 15.

[Javascript] 쿠키란?

쿠키 이름과 값은 항상 인코딩해야 합니다. 쿠키 하나의 최대 용량은 4KB이다. 사이트 하나당 20개 허용한다.(브라우저에 따라 다르다) 쿠키 옵션 설명 httpOnly 자바스크립트같은 클라이언트 측 스크립트가 쿠키를 사용할 수 없게 한다. document.cookie를 통해 쿠키를 볼 수도 없고 조작 못한다. secure HTTPS연결에만 쿠키 사용할 수 있다 samesite 요청이 외부사이트에서 일어나면, 브라우저가 쿠키를 보내지 못하게 막는다. XSRF 공격을 막는데 유용하다 관련 Javascript 라이브러리 https://www.npmjs.com/package/cookie cookie HTTP server cookie parsing and serialization. Latest version: .. 2023. 1. 14.

[Web] withCredentials는?

withCredentials 로그인 할 때, 아이디와 비밀번호가 서버로 넘어오면 유저의 정보가 맞는지 확인하고 cookie에 token을 발급한다. 그 후에도 다른 페이지에서 인증 할 때도 이 token으로 인증한다. 백엔드와 프론트 도메인이 다르면, 로그인 성공해도 별다른 에러 없이 인증되지 않는다. 그 이유는 도메인 주소가 서로 다르면, 쿠키가 전송되지 않기 때문이다. 프론트엔드와 백엔드에 withCredentials를 설정하지 않는다면, 어떻게 될까? 결론부터 말하면, 백엔드에서 Response Header에 set-cookie로 토큰이 넘어오긴하지만, 브라우저에 쿠키에는 저장되지 않는다. 로그인을 위해서 백엔드에서 jwt 토큰을 만들어서 클라이언트로 토큰을 전송했다. Response Header에.. 2023. 1. 14.

[Javascript] map 자료구조 변수를 깊은 복사하는 법

개요 새로운 메모리에 새로운 변수와 값을 저장하는 게 깊은 복사다. 원시 타입이 아닌, 참조 타입들(배열 또는 객체 타입)이 이콜 연산자로 변수에 대입하면, 얕은 복사*가 된다. *얕은 복사: 메모리 주소가 변수에 할당된다. 회사에서 돈 주고 솔루션을 제품에 붙이는 중에, 요구사항 중에 데이터를 생성한 날짜별로 묶어서 데이터를 묶음으로 UI 노출을 해야 하는 요구사항이 있었다. 솔루션 서버 응답이 리스트여서, 이 데이터를 Map 자료구조 형태로 변환하였다. 그런데, 데이터를 수정할 수도 있어야 했는데, 이 때, map 자료구조로 만들어 둔 상태를 수정해야만 했다. 그래서, map 자료구조 상태를 깊은 복사한 새로운 변수를 수정하고, 이 새로운 변수를 상태에 반영하도록 했다. map 자료구조 상태 깊은 복.. 2023. 1. 14.

[Javascript] Object.entries가 뭐니?

Object.entries? 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다. Object.entries()에 의해 반환된 배열(array)의 순서는 객체가 정의된 방법과 관련이 없습니다. 배열 순서가 쓸 곳이 있다면, 다음과 같이 정렬을 먼저 하시는 것이 좋습니다 Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0])); const object1 = { a: 'somestring', b: 42 }; console.log(Object.entries(object1));// [['a', 'somestring'], ['b', 42]] 2023. 1. 14.

[CSS] transition과 transform을 함께 사용할 때, transition이 작동 안 하는 경우

display:none이 되어 있으면, transition 애니메이션 효과가 작동하지 않는다. 2023. 1. 11.

[Javascript] 문자 날짜 정렬하기

예시 다음 객체가 api로 넘어왔다. 가장 최신순으로 정렬하려고 한다. 방법 attendanceScheduleList.sort(function (comp1, comp2) { if (comp1.start comp2.start) { return -1; } return 0; }); 2023. 1. 9.

[vscode] snippet 사용방법

자동완성 코드 템플릿 만들기 import React from "react"; const InputGroup = () => {}; export default InputGroup; 1. COde > Preperance > Users Snippet > 설정파일에 추가 2023. 1. 7.

[typeorm] Entity 작성 에러

에러 해결 에러 메시지 TypeError: Class constructor BaseEntity cannot be invoked without 'new' 해결방법 ES5 -> ES6로 수정 { "compilerOptions": { "target": "ES6" /* ECMAScript 목표 버전 설정: 'ES3'(기본), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */, // ... } } 원인 2023. 1. 7.