Today I Learned

• 오늘 내가 배운 것 중 코드로 남겨야하는 기록들을 commit 한다.
• 이론에 기초하거나 텍스트 위주의 내용은 Notion에 포스팅한다.

TypeScript

1. TypeScript 이론 정리

   • prepare environment for using typescript
   • assign type & type error
   • declaration type
   • type Inference & type Assertions
   • type Guards
   • interface
   • type Aliases
   • generic
   • function
   • class
   • optional
   • module
   • utlity type

2. TypeScript 개념 정리 + 실적 적용

   • 타입스크립트의 필요성, JS에서 타입 체크하기
   • 변수, 함수타입 정의
   • Todo App 간단 타이핑
   • 인터페이스
   • 타입 별칭
   • union, intersection
   • enum
   • class
   • generic
   • AddressBook App 타이핑
   • 타입 추론과 Typescript Language Server 이해
   • 타입 단언과 타입 가드
   • 타입 호환
   • 타입 모듈화

3. 실전 프로젝트로 배우는 타입스크립트

   • 유틸리티 타입(Partial, Pick, Omit)
   • 유틸리티 타입 구현(Partial)
   • 맵드 타입(Mapped Type)에 대하여
   • JS to TS 프로젝트 사전 준비
   • JSDoc을 이용한 타입시스템의 점진적 적용
   • TS 프로젝트 구성 및 기본 설정 추가
   • 명시적인 any 선언 및 정의
   • DOM 관련 및 API 함수 타입 구체화
   • 점진적 타입 적용을 위한 환경 구성
   • 외부 라이브러리 모듈화
   • API 함수 타입 정의
   • 차트 관련 타입 오류 해결 및 tree-shaking을 위한 enum 타입 개선
   • 엄격한 타입 적용

4. 타입스크립트 올인원 - 기본 문법편

   • 타입스크립트를 배워야 하는 이유
   • 기본 문법 리마인드
   • lib.es5.d.ts 분석
   • Utility 타입 분석

5. 타입스크립트 올인원 - 실전 분석편

   • jQuery 타입 분석
   • Axios 타입 분석
   • React 타입 분석
   • Redux 타입 분석
   • Node, Express 타입 분석
   • 타입 지원이 안되는 라이브러리 직접 타이핑하기

6. 타입스크립트 & OOP

   • 타입스크립트 리마인드
   • 기본함수 타이핑
   • 객체지향 프로그래밍(OOP) 개념 이해하기
   • OOP로 구현하는 Stack Class
   • 제네릭 좀 더 이해하기
   • 코딩 실력 높이기
   • 에러 처리 하기
   • 타입스크립트의 막강한 타입들
   • 자바스크립트 딥다이브
   • TSConfig & TS Compiler
   • TS&OOP를 활용한 사이드 프로젝트 구현
   • TS&OOP를 활용한 사이드 프로젝트 구현

JavaScript

• EcmaScript6

  1. scope
  2. string
  3. array
  4. object-1
  5. destructuring
  6. set & weakSet
  7. Map & WeakMap
  8. Template
  9. Function
  10. object-2
  11. Module
  12. Proxy
  13. Mini Project

• Functional Programming(기본)

  1. 함수형 자바스크립트 기본기
  2. ES6에서의 순회와 이터러블/이터레이터 프로토콜
  3. 제너레이터와 이터레이터
  4. map, filter, reduce
  5. 코드를 값으로 다루어 표현력 높이기
  6. 장바구니 예제
  7. 지연성 1
  8. 지연성 2
  9. 비동기: 동시성 프로그래밍 1
  10. 비동기: 동시성 프로그래밍 2
  11. 비동기: 동시성 프로그래밍 3

• Functional PRogramming(심화)

  1. 이터러블 프로그래밍(리스트 프로세싱, Lisp)
  2. 명령형 습관 지우기 + reduce 절제하기
  3. 안전한 합성에 대하여
  4. 객체를 이터러블 프로그래밍으로 다루기
  5. 사용자 정의 객체에 이터러블 프로그래밍 구현
  6. 시간을 이터러블로 다루기
  7. FE에서 함수형/이터러블/동시성 프로그래밍 구현

• JS Engine 구현

  1. JS Engine - 콜스택과 선언맵
  2. JS Engine - 비동기

TDD

• React Test

  1. React 테스트에 대해서
  2. 테스트 환경구성 및 주요 API
  3. 카운터 앱 TDD 구현
  4. 더 나은 리액트 테스트하기
  5. 여행 상품 판매 앱 TDD 구현
  6. React Context를 이용한 상품 가격 처리 TDD 구현
  7. 나머지(주문 요약, 주문 완료) 페이지 TDD 구현

• Jasmine

  1. TDD 이론 및 패턴 소개
  2. 모듈패턴으로 기존 코드 개선
  3. 화면 만들기와 개선된 사항 정리
  4. 추가 요구사항도 쉽게 만들 수 있도록 리팩토링
  5. 변경사항 화면 업데이트 및 최종 정리

• Jest

  1. Jest 개요
  2. Matcher

Redux & MobX & XState

1. Redux
2. React-redux
3. Redux-toolkit
4. MobX
5. Mobx-react
6. Xstate

Svelte

1. Svelte 개념 익히기

   • intro
   • Basic
   • Lifecycle
   • 보간법
   • 반응성
   • 클래스와 스타일
   • 요소 바인딩
   • 조건, 반복 그리고 키
   • 비동기 처리
   • 사용자 입력 핸들링
   • 컴포넌트
   • 슬롯
   • 스토어
   • 액션
   • 특별한 요소

2. Svelte Trello Clone App

   • intro
   • clone App 만들기(실습)
   • clone App을 Snowpack 프로젝트로 이관하기

React

1. React 웹 성능 최적화

   • 블로그 사이트 성능 최적화
   • 통계 사이트 성능 최적화
   • 일반 홈페이지 성능 최적화
   • 이미지 갤러리 서비스 성능 최적화

2. React webgame

   • 구구단 만들기
   • 끝말잇기 만들기
   • 숫자야구 만들기
   • 반응속도체크 만들기
   • 가위바위보 만들기
   • 로또 만들기
   • 틱택토 만들기
   • 지뢰찾기 만들기
   • 리액트 라우터 설정
   • React 18 - useLayoutEffect, useTransition, useDeferredValue

3. React + TypeScript webgame

   2-1. 구구단, 끝말잇기

   • TS 프로젝트 세팅
   • 이벤트 핸들러, useRef typing
   • Class Component State typing
   • useCallback & createRef typing

   2-2. 숫자야구, 반응속도 체크

   • Props typing
   • setTimeout, useRef typing
   • Class component State 사용 시 주의점

   2-3. 가위바위보, 로또추첨기

   • keyof, typeof, 고차함수 typing
   • FC, useMemo typing
   • useReducer, Dispatch, children typing

   2-4. 지뢰찾기

   • reducer, context API typing
   • useContext typing

   2-5. React-router

   • React-router typing 사전 준비
   • match, history, location & withRouter typing
   • React-router Hooks typing

   2-6. Redux

   • Redux 구조 잡기
   • action, reducer typing
   • redux component typing
   • redux-thunk typing
   • ThunkDispatch, immer, Hooks typing

   2-7. MobX

   • MobX 구조 잡기
   • MobX typing

4. React + Next.js로 React NodeBird SNS 구현하기

   3-1. Next.js

   • Next 역할
   • Next 실행 해보기
   • Next Page & Layout
   • Next Link & eslint

   3-2. antd 이용한 SNS 뷰 구축

   • antd와 styled-components
   • _app.js와 Head
   • 반응형 그리드 사용
   • 로그인 폼 생성
   • 리렌더링 이해하기
   • 더미 데이터로 로그인 구현
   • 프로필 페이지 구현
   • 커스텀 훅을 이용한 회원가입 페이지 구현

   3-3. Redux 연동

   • 리덕스 설치와 필요성
   • 리덕스 원리와 불변성
   • 리덕스 구현
   • 미들웨어와 리덕스 데브툴즈
   • 리듀서 쪼개기
   • 더미데이터와 포스트폼 구현
   • 게시글 구현
   • 댓글, 이미지 구현
   • 이미지 Carousel 구현
   • createGlobalStyle, 컴포넌트 폴더 구조
   • 게시글 해시태그 링크로 만들기

   3-4. Redux-saga 연동

   • redux-thunk 이해하기
   • saga 설치, generator 이해하기
   • saga 이펙트 알아보기
   • take 시리즈와 throttle 알아보기
   • saga 분리와 reducer 연결
   • 액션과 상태 정리하기
   • 바뀐 상태 컴포넌트 적용, eslint 점검
   • 게시글, 댓글 saga 구현
   • 게시글 삭제 saga 구현
   • reducer에 Immer, faker 더미데이터 적용
   • 인피니트 스크롤링 적용
   • 팔로우, 언팔로우 구현

   3-5. 백엔드 Node 서버 구축

   • 노드로 서버 구동하기
   • 익스프레스로 라우팅 및 라우터 분리하기
   • MySQL과 시퀄라이즈 연결
   • 시퀄라이즈 모델 생성
   • 시퀄라이즈 관계 설정
   • 시퀄라이즈 sync와 nodemon
   • 회원가입 API 구현
   • CORS 문제 개선
   • passport 로그인 구현
   • 쿠키,세션과 전체 로그인 Flow
   • 로그인 디버깅
   • 미들웨어로 라우팅 검사하기
   • 게시글과 댓글 작성하기
   • credential로 쿠키 공유 처리
   • 로그인 정보 매번 불러오기
   • 게시글, 코멘트 불러오기
   • 게시글 좋아요 구현
   • 게시글 제거, 닉네임 변경
   • 팔로우, 언팔로우
   • 이미지 업로드 구현(multer)
   • express.static 미들웨어
   • 해시태그 등록
   • 리트윗 구현
   • 쿼리스트링과 lastId 방식
   • 게시글 수정 구현
   • 팔로잉한 게시글만 가져오기

   3-6. Next.js 서버사이드렌더링(SSR) 구현

   • 서버사이드렌더링 준비
   • SSR시 쿠키 공유 구현
   • getStaticProps 적용
   • 다이나믹 라우팅 구현
   • CSS SSR 구현
   • 특정 사용자 게시글, 해시태그 게시글 구현
   • getStaticPaths
   • swr 적용
   • 다이나믹 라우팅 페이지로 연결(Link, Router)
   • moment와 next build
   • 커스텀웹팩, bundle-analyzer
   • 배포 전 리팩토링

   3-7. AWS 배포

   • EC2 인스턴스 생성
   • 우분투 내 노드 설치
   • 우분투 내 MySQL 설치
   • pm2 사용하기
   • 프론트 서버 배포
   • 도메인 연결
   • 이미지 업로드 S3 연결
   • Lambda로 이미지 리사이징 구현
   • nginx + https 적용
   • 백엔드에 https 적용, CORS 개선
   • nginx, 콘솔 에러 개선
   • forest-admin을 활용한 어드민 페이지 구현

5. React + SWR + TypeScript로 실시간 채팅 구현하기

   4-1. 프로젝트 초기 설정

   • Back 환경 세팅(feat. node, mySQL 설치)
   • Front 환경 세팅(feat. webpack, babel 설정)
   • 폴더 구조와 React Router 설정)
   • Code splitting과 Emotion 설정)

   4-2. 로그인, 회원가입 페이지

   • 회원가입 페이지와 커스텀 훅
   • Axios request와 CORS, proxy 설정
   • 로그인 페이지와 swr 적용, 쿠키 공유
   • 워크스페이스 및 로그아웃 구현
   • swr 활용과 optimistic UI

   4-3. 메뉴, 모달

   • 워크스페이스와 gravatar, 중첩 라우터
   • 메뉴와 모달 구현
   • Router 주소 설계(Route Parameter)와 사용자 초대 모달 구현

   4-4. DM 보내기

   • DM 및 채널 목록 만들기
   • DM 페이지 및 ChatBox 구현
   • 채팅 보내기 및 eslint에 react-app 적용

   4-5. 실시간 채팅 및 front 작업 팁 배우기

   • socket.io 훅스 및 이벤트 연결
   • DM 내용 구현하기(커스텀 스크롤바, dayjs)
   • 멘션 기능과 정규표현식 문자열 변환
   • 날짜별로 묶기, 리버스 인피니스 스크롤링, DM 채팅

   4-6. 배포 및 프로젝트 마무리

   • 채널 생성 및 타입 가드를 통한 타입 점검
   • 배포 준비(bundleAnalyzer)
   • 이미지 드래그&드롭 업로드 및 기타 기능 구현

Node.js + 웹 크롤러

• 웹 크롤링과 데이터 파싱
• puppeteer 사용하기
• axios와 cheerio를 활용한 이미지 다운로드
• 인피니트 스크롤링 크롤링
• 크롤러로 페이지 상호 작용하기
• 프록시로 서버 속이기
• 페이스북 크롤링
• 인스타그램 크롤링
• 유튜브 크롤링
• 페이지네이션과 아이프레임 크롤링

Node.js

1. 노드 & 자바스크립트 개념

   • 노드의 정의
   • 노드의 특성
   • 서버로서의 노드
   • 호출 스택
   • 이벤트루프
   • 스코프
   • 템플릿 문자열, 객체 리터럴
   • 화살표 함수
   • 구조분해 할당
   • 클래스
   • Promise, async/await
   • 프론트엔드 자바스크립트

2. 노드 기능

   • REPL과 JS 파일 실행
   • 노드 모듈 만들기
   • global과 콘솔, 타이머
   • exports와 this
   • 모듈 심화와 순환 참조
   • process
   • os와 path
   • url과 querystring
   • crypto와 util
   • worker_threads, child_process
   • filesystem 사용하기
   • 버퍼와 스트림
   • pipe와 스트림 메모리 효율 확인
   • 스레드풀, 커스텀 이벤트
   • 예외 처리

3. http 모듈로 서버 만들기

   • HTTP 서버 만들기
   • fs로 HTML 읽어 제공하기
   • REST API 서버 구현
   • POST, PUT, DELETE
   • 쿠키 이해하기
   • 세션 사용하기
   • https, http2
   • cluster

4. package manager

   • package.json
   • node_modules, npx, SemVer
   • 자주 쓰는 npm 명령어, npm 배포하기

5. express web server

   • express intro
   • html serving
   • 미들웨어 및 라우트 매개변수
   • 미들웨어 특성
   • next 활용
   • morgan, bodyParser, cookieParser
   • static middleware
   • express-session과 미들웨어 확장
   • multer
   • dotenv
   • router 분리
   • template engine: Pug
   • template engine: Nunjucks, error handling

6. MySQL

   • Database Intro & create MySQL table
   • Column options
   • Basic CRUD
   • use Sequelize
   • Sequelize 모델 생성
   • 테이블 관계(1:1, 1대다, 다대다)
   • 시퀄라이즈 쿼리
   • 관계 쿼리
   • sequelize 실습

7. mongoDB

   • mongoDB 설치
   • 데이터베이스 만들기
   • mongoDB CRUD
   • 몽구스 ODM, Schema 정의
   • 몽구스 프로젝트 실행

8. express로 SNS 서비스 구축

   • nodeBird 프로젝트 setting
   • database 구조 설계
   • 테이블 관계 정의
   • passport 설정
   • 로컬 로그인 구현
   • 카카오 로그인 구현
   • 이미지 업로드(multer) 구현
   • 팔로잉, 팔로워 구현
   • 해시태그 검색

9. 웹 API 서버 만들기

   • API 서버 구조 갖추기
   • JWT 토큰 적용
   • 클라이언트 호출 서버(nodecat)구조 갖추기
   • NodeBird API 호출하기
   • API 사용량 제한 구현
   • CORS 적용

10. 노드 서비스 테스트 구현

    • 테스트를 하는 이유
    • Unit 테스트
    • Controller 분리 및 테스트
    • 테스트 커버리지
    • supertest 사용 및 통합테스트 구현
    • 부하테스트(artillery)

11. 웹 소켓으로 실시간 데이터 전송하기

    • 웹소켓 사용해보기
    • Socket.IO 사용해보기
    • 실시간 채팅방 구조 잡기
    • 네임스페이스와 방 구조
    • 웹 소켓 미들웨어 적용
    • 채팅 및 GIF 파일 주고 받기

12. 실시간 경매 시스템 만들기

    • 경매시스템 프로젝트 구조 만들기
    • 서버센트 이벤트(SSE) 사용하기
    • 경매 진행하기
    • 낙찰자 스케줄링
    • 스케줄링 복구 및 낙찰내역 조회

13. CLI 프로그램 만들기

    • CLI 프로그램 기본구조 갖추기
    • readline 사용하기
    • commander 적용
    • inquirer 적용

14. AWS 배포하기

    • 배포를 위한 패키지 설정
    • pm2 사용하기
    • winston, helmet, hpp 적용
    • redis 사용하기
    • Git, Github 사용하기
    • Git, Github 사용하기

15. 서버리스 노드 개발

    • S3 설정하기
    • S3 이미지 업로드
    • 람다 함수 만들기
    • 람다 배포하기
    • 람다 설정하기

Python

1. Python 개발 환경 세팅
2. Python 자료형

Graphic & Layout

1. SVG

   • SVG 개념과 기본적인 사용법
   • SVG에 CSS, JS 적용하기
   • SVG 그리기
   • SVG 텍스트
   • SVG 효과
   • SVG Stroke
   • SMIL 애니메이션
   • 아이콘 폰트 만들기
   • 인터랙티브 SVG
   • CSS Transform, Translate, Animation

2. Flex

   • Flex 핵심 정리
   • Flex UI 구현
   • 반응형 Flex 페이지 구현

3. Grid

   • Grid 핵심 정리
   • 반응형 Grid 페이지 구현
   • Grid로 창의적인 레이아웃 만들기
   • IE에서 Grid 사용하기

4. Three.js

   • Three.js 인트로
   • Three.js 기본 요소
   • Three.js 개발 편의 도구
   • Three.js Transform(변환)
   • Three.js Geometry(모양)
   • Three.js Controls(카메라 컨트롤)
   • Three.js Material(재질)
   • Three.js Light(조명)
   • Three.js Raycaster(클릭 감지)
   • 3D 모델과 Three.js 활용
   • Three.js 물리엔진
   • Three.js Particle
   • Three.js 3D Scroll Page
   • Three.js 3D 징검다리 게임 구현
   • Three.js 3D 다중 Scene 구현
   • Three.js 3D 공간에서 캐릭터 움직이기