https://github.com/narcisource/pre-onboarding-fe
KT AIVLE School 프리온보딩 프론트엔드
https://github.com/narcisource/pre-onboarding-fe
react
Last synced: about 2 months ago
JSON representation
KT AIVLE School 프리온보딩 프론트엔드
- Host: GitHub
- URL: https://github.com/narcisource/pre-onboarding-fe
- Owner: NarciSource
- Created: 2024-04-17T09:22:59.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-21T14:14:14.000Z (almost 2 years ago)
- Last Synced: 2025-06-12T14:42:44.789Z (12 months ago)
- Topics: react
- Language: JavaScript
- Homepage:
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# KT AIVLE School 프리온보딩 프론트엔드 인턴십 (2024.03)
> Pre-Onboarding = Pre + Onboarding
## 🛠️ 프로그램 구성
3월 25일 - 4월 19일 (4주)
강의 세션 외 시간에 실전 과제 수행하여 100h+
## 💻 학습 기술 스택
-    [](https://axios-http.com/kr/docs/intro)
- [](https://reactjs.org) [](https://create-react-app.dev/) [](https://reactrouter.com/en/main) [](https://tanstack.com/query/v4/docs/framework/react/overview) [](https://react-redux.js.org/)
- [](https://styled-components.com/)
## 💼 실전 기업 과제
1. [기업과제1. 깃헙 이슈 목록 확인 페이지 만들기](https://github.com/NarciSource/Pre-Onboarding-FE--corp-task-01)
2. [기업과제2. 환율 변환 서비스 개발](https://github.com/NarciSource/Pre-Onboarding-FE--corp-task-02)
3. [사후평과 실습과제. 1주일 컨디션 체크 하기](https://github.com/NarciSource/Pre-Onboarding-FE--post-assessment)
커리큘럼
## 📚 커리큘럼
### Week 1-1 자바스크립트 기본기
- 프론트엔드 개발자로 성장하기 위해 우리가 앞으로 나아가야 할 방향
- 필수 프로그램 설치
- 프론트엔드 기초지식
- 알면 쉬운데 모르면 괴로운(1) - HTML
- 알면 쉬운데 모르면 괴로운(2) - CSS
- 자바스크립트 기초(1), (2), (3)
- 사전 미션 피드백(1)
- [아하!모먼트] 과제를 수행할 때 가져야 할 태도
### Week 1-2 첫 리액트 프로젝트 시작하기
- 첫 React 프로젝트 만들기
- JSX
- JSX 사용법
- Quiz\_간단한 텍스트 입력 화면 만들어보기
- 사전 미션 피드백(2)
- [케이스 스터디] 기업 과제 가이드
- [아하!모먼트] 프론트엔드가 배포까지 해야 할까?
### Week 1-3 라이프 사이클과 컴포넌트
- 라이프 사이클이란
- 라이프 사이클 함수로 보는 라이프 사이클
- Component(1)
- Component(2)
- Component(3)
- Quiz\_버킷리스트 페이지를 만들어봅시다.
- [케이스 스터디] 실전 기업 과제 가이드
### Week 2-1 스타일 적용하기, state 이해하기
- 화면을 예쁘게! React에서 CSS 사용하기
- 화면을 예쁘게! - styled-components
- Quiz\_버킷리스트에 styled-components 적용하기
- Ref! 리액트에서 돔요소를 가져오려면?
- State 관리(1)
- State 관리(2)
- Quiz\_버킷리스트에 아이템을 추가해보자!
- [케이스 스터디] 실전 기업 과제 가이드
### Week 2-2 이벤트 리스너와 라우팅
- Event Listener
- 라우팅이란
- 리액트에서 라우팅 처리하기(1)
- 리액트에서 라우팅 처리하기(2)
- Quiz\_버킷리스트 상세 페이지 만들고 이동시키기
- 라우팅, 조금 더 꼼꼼히 쓰려면?
- [케이스 스터디] 실전 기업 과제 가이드
### Week 2-3 리덕스로 하는 썡기초 상태관리
- 리덕스를 통한 리액트 상태관리
- 리덕스 살펴보기
- 리덕스 써보기
- 리덕스와 컴포넌트를 연결하자!
- 컴포넌트에서 리덕스 데이터 사용하기
- Quiz\_버킷 리스트 데이터를 삭제해보기
- [아하!모먼트] 개발은 과연 어떻게 공부해야 할까?
- [케이스 스터디] 실전 기업 과제 가이드
### Week 3-1 상태관리 +
- 상태관리
- 상태관리 해보기(1) ContextAPI
- 상태관리 해보기(2) Redux1
- 상태관리 해보기(3) Redux2
- 상태관리++- react-query 1
- 상태관리++- react-query 2
- 상태관리++-react-query 3
- 서스펜스 써보기
- [케이스 스터디] 실전 기업 과제 가이드
### Week 3-2 애니메이션 효과 주기 / 네트워크 요청 1
- keyframes
- 버킷리스트에 프로그래스바 달기
- 스크롤바 움직이기
- Quiz\_버킷리스트 좀 더 예쁘게!
- Mock API 만들기
- 네트워크 요청 1 - XMLHTTPRequest
- [아하!모먼트] 테스트가 중요하다고 느낀 순간
- [케이스 스터디] 실전 기업 과제 가이드
### Week 3-3 네트워크 요청 2, 자바스크립트 동시성, 저장소 관리
- 자바스크립트와 동시성
- Promise
- async, await
- 네트워크 요청 2 - Fetch API와 Axios
- Quiz\_핑하면 퐁하기!
- Polling과 long polling
- 토큰 기반 인증
- 웹 저장소
- [케이스 스터디] 실전 기업 과제 가이드
### Week 4-1 리덕스에서 비동기 처리
- 리덕스에서 비동기 요청 가지고 놀기(1)
- 리덕스에서 비동기 요청 가지고 놀기(2)
- 머테리얼 UI 사용하기
- 페이지 의도적으로 가리기
- Quiz\_버킷리스트 생성 시 스피너 띄우기
- [케이스 스터디] 실전 기업 과제 가이드
### Week 4-2 에러 처리하기
- Try - Catch - Finally
- Error 다루기
- ErrorBoundary
- Axios interceptors 써보기
- [케이스 스터디] 실전 기업 과제 가이드
### Week 4-3 테스트 해보기
- 테스트 1 - 테스트란
- 테스트 2 - Jest 1
- 테스트 3 - Jest 2
- 테스트 4 - RTL 1
- 테스트 4 - RTL 2
- 컴포넌트 관리
- Meta tag
- 성능지표 보기
- React.memo()
- Portal
- [케이스 스터디] 실전 기업 과제 가이드