1. 컴파일러와 인터프리터
둘은 상반되는 개념이라기보다는
코드를 읽고 해석? 평가? 한다는 점에서 맥을 같이 한다.
그런데 컴파일은 전체 코드 처음부터 끝까지,
실행 이전에 이루어져서, 에러가 없어야 런타임으로 넘어가는 것이고
자바스크립트에서 인터프리터는 런타임에서 한줄 해석, 한줄 실행을
바로바로 실시간으로 때리는 것?
JIT(Just In time) 방식이라고 했는데, 자바스크립트는 컴파일러와 인터프리터와 어쩌고를 적절히 어쩌고 해서 장점만 취하는 언어라는 내용이 딥다이브에 있다고 했다. ❓체크해봐야지!
2. 호이스팅
근데 이제 함수를 곁들인!
변수 선언
-
var 변수 선언은, 선언과 초기화가 동시에 일어나서 어디서든 이미 참조가 가능하고, undefined를 리턴.
-
let, const 변수 선언은, 선언 먼저 일어나고 초기화는 런타임에서 일어나기 때문에 일시적으로 참조가 불가능한 TDZ(Temporal Dead Zone)이 존재하게 된다. 이때 참조하면 Reference Error 발생.
❓다만, let과 const도 호이스팅이 발생하지만,
마치 발생하지 않는 것처럼 동작한다는 설명은 아직도 이해가 안 간다.
함수선언문
function add(a, b) {
return a + b;
}선언이므로 호이스팅에 의해 선언부가 상단으로 끌어올려지고, 정상적으로 동작한다! (전역적으로 사용 가능)
함수표현식
var add = function (a, b) {
return a + b;
}var를 통한 변수 선언처럼 동작하여, 호이스팅이 일어난다.
그런데 add에 할당될 function 로직은 호출 이후에 선언되므로,
콘솔에 add를 찍어보면 결과는 undefined.
(add를 함수가 아닌 변수로 인식)
add(3 + 4)로 실행시켜 보면 Uncaught TypeError가 뜬다.
https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/
3. PUT vs PATCH
GET은 주세요, POST는 줄게요 라고 머리에 넣어놨고,
POST는 Create인 것도 숙지했다. (새로운 데이터 생성)
그럼 PUT은 뭐고 PATCH는 무엇이며, 둘의 차이점은?
둘 다 Update, 즉 새로운 데이터 생성이 아닌 기존 데이터 수정을 위한 메소드.
다만, PUT은 전체 다, PATCH는 일부분만 수정한다고 이해했다.
(패치워크의 누덕누덕한 느낌!)
4. SSG, ISR
분명 캠프에서 배운 내용인데, 초면이었다.
설명을 못 하겠는 게 아니라 아예 존재 자체를 잊어버린 상태였다가,
머릿속에서 겨우겨우 끄집어내서 아 있었다! 하는 수준까지만 옴🥲
ISR(Incremental Static Regeneration)과 SSG(Static Site Generation)는
주로 Next.js 같은 프레임워크에서 사용하는 페이지 생성 방식.
사이트의 성능을 최적화하고 사용자에게 더 빠른 페이지 로드를 제공하는 목적.
💺 SSG (Static Site Generation)
SSG는 빌드 타임에 페이지를 미리 생성하여
정적인 HTML 파일로 저장하는 방식이다. 사용자가 웹사이트를 방문하면,
서버는 미리 생성된 HTML 파일을 빠르게 제공할 수 있다.
- 장점 : 매우 빠른 로딩 속도와 SEO에 유리.
서버가 페이지를 미리 준비하므로 사용자는 즉시 로드되는 콘텐츠를 볼 수 있다. - 단점 : 페이지가 미리 생성되므로 실시간 데이터 업데이트가 어렵다.
페이지를 갱신하려면 빌드를 다시 실행해야 한다.
❓쓱이랑 SSR이랑 같은 건가? 아니면 한 쪽이 더 큰 개념?
🛼 ISR (Incremental Static Regeneration)
ISR은 SSG와 CSR(Client-Side Rendering)의 장점을 결합한 방식으로,
페이지의 일부를 정적으로 생성하면서도 주기적으로 업데이트할 수 있는 기능을 추가.
일정한 주기로 페이지를 다시 생성하여 최신 콘텐츠를 반영할 수 있다.
- 장점 : 정적인 HTML 파일을 사용하므로 빠른 로딩 속도를 유지하면서도, 특정 주기로 새 데이터를 반영할 수 있어 실시간 업데이트가 가능합니다.
- 단점 : ISR을 설정하지 않으면 데이터가 갱신되지 않고,
갱신 주기를 설정할 때 비즈니스 요구에 맞게 적절히 조정해야 한다.
➡️ SSG는 한번 빌드된 정적인 페이지를 제공, 빠르고 안정적인 성능.
ISR은 일정 주기로 페이지를 갱신하여 새로운 콘텐츠를 실시간 반영할 수 있게 하면서도, SSG의 빠른 로딩 속도 유지 가능.
5. Context API와 useContext
https://velog.io/@hoonnn/React-Context-API%EC%99%80-useContext
