분류 전체보기
-
JavaScript의 async, await에 대해 깊이 이해하기Javascript 2024. 7. 1. 21:36
JavaScript의 async, await에 대해 깊이 이해하기서론실험 방법실험에 사용할 함수 정의실험 결과아무것도 추가하지 않은 경우then을 사용한 경우await를 사용한 경우결론async가 붙으면 Promise를 반환합니다효과가 없는 예효과가 있는 예async와 await에 효과가 있는 예결론서론async/await와 Promise 개념에 대해 완벽하게 이해하지 못했다고 느껴, 좀 더 명확히 파악하기 위해 몇 가지 실험을 진행해 보았습니다. 이 글에서는 그 실험들을 통해 얻은 인사이트를 여러분과 공유하고자 합니다.실험 방법다음의 네 가지 함수를 사용해 실험을 진행합니다.실험에 사용할 함수 정의// Promise를 반환하는 async 함수async function a() { return new..
-
웹 개발의 핵심 개념들 : DOM과 가상 DOM, 모듈 번들러, 트랜스파일러, 바벨, 모듈, ESM, 비동기 처리, 그리고 프로미스Javascript 2024. 6. 18. 22:11
DOM과 가상 DOM, 모듈 번들러, 트랜스파일러, 바벨, 모듈, ESM, 비동기 처리, 그리고 프로미스: 웹 개발의 핵심 개념들DOM(Document Object Model)이란?브라우저의 작동 원리노드란?DOM 조작이란?가상 DOM(Virtual DOM)DOM 조작과 렌더링가상 DOM의 원리모듈 번들러란?모듈 번들러의 필요성트랜스파일러컴파일러와 트랜스파일러의 차이바벨(Babel)의 정의바벨의 필요성모듈의 정의모듈 분할의 장점ESM(ECMAScript Module)의 정의ESM의 필요성ESM의 사용 방법비동기 처리비동기 처리의 필요성Promise란?Promise 사용 방법then과 catch의 사용 방법DOM(Document Object Model)이란?DOM은 문서 객체 모델(Document Obje..
-
고유 식별자 선택 가이드: UUID와 ULID의 비교와 활용Codings 2024. 6. 16. 18:45
고유 식별자 선택 가이드: UUID와 ULID의 비교와 활용시작하며자동 증가형을 채택하고 싶지 않은 경우예측 가능성정보 유출의 위험예시UUID (Universally Unique Identifier)UUID v4ID 생성 방법UUID v7ID 생성 방법ULID (Universally Unique Lexicographically Sortable Identifier)ID 생성 방법UUID, ULID를 채택하지 않을 경우UUID v4UUID v7 / ULID요약시작하며UUID와 ULID는 데이터베이스와 분산 시스템에서 널리 사용되는 식별자입니다. UUID는 분산 시스템에서 널리 이용되며, 버전별로 생성 방법과 특성이 다릅니다. ULID는 UUID의 단점을 보완하기 위해 등장한 새로운 식별자로, 시간 순서대로 ..
-
TypeScript 타입 추론의 새로운 지평: infer의 매력Javascript 2024. 6. 16. 18:29
TypeScript 타입 추론의 새로운 지평: infer의 매력infer를 이해하기 위한 여정: Conditional Type부터 시작infer의 등장: 타입 추론의 진화infer의 등장: 타입 추론의 새로운 지평을 열다infer를 활용한 다양한 패턴infer와 함께 발전하는 TypeScript 생태계마무리TypeScript에서 infer는 마치 마법 주문처럼 타입 추론의 범위를 넓혀줍니다. 덕분에 더욱 정확하고 유연한 타입을 정의할 수 있게 되었죠. 하지만 infer는 늘 있었던 것은 아닙니다. 최근에 더욱 주목받는 이유는 무엇일까요?infer를 이해하기 위한 여정: Conditional Type부터 시작infer를 처음 접했을 때, 저는 갑작스러운 등장에 당황했고, 제대로 활용하는 방법을 몰라 이해하..
-
예제로 알아보는 TypeScript 유틸리티 타입Javascript 2024. 6. 16. 18:15
예제로 알아보는 TypeScript 유틸리티 타입유틸리티 타입이 뭐지?TypeScript가 제공하는 타입: 만드는 것RecordTypeScript가 제공하는 타입: 주로 프로퍼티를 가공하는 데 사용하는 것Pick / OmitExtract / ExcludePartial / RequiredNonNullableTypeScript가 제공하는 타입: 함수 관련ReturnTypeParametersAwaited직접 만들기마무리 유틸리티 타입이 뭐지? 유틸리티 타입은 TypeScript 내장 타입으로, 기존 타입에서 새로운 타입을 생성하는 데 사용됩니다. 라이브러리를 만들 때 자주 사용하지만, 유틸리티 타입이 뭔지 모르는 분들도 Partial나 Record 같은 건 본 적이 있을 거예요. 어떤 종류가 있는지는 문서를 ..
-
Deno v2를 향하여 - Deno v2, deno_std v1, Fresh v2에 대하여Javascript 2024. 6. 10. 21:35
Deno v2를 향하여 - Deno v2, deno_std v1, Fresh v2에 대하여Deno v2에 대하여Node.js 호환성 개선Node.js 호환성에 힘을 쏟는 배경Node.js 호환성의 현 상황Deno v2를 위한 Node.js 호환성 대응BYONM의 기본 활성화deno install 명령어의 동작 변경npm 및 Yarn 등과의 상호 운용성 개선Node.js 호환성에 관한 요약JSRDeno에서 JSR 패키지 사용 방법jsr: URLdeno add 명령어패키지 공개 (deno publish)Fast CheckJSR 도입 배경워크스페이스 기능 도입비추천 API의 삭제비추천 API의 안정화DENO_FUTURE 환경 변수 도입deno_std v1deno_std v1은 언제 나오나요?v1이 쉽게 릴리스..
-
PPR은 island 아키텍처인가?Javascript 2024. 6. 10. 21:18
PPR은 island 아키텍처인가?PPRisland 아키텍처PPR과 island 아키텍처의 차이클라이언트 컴포넌트와 island의 비교Astro의 렌더링 모델2층 아키텍처의 나선기술 선택의 나선요약 최근 Next.js의 새로운 렌더링 모델인 Partial Pre-Rendering(이하 PPR)이 장안의 화제인데요. 결론부터 말씀드리면, PPR과 island 아키텍처는 전혀 다른 개념입니다. 이 글에서는 PPR과 island 아키텍처의 차이점에 대해 설명하겠습니다. PPR 먼저 PPR과 island 아키텍처의 개요를 다시 정리해보겠습니다. PPR은 페이지를 static rendering으로 하면서도, 부분적으로 dynamic rendering을 가능하게 하는 렌더링 모델입니다. 구체적으로는, 화면을 빌드 ..
-
Next.js와 PPR: 프리렌더링의 신시대와 SSR/SSG 논쟁의 종결Javascript 2024. 6. 10. 21:08
Next.js와 PPR: 프리렌더링의 신시대와 SSR/SSG 논쟁의 종결렌더링 모델의 역사 돌아보기Pages Router 시대App Router 등장 이후Streaming SSRSSG/SSR에 있어 정적·동적 데이터의 혼재PPR이란?정적화와 Streaming 렌더링의 혜택PPR의 동작 관찰PPR 고찰SSG + Client fetch / Streaming SSR과의 비교PPR을 통한 React다운 설계 책임SSR/SSG 논쟁의 종결PPR의 단점 고찰감상 Partial Pre-Rendering(이하 PPR)은 Next.js v14.0에서 발표된 SSR과 SSG에 필적하는 새로운 렌더링 모델입니다. PPR은 개발 중인 기능으로, v15의 RC(Release Candidate) 버전에서 experimental ..