타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 데브코스 6기 대시보드

과정 OT 및 소개 (운영&행정매니저)

- 6개월간 진행될 과정의 진행방식과 운영에 대해서 소개합니다.

- 코어타임 일부 시간에 자기 소개 등의 아이스 브레이킹을 진행합니다.(팀별 설문조사에 사용될 중요한 활동)

1. 포트폴리오 / 협업 환경 구성

1.1. 주차 목표: 개발 도구에 대한 이해와 활용, 협업 도구의 활용

1.2. 학습 포인트: Git 명령어와 활용, 프로젝트 관리 및 협업 도구의 사용

1.3. 이론

- Git 기본 이론

1.4. 실습 

- 버전 관리 개요 

- Git 기본 명령어 활

- Github을 활용한 원격 코드 관리

- Git 브랜치 전략 기반의 협업 워크 플로우 (git flow 기반의 협업 전반, PR 직접 만들고 리뷰 진행) 

- Merge & Conflict (다양한 충돌 상황 만들어 해결

- Git 고급 

2. 웹 서비스의 이해: 웹 생태계부터 웹 브라우저, 그리고 데이터베이스까지                 

2.1. 주차 목표: 웹 생태계의 전반적인 이해, 웹 브라우저에 대한 이해, HTTP(S), HTML/CSS 기초, 그리고 데이터베이스 개념에 대한 이해

2.2. 학습 포인트: 웹의 기본 구조, 웹 브라우저, HTTP(S), HTML/CSS, 데이터베이스 기본 개념 및 사용

2.3. 이론

- 웹 생태계 전반에 대한 내용 

- 웹 브라우저 생태계에 대한 이해 + HTTP(S) 기본 

- HTML / CSS 기초

- 데이터베이스 기초 (용어 / 개념) 

- ERD 기반의 테이블 구조 파악 / 관계 구조 파악

2.4. 실습 

- 웹 브라우저 및 Node.js 환경 실습 

- HTTP(S) 실습 - 웹 페이지 요청 및 응답

- HTML/CSS 실습 - 웹 페이지 디자

- 데이터베이스 실습 (DDL, DML, DCL)

- 웹 서비스 구현 실습 - 이론에서 배운 내용 종합

역량 진단 평가 1회차

<역량진단평가-개발 기초 상식 평가>

- 평가 내용: Git / Github, 데이터베이스, 웹 전반

- 평가 방식: 객관식 / 주관식 / 서술형 문항으로 구성된 총 30개 문항

- 평가 방법: 프로그래머스 객/주관식 문제 출제 방식 및 모니토 활용

- 평가 시간: 1시간       

3. 백엔드 기초: Node.js + Express 기본

3.1. 주차 목표: Node.js와 Express.js를 사용하여 백엔드 서버를 구축하고 API를 개발하는 것

3.2. 학습 포인트: 노드 모듈 시스템, 비동기 프로그래밍, API 개발

3.3. 이론 

- Node.js와 npm에 대한 이해 

- Express.js 기반의 웹 서버 구축 및 응용 

- REST API 디자인 및 구현

3.4. 실습 

- Node.js 및 Express.js를 사용한 서버 개발 실습 

- REST API 개발 실습 

프로젝트1 : 데이터 기반 웹서비스의 개발자 포트폴리오 제작

<훈련 목표>

- Git을 이해하고 간단한 버전 관리를 진행해보며 실제로 포트폴리오 웹페이지를 제작

<프로젝트 단계>

1. 기획 및 설계

- 포트폴리오 웹 페이지의 기본적인 구조와 디자인에 대해 기획

2. 구현 및 배포

- HTML/CSS를 이용하여 웹 페이지의 기본 구조를 구현하고 디자인

- Git을 활용하여 웹 페이지의 버전 관리를 진행 (Git add, commit, push)

- Pair로 진행하여 상대방의 포트폴리오에 피드백을 PR(Pull Request)로 남겨보기

- Github Pages를 활용하여 웹 페이지를 배포

- Github 외 다른 정적 페이지도 추가 활용 가능

===

[데이터베이스 모델링 프로젝트]

<훈련 목표>

- ERD를 생성하고, 이를 바탕으로 데이터베이스를 설계하고 간단한 쿼리를 작성

<프로젝트 단계>

1. 데이터 요구 사항 분석 및 모델링 

- 간단한 웹 서비스의 데이터 요구 사항을 분석하고, 이를 기반으로 ERD를 생성

- ERD 소개 및 생성 목적을 데이터 요구 사항과 결합

2. 데이터베이스 설계 및 구현

- ERD를 바탕으로 데이터베이스 스키마를 설계하고, 이를 DDL을 사용하여 데이터베이스에 구현

- 데이터를 입력, 수정, 조회할 수 있는 SQL문을 작성

- 프로젝트 발표및 피드백, 특강 

- 데이터베이스 설계 및 구현 과정을 돌아보고, 어떤 부분이 잘 진행되었는지, 어떤 부분이 개선이 필요한지를 평가 및 관련 내용 특강

4. 백엔드 심화: 인증과 비동기처리

4.1. 주차 목표: Express.js, RESTful API, JWT, Redis 등의 백엔드 기술 스택에 대해 이해

4.2. 학습 포인트: 인증 및 인가, Stateful vs Stateless의 차이점에 대한 이해, 비동기 프로그래밍의 이해

4.3. 이론 

- Express.js 응용 

- 인증 및 권한 등의 시스템 전반에 대한 이해

- RESTful API 디자인 및 구현 

- JWT, Redis를 이용한 인증 및 인가 

4.4. 실습

- RESTful API 개발 실습

- JWT, Redis를 이용한 인증 및 인가 실습 

역량 진단 평가 2회차

<역량진단평가 2회차-알고리즘 모의고사 1회차>

- 평가 내용: 프로그래머스 코딩전문역량인증시험

- 평가 방식: 총 4문항

- 평가 방법: 프로그래머스 플랫폼에서 코드를 작성하여 제출

- 평가 시간: 2시간

<실무 역량 과제 테스트 (BE) 1회차>

- 평가 내용: 프로그래머스에서 제작하는 Work Sample 기반의 BE 테스트

- 평가 방식: 총 4 ~ 6문항

- 평가 방법: 프로그래머스 플랫폼에서 코드를 작성하여 제출

- 평가 시간: 2시간

프로젝트2 : Node.js 기반의 REST API 구현

[랜덤 데이터 생성 API 설계 및 구현 프로젝트]

<훈련 목표>

- Node.js와 Express.js를 활용해 RESTful API를 설계하고 구현하는 능력

- 랜덤 데이터 생성 라이브러리 활용능력

- API 테스팅 및 문서화 능력

- 비동기 처리와 관련된 문제 해결 능력

===

[도서 정보 API 설계 및 구현 프로젝트]

<훈련 목표>

- Node.js와 Express.js를 활용해 RESTful API를 설계하고 구현하는 능력

- SQL 데이터베이스 설계 및 쿼리 작성 능력

- JWT 및 Redis를 활용한 인증 및 권한 관리 기능 구현 능력

- 비동기 처리와 관련된 문제 해결 능력

- API 테스팅 및 문서화 능력

역량 진단 평가 2회차

<실무 역량 과제 테스트 (BE) 2회차>

- 평가 내용: 프로그래머스에서 제작하는 Work Sample 기반의 BE 테스트

- 평가 방식: 총 4 ~ 6문항

- 평가 방법: 프로그래머스 플랫폼에서 코드를 작성하여 제출

- 평가 시간: 2시간

5. 프론트엔드 기초: React + TypeScript

5.1. 주차 목표: React와 TypeScript를 활용한 웹 개발 및 테스팅

5.2. 학습 포인트: React 기초, TypeScript 기초, 웹 개발 패턴, 프론트엔드 테스팅

5.3. 이론

- TypeScript 기초 

- TypeScript 응용 

- React 기초 

- React 응용 

- Frontend Testing 기초 

- Frontend Testing 응용 

5.4. 실습 

- React 및 TypeScript를 이용한 웹 개발 실습

- Frontend Testing 실습                           

6. 프론트엔드 심화: 상태 관리와 비동기 처리

6.1. 주차 목표: 상태 관리 라이브러리(Redux, MobX, Recoil) 사용법 및 React와의 연동, 비동기 처리 방법에 대해 학습

6.2. 학습 포인트: 상태 관리, 비동기 처리

6.3. 이론 

- 상태 관리 라이브러리의 필요성 및 사용 방법 (Redux, MobX, Recoil)

- 비동기 처리 기법 (Promise, async/await, Axios 등)

6.4. 실습 

- Redux (or MobX / Recoil)를 이용한 상태 관리 실습 

- Promise 및 async/await를 사용한 비동기 처리                     

7. Code contributor: 오픈소스 프로젝트 활용

7.1. 주차 목표: 배운 지식을 활용하여 오픈소스 프로젝트에 기여하기

7.2. 학습 포인트: 오픈소스 커뮤니티 참여를 통한 실무 코드 접해보기, 실제 문제 해결 능력, 코드 리뷰 및 피드백

7.3. 이론

- GPL, LGPL, MIT, Apache, BSD 등 주요 라이센스의 특징 및 비교

- 오픈소스 라이센스 적용 사례 분석 

- 대표적인 오픈소스 프로젝트의 라이센스 적용 사례 분석

- 오픈소스 라이센스 위반 및 분쟁 사례

- 오픈소스 라이센스 위반 및 분쟁의 주요 사례 및 그 결과

- 오픈소스 프로젝트에 기여하는 방법 

- 자신의 프로젝트에 맞는 라이센스 선택하기

- 오픈소스 라이센스 컴플라이언스

- 라이센스 준수를 위한 좋은 개발 및 배포 관행 소개

- 오픈소스 커뮤니티와 협업하기 

- 품질 높은 코드 작성하기

- 코드 리뷰 및 피드백에 대한 이해

- 기존 프로젝트의 코드 이해와 기여 방안 모색

7.4. 실습

- 오픈소스 프로젝트 찾기

- 오픈소스 라이센스 컴플라이언스 체크리스트 만들기 

- 문제 탐색 및 해결 방안 제시 

- 코드 수정 및 테스

- PR 작성 및 리뷰 과정                                                                     

역량 진단 평가 3회차

<알고리즘 모의고사 2회차>

- 평가 내용: 프로그래머스 코딩전문역량인증시험

- 평가 방식: 총 4문항

- 평가 방법: 프로그래머스 플랫폼에서 코드를 작성하여 제출

- 평가 시간: 2시간

<역량진단평가 3회차-실무 역량 과제 테스트 (FE) 1회차>

- 평가 내용: 프로그래머스에서 제작하는 Work Sample 기반의 FE 테스트

- 평가 방식: 총 4 ~ 6문항

- 평가 방법: 프로그래머스 플랫폼에서 코드를 작성하여 제출

- 평가 시간: 2시간 

프로젝트3 : React(TypeScript) 기반의 동적 UI 개발

[컴포넌트 및 상태 정보 관리 프로젝트]

<훈련 목표>

- HTML, CSS, JavaScript를 활용하여 React 컴포넌트를 만들고 스타일링

- TypeScript를 이용하여 타입이 있는 자바스크립트 코드를 작성하고, 타입을 이용한 코드의 안정성을 이해하고 활용

- 상태 관리의 중요성을 이해하고, 실제 프로젝트에서 상태 관리를 위한 Redux나 MobX 등의 라이브러리를 사용하여 상태를 관리

- 테스트 코드의 중요성을 이해하고, 실제 코드에 테스트를 적용

===

[도서 정보 사이트 구축 프로젝트]

<훈련 목표>

- 상태 관리 라이브러리(Redux, MobX, Recoil 등)의 사용 방법을 이해하고, React와 연동하여 상태를 관리

- 비동기 처리 방법을 이해하고, 실제 프로젝트에서 API를 통한 비동기 데이터 처리를 구현

- 프론트엔드 테스팅 기법을 이해하고, 실제 프로젝트에 적용하여 테스팅

8. 웹 개발 파이프라인 구축

8.1. 주차 목표: 배포 및 유지보수를 위한 DevOps 도구의 활용

8.2. 학습 포인트: Docker의 이해와 활용, CI/CD 파이프라인 구축, 모니터링 도구 활용

8.3. 이론 

- Docker 기초 및 응

- CI/CD 기초 및 응용 

- 모니터링 도구 기초 

8.4. 실습 

- Docker를 활용한 컨테이너화 실습 

- CI/CD 파이프라인 구축 실습

- 모니터링 도구 활용 실습                                                              

역량 진단 평가 4회차

<역량진단평가 4회차- 알고리즘 모의고사 3회차>

- 평가 내용: 프로그래머스 코딩전문역량인증시험

- 평가 방식: 총 4문항

- 평가 방법: 프로그래머스 플랫폼에서 코드를 작성하여 제출

- 평가 시간: 2시간

<실무 역량 과제 테스트 (BE + FE)>

- 평가 내용: 프로그래머스에서 제작하는 Work Sample 기반의 BE + FE 테스트

- 평가 방식: 총 6 ~ 10문항

- 평가 방법: 프로그래머스 플랫폼에서 코드를 작성하여 제출

- 평가 시간: 3시간

프로젝트4 : 오픈소스 기반의 웹 파이프라인 구축

[오픈소스 기여 프로젝트]

<훈련 목표>

- Full Cycle Development 전반에 대한 경험

- 문제 해결 능력

- 코드 리뷰 및 협업

- 오픈소스 이해

===

[웹 기반 문서 편집기 제작 프로젝트]

<훈련 목표>

- Full Cycle Development 전반에 대한 경험

- 문제 해결 능력

- 코드 리뷰 및 협업

- Docker의 이해와 활용, CI/CD 파이프라인 구축, 모니터링 도구 활용

역량 진단 평가 5회차            

<역량진단 평가 5회차-알고리즘 모의고사 4회차>

- 평가 내용: 프로그래머스 코딩전문역량인증시험

- 평가 방식: 총 4문항

- 평가 방법: 프로그래머스 플랫폼에서 코드를 작성하여 제출

- 평가 시간: 2시간 

9. Full Cycle Development : 풀 사이클 개발 기반의 통합 웹 서비스 구축

9.1. 주차 목표: 앞서 학습한 내용을 풀 사이클 개발 진행

9.2. 학습 포인트: 백엔드와 프론트엔드 연동, 전체 서비스 아키텍처 이해

9.3. 이론 

- 개발 방법론 소개 (기획 → 개발 → 운영)

- 전체적인 웹 서비스 아키텍처 이해

- 백엔드와 프론트엔드 연동 방법                                                    

10. 실무에 쓰이는 CS 지식 기초

10.1. 정보의 표현과 프로그래밍 언어

10.2. 컴퓨터 구조와 운영체제

10.3. 데이터베이스 

10.4. 네트워크와 정보 보안 

10.5. 소프트웨어 공

10.6. 클라우드 컴퓨팅 

10.7 모의 면접. 채용과 연계된 모의 면접 준비

10.8 이력서 클리닉. 이력서 작성 후 해당 내용 기반 첨삭

최종프로젝트-프로젝트5 : 클라우드 기반의 웹 서비스 기획부터 운영까지 

Full Cycle Development 기반 교육, 영상, 웹 관련 서비스 분야 주제 프로젝트- 완성된 웹 서비스

- 기술 문서: 프로젝트의 목표, 요구사항, 설계 방법, 사용된 기술 등을 상세히 설명하는 문서

- 문제 해결에 대한 기술 문서: 개발 과정에서 겪은 문제와 이에 대한 해결 방법을 기술 문서로 작성

-> 3인~5인 1팀으로 진행하며 과정의 마지막이니만큼 최종 프로젝트로써 영상발표로 남겨 발표회를 할 예정.

- 최종 프로젝트 발표영상 제작 및 유튜브 썸네일용 사진촬영