바쁘게 지냈다. 아이폰 메모장에 할 일들을 적어놓다보니 나만의 인생 manage 웹 사이트를 만들고 싶어졌다. 상용 투두 리스트 앱들도 많지만 사용을 위한 화려하고 다양한 기능을 익히는 것조차 귀찮은 나 자신을 위해, 나에게 꼭 필요한 기능들만 들어가 있는 미니멀한 어플리키이션을 만들어 선물해주고 싶다.
작게 시작하려고 한다. 지금 나한테 필요한 기능은 1. 카테고리를 생성하고, 2. 각 카테고리 아래에 사용자에게서 입력받은 것들을 리스트로 생성하고, 3. 리스트에서 완료된 내용은 체크 표시로 구분할 수 있는 기능이다. (UI는 최대한 간단하게.. 미니멀이 추구미)
npm과 create-react-app 라이브러리
create-react-app 라이브러리를 사용하기 위해서 node.js를 설치해야 한다. node.js를 설치하면 라이브러리들을 쉽게 설치할 수 있도록 도와주는 툴인 npm이 같이 설치된다. 즉, npm으로 create-react-app이라는 라이브러리를 쉽게 설치할 수 있는 것이다.
node.js 설치를 완료하자마자 문제가 생겼다.
npx create-react-app 에러
여러 방법을 시도해보았지만 먹히지 않았다. 그런데 Jaeyoung Jo님 말대로 C:\Users\user\AppData\Roaming 경로 아래에 npm 폴더를 생성하고 다시 실행해보니
이렇게 잘 진행되는 줄 알았으나... 마지막 즈음에 에러가 또 나더라... error number가 -4077였던 것으로 기억한다.
해결
구글을 뒤져보다가
npm uninstall -g create-react-app삭제하고
npm install -g create-react-app다시 설치한 후
npx create-react-app 파일명실행하니 잘 설치가 되었다.
(근데 왜 Happy hacking이라고 뜰까? 타 사이트를 해킹하라는 건가?)
npm과 npx가 무엇인지 아직 잘 모르겠지만 일단 킵고잉.
생성된 폴더, blog 안으로 이동한다.
무엇이 설치되었나
src 안의 App.js는 메인 페이지에 들어갈 HTML 코드를 짜는 곳.
실제 메인 페이지는 public 안의 index.html에 있다.
node_modules : 라이브러리를 전부 모아둔 폴더 (구동시키기 위해 필요한 모든 숨은 라이브러리들)
public : 웹 사이트의 static 파일 보관함 (이미지 파일, favicon 등)
src : 소스코드 파일 보관함
package.json : 설치한 라이브러리들의 목록 (이름과 버전 등)
우리는 App.js에 코드를 작성하지만 실제로 렌더링되는건 html 파일이다. index.js가 바로 이 역할을 해주는데, 실제로 index.js의 코드를 살펴보면
const root = ReactDOM.createRoot(document.getElementById('root'));이 명령어에 의해 작성된 App.js의 내용이 index.html의 id가 root인 div 요소에 전달된다.
무튼 실시간으로 미리보기 위해서 터미널에 다음 명령어 입력
npm start브라우저에 잘 뜨지만
경고 메세지가 출력된다 ㅠ
일단 무시하고 킵고잉
