[김민태의 프론트엔드 아카데미] 제 7강 부록

07 부록

01 코드는 하나다. 코드를 구성하는 요소들은 무엇이 있을까

가독성에 대한 이야기

01 코드는 왜 읽히는가?

• 코드 구성성분 : 식별자, 함수, 변수, 조건문, 세미콜론, 괄호 등...
• 토큰 : 코드를 구성하는 최소한의 단위 (어절과 비슷) - const, 공백, 괄호, == , 세미콜론, 등등..
• 문자 : 토큰보다 더 작은 단위, (음절과 비슷)

02 저수준, 고수준

• 저수준 : 기계가 이해하기 쉬운 언어
• 고수준 : 사람이 이해하기 쉬운 언어
• AST (Abstract Syntax Tree) : 추상 구문 트리
  • 소스코드를 분석해서 파싱 후 기계가 실행하기 좋은 상태로 만드는 단계
  • AST에 대한 이해가 있으면 어떤 함수가 있고 변수가 어디있고 어떻게 호출이 일어나는 지 등을 알 수 있음

03 가독성은 상대적이다

• 동료들과 나의 이해도는 어느쪽에 가까운가
• 저수준에 가까운가, 고수준에 가까운가
  • 저수준에 가깝다는 것은 그만큼 기계에 대한 이해도가 높고, 원천적인 기계에 대한 이해도가 높다는 뜻
• 프로그래밍 테크닉에 대한 이해도가 낮으면 낮을 수록 훨씬 쉬운 코드를 작성해야 가독성이 좋은 코드가 될 수 있음.
• 다양한 고급 테크닉을 썼어도 나와 동료들이 그것을 충분히 이해하고 있다면 충분히 가독성 있는 코드라고 할 수 있음.
• 얼마나 운영하기 좋은 상태인가, 개발하기 좋은 상태인가는 현재 나의 지식수준에 따라 상대적임.
• 좋은 코드를 알아볼 수 있도록 꾸준히 학습하면서 훈련을 해야함
  • 프로그래밍 언어 기저에 깔려있는 메커니즘
  • 컴퓨터 시스템이 프로그래밍 언어를 번역하고 실행하는 이론
  • 객체지향 프로그래밍
  • 함수형 프로그래밍 등

02 추상화. 추상화란 무엇이고 왜 필요할까

01 추상화

• 추상화 : 단순한 기능들을 조합하여 레이어를 쌓아올려 정교한 일을 할 수 있게 만드는 것, 보자마자 뭔지 알 수 있게 만드는 설계 기법
• 저수준 : 어떤 맥락, 의미가 충분히 드러나있지 않은 상태, 가독성이 떨어짐. 충분히 추상화되어있지 않음.
• const add = (a, b) => a + b; const sub = (a, b) => a - b; const multiply = (a, b) => a * b; const div = (a, b) => a / b; add(add(add(add(3, 100), 100), 200), 300); sub(multiply(add(3, 10), 100), 5); const double1 = a => multiply(a, 2); const double2 = a => add(a, a); const quater = a => div(a, 4); quater(12); div(12, 4);

02 맥락 가시화

• 학습비용이 꽤 높지만 다양한 추상화 기법을 공부해두는 것이 좋음

03 추상화 기법을 이용한 설계

• DOM API : HTML 문자열을 DOM이라는 추상화된 트리로 추상화해서 다룸
• Virtual DOM : DOM을 좀 더 추상화하여 리액트나 뷰 등에서 이용
• 추상화 : HTML < DOM < Virtual DOM

03 JavaScript는 어떻게 변해갈까

01 과거와 현대의 비교

02 JavaScript 변화의 방향

• 명확하고 어떤 의도인지 분명하게 알 수 있는 방향

04 HTML, CSS 그리고 JavaScript 학습 전략

01 도구를 학습에 활용하라

• 도구를 적극적으로 활용해서 시각화하는 것이 좋음
• Dom tree를 시각화해서 보여주는 크롬 익스텐션이 있음
• CSS 포지셔닝, 지오메트리 관련 -> 크롬 개발자 -> more tools -> layers

02 복합적 학습 전략

• 클론 코딩
• 앱을 많이 만들어보기 : 한 번도 만들어보지 않은 기능을 추가

03 주변 지식을 학습하라

• OS, Network, 서버, 인프라 등
• 종합적인 지식을 갖고 있어야 전반적인 흐름을 알 수 있고 잘 동작한 앱을 만드는 역량을 키울 수 있음

05 JavaScript 런타임 node와 브라우저 환경의 차이

01 보일러 플레이트

02 require

• 모듈을 불러오는 코드가 문법적으로 다름 (import, require)

03 파일 시스템

• 파일 시스템에 대한 학습을 보충하면 nodejs를 이해하는 데 도움이 될 수 있음

06 Back-end 프로그래밍 배워야 할까

01 백엔드 배워야 하는 이유

• nodejs로 간단한 웹서버를 구현할 수 있음
• 새로운 언어를 배울 필요가 없기 때문에 백엔드를 배우기 좋음

02 학습 타이밍

• 서버가 어떤 일을 하는 지 이해하고 있으면 훨씬 더 좋은 개발자가 될 수 있음