2020 스터디

2020

리서치

• 명령형 프로그래밍 사고로 전환하기
• 언어별 에러 핸들링

아키텍처 패턴

• MVC MVP MVVM 정리
• State Pattern

컴파일러

• 정리
  • 컴파일러 이론 정리
  • Vue Compile
• 포스트
  • JSONML: http://www.jsonml.org/
  • https://lihautan.com/manipulating-ast-with-javascript/
  • The super tiny compiler
    • babel 컴파일 두번째 단계에서 @babel/traverse를 왜 사용하는지 알게 됨.
  • 자바스크립트로 컴파일러 만들기
  • 자바스크립트 개발자를 위한 AST
  • 브라우저는 어떻게 동작하는 가? | NAVER D2
• AST
  • SpiderMonkey | Parse API
  • ESTree
• 오픈소스
  • 컴파일러
    • babel: https://youtu.be/UeVq_U5obnE
  • 어휘 분석기: https://ko.wikipedia.org/wiki/Flex_(어휘분석기)
  • 파서 생성기: https://ko.wikipedia.org/wiki/GNU_bison
  • 파서
    • jquery/esprima
    • acornjs/acorn
  • 코드 생성기
• 이론
  • 밑바닥부터 만드는 컴퓨팅 시스템 - 컴파일러
  • 컴파일러 이론
    • 컴파일러 구성론 | KOCW
  • https://en.wikipedia.org/wiki/Lexical_analysis
  • https://en.wikipedia.org/wiki/Parsing
  • https://ko.wikipedia.org/wiki/배커스-나우르_표기법

HTML

• 문법 정의: https://ko.wikipedia.org/wiki/문서_형식_선언
• 파싱 트리: https://www.w3.org/DOM/DOMTR
• DOM: https://www.w3.org/TR/dom41/#introduction-to-the-dom
• HTML Parser: https://www.w3.org/TR/html51/syntax.html#html-parser
• DOMParser API : https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
• 오픈소스
  • Webkit HTML Parser: https://github.com/WebKit/webkit/tree/master/Source/WebCore/html/parser
  • Gecko HTML Parser: https://github.com/mozilla/gecko/tree/central/parser/html

CSS

• https://www.w3.org/TR/css-syntax-3/

뷰어

• https://ts-ast-viewer.com/
  • https://github.com/dsherret/ts-ast-viewer/blob/master/src/resources/factoryCode/typescript.ts
• https://astexplorer.net/

---

성능 최적화

• Vue Components를 Dynamic Import로 변경 시
  • 번들 파일 증가
  • Chrome > Audits 에서 Performance 점수 증가
• Chrome > Audits > Performance 체크 리스트
• https://developers.google.com/web/fundamentals/performance/why-performance-matters
• 네트워크 통신
• 프론트엔드 성능 체크리스트

스트레스

스트레스 | 질변관리본부

메타인지 | 어쩌다어른

사람을 스트레스를 받으면 판단력이 흐려지고 그만큼 본인의 능력치 만큼 발휘를 못한다. 스트레스 받는 지점을 줄이면 그만큼 업무 효율이 증가한다.

• 정보 과부하
• 갑작스러운 일이 발생했을 때

생산성, 효율적인 업무

스트레스에 있는 내용을 해결하기 위한 방안

• 반복적이고 단순한 작업: 도구의 도움을 받는 다.
  • IDE
    • Refactor
    • Live Template
  • Fetch Markup
    • 마크업 협업 파트에서 전달받은 마크업 산출물을 프로젝트에 적용하는 도구
• 장거리 달리기를 단거리 달리기로 바꾸기. 컨텍스트 깨짐이 발생할 것을 대비해 업무별로 짧게 할당하는 것이다. 컨텍스트 깨짐이 발생 트리거는 카톡 알림, 커뮤니케이션 발생 등이 있다.
  • Step1. 마크업 반영
  • Step2. 중복되는 UI 컴포넌트화
  • Step3. 백엔드 인터페이스 정의
  • Step4. 백엔드 데이터 플로우 연동: 목업 데이터
  • Step5. 서버 통신 연동
  • Step6. UI 디테일 시나리오 연동
  • Step7. 중복 로직 리팩토링
• 컨텍스트 스위칭 최소화
  • 단순한 개발 플로우
    • Vuex 작업: 타입정의 -> State 추가 -> Mutation 추가 -> Action 추가

Composition API RFC

• Composition API RFC
• Composition API RFC Release Note
• Composition API RFC Migration

학습

도서 반복해서 학습하고 실무적용으로 증명 사례 만들기.

자료구조와 알고리즘

카테고리 정리. 패러다임 별 구현 방법 정리.

• 자바스크립트로 하는 자료 구조와 알고리즘

함수형 프로그래밍

함수형 패러다임 지원하는 언어 학습

• PureScript
• 이터러블 프로그래밍
• Standard ML
  • SML: Standard ML 기초
  • SML: Standard ML 빌트인 자료형
  • SML: Standard ML 함수
  • SML: Standard ML 고차함수
  • SML: Standard ML infix 정의
  • SML: Standard ML 자료형 정의
  • SML: Standard ML 예외처리
  • SML: Standard ML 모듈 시스템
  • SML 코어
• 순수 함수형 데이터 구조
• 프로그래밍 클로저
• 함수형 사고

객체지향

설계

구조적인 개선 경험(오픈빌더 1.0 => 2.0 처럼)

• GoF 디자인 패턴
• 함수형 디자인 패턴
  • https://www.ibm.com/developerworks/library/j-ft10/index.html
  • https://fsharpforfunandprofit.com/fppatterns/
• 모노레포
• 클린 아키텍쳐
• POSA(Pattern-Oriented Software Architecture)