21-1 React로 만들어보는 나만의 웹사이트
스터디 진행 일정
- 0주차
- HTML CSS 기본기 확인
- React 소개
- 기본적인 웹 지식 안내
- SPA (Single Page Application)
- 과제 방식 안내
- 1주차
- HTML:
form
알아보기 - CSS:
flex
알아보기 - JavaScript: DOM TravelSal
- 필수 과제: 구글 폰트 사이트 클론 코딩
- 선택 과제: JS 배열 메소드, CSS grid, asynchrounous , callback function
- HTML:
- 2주차
- CSS:
flex
알아보기 - JavaScript:
Event
및EventListener
알아보기 - 필수 과제: Music Kit
- 선택 과제:
Event.target
vsEvent.currentTarget
의 차이점
- CSS:
- 3주차
- 2주차 과제 모범 답안 공개 및 주요 사항 안내
- JS: OOP 소개 및 OOP 방식으로 2주차 과제 코드 재작성
- 필수 과제: Clock & Timer
- 선택 과제:
childNodes
vschildren
, 객체 지향 프로그래밍에서의 주요한 개념(inheritance, static, Fields)
- 4주차
- 3주차 과제 모범 답안 공개 및 주요 사항 안내
- 클린 코드 작성 방법론 소개
- KISS
- DRY
- YAGINI
- 5주차
- React: CRA 를 이용한 실습
- React: JSX 소개
- React: Hook 을 이용한 State 관리
useState
useEffect
- React: Immutability 를 지킨 코드 작성하기
- 필수 과제: RoundTimer
- 6주차
- 5주차 과제 모범 답안 공개 및 주요 사항 안내
- React: Array Component
- React: React.Fragment
- React: Property
- 하위 컴포넌트에서 Property 를 바꿀때의 주의점 안내
- React: 조건부랜더링
- 필수 과제: Todo List
- 7주차
- 6주차 과제 모범 답안 공개 및 주요 사항 안내
- React:
module.css
를 이용한 협업 방식 소개
- 학기말 해커톤
스터디 방식
- 각 주차별 Readme.md에 써져 있는 순서대로 이론 설명 및 실습 진행합니다.
- 자율스터디원 분들을 위해 최대한 자세하게 써드릴 예정입니다.
- 실습 코드는 실습한 그대로 전부 주석처리 되어 올라갑니다.
- 과제를 수행합니다. 과제는 필수 1개, 선택 1개로 나누어집니다.
- 필수 과제는 웹 개발 과제가 나갈 예정입니다. 어떤 기능들을 필수적으로 수행해야 하는지 알려드립니다. 기본적인 코드가 제공될때도 있고 아닐 때도 있습니다.
- 디자인은 자유롭게 해주시면 됩니다.
- 선택 과제는 웹 지식 정리하기 과제가 나갈 예정입니다. 매 시간마다 키워드를 제공해드릴 예정입니다. 해당 키워드를 검색해보시고 원하는 만큼 정보를 정리해주시면 됩니다.
- md파일에 좀더 익숙해지기 위함으로 md파일로 작성을 권해드립니다. (경우에 따라서는 notion 사용 가능)
- 0주차에 예시를 보여드립니다.
- 반드시 수행하지 않으셔도 됩니다! 다만, 웹 지식이 없는 채로 개발하는건 일종의 밑 빠진 독에 물붓기라고 생각합니다. 시간이 너무 없는게 아니시라면 수행해 주시기 바랍니다.