분류 전체보기
-
Next.js App Router 환경에서 dynamic 함수를 사용하여 명시적으로 코드 스플리팅하기개발 2024. 1. 19. 21:58
next.js app router는 기본적으로 코드 스플리팅을 제공하지만 이는 페이지 단위의 코드 스플리팅입니다. 코드 스플리팅: 애플리케이션의 자바스크립트 코드를 여러 개의 작은 부분으로 나누어 로딩하는 기술. 초기 로딩 시간을 최적화하고 성능을 향상시킬 수 있는 장점이 있다. Next.js의 자동 코드 스플리팅은 페이지 기반으로 이루어지며, 페이지 간에 자동으로 필요한 코드만을 로드합니다. 그러나 페이지 내에서 컴포넌트 단위로 동적으로 로딩이 필요한 경우에는 dynamic 함수를 사용하여 명시적으로 코드 스플리팅을 수행하는 것이 도움이 됩니다. 이는 특히 큰 규모의 애플리케이션에서 특정 기능이나 모듈이 사용자의 상호 작용에 따라 동적으로 로딩되어야 할 때 유용합니다. 따라서, 페이지 단위의 자동 코드..
-
48_Module모던 자바스크립트 딥 다이브 독학 2024. 1. 8. 09:22
모듈의 일반적 의미 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈은 기능을 기준으로 파일 단위로 분리한다. 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. 자신만의 파일 스코프를 갖는 모듈의 자산(변수, 함수, 객체 등)은 기본적으로 비공개 상태, 캡슐화되어 다른 모듈에서 접근할 수 없다. 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. → export를 통해 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다. 공개된 모듈의 자산은 다른 모듈에서 재사용할 수 있다. 모듈 사용자는 import를 통해 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다. 재사용성..
-
47_Error Handling모던 자바스크립트 딥 다이브 독학 2024. 1. 7. 17:50
에러 처리의 필요성 에러가 발생하지 않는 코드를 작성하는 것은 불가능하다. 에러는 언제나 발생할 수 있으므로 발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다. try … catch 문을 사용해 발생한 에러에 적절하게 대응하면 프로그램이 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있다. 에러 처리 방법은 크게 두 가지로, querySelector나 Array#find 메서드처럼 예외적인 상황이 발생하면 반환하는 값(null 또는 -1)을 if 문이나 단축 평가 또는 옵셔널 체이닝 연산자를 통해 확인해서 처리하는 방법, 에러 처리 코드를 미리 등록해 두고 에러가 발생하면 에러 처리 코드로 점프하도록 하는 방법이 있다.(try…catch…finally) 언제나 에러나 예외적인 상황이 ..
-
46_async/await모던 자바스크립트 딥 다이브 독학 2024. 1. 5. 00:52
제너레이터 ES6에서 도입된 제너레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다. 제너레이터와 일반 함수의 차이 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다. 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다. 제너레이터 함수의 정의 // 제너레이터 함수 선언문 function* genDecFunc() { yield 1; } // 제너레이터 함수 표현식 const genExpFunc = function* () { yield 1; }; // 제너레이터 메서드 const obj = { * genObjMethod() { yield 1; } }; // 제너레이터 클래스 메서드..
-
45_Promise모던 자바스크립트 딥 다이브 독학 2024. 1. 4. 11:31
자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 “콜백 헬”로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. ES6에서 비동기 처리를 위한 또 다른 패턴으로 도입한 것이 프로미스이다. 전통적인 콜백 패턴이 가진 단점 보완, 비동기 처리 시점을 명확하게 표현 가능한 장점이 있다. 프로미스는 비동기 처리 상태와 처리 결과를 관리하는 객체다. 비동기 처리를 위한 콜백 패턴의 단점 1. 콜백 헬 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료된다. 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료된..
-
44_REST API모던 자바스크립트 딥 다이브 독학 2024. 1. 3. 15:29
REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 REST API는 REST를 기반으로 서비스 API를 구현한 것 REST의 기본 원칙을 성실히 지킨 서비스 디자인을 RESTful 이라고 표현한다. REST API의 구성 자원(URI), 행위(HTTP 요청 메서드), 표현(페이로드) REST는 자체 표현 구조로 구성되어 REST API만으로 HTTP 요쳥의 내용을 이해할 수 있다. REST API 설계 원칙 URI는 리소스를 표현하는 데 집중 리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용 // 좋은 예시 GET /todos/1 // 나쁜 예시 GET /getTodos/1 GET /todos/show/1 HTTP 요청 메서드를 통해 행위에 대한 정의 GET..
-
43_Ajax모던 자바스크립트 딥 다이브 독학 2024. 1. 1. 19:31
전통적인 방식의 웹페이지 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된 HTML 전체를 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생 변경할 필요가 없는 부분까지 처음부터 다시 렌더링 → 화면 전환이 일어나면 화면이 순간적으로 깜박이는 현상 발생 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지 다음 처리는 블로킹됨 Ajax 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 브라우저에서 제공하는 Web API인 XMLHttpRequest(HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공) 객체를 기반으로 동작한다. 서버로부..
-
42_Synchronous & Asynchronous모던 자바스크립트 딥 다이브 독학 2023. 12. 27. 16:21
동기 처리와 비동기 처리 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. (한 번에 하나의 작업만 실행할 수 있는 싱글 스레드 방식으로 동작한다) 처리에 시간이 걸리는 작업을 실행하는 경우 블로킹(작업 중단)이 발생한다. 동기 처리: 현재 실행 중인 작업이 종료할 때까지 다음에 실행될 작업이 대기하는 방식 작업을 순서대로 하나씩 처리하므로 실행 순서가 보장되는 장점 앞선 작업이 종료할 때까지 이후 작업이 블로킹되는 단점 비동기 처리: 현재 실행 중인 작업이 종료되지 않은 상태라 해도 다음 작업을 곧바로 실행하는 방식 작업의 실행 순서가 보장되지 않는 단점 블로킹이 발생하지 않는 장점 타이머 함수인 setTimeout, setInterval, HTTP요청, 이벤트 핸들러는 비동기 방식으로 동작..