본문 바로가기

전체 글41

유저 인증 상태 관리하기 1. Why? 프로젝트 에서 회원 관리 및 프론트엔드에서의 보안을 담당하게 되었는데, 그 과정에서 JWT와 OAuth를 사용해서 유저의 인증 상태를 관리했다. 이번 글에서는 어떻게 백엔드와 데이터를 주고받았는지, 그리고 왜 이런 방식으로 구현했는지에 대해서 설명하고자 한다. 만약 네트워크에 대한 배경지식이 없으시다면 아래 링크의 글부터 읽는 것을 추천드립니다. 쿠키와 세션 / 네트워크 HTTP W3 상에서 정보를 주고받을 수 있도록 정의된 프로토콜 Connectionless(비연결성) : 요청에 따른 응답을 받고나면 연결을 끊음 Stateless(무상태성) : 클라이언트-서버 관계에서 서버가 클라이언트의 cksxkr5193.tistory.com 2. How? 어떤 선택지가 있는지 1) 세션 기반 인증 인.. 2024. 1. 8.
Vite를 사용하면서 svg 컴포넌트로 만들기 1. Why?과제 테스트를 위해 React + Vite 환경에서 setting 진행중이다. svg파일을 React Component로 만들어 쓰려고 했지만 계속해서 정상적으로 랜더링이 이뤄지지 않았다.  결론부터 말하면 Vite 4.0 이후로 문법이 달라져서 생긴 이슈였다. 2. How?순서vite-plugin-svgr 라이브러리 설치svg.d.ts 파일 생성(이름 달라도 상관 X)vite.config.ts 수정tsconfig.json 수정svg.d.tsdeclare module '*.svg' { const content: React.FC>; export default content;} vite.config.tsimport svgr from 'vite-plugin-svgr';export default.. 2024. 1. 1.
Eslint와 Prettier 설정하기(React + Ts 사용) 1. Why?과제 테스트를 React와 TypeScript로 진행하는 중이다. 간만에 Eslint와 Prettier를 설정하다보니 기억도 가물가물한데, 그 김에 Eslint와 Prettier를 어떻게 설정했는지를 설명하고 왜 이렇게 설정했는지에 대해서 적어보고자 한다. 아래의 설정은 React + TypeScript + pnpm 기준이다. 2. Eslint init잠깐!일단 설명하기 전에, 나는 실수로 eslint를 정상적으로 적용시키지않고 과제를 제출했다...eslint를 설치하고 나서 .eslintrc.json 파일도 정상적으로 설정해줬으니 알아서 잘 돌아가겠거니~ 했는데과제 제출 후 글을 작성하는 도중에 혹시나 하고 var를 코드에 입력해봤는데 에러가 출력되지 않았다...뒤늦게 eslint init.. 2023. 12. 31.
Interface VS Type / TypeScript 1.Why?TypeScript로 프로젝트를 진행하는 중, interface와 type(정확히 말하면 type alias-타입 별칭-이지만 편의상 type으로 부르겠다)의 차이점에 대해서 의문이 생겼다. 함수의 매개변수를 선언할때는 type, props 객체를 선언할 때는 interface를 사용하는 중이였는데, 둘의 차이점을 대략적으로는 알고있었지만 정확하게는 모르고 사용하고 있었다. 그렇기에 이 기회에 둘의 차이점을 정리해보고, type과 interface를 언제 사용할지에 대해서 명확히 정의해보고자 한다. 2. Interface VS Type둘 다 type을 설정해줄때 사용하고, 대부분의 경우에서 비슷하게 작동한다고 설명한다. 그럼 어떤 차이점이 있을까?1. 객체로만 사용가능한 InterfaceInt.. 2023. 12. 18.

티스토리툴바