[SW 사관학교 정글 8기] WEEK13 (나만의 무기를 준비하기) REACT 과제

유선·2024년 6월 9일

정글 13주차

sw사관학교 정글

목록 보기

18/21

[WEEK13] 나만의 무기를 준비하기

.📢 실전 프로젝트에 돌입하기 전, 프레임워크의 기본 동작 원리를 익힙니다.

실전 프로젝트에 사용될 프레임워크(Spring, Express, React 중 택1)를 익힙니다.
나만의 프로젝트를 직접 구현하는 즐거움을 느껴보세요!

진행 방법

💡 팀으로 합심하여 개인 과제를 해결합니다.

본격적인 서비스를 만들기 전 개인의 실력을 다지는 시간입니다. 개인으로 문제를 해결하되 팀원들과 함께 마일스톤을 촘촘히 세우고, 피드백을 깊이 나누세요.
Express, Spring, React 중 택1하여, 입문 및 숙련자료를 참고하여 기한 내 과제를 완료합니다.
chatGPT등 LLM의 도움을 받아도 괜찮습니다만, 각 모듈의 역할을 이해하는 데 힘써주세요.
의도 및 기대효과

현업에서 자주 사용되는 프레임워크를 활용해서, 웹서비스 기본 기능에 대한 구현력을 키웁니다.

주요일정

오늘

오후 4시: 프레임워크 선택 설문 마감
오후 5시: 프레임워크별 팀 배정

다음주 화요일 오전 10시 ~ 11시 반: 과제 결과 발표

팀 순서대로 발표하나 개인별 과제 결과 발표: 개인별 3분
자신이 완수한 과제의 장점, 자신의 기술적 장점을 중점으로 발표

팀배정

💡 같은 무기를 선택한 사람끼리 팀을 이룹니다.

과제

프레임워크를 선택하고, 해당 프레임워크 과제를 해결해서 배포하세요.
Express, Spring, React 중 택1

React 과제

💡 목표 : 나만의 React App 만들기

요구사항에 맞는 기능을 포함하여 나만의 React App 을 만들어봅니다.
기획이 창의적일 필요는 없습니다. 필수 기능을 구현해보며 동작 원리를 이해하려 노력해보세요.

과제를 진행하며 체크할 부분

상태관리 ( 유지 / 초기화 ) 가 잘 되어있나요?
각 컴포넌트의 재사용성이 높나요?
예외처리가 미흡한 부분은 없나요?

⚙️ 요구사항

필수 요구 사항
- UI/UX
  - 기능의 UX를 고려해서 UI를 자유롭게 구성해보세요.
  - 요구사항에 없어도 만들고 싶은 기능이 있다면 OK!
- 게시물 조회 / 추가 / 삭제 / 수정 기능
- 상태관리 라이브러리 활용
  - ex) Redux, Recoil, Redux toolkit, Mobx 등
- 동적 라우팅
- 유효성 검증
  - ex) 제목을 10글자 이상 기입하지 않으면, 글을 추가할 수 없도록 제한(Alert 으로 안내)
  - ex) Form에서 모든 input 값을 입력하지 않으면, 버튼 비활성화
- 배포된 결과물에서는 console.log() 가 보이지 않도록 처리합니다.
추가 요구 사항(선택)
- 로그인/회원가입 기능
- 1개 이상의 Custom Hook
- 버튼 컴포넌트 1개로 모든 버튼을 구현하세요. 모든 스타일과 기능을 적용할 수 있는 만능 버튼을 만들어봅니다.

⚙️ 참고자료

📌 링크가 포함되어 있으나 삭제하고 업로드합니다. 어떤 내용이 있나 참고만 해주세요.

입문 자료
1. React 소개
2. React 에서 자주 사용되는 필수 ES6 문법
3. 개발환경 세팅
4. CRA(Create React App)
5. React Component
6. JSX(JavaScript + XML)
7. Props의 개요
8. Props Children
9. Props 추출
10. State
11. 불변성 & 순수함수
12. Component & Rendering
13. 실습 - 카운터 앱
14. Styling
15. 반복되는 컴포넌트 처리하기
16. 컴포넌트 분리하기(독립 컴포넌트)
숙련 자료
1. Styled Components - 소개, 사용
2. Styled Components - GlobalStyles, Sass 소개, css reset
3. React Hooks - useState
4. React Hooks - useEffect
5. React Hooks - useRef
6. React Hooks - useContext(Context API
7. React Hooks - 최적화(React.memo, useCallback, useMemo)
8. LifeCycle - 클래스형 컴포넌트에서의 라이프사이클 이해하기
9. DOM과 Virtual DOM
10. Redux - Redux 설정
11. Redux - 소개
12. Redux - 설정 + 카운터 프로그램 만들기
13. Redux - 카운터 프로그램 만들기2
14. Redux - Refactoring(action creators, action values
15. Redux - Payload 및 Ducks 패턴
16. TodoList Refactoring 실습(Redux
17. React Router Dom - 소개, hooks, children
18. React Router Dom - Dynamic Route, useParam
19. 비동기 프로그래밍 입문
20. REST (Path Variable vs Query Parameter)
21. JSON이란? (NoSQL 데이터 설계를 위한 기초지식)