들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. 이번에는 TDD 방식으로 Todo List를 만들어본다. 전체적인 시나리오는 벨로퍼트님을 따라가지만 컴포넌트 자체는 스스로 만들어볼 생각이다. 컴포넌트 계획 Todo List를 만들기 위해서 필요한 컴포넌트는 무엇일까? ▶ Todo Form : Input과 Button으로 이루어진 Form 컴포넌트이다. Todo App으로부터 Submit을 전달받아 새로운 항목을 추가할 수 있어야 한다. ▶ Todo Item : 각 Todo 항목을 보여주는 컴포넌트이다. 텍스트를 클릭하면 텍스트에 삭제선이 그어져야 하고, 우측 삭제 버튼을 누르면 항목이 사라져야 한다. ▶ Todo List : Todo 배열을 받아와서 여러 개의 TodoItem 컴..

들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. 이 전에 Test Coverage를 공부할 때 한번 정리했지만 사용의 전반적인 흐름이 더 좋다고 느껴서 다시 정리한다. react-testing-library 모든 테스트를 DOM 위주로 진행하는 방식이다. 컴포넌트를 리팩토링할 때, 내부 구조 및 네이밍은 많이 바뀔 수 있지만 작동 방법은 크게 바뀌지 않는다. react-testing-library는 이러한 특징을 중요하게 생각해서 컴포넌트의 기능이 똑같이 작동한다면, 컴포넌트의 내부 구현 방식이 변해도 테스트가 실패하지 않도록 설계되어있다. 테스트 코드 const Profile = ({ username, name }) => { return ( {username} ({name}) ..

들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. TDD ? TDD는 테스트를 통해서 개발을 이끌어나가는 형태의 개발론이다. 먼저 테스트 코드를 작성하고, 구현을 하는 방식이라고 보면 된다. TDD에는 3가지 절차가 있다. 실패 첫 번째 절차로 실패이다. 말 그대로 실패하는 테스트 케이스를 먼저 만드는 것이다. 상황에 따라 다르지만, 먼저 구현할 기능부터 하나씩 테스트 케이스를 작성한다. 성공 두 번째 절차로 성공이다. 앞서 작성한 실패하는 테스트 케이스를 통과시키기 위해서 코드를 작성하는 것을 말한다. 리팩토링 구현한 코드가 테스트를 통과한다면, 중복되는 코드 또는 개선시킬 방법이 있는 코드를 리팩토링 시킨다. 리팩토링을 했을 때 테스트 케이스가 성공하면 다른 기능을 다시 첫 번..

프로젝트의 Ligthouse를 확인해봤다. ?! 성능이 갈려버렸다... 그래서 바로 성능 개선을 나서기로 했다! 1. Code Splitting import Header from '../components/header'; import Test from '../pages/test'; import TestCreate from '../pages/testCreate'; // ... 다음과 같이 Router 를 사용하는 부분에서 각 페이지 컴포넌트를 Splitting 할 계획이다. 그 이유는 React 공식 사이트에서도 나오는데, 현재 페이지에서 사용자 경험을 해치지 않고 번들을 나누기 위해서는 라우트가 가장 확실하기 때문이다. 사용할 것은 React에서 제공하는 lazy와 Suspense이다. lazy는 동적으..

React에서 Form 태그를 사용하는 경우가 있다. 일반적으로 input, textarea 등 value를 통해 무언가 작업을 한다. 이때, useState를 사용하면 값이 변경될 때 마다 컴포넌트가 리렌더링이 발생하게 된다. 실제 값이 변경됨을 감지해서 무언가 작업을 해야한다면 사용할 수 있지만 그게 아니라면 굳이 필요없는 리렌더링이 발생하게 된다. 이것을 useRef도 아닌 Form 태그 자체 기능을 사용해서 해결할 수 있다. const Component = () => { const handleSubmit = (e: React.FormEvent) => { event.preventDefault(); const target = event.target as HTMLFormElement; const tit..

들어가며. react-query를 몇번 사용했지만 타입스크립트와 함께 사용했을 때, 또는 쿼리를 가지고 오는 부분에서 불편함을 느끼고 있어서 이번에 정리해서 작성하려고 한다. useQuery const { data } = useQuery("todo", getTodoList); 가장 기본적인 사용방법이다. 첫 번째 매개변수는 Query Key가 들어가는데, 문자 혹은 배열로 넣을 수 있다. const todoList = useQuery("todoList", getTodoList); or const todoList = useQuery(["todoList", "1"], getTodoList); Key는 고유해야 하며, 추후 해당 키를 가지고 구분할 수 있다. 두 번째 매개변수로는 Promise를 반환하는 함수..

지난번에는 React와 Nginx를 함께 사용해서 배포하는 작업을 진행했다. 이번에는 React와 Nginx를 Docker를 사용해서 이미지화 시켜서 컨테이너로 클라이언트를 배포할 계획이다. 환경 정보 Server : Naver Cloud os : Ubuntu 20 필요한 파일 설치 apt install npm // npm 설치 sudo apt-get install build-essential libssl-dev curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash source ~/.bashrc // nvm 설치 nvm install 18.12.1 // 필요한 npm 버전 설치 npm을 설치하고 defaul..

React 프로젝트를 만들고 이제 배포를 하는 작업이 필요하다. 여러가지 방법이 있겠지만 역시 가장 만만한건 Nginx가 아닐까 생각된다. Naver Cloud에 Nginx를 사용해서 배포하는 작업을 진행할 것이다. 환경 정보 Server : Naver Cloud os: 우분투 20 서버를 만드는 작업은 이전에 작성한 글이 있기 때문에 그것을 참고하길 바란다! 그리고 기본적으로 배포할 React 프로젝트가 있다는 것은 전제로 진행하겠다. 필요 파일 설치 apt install npm npm이 서버에 설치되어 있지 않을 것이기 때문에 설치해준다. apt install nginx 마찬가지로 nginx도 설치되어 있지 않기 때문에 설치해준다. 패키지 가져오기 뭐 별거 없다. 깃허브에 저장되어 있는 Repo를 클..