나도 만들어 보자! todolist (기본세팅)

잡설

오랜만에 글을 쓴다... 요즘에 좀 나태해져서... 쩝... 주제는 한 10개 가까이 생각해 놨는데...

 

어쨌든 한 1주 정도를 놀았기 때문에 다시 초심으로 돌아가 보고자(는 훼이크 그냥 복습 용도??)는 마음으로

 

todolist를 만들어 보겠습니다.

 

우리가 만들 todolist입니다.

 

 

※추신 create-react-app부터 차근차근 만들기를 시작했습니다.

기본 세팅 완료하기!

시작하기 전에 

 

아직도 node.js를 설치하지 않으셨다면 node.js를 설치하세요!!

 

cmd를 여신 다음에 원하는 폴더로 들어가신 다음에 react파일을 만들어 주세요!

create-react-app todos

 

 

혹시 cmd사용법을 모르신다면?!

cd: 파일을 이동
md: 폴더생성
start 프로그램명: 프로그램 실행
dir: 폴더,프로그램들 보기 
등등

다른 많은 사용법이 있지만 이 정도를 알고 개시면 (아마도?!) 어느 정도 간단하게 cmd를 사용하실 수 있습니다.

 

이렇게 나왔나요???

이렇게 만들고 난 뒤에 visual code로 폴더를 열어주세요!!

 

이제 쓸데없는 파일들을 정리해 주세요!

 

index.css
logo.svg
App.css
App.test.js
setupTests.js

 

이다음에 react를 실행해 보겠습니다.!

 

디버그 콘솔을 열어 주세요!!

 

혹시 디버그 콘솔 창을 여는 방법을 모르시면 아래에 있는 글을 참고해주세요!

 

https://allblack0811.tistory.com/14?category=847091

Visual code에서 콘솔창 여는 법!

C:\Users\umh08\Desktop\test\todos>npm start

//또는

C:\Users\umh08\Desktop\test\todos>yarn start

을 입력하시면

만약 이창이 나온다면 y를 입력해 주세요

입력을 하면

????

오류가 발생합니다.

 

그럼 오류를 수정하러 가봅시다!

 

뭐가 엄청나게 작성이 되어있군요! 상관하지 마시고 아래 사진처럼 만들어 주세요!!

 

import부분도 빼먹지 말고 똑같이 만들어 주세요!

아직도 오류가 발생하고 있습니다.

 

index.js파일로 이동해 주세요!

 

index.js

import './index.css';을 지워주시면 

 

오류가 없어지면서

 

방금 전에 작성했던 Hi가 나오게 됩니다!

 

이번 글을 여기서 마무리 짓고 다음 글에서 본격으로 todolist를 만들기 시작하겠습니다.

 

감사합니다!!! ^^