React - Phone book 만들기(1)

이 예제는 아래 블로그에서 본 예제를 기반으로 만들었습니다. 참고 바랍니다.

https://velopert.com/3613 

누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌 | VELOPERT.LOG

react에서 제공하는 리액트 웹 만들기 도구를 활용하면 react로 웹을 만들기 편리하다. 만약에 도구가 없다면 필요한 모듈과 라이브러리를 각각 다운을 해야 하지만, react에서 제공해주는 도구를 활용하면 한번에 가능하다.

create-react-app 이 도구를 활용하는 곳이고, phone-book은 create-react-app을 설치하는 폴더 명이다. 

터미널에서 실행을 한다면,

이렇게 성공화면을 볼 수 있다.

그 다음 phone-book 폴더로 이동해서 yarn start를 하게되면 react 제공하는 기본적인 웹이 실행이 되며 프로그램 도구(개인적으로 vs code 사용)에 파일들이 생성된것을 확인 할 수 있다.

기본적인 도구가 설치 되었으면 필요한 상태만 남겨두고 파일을 다 지우려고 한다. 즉, React App을 백지로 만들어 주려고 한다.

우선 logo 이미지들을 삭제를 하고, App.js에서 logo 이미지를 불러오는 것을 삭제 한다.(블럭 지정된 부분 삭제)

그리고 public 폴더에 있는 manifest.json에서 이미지와 관련된 내용을 삭제를 한다.(블럭 지정된 부분 삭제)

 

필요한 부분만 남기고 다 삭제를 하면 React App은 백지화 된다.(CSS는 나중에 꾸밀때 사용하기에 삭제 안함)

지금부터 필요한 내용들을 넣어서 원하는 웹을 만들면 된다.

#React#phone-book#예제