Jerry

JavaScript는 싱글 스레드(Single-threaded) 기반의 논 블로킹(Non-blocking) 언어로, 이벤트 기반(Event-driven), 비동기 처리(Asynchronous processing), 동시성(Concurrency)을 지원하는 동적 프로그래밍 언어  동적 프로그래밍 언어(Dynamic Programming Language)는 실행 시간(runtime)에 타입을 결정하거나, 변수나 객체의 속성 등을 변경할 수 있는 프로그래밍 언어를 말합니다.   1. 싱글 스레드 기반(Singled-threaded)- JS는 기본적으로 하나의 Call Stack을 사용하여 코드를 실행하는 싱글 스레드 언어- 이 말은 한 번에 하나의 작업만 실행할 수 있음을 의미- CPU를 활용하는 연산이 길어..

오늘은 여러 종류의 브라우저 저장소들을 알아보는 시간을 가지려고 한다.브라우저에서 데이터를 저장하고 관리하는 방법은 여러가지가 존재한다.각 방식은 용도와 동작 방식, 보안 특성 면에서 차이가 존재한다.       LocalStorage- HTML Web Storage API 의 한 부분  > 브라우저에서 키-값 쌍으로 데이터를 저장할 수 있는 API의 한 부분- 동일 출처(same-origin) 내에서 지속적인 데이터 저장소  > 프로토콜(https://), 도메인(www.example.com), 포트(80, 443 등)가 모두 동일한 경우  > https://www.example.com:443/page1와 https://www.example.com:443/page2는 동일 출처  > http://www..

this는 실행 컨텍스트(Excution Context)에 따라 달라지는 값즉, 함수 호출 방법에 따라 달라짐        this의 결정 방식 (4가지 규칙 + 1)1. 기본 호출 규칙 (전역 / 일반 함수 호출)2. 객체 메서드 호출3. 생성자 함수 호출 (new 키워드)4. 명시적 바인드 (call, apply, bind)5. (추가) 화살표 함수 (Lexical this)    Lexical이란"어휘적인", "코드가 작성된 위치에 따라 결정되는" 이라는 뜻즉, Lexical this는 this가 코드가 작성된 위치(상위 스코프)에 의해 결정된다는 의미    1. 기본 호출 규칙 (전역 / 일반 함수 호출)- this가 window or undefined- 일반 함수에서 this를 호출하면 전역 객..

이번 시간에는 SSR과 CSR에 대해서 알아보겠습니다. SSR은 Server-Side Rendering의 약자이며, CSR은 Client-Side Rendering의 약자입니다.이 둘은 웹 애플리케이션을 렌더링하는 두 가지 주요 방식으로 각기 장단점이 존재합니다.이를 이해하기 위해 렌더링 과정, 성능 최적화, SEO, 사용자 경험, 최신 웹 기술과의 관계 고려해야 합니다. 여기서, 웹 애플리케이션(Web Application)이란?인터넷을 통해 웹 브라우저에서 실행되는 소프트웨어를 의미합니다.우리가 아는 일반적인 소프트웨어인 Window 프로그램(Ms Office, 카카오톡 PC 버전 등)과 달리, 웹 어플리케이션은 별도의 설치 없이 브라우저를 통해 접근(=> 유지보수 편리)이 가능합니다. 또한, 클라이..

"자바스크립트를 사용하다 보면 변수와 함수가 예상과 다르게 동작하는 경우를 본 적이 있을 겁니다.예를 들어 변수 선언 전에 console.log(a);를 호출했을 때 오류가 발생하지 않고 undefined가 출력되는 걸 본 적이 있나요?이런 현상이 발생하는 이유는 바로 호이스팅 때문입니다."   오늘은 자바스크립트의 핵심 개념인 호이스팅과 전역 컨텍스트, 클로저에 대해 알아보는 시간을 가지겠습니다.  1. 도입: 왜 중요한 개념인가?JavaScript에서 호이스팅, 전역 컨텍스트, 클로저는 함수 및 변수의 동작을 이해하는 데 핵심적인 개념이다. - 코드 실행 순서 파악- 스코프 관리- 메모리 효율 향상 과 같이 중요한 역할을 한다.이를 잘 활용하면 버그를 줄이고 유지 보수성을 높일 수 있다.   2. 개..

REST API와 GraphQL은 클라이언트(web app)와 서버가 데이터를 주고 받는 방식다.REST API란?REST는 Representational State Transfer의 약자로,웹 어플리케이션에서 리소스를 구조화하고 접근하는 아키텍처 스타일(방식)이다.  이런 방식(아키텍처 스타일)이지만, 단순한 API 규격이 아니라 여러 원칙을 따르는 방식이다- REST의 원칙으로 Uniform Interface, Stateless, Cacheable, Layered System 등이 존재Uniform Interface- 일관된 인터페이스를 통해 클라이언트와 서버 간의 상호작용 단순화- HTTP 메서드를 통한 리소스 조작 방식이 일관적이어야 한다=> RESTful Api는 간단하고 예측 가능한 구조로 설..

Reflow와 Repaint는 웹 브라우저가 페이지 렌더링하는 과정에서 발생하는 중요한 개념이다.두 과정은 비슷하게 들릴 수 있지만, 실제로 다르고 서로 다른 시점에 발생한다.    먼저, Reflow(리플로우)란?=> 브라우저가 페이지 레이아웃을 계산하는 과정   페이지에서 임의의 요소가 변경되면 브라우저는 그에 맞게 레이아웃을 새로 계산= 문서의 DOM 트리 다시 계산 -> 그에 따라 요소 크기나 위치 재조정 시점:  페이지 구조, 레이아웃 영향 미치는 변경이 있을 경우- DOM에 새로운 요소가 추가되거나 삭제- 요소의 크기나 위치 변경- 뷰포트 크기나 화면 회전- 폰트 크기나 스타일 변경- CSS Flexbox나 Grid 사용 성능 문제- 비교적 비싼 작업으로, 페이지 크기와 구조가 복잡할수록 ->..

REST 원칙을 적용해 서비스 API 설계한 것  그렇다면, REST란 무엇인가?=> 자원을 이름으로 구분하여 해당 자원의 상태를 주고 받는 모든 것.=>  HTTP URI를 통해 자원 명시=>  HTTP 메서드를 통해 해당 자원에 대한 CRUD 적용하는 것   그렇다면, API란 무엇인가?=>  응용 프로그램에서 사용할 수 있도록 운영 체제나 프로그래밍 언어가제공 기능을 제어할 수 있게 만든 인터페이스=> 프로그램끼리 통신 중재자 역할 REST- REpresentational State Transfer 약자- 전반적 웹 어플리케이션의 상호작용에 사용되는 웹 아키텍처 모델- 웹 통신 체계 범용적 스타일 규정한 아키텍처 API- Application Programming Interface 약자- 기존 응용..