[웹 풀스택] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 데브코스 커리큘럼

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

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

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

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

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

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

• 1.3. 이론 - Git 기본 이론

• 1.4. 실습

  • 버전 관리 개요

  • Git 기본 명령어 활

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

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

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

  • Git 고급

• 이론

• 실습

• OT

• TIL

온라인

2. 웹 서비스의 이해: 웹 생태계부터 웹 브라우저, 그리고 데이터베이스까지 역량 진단 평가 1회차

• 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)

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

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

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

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

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

• 평가 시간: 1시간

• 실습

• 이론

• TIL

온라인

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 개발 실습

• 이론

• 실습

• 라이브세션

• TIL

온라인

프로젝트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문을 작성 프로젝트 발표및 피드백, 특강

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

• 실습

• 이론

• 라이브세션

• TIL

• 회고록

온라인

4. 백엔드 심화: 인증과 비동기처리 역량 진단 평가 2회차

• 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회차-알고리즘 모의고사 1회차>

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

• 평가 방식: 총 4문항

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

• 평가 시간: 2시간

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

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

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

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

• 평가 시간: 2시간

• 실습

• 이론

• 라이브세션

• 과제리뷰

• TIL

온라인

프로젝트2 : Node.js 기반의 REST API 구현 역량 진단 평가 2회차

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

<훈련 목표>

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

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

• API 테스팅 및 문서화 능력

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

===

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

<훈련 목표>

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

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

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

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

• API 테스팅 및 문서화 능력

===

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

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

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

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

• 평가 시간: 2시간

• 실습

• 이론

• 라이브세션

• TIL

• 회고록

온라인

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 실습

• 실습

• 이론

• 라이브세션

• TIL

온라인

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

7. Code contributor: 오픈소스 프로젝트 활용 역량 진단 평가 3회차

• 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.1 실습 주차 목표: 배운 지식을 활용하여 오픈소스 프로젝트에 기여하기

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

• 7.3. 이론

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

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

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

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

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

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

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

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

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

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

  • 품질 높은 코드 작성하기

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

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

• 7.4. 실습

  • 오픈소스 프로젝트 찾기

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

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

  • 코드 수정 및 테스트

  • PR 작성 및 리뷰 과정

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

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

• 평가 방식: 총 4문항

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

• 평가 시간: 2시간

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

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

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

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

• 평가 시간: 2시간

• 실습

• 이론

• 프로젝트

• 라이브세션

• TIL

온라인

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

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

<훈련 목표>

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

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

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

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

===

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

<훈련 목표>

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

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

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

• 실습

• 이론

• 프로젝트

• TIL

• 라이브세션

• 회고록

온라인

8. 웹 개발 파이프라인 구축 & 역량 진단 평가 4회차

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

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

• 8.3. 이론

  • Docker 기초 및 응

  • CI/CD 기초 및 응용

  • 모니터링 도구 기초

• 8.4. 실습

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

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

  • 모니터링 도구 활용 실습

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

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

• 평가 방식: 총 4문항

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

• 평가 시간: 2시간

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

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

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

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

• 평가 시간: 3시간

• 실습

• 이론

• 라이브세션

• 스크럼

• 세미나

• TIL

온라인

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

[오픈소스 기여 프로젝트] <훈련 목표>

• Full Cycle Development 전반에 대한 경험

• 문제 해결 능력

• 코드 리뷰 및 협업

• 오픈소스 이해

===

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

<훈련 목표>

• Full Cycle Development 전반에 대한 경험

• 문제 해결 능력

• 코드 리뷰 및 협업

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

• 실습

• 프로젝트

• 라이브세션

• TIL

온라인

역량 진단 평가 5회차

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

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

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

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

• 평가 방식: 총 4문항

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

• 평가 시간: 2시간

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

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

• 9.3. 이론

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

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

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

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

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

• 10.3. 데이터베이스

• 10.4. 네트워크와 정보 보안

• 10.5. 소프트웨어 공

• 10.6. 클라우드 컴퓨팅

• 실습

• 이론

• 기타

• TIL

온라인

역량 진단 평가 5회차

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

<CS 지식 기반의 모의 면접>

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

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

온라인

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

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

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

   2. 문제 해결에 대한 기술 문서: 개발 과정에서 겪은 문제와 이에 대한 해결 방법을 기술 문서로 작성 -> 3인~5인 1팀으로 진행하며 과정의 마지막이니만큼 최종 프로젝트로써 영상발표로 남겨 발표회를 할 예정.

   3. 최종 프로젝트 발표영상 제작

   4. 오프라인기간을 통해 발표영상 유튜브 업로드 썸네일용사진찍습니다.

프로젝트

• 온라인

• 오프라인-서울

수료식

최종 수료식

• 온라인

• 오프라인-서울