Aairon 개발 블로그

어플리케이션에서 로그인을 구현하는 방법은 인증을 서버의 세션에서 할지 토큰을 통해서 할지에 따라서 달라지게 됩니다. 이번 글에서는 JWT를 사용하여 로그인을 구현하는 방법에 대해서 작성합니다. 세션 방식과 토큰 방식의 차이점은 아래 글에서 확인 할 수 있습니다. 쿠키, 세션(cookie, session)과 토큰 (token, JWT)의 차이점 웹 어플리케이션에서 로그인을 구현하는 방법은 크게 쿠키, 세션을 이용하는 방법과 토큰을 이용하는 방법 2가지가 있습니다. 간단히 말하면 쿠키, 세션 방식은 서버에서 세션아이디를 기록하 jcon.tistory.com Access token & Refresh token JWT 토큰을 사용하여 로그인을 구현할 때에는 보통 access token과 refresh token..

husky, commitlint husky는 git의 hook들을 쉽게 관리하게 해주는 툴입니다. husky에 commitlint를 사용하여 git commit시에 prefix를 쉽게 적용하고, commit 메세지에 대한 검사를 진행하기 위해 적용하는 것을 선호합니다. npx husky-init && npm install npm install --save-dev @commitlint/cli @commitlint/config-conventional commitizen npx commitizen init cz-conventional-changelog --save-dev --save-exact npx husky add .husky/commit-msg 'npx --no-install commitlint --ed..

이 포스팅은 개인적으로 작은 사이트 프로젝트나 과제 등을 React18 버전으로 진행하면서 발생한 에러 등을 정리하기 위한 글입니다. 지속적으로 추가 될 예정입니다. 1. cra에서 기존에 제공하던 typescript 템플릿 등의 의존성 오류 현재 cra를 통해 리액트 프로젝트를 생성하면 18버전으로 생성이 됩니다. 하지만 기존에 있던 typescript 등이 적용된 템플릿은 아직 의존성에 대한 부분들이 업데이트 되지 않았습니다. 의존성 문제는 아래 7가지 라이브러리를 최신 버전으로 업데이트 하여 해결하였습니다. "@testing-library/jest-dom" "@testing-library/react" "@testing-library/user-event" "@types/jest" "@types/nod..

react 18버전이 릴리즈 되었습니다. 변경점 중 하나인 batching 프로세스에 대해서 정리해보려고 합니다. 개발을 하시다보면 17버전 이하에서 이벤트 핸들러 안에 있는데 batching이 안되는 경험을 겪어보신 분들이 있을 것이라고 생각합니다. 이번 글에서는 batching에 대해서 간단히 소개하고, 17버전 이하에서 batching이 안되는 상황과 18버전에서 어떻게 변경이 되었는지 알아보도록 하겠습니다. 1. batching이란? react에서 이벤트 핸들러안에 여러 setState를 하게 될 경우 같은 함수 스코프의 setState를 일괄적으로 처리하여 한번만 리렌더링 되도록 일괄처리(batching)를 합니다. function App() { const [count, setCount] = u..

리액트로 개발을 하다보면 한번은 아래와 같은 warning메세지를 보게됩니다. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 현재 해당 warning 메세지는 최초 1회만 나타나고, 브라우저를 새로 고침 하기 전에는 다시 나타나지 않으니 코드 수정 후 확인 할 시에 주의가 필요합니다. 해당 에러는 fetch 등 비동기를 실행하는 실행 컨텍스트가 완..

개발 요구사항 중에 config 파일을 입력하면, 메뉴가 자동으로 생성되는 기능이 있었습니다. react router dom의 Router 안에 Link 메뉴가 생성되는 것은 map 메서드를 통해 생성이 가능하지만 Switch 컴포넌트는 수작업을 해주어야 해야합니다. 하지만 컴포넌트 파일이 없을 경우에는 404페이지가 자동으로 뜨게하고 싶어서 찾아보았습니다. 이런 특수한 사항이 아니라면 역시 권장하는 방법은 아닐것 같습니다. const Pages = importAll(require.context("./pages")); function importAll(r) { let files = {}; r.keys().map((item, index) => { files[item.replace("./", "")] = r..

코드 ver 0.2 import React, { useEffect, useState, useRef } from "react"; const SocketTest = () => { const [socketConnected, setSocketConnected] = useState(false); const [sendMsg, setSendMsg] = useState(false); const [items, setItems] = useState([]); const webSocketUrl = `ws://websocket.com`; let ws = useRef(null); // 소켓 객체 생성 useEffect(() => { if (!ws.current) { ws.current = new WebSocket(webSocke..

단일 게시물 나타내기 Redux 스토어에 새 게시물을 추가 할 수있는 기능이 있으므로 게시물 데이터를 다양한 방식으로 사용하는 몇 가지 기능을 추가 할 수 있습니다. 현재 게시물 항목이 기본 피드 페이지에 표시되고 있지만 텍스트가 너무 길 경우 콘텐츠의 일부만 표시됩니다. 자체 페이지에서 단일 게시물 항목을 볼 수있는 기능이 있으면 도움이 될 것입니다. 단일 게시물 페이지 만들기 먼저 게시물 기능 폴더에 새 SinglePostPage 구성 요소를 추가해야합니다. 페이지 URL이 /posts/123과 같은 경우 React Router를 사용하여이 구성 요소를 표시합니다. 여기서 123 부분은 표시하려는 게시물의 ID 여야합니다. // features/posts/SinglePostPage.js import ..

이번 파트에서는 createSlice를 사용해서 reducer로직의 slice를 store에 추가하는 방법과 useSelectore, UseDispatch 사용밥법에 대해서 알아보겠습니다. 프로젝트 설정 react와 redux가 설정되어 있고, 기본적인 css와 API 요청을 가능하게하는 fake REST API가 있는 프로젝트 예제입니다. 이를 토대로 배워보도록 하겠습니다. 코드는 CodeSandbox를 통해 확인할 수 있고, fork를 해서 진행 할 수 있습니다. 또는 github 저장소에서 clone을 해도 됩니다. codesandbox.io/s/github/reduxjs/redux-essentials-example-app/tree/master/?from-embed reduxjs/redux-esse..