[월간리뷰] 이안의 월간코딩 2021년 6월 클래스

첫 클래스라 인원이 2명밖에 안되었지만, 그래도 코로나 시국에 맞게 소수인원으로 잘 마쳤습니다.

 

https://iancoding.tistory.com/252

[2021.06] 이안의 월간코딩 - 리액트 웹 사이트 3시간 컷

장소가 협소한 탓에 길음점이 아닌 성신여대점으로 위치를 옮겨서 진행하였고,

시간은 9시부터 13시까지 진행하였지만 프로젝트에는 정확히 3시간이 소비되었습니다.

 

 클래스 진행 순서

 

1. 프로젝트 생성, 환경설정 및 깃허브 연동

 

node.js 다운로드

npx create-react-app 프로젝트명

src에 필요없는 파일 지우고 assets, components, pages, styles 폴더 생성

리액트의 rfce 단축키 사용을 위해 extensions에서 ES7 snippets 설치

 

2. Navbar, Footer

 

react-router-dom 설치 후 Router 사용

App.js에서 pages import 해오기

Link 이용하기

@material-ui (core) 이용해서 아이콘 쓰기

useState 쓰기

toggle이벤트 만들어서 onClick에 넣기

 

3. Pages, Components

 

json 파일로 map 함수 이용

props 보내고 받기

backgroundImage 익숙해지기

 

4. 카카오맵 API

 

카카오 개발자 어플리케이션 key 생성

카카오맵 API 사용

 

5. 메타정보

 

https://iancoding.tistory.com/231

[meta] 카카오톡 링크 공유 썸네일 및 웹 사이트 정보 넣기

 

6. 깃허브로 사이트 만들기

 

깃허브 github.io 이용해서 웹 사이트 배포