-
cypress를 이용하여 components test 작성하기
Component Test를 작성하여 훨씬 더 간단하고 유지 관리하기 쉽고 다른 구성 요소와 함께 사용하고 재사용하기 쉬운 UI 구성 요소를 만들 수 있습니다. 이 과정에서 테스트를 작성하고, 테스트를 통과하는 코드를 작성하고, 작성한 코드를 리팩토링하는 과정을 반복하게 됩니다. 이번 글에서는 todo list 코드를 일부 작성해보겠습니다. 1. Setup Next.js 11.0.1을 사용하고 있습니다. npm install --save-dev cypress @cypress/webpack-dev-server @cypress/react html-webpack-plugin@4 webpack@4 webpack-dev-server@3 2. Opening Cypress npx cypress open 해당 명령을 이용하여 cypress test runner를 동작시키면 cypress.json 등을 생성합니다. 3....
hokyun.rhee's profile imagehokyun.rhee
2021-07-25 16:30
-
타입스크립트를 이용하여 리액트 프로젝트 시작하기
타입스크립트를 이용하여 리액트 프로젝트를 처음 시작할 때, 알아야하는 최소한의 내용을 다룹니다. 순서 1.Setup 2.Components 3.Hooks 4.Event 1. Setup CRA로 프로젝트를 시작한다면 손쉽게 타입스크립트를 추가하여 개발환경을 구현할 수 있습니다. npx create-react-app my-app --template typescript Next.js 프로젝트에서 Typescript를 설정하는 방법은 여기서 확인할 수 있습니다. 이제 타입스크립트를 이용하여 프로젝트를 작성할 수 있습니다. 최종적으로 .ts .tsx 파일은 트랜스파일되어 Javscript 파일로 만들어집니다. 2. Components 함수형 컴포넌트를 이용하여 다음과 같이 작성할 수 있습니다. import React from "react"; type Image = {...
hokyun.rhee's profile imagehokyun.rhee
2021-06-09 13:30
-
Next.js 프로젝트에 ESLint와 Prettier 설정하기
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하는 이호균입니다. 들여쓰기가 맞지 않아도, 변수를 선언하고 사용하지 않아도, 모든 곳에 any 타입을 사용하여도 어플리케이션은 동작합니다. 동작하니까 문제가 없는 것 같아보이지만 사실 문제가 있습니다. 가독성도 나쁘고, 유지보수가 어렵습니다. any를 남발하였으니 compile time 잡을 수 있었던 문제들이 runtime까지 갑니다. 프로젝트에 ESLint와 prettier를 추가하여 최소한의 코드 품질과 일관된 코드 스타일을 보장하는 방법을 알아봅니다. 프로젝트 생성 // 생성 npx create-next-app <MY-AWESOME-APP> // config 파일 생성 touch tsconfig.json // 프로젝트 실행 npm run dev //...
#react #nextjs #eslint #prettier
hokyun.rhee's profile imagehokyun.rhee
2021-05-14 18:30
-
리액트 어플리케이션의 상태 관리하기
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하는 이호균입니다. 리액트를 사용하여 어플리케이션을 만들다보면 자연스럽게 상태 관리를 하게 됩니다. 대개 redux, mobx와 같은 상태 관리 라이브러리를 이용하여 전역 스토어에서 모든 상태를 관리합니다. 예를 들면 이런 것들을 스토어에 저장합니다. ui 테마 폼 입력 데이터 사이드바 상태 그 외 서버로 부터 받아온 데이터 등등 이 모든 상태를 전역 스토에서 관리하는게 적절할까요? 상태를 관리하는 더 좋은 방법은 무엇일까요? state란 무엇인가 상태 관리를 하는 방법에 대해서 이야기하기 전에, 우선 상태가 무엇인지 알아보겠습니다. React...
hokyun.rhee's profile imagehokyun.rhee
2021-04-23 18:30