TIL Todolist 만들고 배포하기 react test

2023.04.20.목

🥇항해99 주특기 시험

지난 번 과제는 추가, 삭제, 취소 등 기능이 복잡했는데 이번에는 todo list에 추가만 하는 것이라 내가 도전해볼 만 했다. 수업에서 배웠던 스타일 활용+애플코딩 기초 강의+지난번 과제에 썼던 코드+챗gpt의 도움으로 완성해서 냈다. 지난번 과제 때도 이해가 부족한 채로 다른 분들 코드와 챗gpt도움으로 했던지라, 이번 과제도 내가 100프로 이해한 건 아니긴 한데, 어쨌거나 제출했다는 게 만족스럽다. 깃허브에 올리고 vercel통해 배포한 걸보면 느리지만 쬐끔씩 성장하는 것 같긴 하다.

❗이제 아는 것

✅▪App.js의 요소에 className붙여주고 App.css에 스타일 지정해 주는 것

❓❗알긴 아는데 확실히는 모르는 것

🟩리액트 화면을 웹에 띄우는 법
▪처음 띄울 때

폴더 만들어 열기
터미널에 yarn create react-app 새폴더명(나중폴더)
한참 다운로드됨
cd 나중폴더명, yarn start 화면에 나옴
cd 나중폴더명 엔터
주소(위치?)가 나중 폴더로 바뀜
yarn start 엔터
크롬에 localhosst:3000창이 열림

▪다음 날 다시 작업할 때(이미 다운로드된 상태)
▪크롬창 실수로 껐을 때: Ctrl+Shift+T
🟩깃허브 repository 에 코드 올리는 법
🟩versel통한 배포

❓여전히 모르는 것

🟩추가하기 기능 구현
🟩state관련해서 어떨 때는 users이고 어떨 때 user가 들어가는지
🟩key활용
🟩map,filter활용
🟩깃허브 커밋
🟩깃허브 Read.me활용
🟩깃허브 모심기
🟩깃허브와 벨로그 연동하여 깃허브에 TIL쓰기