FRONTEND/React
[테스팅 초기 설정] Jest + yarn-berry + Nextjs + Recoil + TypeScript
[아코하] 프로젝트에서 Jest를 적용하기 위해 세팅이다. 프로젝트 환경 - yarn-berry 3.3.1 - Next.js 13.1.2 - Recoil 0.7.6 - TypeScript 4.9.4 - Jest 29.5.0 1. 프로젝트 시작 & 관련 모듈 설치 yarn create next-app --typescript CNA를 TypeScript 로 설치해주고, yarn add -D jest @types/jest jest-environment-jsdom ts-jest babel-jest Jest 와 관련 라이브러리도 설치해준다. - jest : 단위테스트에 적합한 테스팅 라이브러리 - jest-environment-jsdom : Jest 28 버전 이후부터는 테스팅환경을 jsdom이 아니라 이 패키지..
[React] 리액트 useState 개념
* 본 글은 스스로 공부하면서 정리한 내용입니다. 틀린 부분은 댓글로 남겨주시면 감사하겠습니다! * Hook은 React 16.8에 새로 추가된 기능입니다. class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. React 공식문서에 나와있는 Hook에 대한 설명입니다. 여기서 눈여겨 볼 부분은 class를 작성하지 않고도! 라는 부분입니다. Hook이 등장하기까지 5년동안 초기 React 개발자들은 State(상태)관리를 하기위해선 class 문법으로 컴포넌트를 만들어서 사용해야 했습니다. 하지만 Hook의 등장으로 함수형 컴포넌트에서도 상태관리가 가능하게 된 것이죠! State를 관리해야 하는 상황을 생각해보면, 1. 카운터 컴포넌트를 생성했다. ↓ 2. 카운터..
[React] 리액트 Props / State의 개념과 차이점
* 본 글은 스스로 공부하면서 정리한 내용입니다. 틀린 부분은 댓글로 남겨주시면 감사하겠습니다! * Props 와 State에 대해 알아보기 리액트로 만들어진 페이지는 크게 두 가지 로직으로 나눈다고 볼 수 있습니다. UI를 구성하는 컴포넌트 로직 UI 컴포넌트의 상태와 그 상태를 변경하는 로직 Props 와 State는 2번에 해당합니다. 만약 브라우저에 접속한 사용자가 특정 버튼을 클릭할 때 마다, 브라우저에 클릭 횟수를 실시간 반영해서 보여주고 싶다면, State를 사용해서 클릭 횟수를 업데이트해서 브라우저에 반영해줘야 합니다. 사실 State(상태 관리)는 유일하게 클래스 컴포넌트에서만 할 수 있었습니다. 그래서 개발자들은 함수형 컴포넌트로 로직을 구성하다가 State 관리가 필요하다고 생각되면 ..
[React] 리액트 프로젝트 시작 세팅하기(CRA)
* 본 글은 스스로 공부하면서 정리한 내용입니다. 틀린 부분은 댓글로 남겨주시면 감사하겠습니다! * 리액트 프로젝트를 만들기 위한 준비물 Node.js vscode 리액트 프로젝트를 만드는 방법은 간단합니다. Node.js와 에디터만있으면 됩니다. Node.js는 LTS(Long Term Support) 버전으로 다운받아줍니다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 에디터는 가장 유명하고 사용하기 쉬운 vscode를 쓰겠습니다. 본인의 운영체제에 맞게 다운받아줍니다. https://code.visualstudio.com/ Visual St..
[React] React.js 리액트 특징! 간단하게 알아보자
* 본 글은 스스로 공부하면서 정리한 내용입니다. 틀린 부분은 댓글로 남겨주시면 감사하겠습니다! * 리액트 리액트는 2013년 facebook에서 발표한 UI를 만들기 위한 오픈소스 자바스크립트 라이브러리입니다. 오픈소스이기 때문에 facebook과 많은 개발자들에 의해 지속적으로 업데이트되고 있습니다. 따라서, 리액트는 풍부한 라이브러리를 보유하고있습니다. 그렇다면 기존 JavaScript와 비교해서 리액트로 개발하면 어떤 점이 좋을까요? JS는 기본적으로 DOM을 이용해서 요소를 참조하고(예를들어 document.querySelector) 값을 추출하기때문에 만약 해당 요소의 id값을 참조하고있었는데 id값이 변경된다면 사용하고있는 코드를 전부 고쳐야하기 때문에 유지보수가 어렵게됩니다. 하지만 리액트..