Search for a command to run...
Articles tagged with #reactjs
React.js 18 에 도입된 리액트 서버 컴포넌트는 서버에서 동작하는 리액트 컴포넌트를 의미합니다. Next가 권장하는 라우팅 방식인 app router의 기반이 되는 컴포넌트이기 때문에 app router 를 이해하기 위해서는 server component 에 대한 이해가 필요합니다. server component 리액트는 클라이언트단만을 컴포넌트화하는 대신, server component라는 개념을 통해 서버 영역을 컴포넌트화합니다. ...
초보 개발자에게 있어 개발 프로젝트에서 넘어야 하는 첫 번째 난관은 개발 환경 세팅입니다. 개발 환경 세팅으로 몇 분, 혹은 몇 시간을 삽질로 태우게 된다면 '시작이 반이다' 라는 말에 격하게 공감하게 될 것입니다. 저도 공감하고 싶지는 않았습니다. 오늘은 React, Typescript, Tailwind를 사용하는 프론트엔드 개발 환경 설정과 Express로 서버를 만들어 client에서 data fetching을 할 수 있도록 하는 과정에 ...
JSON 로그인 프론트엔드 + 백엔드 구현 프로젝트를 진행하면서 JWT (Json Web Token) 방식으로 로그인을 구현하기로 하였다. (JWT에 대한 설명은 생략, 이 글을 읽는 사람들은 에러를 해결하기 위해 온거겟지?) 백엔드에서 access-token은 header의 Authorization에 담아서 보내주고, refresh-token은 cookie에 담아서 보내기로 하였다. (보안 이슈 고려 body에 넣지 않음) 프론트에서는 acc...
![[React/Node.js] 쿠키를 이용해 refresh-token 구현](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1705842557274%2F14462f3b-7bdc-463f-8bc4-c668a364f38a.png&w=3840&q=75)
💡 이 글은 Tailwind에 대한 기초지식을 전제로 쓰인 글입니다. TailwindCSS는 html/xml 국면에서 style를 일괄적으로 트래킹할수 있게 하고, 보다 간편한 반응형 제작, 프리셋 제공 등 여러 이점이 있지만, 프로젝트의 복잡도가 증가하면서 프레임워크에 대한 여러 의문 또는 한계를 만날 수 있다. 본문에서는 필자가 프로젝트를 진행하며 공부한 몇 가지 Tailwind 상식과 주의점을 공유하고자 한다. 동적 className...
⭐들어가며⭐ React에는 여러가지 Hook이 존재한다. 리액트 프로젝트를 만들기 쉽게 만든 API의 일종이다. 리액트 Hook 중에서 가장 기본 및 기초가 되는 useState에 대해 알아보자. Built-in React Hooks – React useState 공식문서 정의 → useState is a React Hook that lets you add a state variable to your component. 원형 import {us...
recoil이라는 상태 관리 라이브러리의 핵심 개념들에 대해서 설명하겠습니다. 그런데 개념 그 자체보단 해당 개념을 어떻게 바꿔서 이해할 수 있는지를 적어보려고 합니다. RecoilRoot 전역 상태 관리 라이브러리는 대부분 React의 Context API를 내부적으로 활용합니다. 그래서 상위 노드에 Provider를 하나 끼워넣기 위한 컴포넌트를 제공하는데요, recoil에서는 그 컴포넌트가 RecoilRoot입니다. 참고로 일반적으로 이런...