경로 페이지Pages Router.├── src│ ├── pages│ │ ├── _app.tsx│ │ ├── _document.tsx│ │ ├── index.tsx│ │ └── search│ │ └── index.tsx // '/search'│ │ └── search.tsx // '/search/settiㅍng' App Router.├── src│ ├── app│ │ ├──layout.tsx│ │ ├── page.tsx│ │ └── search│ │ └── page.tsx // '/search' 쿼리 스트링'/search?q=쿼리스트링' Pages Routerimport { useRouter } fro..

웹 애플리케이션을 개발할 때 가장 중요한 선택 중 하나는 렌더링 방식이다.각 방식은 고유한 장단점을 가지고 있으며, Next.js를 통해 이러한 방식들을 유연하게 활용할 수 있다.렌더링 방식CSR (Client Side Rendering)클라이언트 사이드 렌더링은 웹 페이지의 렌더링을 사용자의 브라우저가 담당하는 방식이다. 사용자가 웹 페이지를 요청하면 서버는 가장 기본적인 HTML 구조인 텅 빈 index.html을 먼저 전달하고, 이후 필요한 자바스크립트 파일과 리액트 컴포넌트 등을 클라이언트로 전송한다.동작 과정사용자가 웹 페이지에 접속하면 서버는 초기 구조만 있는 index.html을 전송브라우저는 이 HTML 파일을 받은 후, 리액트 라이브러리와 컴포넌트들을 서버로부터 다운로드리액트가 로드되고 ..

유틸리티 타입은 타입스크립트가 자체적으로 제공하는 특수한 타입들로, 제네릭, 맵드 타입, 조건부 타입 등을 이용해 실무에서 자주 사용되는 타입들을 모아 놓은 것이다. 예를 들어 Readonly로 모든 프로퍼티를 읽기 전용으로 만들 수 있다.interface Person { name: string; hp: number;}const person: Readonly = { name: "devmark", hp: 30};person.name = ''; // ❌ 읽기 전용 프로퍼티 Partial로 모든 프로퍼티를 선택적으로 만들 수도 있다.const person: Partial = { name: "devmark",}; 이 글에서는 실무에서 자주 사용되는 유틸리티 타입들을 직접 구현하며 동작 원리를 이해해보려..

클라이언트와 서버의 통신웹 애플리케이션은 클라이언트(웹 브라우저)와 서버가 통신하며 데이터를 주고 받는다. 통신 과정웹브라우저에서 서버에게 원하는 데이터를 요청한다.서버는 데이터베이스에서 요청받은 데이터를 찾는다.서버가 데이터베이스에서 찾은 데이터를 꺼내온다.꺼내온 데이터를 서버가 웹브라우저에게 전달한다.클라이언트와 서버의 통신은 클라이언트가 서버에 데이터를 요청하면, 서버는 데이터베이스에서 요청받은 데이터를 찾아서 꺼내온 뒤 다시 클라이언트에게 전달하는 과정이라고 할 수 있다. API란?API(Application Programming Interface) 란 컴퓨터나 컴퓨터 프로그램 사이의 연결을 말한다.좀 더 풀어서 얘기하자면 웹 브라우저와 같은 클라이언트와 서버 사이의 연결, 즉 서버에 원하는 데이..

async와 await은 Promise 객체를 더욱 쉽게 작성할 수 있고, 직관적으로 코드를 해석할 수 있는 문법이다. Promise 객체Promise 객체의 필요성자바스크립트에서 비동기 작업을 처리하는 가장 기본적인 방법은 콜백함수를 사용하는 것이다. 자바스크립트 비동기 처리자바스크립트에서 비동기 처리는 여러 작업을 효devmark.tistory.com 먼저, 프로미스 객체를 사용해 간단한 비동기 처리 함수를 작성해보자.const delay = (ms) => { return new Promise((resolve) => { setTimeout(() => { resolve(); }, ms); });};const start = () => { delay(2000).then(() => ..

Promise 객체의 필요성자바스크립트에서 비동기 작업을 처리하는 가장 기본적인 방법은 콜백함수를 사용하는 것이다. 자바스크립트 비동기 처리자바스크립트에서 비동기 처리는 여러 작업을 효율적으로 처리하기 위한 핵심 개념이다.동기와 비동기의 차이를 이해하고, 자바스크립트가 싱글 스레드 환경에서 어떻게 비동기 작업을 처리하devmark.tistory.com setTimeout를 이용하면 작업을 비동기적으로 처리할 수 있다. setTimeout은 콜백함수와 ms 단위의 지연 시간을 매개변수로 받는다. 아래는 workA, workB, workC 함수를 비동기 함수로 작성하고, workD는 동기적으로 작성한 예시이다.const workA = (value, callback) => { setTimeout(() => ..

자바스크립트에서 비동기 처리는 여러 작업을 효율적으로 처리하기 위한 핵심 개념이다.동기와 비동기의 차이를 이해하고, 자바스크립트가 싱글 스레드 환경에서 어떻게 비동기 작업을 처리하는지 알아보자.동기와 비동기동기란?동기(Synchronous) 처리는 작업을 순차적으로 하나씩 처리하는 방식이다. 이전 작업이 완료되어야만 다음 작업을 시작할 수 있다. 스레드와 멀티 스레드작업 처리 방식을 이해하기 위해 먼저 스레드 개념을 알아보자.아래와 같이 workA, workB, workC 3가지 함수가 실행 후 종료되기까지 걸리는 시간이 각각 5초, 3초, 10초라고 가정해보자.const workA = ()=>{ //5초 console.log("workA");}const workB = ()=>{ //3초 co..

타입스크립트의 타입은 값들의 집합으로 이해할 수 있다.타입 계층도타입스크립트의 모든 타입은 계층 구조를 이루고 있다.최상위에는 unknown 타입(전체 집합)이 있고, 최하위에는 never타입(공집합)이 있으며, 그 사이에 다양한 타입들이 위치한다. 슈퍼타입과 서브타입슈퍼타입(부모 타입): 더 넓은 범위의 값을 포함하는 타입서브타입(자식 타입): 더 좁은 범위의 값을 포함하는 타입예를 들어,number 타입은 모든 숫자 값을 포함하고 20이라는 number 리터럴 타입은 오직 20만 포함한다. 따라서 number 리터럴 타입은 number 타입의 부분집합(서브타입)이다. 타입 호환성타입 호환성이란 A 타입의 값을 B 타입으로 취급해도 괜찮은지 판단하는 것이다. 업캐스팅 (Up Cast)서브타입의 값을 슈..

프로그래밍 언어의 동작 방식컴파일사람이 작성한 프로그래밍 언어를 컴퓨터가 이해할 수 있는 기계어로 변환하는 과정을 컴파일이라고 한다. 자바스크립트 컴파일 과정자바스크립트는 다음과 같은 단계를 거쳐 컴파일 된다.1. AST(추상 문법 트리) 변환컴파일러는 자바스크립트 코드를 AST(Abstract Syntax Tree)로 변환한다.AST는 코드 실행과 관계없는 요소들(공백, 주석, 탭 등)을 제거하고, 코드를 트리 형태의 자료구조로 쪼개서 저장한 형태이다.2. 바이트 코드 변환그 다음, AST를 컴퓨터가 실행할 수 있는 바이트 코드로 변환한다. 타입스크립트의 동작 과정타입스크립트는 자바스크립트에 타입 검사 단계가 추가된 형태이다.타입스크립트 코드를 AST로 변환AST를 분석하여 타입 검사 수행타입 오류가 ..