react

CRA없이 Webpack, React, TypeScript로 개발 환경 설정하기

토이 프로젝트를 만드는 과정에서 CRA에 TypeScript를 적용하는 것이 아닌, npm init을 통한 초기 설정부터 Webpack, Babel, React, TypeScript를 하나하나 적용하는 과정을 이번 글로 작성해보려 합니다. npm init 원하는 이름의 폴더를 생성한 후, npm init부터 시작해보도록 하겠습니다. mkdir ts-react-noncra cd ts-react-noncra npm init 여기서 npm init을 실행하면 package name, version, description 등 프로젝트에 대한 정보를 입력하는데, 따로 작성하고 싶은 정보가 있다면 작성해도 되지만, 작성하고 싶은 내용이 없는 경우, npm init -y로 스킵할 수 있습니다. 과정을 진행하면 pac..

TIL - 20220701

'내가 할 수 있는 것'으로 검색 기능을 구현해봤다. 우선, 다음과 같이 검색할 데이터를 만들어줬다. 내가 만들고 싶은 검색 기능은 명언을 말한 사람의 이름이나 명언의 내용을 검색하면 검색한 내용에 일치하는 명언에 대한 정보가 나오는 것이다. 기능을 구현하기 위해서는 사용자가 입력한 내용이 saying이라는 이름의 배열 속 객체의 name 혹은 saying 값에 일치해야 한다. JavaScript만으로도 충분히 구현할 수 있지만, 이 글에서는 필자가 React를 사용하고 있기 때문에 React의 useState를 이용하여 구현했다. input창에서 입력하면 입력한 값이 setSearch를 통해 search에 값이 저장되고, search값을 앞서 saying 배열 속 name과 saying 속성이 갖고 있..

TIL - 20220511 (부제: React에서 Enter입력 처리하기)

오늘도 제출한 과제에 대한 피드백을 진행하며 다음과 같은 피드백을 받게 됐다. 피드백을 진행하며 공부한 내용을 정리하고자 한다. 피드백을 본 다음에 바로 든 생각은 button의 type을 submit으로 바꾸면 끝나는 문제아닌가? 라고 생각했다. 물론 아니었다. 구글링을 통해 알아본 결과, input창에서 enter 키를 입력했을 때, 입력 버튼을 눌렀을 때 실행하는 함수를 호출해주면 해결되는 문제였다. 그런데, input창에서 enter 키를 누르면 uncaught typeerror: cannot read properties of undefined (reading 'preventdefault')와 같은 에러를 만나게 되었다. 원인은 handleAddTodoClick의 코드가 다음과 같았기 때문이다. ..