Jerry

"자바스크립트를 사용하다 보면 변수와 함수가 예상과 다르게 동작하는 경우를 본 적이 있을 겁니다.예를 들어 변수 선언 전에 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 약자- 기존 응용..

제가 브라우저에 URL을 입력하면 어떤 일이 일어나는지 쉽게 설명해볼게요. 이 과정은 우리가 매일 경험하는 일이지만, 실제로는 여러 단계의 복잡한 흐름이 진행됩니다.사용자가 웹 브라우저 https://www.example.com 입력URL 주소 중 Domain Name(도메인 이름)을 DNS 서버에서 검색DNS 서버에서, 해당 Domain Name과 일치하는 IP 주소 탐색탐색 후, 사용자가 입력한 URL 정보와 함께 전달브라우저는 HTTP Protocol 사용하여, 요청 메시지 생성HTTP 요청 메시지는 TCP/IP 프로토콜 사용하여 서버로 전송서버는,Response 메시지 생성하여다시 브라우저에게 데이터 전송브라우저는, Response 받아 파싱화면에 렌더TIP✨DNS는, https://www.exa..

리액트에 대해서 공부하는 사람이라면 대부분 듣거나 알고 있을 개념인 Props Drilling에 대해서 공부하는 도중..Props Drilling에 대한 해결책으로 여러 라이브러리나 리액트 내부 기능이 존재했다. 리액트에서 제공하는 상태 관리 기능은 Context API이 존재하고,상태 관리 라이브러리에는 Redux, Zustand, Recoil, Jotai 같은 것들이 대표적으로 있다.거의 모든 상태관리 라이브러리들은 이 api를 기반으로 개발되었다고 한다. 먼저, Props Drilling에 대해 알아보았다.기존에 상태 관리하는 기능이나 라이브러리가 없었던 시절(?), 컴포넌트 간에 상태를 공유하기 위해 Prop을 여러 계층을 통해 전달하는 것이 일반적이었다. 즉, Props Drilling은  상위..

캐싱: 캐싱은 자주 사용하는 데이터나 연산 결과를 임시 저장소(Cache)에 저장해, 동일한 요청이 들어왔을 때 저장된 값을 반환하여 성능을 향상시키는 기법 특징주로 디스크 I/O, 네트워크 요청, DB 조회 등과 같은 비싼 연산 비용을 줄이기 위해 사용됨캐시 계층(Cache Layer) 를 두어 속도가 빠른 저장소(RAM, SSD 등)에 데이터를 저장일반적으로 범용적인 데이터 저장소로 활용됨 예시 웹 브라우저 캐시: 방문한 웹사이트의 이미지, CSS, JavaScript 파일을 저장하여 다시 방문할 때 빠르게 로드데이터베이스 캐시: Redis나 Memcached 같은 인메모리 캐시를 사용하여 데이터베이스 조회 부담을 줄임CPU 캐시: 프로세서가 자주 사용하는 데이터를 L1, L2, L3 캐시에 저장하여..

#페이지라우팅- 경로에 따라 알맞은 페이지를 렌더링 하는 과정- /new -> new 페이지 렌더링Multi Page Application (MPA)- 애초에 서버가 여러 개의 페이지를 가지고 있음- 많은 서비스가 사용하는 전통적인 방식서버 사이드 렌더링 vs MPA- 서비가 여러 개의 페이지를 가지고 있는 것이 후자- 브라우저가 페이지 요청을 했을 때, 해당 페이지를 응답해주는 것이 전자But, 리액트는 이 방식을 따르지 않음- 페이지 이동이 매끄럽지 않고 비 효율적임- 다수의 사용자 접속 시, 서버의 부하가 심해 짐-SPA(Single Page Application)- 페이지 이동이 매끄럽고 효율적임- 다수의 사용자가 접속해도 크게 상관 없음- 필요한 요소만 교체동적 경로(Dynamic Segment..