노드 입문, 숙련 과제 복습, DEEP DIVE 1~2장

실습

선발대 DB 공부 - db query 많이 사용해보기(문제풀기)

공부

Failover 와 Failback을 알아보기

PaaS 알아보기

인덱스 시그니처(Index Signature) 알아보기 - https://developer-talk.tistory.com/297

정예반 노션읽고 공부하기 - https://teamsparta.notion.site/Node-js-0f4e60159f804788b806bdc322ed5ff3

JS / DEEP DIVE 공부

TS / 핸드북 공부 - https://typescript-kr.github.io/pages/tutorials/ts-for-the-new-programmer.html

TS / 장기효 핸드북 공부 - https://joshua1988.github.io/ts/intro.html

SQL 강의 - https://teamsparta.notion.site/SQL-835771d23a4c4045a6aa1fcc4ac8188a

CORS개념 - https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

Promise 알아보기

강의

이승윤튜터님 노드입문,숙련 - https://www.youtube.com/@happiestcoconut/playlists

백엔드 맛보기 - https://www.youtube.com/playlist?list=PLSK4WsJ8JS4cQ-niGNum4bkK_THHOizTs

Node.js Websocket 이론 - https://www.youtube.com/watch?v=82LB1jI_Nxw

소켓 send, emit 메서드 차이 - https://www.youtube.com/watch?v=JYNlZcKjWwk

타입스크립트 - https://www.youtube.com/playlist?list=PLJf6aFJoJtbUXW6T4lPUk7C66yEneX7MN

타입스크립트로 블록체인 만들기 - https://nomadcoders.co/typescript-for-beginners

줌 클론코딩 - https://nomadcoders.co/noom/lobby?utm_source=free_course&utm_campaign=noom&utm_medium=site

알고리즘

스파르타 알고리즘 풀기 / 2023/01/20 - https://school.programmers.co.kr/learn/courses/30/lessons/67256

스파르타 알고리즘 풀기 / 2023/01/19 - https://school.programmers.co.kr/learn/courses/30/lessons/131705

스파르타 알고리즘 풀기 / 2023/01/18 - https://school.programmers.co.kr/learn/courses/30/lessons/135808

스파르타 알고리즘 풀기 / 2023/01/17 - https://school.programmers.co.kr/learn/courses/30/lessons/134240

스파르타 알고리즘 풀기 / 2023/01/16 - https://school.programmers.co.kr/learn/courses/30/lessons/12982

사이트

• Node.js docs - https://teamsparta.notion.site/Node-js-4-docs-f467b6a53c9d42cb9ed65a21a20cbc84
• Spring docs - https://teamsparta.notion.site/Spring-4-docs-90ed70fceeec43559b042781feb9e0f2
• CORS개념 - https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

CHECKED

후발대 좋아요 API query 복습

후발대 노드숙련 남은 API 해보기 - https://github.com/jyh7a/week_1_assignment_gittest

우준호튜터님 정예반에서 cors 잠깐 언급한 부분 다시보기

후발대 좋아요 GET,PUT API - https://github.com/jyh7a/week_1_assignment_gittest

오늘의 체크리스트

이승윤튜터님 노드입문,숙련

API요청을 하기 위해서
THUNDER Client, POST MAN을 이용했었는데,
REST Client라는것도 있다는걸 알게 되었다.
파일로 요청정보를 남길 수 있는것도 맘에 들고,
사용방법이 조금 더 불편한게 공부할때 유용할 것 같다. 앞으론 이걸로 요청을 보내봐야겠다.

데이터의 유효성검사를 Joi라이브러리를 사용한다.
API를 작성할때 같은 예외처리를 여러번해야하는게 싫어서
예외처리 하는 함수를 따로 만들까 하는 생각을 했었는데, 
Joi가 그러한 역할을 하는 것 같다.
다음부턴 나도 Joi를 사용해서 유효성 검사를 해야겠다.

터미널에 query문 안나오게 - config.js 에서 logging: false설정

db:migrate:status 마이그레이션의 상태를 보고, up, down을 통해 확인

JS / DEEP DIVE 공부

• 들어가며

프로그래머의 역할: 요구사항을 기반으로 문제를 해결하기 위한 방안을 고안하고, 이를 코드로 구현하는 것.
이때 자신이 구현한 코드가 컴퓨터 내부에서 어떻게 동작할 것인지 예측 가능해야 하며, 이를 명확히 설명할 수 있어야 합니다.

프로그램언어의 기본개념은 이해는 문맥에 맞는 정확한 용어를 구사할 수 있는 원동력 입니다.
문맥에 맞는 정확한 용어를 사용하면 오해를 불러일으키지 않는 명확한 의사소통이 가능해집니다.

이는 협업의 기본이며 필수요소입니다.

동작 원리의 이해는 코드의 동작을 예측 가능하게 하며 코드 독해의 원천입니다.

즉, 기본 개념과 동작 원리의 이해는 안정적이고 효율적인 코드를 생산할 수 있는 기본기 입니다.
기본기는 아무리 강조해도 지나치지 않습니다.
기본기는 아무리 강조해도 지나치지 않습니다.
기본기는 아무리 강조해도 지나치지 않습니다.
기본기는 아무리 강조해도 지나치지 않습니다.
기본기는 아무리 강조해도 지나치지 않습니다.
기본기는 아무리 강조해도 지나치지 않습니다.
기본기는 아무리 강조해도 지나치지 않습니다.

• 1장 프로그래밍
  • 1.1 프로그래밍이란?

프로그래밍이란 컴퓨터에게 일을 시키는 것이다.
일을 시킬땐 무엇을 시킬지 명확해야 한다.
그니까 컴터한테 뭘 시킬건지 정확히 이해하고 어떻게 행동해야한다고 알려줘야 한다.

이때 요구되는 것이 문제 해결 능력이다.
대부분의 문제(요구사항)은 복잡하며 명확하지 않다.
따라서 문제(요구사항)을 명확히 이해하는게 우선이고,
복잡함을 단순하게 분해하고, 자료를 정리, 구분하고,
순서에 맞게 행위를 배열해야 한다.

즉 프로그래밍이란 컴퓨터에게 하나부터 열까지 다 알려줘야 한다. 마치 내가 누군가에게 배울때처럼.
그 결과물이 바로 코드이다.

우리는 문제 해결 방안을 고려할 때 컴퓨터의 입장에서 문제를 바라봐야 한다.
이때 필요한 것이 Computational thinking(컴퓨팅 사고)이다.

사람의 문제 해결 능력은 직감과 직관의 영역이라고 볼 수 있는데,
이는 문제를 바라보는 우리의 사고와 경험에 영향을 받는다.

컴퓨터의 관점에서 문제를 사고하는 것이란 논리적, 수학적으로 해결과제를 작은단위로 분해하고 패턴화해서 추출하며,
프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 정의해야 한다.

• 1장 프로그래밍
  • 1.2 프로그래밍 언어

컴퓨터에게 일을 전달하면 컴퓨터는 명령서를 보고 일을 한다.
그러나 컴퓨터는 컴퓨터나라의 글자밖에 알지 못한다.
우리는 컴퓨터나라를 뺀 나머지 국가들이 공통적으로 사용하는 프로그래밍 언어를 이용해 명령서를 작성하고
전문 번역가에게 번역을 맡겨 컴퓨터나라 글자로 번역해서 컴퓨터에게 전달한다.
우리는 전문번역가를 컴파일러(compiler) 혹은 인터프리터(interpreter)라고 한다.
프로그래밍언어는 구문과 의미의 조합으로 표현된다.

• 1장 프로그래밍
  • 1.3 구문과 의미

Coloriess green ideas sleep furiously - Noam Chomsky
위 문장을 통해 전달하려는 바는 언어의 의미는 문맥에 있는것이지 문법에 있는것이 아니라는 것이다.

위의 문장은 문법에는 아무런 하자가 없지만 의미가 없다.

이를통해 프로그래밍언어 또한 문법만 맞게 작성하면 안된다는 말이다.
결과적으로 문법과 의미를 잘 조합해서 요구사항이 실현 되어야 한다.

• 2장 자바스크립트란?
  • 2.1 자바스크립트의 탄생

1995년, 약 90%의 시장 점유율로 웹 브라우저 시장을 지배하고 있던 넷스케이프 커뮤니케이션즈(Netscape com-munications)는
웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정한다.
그래서 탄생한 것이 바로 브렌던 아이크(Brendan Eich)가 개발한 자바스크립트다.

자바스크립트는 1996년 3월, 넷스케이프 커뮤니케이션즈의 웹 브라우저인 넷스케이프 내비게이터(Netscape Navigator)2 에 탑재되었고
"모카(Mocha)"로 명명되었다. 그러다 그해 9월 "라이브스크립트(LiveScript)"로 이름이 바뀌었다가 12월에 "자바스크립트JavaScript"라는
이름으로 최종 명명되었다.

이렇게 탄생한 자바스크립트는 현재 모든 브라우저의 표준 프로그래밍 언어로 자리 잡았다. 그러나 자바스크립트가
순탄하게 성장했던 것은 아니다. 자바스크립트가 탄생한 뒤 얼마 지나지 않아 자바스크립트의 파생 버전인 마이크로소프트사의 JScript가 출시되어 자바스크립트는 위기를 맞는다.

• 2장 자바스크립트란?
  • 2.2 자바스크립트의 표준화

넷스케이프 커뮤니케이션즈와 마이크로소프트는 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을
경쟁적으로 뽑아냈다.
이로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했고,
  크로스 브라우징(cross browsing) 이란?
    - 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르기(호환성) 나오게 하는 작업
    - 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에
      최적화되어 치우치지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법
결과적으로 모든 브라우저에서 정상적으로 동작하는 웹페이즈를 개발하기가 무척 어려워졌다.

이에 자바스크립트의 파편화를 방지하고 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트의 필요성이 대두되기 시작했다.
이를 위해, 1996년 11월 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구인 ECMA 인터내셔널에 자바스크립트의 표준화를 요청했다.

1997년 7월 ECMA-262라 불라니느 표준화된 자바스크립트 초판(ECMAScript 1)이 완성되었고,
상표권 문제로 자바스크립트는 ECMAScript로 명명되었다.

현재 2023/01/23는 ECMAScript 2022 까지 나와있습니다.

• 2장 자바스크립트란?
  • 2.3 자바스크립트 성장의 역사

초창기 자바스크립트는 웹페이지의 보조적인 기믕을 수행하기 위해 한정적인 용도로 사용되었다.
이시기에 대부분의 로직은 주로 웹 서버에서 실행되었고, 브라우즌 서버로부터 전달받은 HTML과 CSS를 단순히 렌더링 하는 수준이었다.
  렌더링(rendering) 이란?
    HTML, CSS, 자바스크립트로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것을 말한다.
    때로는 서버에서 데이터를 HTML로 변환해서 브라우저에게 전달하는 과정(SSR: Server Side Rendering)을 가리키기도 한다.

• 2장 자바스크립트란?
  • 2.3 자바스크립트 성장의 역사
    • 2.3.1 Ajax

자바스크립트를 이용해 서버와 브라우저가 비동기(asynchronous)방식으로 데이터를 교환할 수 있는 통신 기능인
Ajax(Asynchronous JavaScript and XML)가 XMLHttpRequest라는 이름으로 등장했다.

이전의 웹페이지는 html태그로 시작해 html태그로 끝나는 완전한 HTML 코드를 서버로부터 전송받아
웹페이지 전체를 렌더링 하는 방식이였다. 따라서 화면이 전환되면 서버로부터 새로운 HTML을 전송받았고, 전체를 처음부터 다시 렌더링했다.

이러한 방식은 변경할 필요가 없는 부분까지 다시 전송받기 때문에 불필요한 데이터 통신이 발생하고
새로 렌더링해야하기 때문에 성능면에서도 불리했다.

Ajax의 등장은 웹페이지에서 변경할 필요가 없는 부분은 다시 렌더링 하지 않고, 서버로부터 필요한 데이터만 전송받아 
필요한 부분만 렌더링하는 방식이 가능케 했다.
이로써 웹 브라우저에서도 데스크톱 애플리케이션과 유사한 빠른 성능, 부드러운 화면전환이 가능해졌다.

• 2장 자바스크립트란?
  • 2.3 자바스크립트 성장의 역사
    • 2.3.2 jQuery

2006년 jQuery의 등장으로 다소 번거롭고 논란이 있던 DOM(Document Object Model)을 더욱 쉽게 제어할 수 있게 되었고
크로스 브라우징 이슈도 어느 정도 해결되었다. jQuery는 넓은 사용자 층을 순식간에 확보했다.

• 2장 자바스크립트란?
  • 2.3 자바스크립트 성장의 역사
    • 2.3.3 V8 자바스크립트 엔진

구글 맵스를 통해 웹 애플리케이션 프로그래밍 언어로서의 가능성이 확인된 자바스크립트로 웹 어플리케이션을 구축하려는 시도가 늘면서
더욱 빠르게 동작하는 자바스크립트 엔진의 필요성이 대두되었다.

2008년 등장한 구글의 V8 자바스크립트 엔진은 이러한 요구에 부합하는 빠른 성능을 보여주었다.

V8 자바스크립트 엔진으로 촉발된 자바스크립트의 발전으로 과거 웹 서버에서 수행되던 로직들이 대거 클라이언트(브라우저)로 이동했고,
이는 웹 애플리케이션 개발에서 프런트엔드 영역이 주목받는 계기로 작용했다.

V8 이란?
환경과 상호작용하고 프로그램을 실행하기 위한 바이트코드를 생성하는 역할을 담당한다.
지금 V8이 무엇인지 자세히 알지는 못하지만 참조한 사이트를 통해 어떻게 흘러가는지만 체크해보았다.

참조 사이트 - https://evan-moon.github.io/2019/06/28/v8-analysis/
V8은 우리의 소스 코드를 가져와서 가장 먼저 파서(Parser)에게 넘긴다. 이 친구는 소스 코드를 분석한 후 AST(Abstract Syntax Tree), 추상 구문 트리로 변환하게 된다. 그 다음에 이 AST를 그림에 나와있는 Ignition에게 넘기는데 이 친구는 자바스크립트를 바이트 코드(Bytecode)로 변환하는 인터프리터이다. 원본 소스 코드보다 컴퓨터가 해석하기 쉬운 바이트 코드로 변환함으로써 원본 코드를 다시 파싱(Parsing)해야하는 수고를 덜고 코드의 양도 줄이면서 코드 실행 때 차지하는 메모리 공간을 아끼려는 것이다.

이후 이 바이트 코드를 실행함으로써 우리의 소스 코드가 실제로 작동하게 되고, 그 중 자주 사용되는 코드는 TurboFan으로 보내져서 Optimized Machine Code, 즉 최적화된 코드로 다시 컴파일된다. 그러다가 다시 사용이 덜 된다 싶으면 Deoptimizing 하기도 한다.

여기서 사용되는 용어들이 굉장히 재미있는데, V8은 원래 8기통 엔진의 종류를 의미하는 단어다. 제네시스 G90이나 기아 K9같은 차에 들어간다고 한다. 그럼 Ignition은 뭐냐. 엔진에 시동걸 때 사용하는 점화기이다. 내 소스 코드가 부릉부릉 실행되는 것이다. 그러다가 너무 많이 호출되서 내 코드가 뜨거워지면 TurboFan으로 최적화해서 너무 과열되지 않게 식혀주는 그런 느낌적인 느낌…? 분명히 다 노리고 네이밍한거다.

V8 분석 포스팅에서 컴파일 파이프라인을 설명할 때 빠지지 않던 Full-codegen과 Crankshaft는 어디로 갔냐 하면…
V8 v5.9부터 처음으로 Ignition과 TurboFan은 자바스크립트 실행을 위해 전체적으로 사용됩니다. 또한 V8의 v5.9부터 V8을 잘 지탱해준 기술이었던 Full-codegen과 Crankshaft는 새로운 자바스크립트의 기능과 이러한 기능들이 요구하는 최적화 기능을 더 이상 따라갈 수 없기 때문에 V8에서 더 이상 사용되지 않습니다. 우리는 이것들을 곧 완전히 제거할 계획이며, 이는 V8이 앞으로 훨씬 더 단순하고 유지 보수 가능한 아키텍처를 갖게 된다는 것을 의미합니다.

• 2장 자바스크립트란?
  • 2.3 자바스크립트 성장의 역사
    • 2.3.4 Node.js

2009년, 라이언 달(Ryan Dahl)이 발표한 Node.js는 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.
Node.js는, 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록
자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경이다.
Node.js는 다양한 플랫폼에 적용할 수 있지만 서버사이드 애플리케이션 개발에 주로 사용된다고 한다.
  서버사이드란? 참조 사이트를 통해 감을 잡아보자.
  클라이언트사이드 - https://nitro04.blogspot.com/2020/06/web-sever-side-client-side-1.html
  서버사이드 - https://nitro04.blogspot.com/2020/06/web-sever-side-client-side-2.html

Node.js는 비동기I/O를 지원하며 단일 스레드(single thread) 이벤트 루프를 기반으로 동작함으로써 요청(request)처리 성능이 좋다.
따라서 Node.js는 데이터를 실시간으로 처리하기 위해 I/O가 번번하게 발생하는 SPA(single Page Application)에 적합하다.
  SPA 란? - https://blog.naver.com/seek316/222085340333
    - 간략 소개
      서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통
    - 간략 특징
      라우팅: 어떤화면에서 다른화면으로 화면을 전환하는 내비게이션을 관리하기 위한 기능을 의미
      컴포넌트: 컴포넌트들이 모여 한 페이지를 작성하고, 특정 부분만 데이터를 바인딩 하는 개념

• 2장 자바스크립트란?
  • 2.3 자바스크립트 성장의 역사
    • 2.3.5 SPA 프레임워크

모던 웹 애플리케이션은 데스크톱 애플리케이션과 비교해도 손색없는 성능과 사용자 경험을 제공하는 것이 필수가 되었고, 더불어 개발의 규모와 복잡도도 상승했다.

이전의 개발 방식으로는 복잡해진 개발 과정을 수행하기 어려워졌고, 이러한 필요에 따라 많은 패턴과 라이브러리가 출현했다. 그 덕분에 개발에 많은 도움을 주었지만 변경에 유연하면서 확장하기 쉬운 애플리케이션 아키텍처의 구축을 어렵게 했고, 필연적으로 프레임워크가 등장하게 되었다.

이러한 요구에 발맞춰 CBD(Component based development)방법론을 기반으로 하는 SPA가 대중화되면서 Angular, React, Vue.js, Svelte등 다양한 SPA 프레임워크/라이브러리 또한 많은 사용층을 확보하고 있다.

무슨 얘기인지 잘.. 모르겠다.. 흠..

• 2장 자바스크립트란?
  • 2.4 자바스크립트와 ECMAScript

ECMAScript는 자바스크립트의 표준 사양인 ECMA-262를 말하며,
 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체(standard built-in object)등 핵심 문법을 규정한다.
각 브라우저 제조사는 ECMAScript 사양을 준수해서 브라우저에 내장되는 자바스크립트 엔진을 구현한다.

자바스크립트는 일반적으로 프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript와
브라우저가 별도 지원하는 클라이언트 사이드 Web API,
 즉 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker 등을 아우르는 개념이다.
┌────────────────────────────────┐
│ JavaScript                                                     │
│  ┌───────────────────────────┐    │
│  │ ECMAScript                                            │    │
│  │                                                       │    │
│  │                                                       │    │
│  └───────────────────────────┘    │
└────────────────────────────────┘
자바스크립트는 일반적으로 ECMAScript를 아우르는 개념

클라이언트 사이드 Web API는 ECMAScript와는 별도로 
월드 와이드 웹 콘소시엄(World Wide Web Consortium)에서 별도의 사양으로 관리하고 있다.

• 2장 자바스크립트란?
  • 2.5 자바스크립트의 특징

자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어다.
자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어(Interpreter language)다.
대부분의 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합해 비교적 처리속도가 느린 인터프리터의 단점을 해결했다.
자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.

• 2장 자바스크립트란?
  • 2.6 ES6 브라우저 지원 현황

인터넷 익스플로러를 제외한 대부분의 모던 브라우저는 ES6를 지원하지만 100% 지원하고 있지는 않다.
Node.js는 v4부터 ES6를 지원하기 시작했다.

따라서 브라우저에서 아직 지원하지 않는 최신 기능을 사용하거나 인터넷 익스플로러나 구형 브라우저를 고려해야 하는 상황이라면
바벨(Babel)과 같은 트랜스파일러를 사용해 사양을 다운그레이드 할 필요가 있다.