{"id":28240678,"url":"https://github.com/narcisource/pre-onboarding-fe","last_synced_at":"2026-04-18T19:31:04.857Z","repository":{"id":233800747,"uuid":"787837555","full_name":"NarciSource/Pre-Onboarding-FE","owner":"NarciSource","description":"KT AIVLE School 프리온보딩 프론트엔드","archived":false,"fork":false,"pushed_at":"2024-06-21T14:14:14.000Z","size":8,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-12T14:42:44.789Z","etag":null,"topics":["react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NarciSource.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-04-17T09:22:59.000Z","updated_at":"2024-06-21T14:14:17.000Z","dependencies_parsed_at":"2024-04-30T19:43:09.073Z","dependency_job_id":"da16c7cc-0489-47d4-a1fe-d5245120d258","html_url":"https://github.com/NarciSource/Pre-Onboarding-FE","commit_stats":null,"previous_names":["narcisource/pre-onboarding-fe"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/NarciSource/Pre-Onboarding-FE","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NarciSource%2FPre-Onboarding-FE","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NarciSource%2FPre-Onboarding-FE/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NarciSource%2FPre-Onboarding-FE/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NarciSource%2FPre-Onboarding-FE/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NarciSource","download_url":"https://codeload.github.com/NarciSource/Pre-Onboarding-FE/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NarciSource%2FPre-Onboarding-FE/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31982426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T17:30:12.329Z","status":"ssl_error","status_checked_at":"2026-04-18T17:29:59.069Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react"],"created_at":"2025-05-19T04:11:47.739Z","updated_at":"2026-04-18T19:31:04.833Z","avatar_url":"https://github.com/NarciSource.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# KT AIVLE School 프리온보딩 프론트엔드 인턴십 (2024.03)\n\n\u003e Pre-Onboarding = Pre + Onboarding\n\n## 🛠️ 프로그램 구성\n\n3월 25일 - 4월 19일 (4주)  \n강의 세션 외 시간에 실전 과제 수행하여 100h+\n\n## 💻 학습 기술 스택\n- ![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square\u0026logo=javascript\u0026logoColor=black) ![HTML5](https://img.shields.io/badge/HTML5-%23E34F26?style=flat-square\u0026logo=html5\u0026logoColor=white) ![CSS](https://img.shields.io/badge/CSS3-%231572B6?style=flat-square\u0026logo=css3\u0026logoColor=white) [![Axios](https://img.shields.io/badge/Axios-%235A29E4?style=flat-square\u0026logo=axios)](https://axios-http.com/kr/docs/intro)\n- [![React](https://img.shields.io/badge/v18.2.0-%2361DAFB?style=flat-square\u0026logo=react\u0026logoColor=white\u0026label=react\n)](https://reactjs.org) [![CRA](https://img.shields.io/badge/Create%20React%20App-09D3AC?style=flat-square\u0026logo=createreactapp\u0026logoColor=white)](https://create-react-app.dev/) [![React Router](https://img.shields.io/badge/React%20Router-CA4245?style=flat-square\u0026logo=reactrouter\u0026logoColor=white)](https://reactrouter.com/en/main) [![React Query](https://img.shields.io/badge/React%20Query-%23FF4154?style=flat-square\u0026logo=reactquery\u0026logoColor=white)](https://tanstack.com/query/v4/docs/framework/react/overview) [![Redux](https://img.shields.io/badge/Redux-%23764ABC?style=flat-square\u0026logo=redux\u0026logoColor=white\n)](https://react-redux.js.org/)\n- [![styled-components](https://img.shields.io/badge/styled%20components-DB7093?style=flat-square\u0026logo=styledcomponents\u0026logoColor=white)](https://styled-components.com/)\n\n\n## 💼 실전 기업 과제\n\n1. [기업과제1. 깃헙 이슈 목록 확인 페이지 만들기](https://github.com/NarciSource/Pre-Onboarding-FE--corp-task-01)\n2. [기업과제2. 환율 변환 서비스 개발](https://github.com/NarciSource/Pre-Onboarding-FE--corp-task-02)\n3. [사후평과 실습과제. 1주일 컨디션 체크 하기](https://github.com/NarciSource/Pre-Onboarding-FE--post-assessment)\n\n\u0026nbsp;\n\n\u003cdetails\u003e\n\u003csummary\u003e커리큘럼\u003c/summary\u003e\n\n## 📚 커리큘럼\n\n### Week 1-1 자바스크립트 기본기\n\n-   프론트엔드 개발자로 성장하기 위해 우리가 앞으로 나아가야 할 방향\n-   필수 프로그램 설치\n-   프론트엔드 기초지식\n-   알면 쉬운데 모르면 괴로운(1) - HTML\n-   알면 쉬운데 모르면 괴로운(2) - CSS\n-   자바스크립트 기초(1), (2), (3)\n-   사전 미션 피드백(1)\n-   [아하!모먼트] 과제를 수행할 때 가져야 할 태도\n\n### Week 1-2 첫 리액트 프로젝트 시작하기\n\n-   첫 React 프로젝트 만들기\n-   JSX\n-   JSX 사용법\n-   Quiz\\_간단한 텍스트 입력 화면 만들어보기\n-   사전 미션 피드백(2)\n-   [케이스 스터디] 기업 과제 가이드\n-   [아하!모먼트] 프론트엔드가 배포까지 해야 할까?\n\n### Week 1-3 라이프 사이클과 컴포넌트\n\n-   라이프 사이클이란\n-   라이프 사이클 함수로 보는 라이프 사이클\n-   Component(1)\n-   Component(2)\n-   Component(3)\n-   Quiz\\_버킷리스트 페이지를 만들어봅시다.\n-   [케이스 스터디] 실전 기업 과제 가이드\n\n### Week 2-1 스타일 적용하기, state 이해하기\n\n-   화면을 예쁘게! React에서 CSS 사용하기\n-   화면을 예쁘게! - styled-components\n-   Quiz\\_버킷리스트에 styled-components 적용하기\n-   Ref! 리액트에서 돔요소를 가져오려면?\n-   State 관리(1)\n-   State 관리(2)\n-   Quiz\\_버킷리스트에 아이템을 추가해보자!\n-   [케이스 스터디] 실전 기업 과제 가이드\n\n### Week 2-2 이벤트 리스너와 라우팅\n\n-   Event Listener\n-   라우팅이란\n-   리액트에서 라우팅 처리하기(1)\n-   리액트에서 라우팅 처리하기(2)\n-   Quiz\\_버킷리스트 상세 페이지 만들고 이동시키기\n-   라우팅, 조금 더 꼼꼼히 쓰려면?\n-   [케이스 스터디] 실전 기업 과제 가이드\n\n### Week 2-3 리덕스로 하는 썡기초 상태관리\n\n-   리덕스를 통한 리액트 상태관리\n-   리덕스 살펴보기\n-   리덕스 써보기\n-   리덕스와 컴포넌트를 연결하자!\n-   컴포넌트에서 리덕스 데이터 사용하기\n-   Quiz\\_버킷 리스트 데이터를 삭제해보기\n-   [아하!모먼트] 개발은 과연 어떻게 공부해야 할까?\n-   [케이스 스터디] 실전 기업 과제 가이드\n\n### Week 3-1 상태관리 +\n\n-   상태관리\n-   상태관리 해보기(1) ContextAPI\n-   상태관리 해보기(2) Redux1\n-   상태관리 해보기(3) Redux2\n-   상태관리++- react-query 1\n-   상태관리++- react-query 2\n-   상태관리++-react-query 3\n-   서스펜스 써보기\n-   [케이스 스터디] 실전 기업 과제 가이드\n\n### Week 3-2 애니메이션 효과 주기 / 네트워크 요청 1\n\n-   keyframes\n-   버킷리스트에 프로그래스바 달기\n-   스크롤바 움직이기\n-   Quiz\\_버킷리스트 좀 더 예쁘게!\n-   Mock API 만들기\n-   네트워크 요청 1 - XMLHTTPRequest\n-   [아하!모먼트] 테스트가 중요하다고 느낀 순간\n-   [케이스 스터디] 실전 기업 과제 가이드\n\n### Week 3-3 네트워크 요청 2, 자바스크립트 동시성, 저장소 관리\n\n-   자바스크립트와 동시성\n-   Promise\n-   async, await\n-   네트워크 요청 2 - Fetch API와 Axios\n-   Quiz\\_핑하면 퐁하기!\n-   Polling과 long polling\n-   토큰 기반 인증\n-   웹 저장소\n-   [케이스 스터디] 실전 기업 과제 가이드\n\n### Week 4-1 리덕스에서 비동기 처리\n\n-   리덕스에서 비동기 요청 가지고 놀기(1)\n-   리덕스에서 비동기 요청 가지고 놀기(2)\n-   머테리얼 UI 사용하기\n-   페이지 의도적으로 가리기\n-   Quiz\\_버킷리스트 생성 시 스피너 띄우기\n-   [케이스 스터디] 실전 기업 과제 가이드\n\n### Week 4-2 에러 처리하기\n\n-   Try - Catch - Finally\n-   Error 다루기\n-   ErrorBoundary\n-   Axios interceptors 써보기\n-   [케이스 스터디] 실전 기업 과제 가이드\n\n### Week 4-3 테스트 해보기\n\n-   테스트 1 - 테스트란\n-   테스트 2 - Jest 1\n-   테스트 3 - Jest 2\n-   테스트 4 - RTL 1\n-   테스트 4 - RTL 2\n-   컴포넌트 관리\n-   Meta tag\n-   성능지표 보기\n-   React.memo()\n-   Portal\n-   [케이스 스터디] 실전 기업 과제 가이드\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnarcisource%2Fpre-onboarding-fe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnarcisource%2Fpre-onboarding-fe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnarcisource%2Fpre-onboarding-fe/lists"}