📘 React study 

준비 Node.js 설치하기 (예전에 받았거나 맥북이거나 상관없이 무조건 최신버전을 설치하고 리액트를 설치하는 것이 오류가 적다.) 코드 에디터 설치하기 Create React App 리액트 환경이 구축되고 나면 locallhost:3000에서 기본 화면

props는 부모 컴포넌트로 부터 자식 컴포넌트에게 데이터를 전송하는 방식으로, 부모에 props를 사용하면 자식 component의 인자로 object가 들어가게 됩니다.그리고 props에는 sting, number, boolean, function 같은 다양한 것들

리액트는 SPA(Single Page Application) 방식으로써, 여러개의 페이지를 사용하며, 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 말합니다.리액트를 사용하지 않는다면 새로운 페이지를 로드할 때마다 새로운 페이지를 로드하는 방식의 MPA(Mult

github pages는 github에서 제공하는 무료 서비스로 html, css, js를 업로드하면 웹사이트로 만들어서 무료 배포를 해줍니다. 이번 글에서는 React 작업을 터미널에서 바로 github pages를 올리고 업데이트하는 방법을 알아보겠습니다. 🧚

작업폴더경로에서 터미널을 오픈한 뒤설치가 다 되었다면 .js파일을 전부 .tsx파일로 바꿔서 사용가능합니다.(React로 작업을 하지 않는다면 .ts파일로 사용)파일을 전부 변경해준 뒤 npm start로 서버를 재시작 해줍니다.새로 작업할 폴더 생성 후 IDE와 터미

🚨 이 글은 노마드 React JS 마스터 강의를 본 후 정리한 글입니다. 강의 내용에 대한 언급 없이 강의를 보면서 새로 익힌 Hooks나 Componenet, Library 등을 간략하게 정리한 글입니다. 👩‍💻 개발환경 세팅 react-typescript

React Hook Form 사용하기 쉬운 유효성 검사를 통해 성능이 뛰어나고 유연하며 확장 가능한 form입니다. 공식문서 보기 사용하는 법 React-hook-form 설치하기 명령어를 입력해주세요. Form register register 예약어를 사용하면

Set up 명령어를 실행시켜주면 끝! How to use Atom.ts 파일 생성 useRecoilValue() atom으로부터 값을 불러올 때 사용합니다. useSetRecoilState() atom의 값을 변경할 때 씁니다. useRecoilState()

react-beautiful-dnd React로 아름답고 접근성이 좋은 그래그 앤 드롭 리스트를 만들 수 있도록 도와주는 패키지 입니다. 설치 DragDropContext DragDropContext는 기본적으로 드래그앤드롭을 가능하게 하고 싶은 앱의 한 부분입니다

Framer Motion React에서 사용할 수 있는 production-ready 모션 라이브러리 입니다. 공식 홈페이지 공식 GitHub 설치 react 버전4를 사용하는 분들은 CRACO를 이용해 에러를 해결하세요. CRACO(Create React App

공부를 하면서 주로 오픈 API를 가지고 했었는데,이번에 혼자 만든 개인 프로젝트를 하면서 처음으로로컬 이미지를 어떻게 CRA프로젝트에 가져와야하는지에 대해 고민을 하게 되었습니다.그리고 공부한 내용을 기록으로 남겨보려 합니다.webpack에 의해 관리되지 않습니다.

들어가기에 앞서 이 글은 Styled components의 themePorvider에 대한 기본적인 지식이 있어야하며, react-responsive 라이브러리 사용법에 대한 내용은 다루지 않습니다. 반응형 웹 (Responsive Web) 태블릿, PC, 모바일 등

사용자가 다른 뷰로 이동 할 때 어플리케이션은 뷰를 동적으로 다시 그려줍니다.SPA는 MPA 대비 페이지 간 이동 시 사용자가 느낄 수 있는 딜레이를 제거해 더 나은 UX를 제공합니다.(= 페이지를 새로고침 하지 않습니다.)React는 라이브러리로 라우팅 시스템을 갖추

코드를 작성하다보면 순간순간 고민되던 부분들이 있습니다. 지금 내가 쓴 코드를 나중에 다시 보거나 다른 사람들이 읽었을 때 과연 쉽게 이해할 수 있을까라는 생각을 하다가클린코드라는 글을 읽고, 다시 정리하는 글을 쓰게 되었습니다. 하나의 상태만을 위한 상태 렌더링 만

useMemo와 useCallback에 대해 알아보기 전에 Memoization에 대해 알아야 합니다. 메모이제이션(Memoization)이란 메모이제이션은 알고리즘 시간에 자주 나오는 개념이라고합니다. memoization이란 기존에 수행한 연산의 결과값을 어딘가에