README.md

Repositories

API
Web

Stacks

Category	Stack
API	TypeScript, Node, Express, Jest, Mysql, Swagger, Yarn-berry
Web	TypeScript, Next, React, Redux, React-redux, Redux-toolkit, React-query, Emotion, Yarn-berry, Storybook, Jest, React-testing-library
Desktop	Electron
Mobile	React Native

Daily Report

No.	Date	Project	Category	To-Do	Output
1	2021.03.02	API API	Env Feature	✅ Set up development environment ✅ Local authentication	- -
2	2021.03.03	Web Docs	Env Docs	✅ Set up development environment ✅ Set up Docs	- -
3	2021.03.04	API Web Web	Docs Docs Design	✅ Set up Mind map ✅ Set up Flowchart 😱 Set up Figma design	Mind map v0.1.0 Flowchart v0.1.0 -
4	2021.03.05	API Web Web	Docs Docs Design	✅ Update Mind map ✅ Update Flowchart ✅ Set up Figma design	Mind map v0.2.0 Flowchart v0.2.0 Figma Web v0.1.0
5	2021.03.06	Web Web	Design Design	😱 Figma design details ✅ Define color variables	- Figma psionic-storm colors
6	2021.03.07	Web	Design	✅ Figma design details	Figma Web v0.2.0
7	2021.03.08	API	Database	😱 ERDiagram	-
8	2021.03.09	API	Database	😱 ERDiagram	-
9	2021.03.10	API	Database	✅ ERDiagram	ERDiagram v0.1.0
10	2021.03.11	API	Database	✅ SQL Statements	SQL Statements
11	2021.03.12	API	Feature	😱 Set up base APIs	-
12	2021.03.13	API	Feature	😱 Set up base APIs	-
13	2021.03.14	API	Docs Feature	✅ API Specification 😱 Set up base APIs	API Specification v0.1.0 -
14	2021.03.15	API	Feature	😱 Set up base APIs	-
15	2021.03.16	API	Feature	✅ Set up base APIs	-
16	2021.03.17	Web	Docs Feature	✅ Component Hierarchy 😱 Set up UI components	Component Hierarchy -
17	2021.03.18	Web	Feature	✅ Set up UI components	-
18	2021.03.19	Web	Feature	😱 Set up API, Redux, Redux-saga	-
19	2021.03.20	Web	Feature	😱 Set up API, Redux, Redux-saga	-
20	2021.03.21	Web	Feature	✅ Set up API, Redux, Redux-saga	-
21	2021.03.22 - 2021.03.25	-	-	🚑 Anal Disease	-
22	2021.03.26 - 2021.04.04	Web	Feature	😱 UI Component Details	-
23	2021.04.05 - 2021.04.06	-	-	📚 Read Books	-
24	2021.04.07 - 2021.04.12	-	-	🕶 Break	-
25	2021.04.13	-	-	🗑 Delete All Sources	-
26	2021.04.14	API	Database	✅ Set up tables for Auth	-
27	2021.04.15 - 2021.04.26	-	-	-	-
28	2021.04.27	Web Web API API	Test CI Test CI	✅ Set up Test configs ✅ Set up Github Actions ✅ Set up Test configs ✅ Set up Github Actions	-
29	2021.04.28	Web	Design	✅ Set up Figma Auth Page	Figma Web v0.3.0
30	2021.04.29	Web	Feature	😱 Set up UI components for Auth	-
31	2021.04.30 - 2021.05.16	-	-	-	-
32	2021.05.17	Web API	Env Env	✅ Remove all sources & Install packages ✅ Remove all sources & Install packages	-
33	2021.05.18	API API	Feature Feature	✅ Set up tables for Auth ✅ Setup Auth APIs	-
34	2021.05.19	API Web	Feature Feature	✅ API Specification for Auth APIs ✅ Set up UI components for Auth	API Specification v0.2.0 -
35	2021.05.20 - 2021.05.29	Web	Env	✅ Set up Yarn2 (berry)
36	2021.05.31 - 2021.06.04	-	-	-
37	2021.06.05	Web	Feature	✅ Set up redux-toolkit
38	2021.06.06	Web	Feature	✅ Set up react-query

Tasks for Each Sub-Project

API

No.		Category	To-Do	Start	End	Output
1	✅	Env	Set up development environment	2021.03.02	2021.03.02	-
2	✅	Feature	Local authentication	2021.03.02	2021.03.03	-
3	✅	Docs	Set up Mind map	2021.03.04	2021.03.04	Mind map v0.1.0
4	✅	Docs	Update Mind map	2021.03.05	2021.03.05	Mind map v0.2.0
5	✅	Database	ERDiagram	2021.03.07	2021.03.10	ERDiagram v0.1.0
6	✅	Database	SQL Statements	2021.03.11	2021.03.11	SQL Statements
7	✅	Docs	API Specification	2021.03.14	2021.03.14	API Specification v0.1.0
8	✅	Feature	Set up base APIs	2021.03.11	2021.03.16	-
9	✅	Test	Set up Test configs	2021.04.27	2021.04.27	-
10	😱	Deploy	Deploy to AWS EC2	2021.04.14	2021.04.14	-
11	✅	CI	Set up Github Actions	2021.04.27	2021.04.27	-
12	✅	Env	Remove all sources & Install packages	2021.05.17	2021.05.17	-
13	✅	Database	Set up tables for Auth	2021.04.14	2021.04.14	-
14	✅	Feature	Set up Auth APIs	2021.05.18	2021.05.18	-
15	✅	Docs	API Specification for Auth APIs	2021.05.19	2021.05.19	API Specification v0.2.0

Web

No.		Category	To-Do	Start	End	Output
1	✅	Env	Set up development environment	2021.03.02	2021.03.02	-
2	✅	Docs	Set up Flowchart	2021.03.04	2021.03.04	Flowchart v0.1.0
3	✅	Design	Set up Figma design	2021.03.04	2021.03.05	Figma Web v0.1.0
4	✅	Docs	Update Flowchart	2021.03.05	2021.03.05	Flowchart v0.2.0
5	✅	Design	Figma design details	2021.03.06	2021.03.07	Figma Web v0.2.0
6	✅	Design	Define color variables	2021.03.06	2021.03.06	Figma psionic-storm colors
7	✅	Docs	Component Hierarchy	2021.03.17	2021.03.17	Component Hierarchy
8	✅	Feature	Set up UI components	2021.03.17	2021.03.18	-
9	✅	Feature	Set up API, Redux, Redux-saga	2021.03.19	2021.03.21	-
10	✅	Design	Set up Figma Auth Page	2021.04.28	2021.04.28	-
11	✅	Test	Set up Test configs	2021.04.27	2021.04.27	-
12	😱	Test	Unit & Integration Test with Jest & React Testing Library	2021.04.14	2021.04.14	-
13	😱	Deploy	Deploy to AWS EC2	2021.04.14	2021.04.14	-
14	✅	CI	Set up Github Actions	2021.04.27	2021.04.27	-
15	✅	Design	Set up Figma Auth Page	2021.04.28	2021.04.28	Figma Web v0.3.0
16	✅	Env	Remove all sources & Install packages	2021.05.17	2021.05.17	-
17	✅	Feature	Set up UI components for Auth	2021.05.19	2021.05.19	-
18	✅	Env	Set up Yarn2 (berry)	2021.05.20	2021.05.29	-
19	✅	Env	Set up Storybook (yarn2, alias, emotion)	2021.05.30	2021.05.30	-
20	✅	Feature	Set up redux-toolkit	2021.06.04	2021.06.04	-
21	✅	Feature	Set up react-query	2021.06.05	2021.06.05	-

Desktop

No.		Category	To-Do	Start	End	Output
1	😱	Env	Set up development environment	???	???	-

Mobile

No.		Category	To-Do	Start	End	Output
1	😱	Env	Set up development environment	???	???	-

Outputs

No.	Project	Category	Output	Date
1	API	Docs	Mind map v0.1.0	2021.03.04
2	Web	Docs	Flowchart v0.1.0	2021.03.04
3	Web	Design	Figma Web v0.1.0	2021.03.05
4	API	Docs	Mind map v0.2.0	2021.03.05
5	Web	Docs	Flowchart v0.2.0	2021.03.05
6	Web	Design	Figma psionic-storm colors	2021.03.06
7	Web	Design	Figma Web v0.2.0	2021.03.07
8	API	Database	ERDiagram v0.1.0	2021.03.10
9	API	Database	SQL Statements	2021.03.11
10	API	Docs	API Specification v0.1.0	2021.03.14
11	Web	Docs	Component Hierarchy	2021.03.17
12	Web	Design	Figma Web v0.3.0	2021.04.28
13	API	Docs	API Specification v0.2.0	2021.05.19

References

📕 Official document
📃 Semi-official document
🌎 Website
📝 Academic paper
📚 Book
🖋 Blog post
🅶 Github Issue (discussion)
❓ Stackoverflow
💿 Playlist
🎥 Video
🎧 Music

Category	Reference
Javascript	🖋 JavaScript CommonJS, ES6 모듈 시스템 📃 DOMParser - MDN 🖋 JavaScript: What is the meaning of this? 🖋 2020년과 이후 JavaScript의 동향 - 라이브러리와 프레임워크 1 🖋 JavaScript 번들러로 본 조선시대 붕당의 이해 🎥 코드스피츠 - [특강] Code Squad 윤지수 마스터님 🎥 토스ㅣSLASH 21 - JavaScript Bundle Diet 🎥 토스ㅣSLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code
Typescript	🖋 Path aliases with TypeScript in Node.js 🖋 TypeScript 최신 기능을 활용한 Redux 액션 타이핑 🖋 8 Best Practices for Future-Proofing Your TypeScript Code
React.js	🎥 React Today and Tomorrow and 90% Cleaner React With Hooks 🎥 React Conf 2019 Day 1 🎥 React Conf 2019 Day 2 💿 React Hooks Tutorial 🖋 React의 렌더링 퍼포먼스 개선기 (부제: 수백개의 아이템을 가진 리스트를 개선하기) 🎥 React Suspense Introduction (Data Fetching) 🎥 Infinite Scrolling With React - Tutorial 🎥 React Lazy Loading & Code splitting 🎥 Code Splitting with React, React.lazy, and React Router v5 🖋 모두를 위한 대수적 효과 🎥 React Labs: React 18 Working Group Q&A [Audio] 🎥 What’s new in React 18 🖋 React 18: 렌더링 최적화를 위한 자동 배칭 🖋 React 18: Suspense를 이용한 새로운 SSR 아키텍처
React Native	🎥 React Native Crash Course 2020 🎥 I don't want to use React Native
Redux	🎥 [A2] Redux-Saga - 제너레이터, 사이드이펙트, 채널 - 이민규 🖋 리덕스 잘 쓰고 계시나요? 🖋 Redux 어떻게 써야 잘 썼다고 소문이 날까? 🖋 Blogged Answers: Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux)
Next.js	🎥 Next.js Crash Course 2021 📕 Custom Webpack Config 💿 Next js 강좌 🖋 Next.js 튜토리얼 🖋 [Next.js 2.0] 간단한 React 전용 서버사이드 프레임워크, 기초부터 본격적으로 파보기 🎥 Next.js Crash Course for Beginners 2021 - Learn NextJS from Scratch in this 100% Free Tutorial! 📃 Example app with styled-components 🎥 Next.js Conf – Special Edition
Vue.js	🖋 React 인가 Vue 인가? 🖋 Vuex란 무엇인가?
Webpack	🖋 프론트엔드 개발환경의 이해: 웹팩(기본) 🖋 프론트엔드 개발환경의 이해: 웹팩(심화) 🖋 How to change relative paths to absolute paths for imports 📕 Public Path ❓ React-router urls don't work when refreshing or writing manually 📕 EnvironmentPlugin 🖋 Front에서 API Key를 숨기는 법
Node.js	🎥 Node.js API 서버 성능 개선기 🖋 What's New for Node.js in 2020 🖋 nodejs의 내부 동작 원리 (libuv, 이벤트루프, 워커쓰레드, 비동기) 🖋 Node.JS 자주 사용하는 모듈 정리 🖋 NodeJS: In Three(ish) Minutes. 🖋 Node.js 이벤트루프 제대로 이해하기 🖋 Node.js의 순환 의존성 🖋 견고한 node.js 프로젝트 설계하기 🖋 모두 알지만 모두 모르는 package.json 📕 node.bcrypt.js 📃 bcryptjs
npm	📕 package-lock.json 🖋 package-lock.json은 왜 필요할까?
yarn	📕 Yarn 3-Usage 🖋 node_modules로부터 우리를 구원해 줄 Yarn Berry 📕 Plug'n'Play 📕 Editor SDKs
Express.js	📕 express.json([options]) 📕 express.urlencoded([options])
Emotion	🌎 npm trends - @emotion/core vs @emotion/react vs styled-components
CSS	🖋 CSS Tools: Reset CSS
Storybook	🖋 CRA + Emotion + Storybook 구축하기 (Storybook에 emotion 적용) 🅶 Yarn 2: Support Yarn v2 "Berry" #9527
Auth General	🖋 Refresh token은 필요한가? 🎥 [10분 테코톡] 🎡토니의 인증과 인가 🎥 How To Manage User Roles In Node.js 🎥 NodeJS / Express Authorization Middleware 🎥 Node.js & Express From Scratch [Part 11] - Access Control 💿 WEB3 - Node.js - Cookie & Auth 💿 WEB4 - Express Session & Auth 💿 WEB2-OAuth
JWT	🎥 JWT, TOKEN 토큰 베이스 로그인 🎥 JWT 토큰 🎥 Introduction to JWT (JSON Web Token), The Good Parts 🎥 JWT (JSON Web Tokens), Limitations 🖋 JWT는 어디에 저장해야할까? - localStorage vs cookie 🖋 프론트에서 안전하게 로그인 처리하기 (ft. React) 🖋 LocalStorage vs Cookies: All You Need To Know About Storing JWT Tokens Securely in The Front-End 🖋 What’s the Secure Way to Store JWT? 🖋 The Ultimate Guide to handling JWTs on frontend clients (GraphQL)
Passport.js	💿 WEB5 - Express Passport.js 💿 WEB6 - Multi user on passport.js 💿 WEB7 - Login with Google on Passport.js 💿 Login with Facebook on Passport
ESlint	📕 Rules of Hooks 📕 ESLint - Rules
HTTP	📃 201 Created - MDN
REST API	📝 Architectural Styles and the Design of Network-based Software Architectures 🎥 그런 REST API로 괜찮은가 📕 GitHub REST API 🎥 [B2] OpenAPI Specification으로 타입-세이프하게 API 개발하기: 희망편 VS 절망편 🖋 웹 API 디자인 🎥 [2019] HTTP API 설계 후회 고민 🎥 [포구디] REST API 사용하기 쉽게 만드는 법 🌎 https://webconcepts.info/ 🌎 http://apistylebook.com/ 📚 웹 API 디자인 🎥 올바른 API 설계 🖋 Best Practices for API Error Handling ❓ 'Best' practice for restful POST response 🌎 jsonapi.org
Database	🖋 다대다(M:N) 관계 연결테이블로 구현하기 💿 관계형 데이터 모델링
SQL	🎥 SQL Joins Explained |¦| Joins in SQL |¦| SQL Tutorial 🎥 SQL Joins Tutorial For Beginners | Inner, Left, Right, Full Join | SQL Joins With Examples | Edureka 📕 13.2.10.2 JOIN Clause
MySQL	🖋 mysql 포트 바꾸기, 외부에서 접속하기 🎥 MySQL Crash Course | Learn SQL ❓ Auto Increment after delete in MySQL
ORM	🎥 Should you use Sequelize, TypeORM, or Prisma 1?
Test	🎥 [A5] 프론트엔드에서 TDD가 가능하다는 것을 보여드립니다. 🎥 [A6] Front-End 프로젝트의 Test code 작성 경험기 - 김아름 🎥 토스ㅣSLASH 21 - 테스트 커버리지 100% 💿 Jest 강좌 🖋 'Test Driven Development: By Example' 책 내용 정리 [TDD를 적용해보자 2편]TDD 설정(React,Typescript)
Regex	❓ Regex to test if string begins with http:// or https://
Canvas	🎥 [Track 1-4] 유상엽 - HTML Canvas 어디까지 써봤니
Error Handling	🖋 효율적인 프런트엔드 에러 핸들링 🖋 [react] 공통된 에러 핸들링을 위한 http wrapper 함수 제작
Design Pattern	🖋 Publish-subscribe pattern 에 대해... 🖋 Observer 패턴과 Publisher/Subscriber(Pub-Sub) 패턴의 차이점
Versioning	📕 유의적 버전 2.0.0-ko2 🖋 Semantic Versioning 소개
SSR	🖋 웹 성능 최적화 SSR + Cache 적용기 🖋 React SSR 그 고통의 기록 🎥 Node 서버를 이용한 SSR 사용기
Design	📕 Apple - Human Interface Guidelines 🌎 Neumorphism.io
UX	🎥 [A5] 개발자를 위한 UX programming - 윤지수 🖋 구글, 애플에 있는 UX 엔지니어가 토스에 있는 이유
iframe	🎥 [A3] iframe을 활용하여 전혀 다른 Service를 통합하기
Figma	🎥 The Figma 2021 Crash Course by Example 🎥 Figma in 40 Minutes 🎥 10 tips to work 10x faster in Figma 🎥 How I organize my Figma files to overcome the creative block (with Template) 🎥 Neumorphism in Figma 😍👌 | Soft UI Design 🎥 Neumorphic Animations in Figma | Smart Animate | Figma Tutorial 🎥 Sketch and Design Icons in #Figma​ a #UI​/UX Design Tool
Git	💿 GIT4 - reset & revert
CI/CD	🖋 6) 스프링부트로 웹 서비스 출시하기 - 6. TravisCI & AWS CodeDeploy로 배포 자동화 구축하기 🖋 Github Actions + CodeDeploy + EC2 자동배포하기
AWS	🖋 7년 걸쳐 AWS로 이전'··· 넷플릭스 엔지니어가 설명하는 클라우드 여정
Serverless	🖋 Serverless와 기술도입, Backend Application의 미래
Design System	🖋 와디즈의 디자인 시스템 구축 🖋 Effective Atomic Design 🎥 토스ㅣSLASH 21 - TDS로 UI 쌓기 : 그 많던 코드는 누가 다 치웠을까?
Security	🖋 웹 개발을 위해 꼭 알아야하는 보안 공격
Terms	📃 Upsert 📃 Technological singularity
License	📃 MIT 허가서
Tech General	🎥 Software Engineering "Best Practices" 🎥 The mind behind Linux | Linus Torvalds 🖋 프로그래머로서의 성장을 도왔던 태도들 🖋 소프트웨어는 녹이 슨다 🖋 Why Open Source misses the point of Free Software 🖋 평가방법 OKR, KPI, MBO 뭐가 다른거에요? 📚 개발자, 채용 가이드북 🎥 [A2] 한글 파일로부터 우리를 구원해줄 hwp.js 🖋 Bug-O 노테이션 🖋 Why review code? - Sophie Alpert 🎥 토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기
Genaral	🖋 스티브의 구글 플랫폼 폭언 🖋 넷플릭스의 문화 : 자유와 책임 (한국어 번역본) 🖋 Jeff Bezos, Jack Ma, and the Quest to Kill eBay 🖋 혹독한 조언이 나를 살릴까?
Enthusiasm	🎥 I..Will..Win. Why? Because I have faith, courage ... enthusiasm 🎥 Linus Torvalds: Nvidia, Fuck You!
Freedom	🎥 The Shawshank Redemption Ending 🎧 Scorpions - Holiday 🎧 N.EX.T - The Ocean : 불멸에 관하여 (1994年) 🎥 Good Will Hunting (1997) - Ending "He's Not There" 🎧 Miss Misery by Elliott Smith [Lyrics] Good Will Hunting (ending song) 🎥 starcraft ost- orchestra 🎧 [N.EX.T] Questions