[JS] 모던 자바스크립트 Deep Dive 스터디 1~3장 #해달

 

 

JS는 배신하지 않는다

드디어 !

 

 

#프로그래밍 #컴파일러 #인터프리터 #자바스크립트 #크로스브라우징이슈 #ES6 #비동기 #Ajax #XMLHttpRequest #V8엔진 #jQuery #DOM #Nodejs #비동기I/O #단일스레드 #SPA #CBD

 

#으로 QnA찾기

---

 

서론

 

지난 학기부터 나의 부족한 JS 공부를 위해서

현업자 분께 추천받은 책을 공부하려고 했다.

 

해달 동아리비로 스캔도 하고,, 우리 동아리 최고야 !

모던 자바스크립트 Deep Dive는 취준생 자바스크립트 공부의 바이블로 전해진다.

그리고 양도 많지만 ... 오히려 좋아 !

 

저번에 1, 2 장은 정리해서 올렸다고 생각했는데

사라졌나... ? 아무튼 다시 읽어보고 넘어가고 3장부터 정리를 하겠다.

 

일단 우리 스터디는

 

 

---- 모던 자스
1. 모던 자스 책 보기 
2. 궁금한점 물어보기
3. 프젝에 적용하기
4. 다음주까지 질문 답 생각해오기 
---- 기타 질문
5. 신입 인터뷰 질문 <<<<< 찾아서 적용하기 NEW !!
5.1. 모던 자스는 양이 너무 많아요 ! << 악깡버

 

차례로 진행하기로 했다. 

 

---

짧은 정리

 

프로그래머의 역할은 요구사항을 기반으로 문제를 해결하기 위한 방안을 고안, 구현

프로그래밍 언어의 기본 개념과 동작 원리를 정확히 이해하는 것이 중요

 

-> 신뢰할 수 없고 유지보수하기 까다로운 코드가 발생

 

 

중요한 키워드를 중심으로 나누어 학습하기

단순한 타이핑이 아닌 의도적인 연습을 하기

 

 

1장

프로그래밍

프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션으로

문제 해결 능력이 필요하다.

문제에 따라 요구사항을 명확히 이해하고 복잡함을 분해하고 구분하여

순서에 맞게 배열해야한다.

 

컴퓨터는 0과 1밖에 알지 못하는 기계라서 정확하고 상세하게 요구사항을 설명하는 작업을 해야하는데 이게 코드이다.

따라서 컴퓨팅 사고가 필요하다. 컴퓨팅 사고는 논리적, 수학적 사고가 필요하며 해결 과제를 작은 단위로 분해하고 패턴화해서 추출해야한다.

 

 

컴퓨터가 이해할 수 있는 언어를 기계어라고 한다. 그러나 사람이 이해할 수 있는 단어와 차이가 크기 때문에 약속된 구문인 프로그래밍언어를 통해 코드를 작성한후 번역기인 컴파일러, 인터프리터를 사용한다.

 

 

인공어는 프로그래밍 언어로 사람과 컴퓨터 모두 이해할 수 있는 형태이다.

프로그래밍은 일종의 커뮤니케이션으로 구문과 의미의 조합으로 표현된다.

 

문법도 중요하지만 의미도 중요하며 결국 프로그래밍은 요구사하으이 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후, 그 흐름을 제어하는 것이다.

 

 

02장

자바스크립트란?

 

1995년, 약 90% 시장 점유율로 웹브라우저 시장을 지배하고 있던 넷스케이프 커뮤니케이션즈는

웹페이지의 보조적인 기능을 수행하기 위해 경량 프로그래밍 언어를 도입한게, 브렌던 아이크가 개발한 자바스크립트다.

 

마이크로소프트는 자바스크립트의 파생 버전인 JScript를 인터넷 익스플로러에 탑재했지만

표준화되지 못하고 적당히 호환된었다.

 

따라서 다른 웹페이지에서 정상적으로 작동하지 않는 크로스 브라우징 이슈가 발생하여

모든 브라우저에서 정상적으로 동작하는 웹페이지를 개발하기 어려웠다.

 

1997년 7월 자바스크립트의 파편화를 방지하고 모든 브라우저에서 정상적으로 동작하는

표준화된 자바스크립트의 필요성이 대두되기 시작했다.

ECMA 인터내셔널에 자바스크립트의 표준화를 요청하여

자바스크립트의 상표권은 ECMAScript(애크마스크립트)로 명명되었다. 이게 ES5, ES6이다.

ES6에선 let / const 키워드, 화살표 함수, 클래스 ,모듈과 같은 큰 변화가 있었다.

 

 

 

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

 

렌더링 : 서버에서 데이터를 HTML로 변환해서 브라우저에게 전달하는 과정 SSR:Server Side Rendering

비동기 : 한 작업을 하기까지 완료하지 않고, 보조작업이 수행이 완료될 시 주작업에 전달을 해주는 ?

=> XMLHttpRequest 어디서 많이 봤는데?

 

이전의 웹페이지는 htm태그로 구성된 HTML 코드를 서버로 부터 전송받아 웹페이지 전체에 렌더링 하는 방식으로 동작했다. 따라서 화면이 전환되면 서버로 부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링 했다.

 

-> 이러한 방식은 불필요한 데이터 통신, 성능 저하, 순간적인 깜빡이는 현상이 발생한다.

 

따라서 Ajax의 등장으로 웹페이지에서 변경할 필요가 없는 부분은 다시 렌더링 하지않는 필요한 부분만 한정적으로 렌더링하는 방식이 가능해졌다. ex) 구글 맵스

 

 

2006년 jQuery의 등장으로 DOM(Document Object Model)을 더욱 쉽게 제어할 수 있게 되어, 크로스 브라우징 이슈도 어느정도 해결하였다.

#어떤 논란이 있었을까? ->

DOM : Docuement Object Model : HTML, CSS 문법이 언어가 아님. 공장

DOM 크로싱 브라우징 이슈해결을 위해 viewpoint

해피뉴히어에서도 발생 : overflow - y overlay를 쓰면 크롬에선 드래그바가 겹치는데 사파리는 빠져나온다.

height : 100% 일 때, 사파리는 하단 바도 같이 적용해서 움직인다 (사라진다)

height : 100vh 는 고정된다.

크롬과 사파리에서 겪은 크로스 브라우징 이슈 - JthCast

크롬과 사파리에서 겪은 크로스 브라우징 이슈

해결법? : 스크롤바에 내용이 겹치지 않게끔 만들기?

초기화?, 사파리는....

 

 

 

 

HTML XML 문서의 프로그래밍 인터페이스 : 

https://youtu.be/mFawNZz_Uu0?si=znKwX5vJDp3FIT-i

jQuery : 내장메소드(#어떤 내장메소드??) x 선택자로 접근 가능 , 옛날에는 각광받는 기술...

 

구글의 V8 자바스크립트 엔진은 데스크톱 애플리케이션과 유사한 사용자 경험을 제공할 수 있는 웹 어플리케이션 언어로 정착하여, 프론트엔드 영역이 주목받는 계기였다.

 

 

2009년 라이언 달이 발표한 Node.js는 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.

 

브라우저의 자바스크립트 엔진에서만 동작하던 JS를 브라우저 이외의 환경에도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행환경이다. Node.js는 다양한 플랫폼에 적용할 수 있지만 서버 사이드 애플리케이션 개발에 주로 사용되며 (SSR=> 백엔드에 주로 쓴다) 이때 필요한 모듈, 파일시스템, HTTP 등 빌트인 내장 API를 제공한다.

 

 

Node.js는 자바스크립트 엔진을 기반으로 하므로 Node.js 환경에서 동작하는 애플리케이션은 JS를 사용해 개발한다. FE ,BE 모두 JS를 사용할 수 있는 동형성은 별도의 언어를 학습하기 위한 시간을 덜 수 있다는 장점도 있다.

 

Node.js 는 비동기 I/O를 지원하며, 단일 스레드(Single thread) 이벤트 루프 기반으로 동작함으로써

요청 처리 성능이 좋다.

 

비동기를 지원하는데 단일 스레드 ??

https://www.youtube.com/watch?v=v67LloZ1ieI

 

Node.js는 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA(Single Page Applicaion)에 적합하며, CPU 사용률이 높은 애플리케이션엔 적합하지 않는다.

 

자바스크립트는 크로스 플랫폼을 위한 중요한 언어로 주목받고 있다.

 

SPA 프레임워크 

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

따라서 개발에 많은 도움을 줄 수 있는 라이브러리, 프레임 워크가 등장하였다.

 

#리액트는 어떻게 동작하는 걸까?

SPA -> DOM Tree

 

# 리액트는 라이브러리(도서관)? 프레임워크(뼈대)?

라이브러리 ! 프레임워크의 속성도 조금 있다 : useState

그렇지만 Facebook에서 라이브러리라고 못박아둠. !

 

 

Component Based Development CBD방법론을 기반으로 하는 SPA가 대중화 되면서 Angluar, React, Vue.js, Svelte 등 다양한 SPA 프레임워크 ,라이브럴리 또한 많은 사용층을 확보하고 있다.

 

 

클라이언트 사이드 Web API, DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker를 아우르는 개념이다.

 

 

자바스크립트의 특징 웹브라우저에서 동작하는 유일한 프로그래밍 언어로, 인터프리터 언어이다.

# 왜 웹브라우저에서 동작하는 유일한 프로그래밍언어?

프로그래밍 언어가 HTML, CSS 는 마크업언어

 

#자바는 ? jvm? jdk? => 하이브리드 언어 jvm을 컴파일해서?

C는 gcc 컴파일러

 

자바스크립트도 발전을 하면서 컴파일러와 인터프리터 언어를 합쳐 실행 속도가 느리다는 단점을 극복

 

 

멀티 패러다임 프로그래밍 언어다.

- 명령형 imperative

- 함수형 functional

- 프로토타입 기반 prototype-based 객체지향 

 

프로토타입 기반의 객체지향 언어이다.

 

# 클래스 기반? 도입? 클래스 기반은 아니다?

=> 자바클래스기반 / 파이썬 클래스 기반

객체를 생성할 때 원본이 되는 객체를 복사해서 생성하는 패턴

 

 

# 프로토타입 : 200개의 객체를 만들면 200개의 메모리 변수??? 같은거 하나 쓰자 ! 비슷한 포인터의 개념??

props 위에서 뿌려주는 가능한데

callback은 어렵다 -> 무슨 문제가 있다고?

 

 

인터넷 익스플로러나 구형 브라우저를 사용할 경우 ES6를 지원하지 않기 때문에 ES5이하로 다운그레이드 할 필요가 있다.

 

 

 

03장

자바스크립트 개발 환경과 실행 방법

 

브라우저 : HTML, CSS, JS를 실행해 웹페이지를 브라우저 화면에 렌더링 하는 것이 목적

Node.js : 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주 목적

 

DOM API: 브라우저는 파싱된 HTML 요소를 선태갛거나 조작하는 기능의 집합인 DOM API를 기본적으로 제공

Node.js : 파일 시스템을 기본 제공하지만 Web API인 FileReader객체를 사용해 파일 읽어들이는건 가능

제공하지 않는 이유: 브라우저를 통해 다운로드 되어 실행되는 자바스크립트가 마음대로 사용자의 로컬파일을 삭제할 수 없도록 보안상의 이유로 제공하지 않는다.

 

브라우저는 

Jest: 자바스크립트 테스트 코드

넷스케이프 -> 에크마인터내셔널 상표 (자바스크립트) : 상표권도 사왔다.

 

 

# 웹서버에서 실행 ?

SSR : 서버사이드렌더링

 

CSR 

클라이언트 : 유저? 서버에서 받아오는 쪽? 받아와서 브라우저가 DOM으로 렌더링?

개발자도구 요소 : index.js에 비어있는 부분을 브라우저가 채움 

 

SSR: HTML 페이지를 가져옴

바뀔때마다 계속 렌더링? 

왜 옛날에는 브라우저에서 SSR을 왜 안썼을까?

컴퓨터 성능

Ajax 호환이 잘되는 jQuery

 

jQuery : 자바스크립트의 기능이 너무 없어서, Ajax쓰는 코드? 간단함

npm 패키지가 뜰 때, 갑자기 떴다.

ES6 -> ES7 좋아지면서 fetch의 호환성이 좋아서 / jQuery 라이브러리

=> axios 등장 / React-query

 

# Ajax, Fetch, Axios의 차이점?

 

Ajax

 

Fetch

stringify()

.json()

안돌아가던데? 왜그럴까이.....

문제점 : response timeout을 설정할 수 없음

 

Axios

node.js promise httpRequest

https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-Ajax%EC%99%80-Axios-%EA%B7%B8%EB%A6%AC%EA%B3%A0-fetch

[개발상식] Ajax와 Axios 그리고 fetch

 

상태과

 

1. Redux / Redux/toolikt

2. Recoil

3. Zustand

 

Recoil , Zustand useState()? 쓰기 편할지도?

근데 너무 일찍 개발되어서 호환성이 너무 낮다.

새로고침하면?

 

Zustand: 

개쉽다! Zustand 사용법 - React 상태관리 라이브러리 - 검은바닷가재 (tistory.com)

개쉽다! Zustand 사용법 - React 상태관리 라이브러리

 

단점: 한국어 공식문서가 많이 없다.

 

toolkit?

thunk? 싸가? action?

thunk???????????????????

써드파티 라이브러리를 적용을해서

써드파티? : 리덕스에서 자체 지원 X 외부라이브러리? 웹 API를

리덕스 처음엔 이해 못함

RTK Query? redux toolkit query vs React-query

 

RTK Query? redux toolkit 

캐싱이 가능, 모듈화?????????????????????????

learning curve 

https://redux-toolkit.js.org/rtk-query/overview

RTK Query Overview | Redux Toolkit

 

React-query 기능이 더 많음 

 

우동사리에서 fetch 사용했는데 그래서구나!

 

1. 이벤트루프  

2. 비동기 통신이 발생할 때

2. setTimeout lazy loading : 

 

운영체제 OS 싱글스레드 : 

요청처리가 빠르다. 

CPU 높은 애플리케이션???? : 굳이 요청처리를 빨리 처리할 필요가 없다.

I/O 

 

데드락 ? : CPU 사용률이 높으면 데드락이 걸릴 수 있다?

싱글 스레드인데 ,,,, 밀리면 데드락걸릴 수도 !

고속도로가 아니라 국도인데 밀리면...

 

 

1. SSR / CSR

2. 자바스크립트 구동방식

3. Axios, fetch 차이점

 

 

Mobx

 

 

# node package manager ? npm이 나을까? yarn

# yarn이랑 충돌?

https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-%EB%85%B8%EB%93%9C-npmnode-package-manager

[NODE] 📚 npm(node package manager) 완벽 정리

 

#해피뉴히어는 어쩌다가 yarn -> npm 으로 이동을 했나?

서로 충돌이 발생. 버전이 달라서

yarn, npm lock 파일을.... 허허허허헣

 

호환성 이슈

하나를 잡으면 하나가 잘못되는....

 

npm vs yarn vs yarn berry (velog.io)

npm vs yarn vs yarn berry

 

 

#CRA와 Vite의 차이

 

Vite는  로딩 빌드 속도는 빠른데 누락되는게 많다. 번들러

CRA는 로딩 느린데 좀 안정적임?

 

# twinmacro? webpack babel

tailwind styeld-components -> 처럼 쓸 수 있게하는

 

CRA 없을때는 config 도 다 만들어......

리액트 다시 조립하기?

 

 

 

 

---