본문 바로가기

전체 글115

Vite를 사용해야 하는 이유 이런 문제점이 있었어요브라우저에서 ESM(ES Modules)을 지원하기 전까지, JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었습니다. 그래서 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결하는 "번들링(Bundling)"이라는 해결 방법을 사용해야 했습니다.Webpack, Rollup 그리고 Parcel과 같은 도구는 이런 번들링 작업을 진행해줌으로써 프런트엔드 개발자의 생산성을 크게 향상시켰습니다.하지만 애플리케이션이 점점 더 발전함에 따라 처리해야 하는 JavaScript 모듈의 개수도 극적으로 증가하고 있습니다. 심지어 수천 개의 모듈이 존재하는 것도 대규모 프로젝트에서는 그리 드문 일이 아닙니다. 이러한 상황에서 JavaScript 기반의 도구는 성능 병목.. 2024. 6. 27.
[공식문서-Handbook] Everyday Types(언어의 원시 타입들) 이번 장에서는 JavaScript 코드에서 찾아볼 수 있는 가장 흔한 타입들을 다루고, 이 타입들을 TypeScript에서 어떻게 기술하는지 각각의 대응하는 방식에 대하여 설명하겠습니다. 이 문서에서 빠짐없이 전부 다루고자 하는 것이 아니며, 타입을 만들고 사용하는 더 많은 방법들은 이후 이어지는 장에서 다룰 것입니다. 타입은 단지 타입 표기 이외에도 훨씬 다양한 위치에 나타날 수 있습니다. 타입 자체에 대하여 배우는 것과 더불어, 새로운 구조체를 만들고자 할 때 타입을 참조하는 경우들에 대하여 알아볼 것입니다. 우선 JavaScript 또는 TypeScript 코드를 작성할 때 가장 기본적이면서 흔히 만날 수 있는 타입들을 다시 살펴보는 데에서 시작해 보겠습니다. 이 타입들은 이후에 다루는 보다 복잡한.. 2023. 10. 4.
[공식문서-Handbook] The Basics(기초) JavaScript의 모든 값은 저마다 다양한 동작들을 내장하고 있으며 이는 다양한 연산(Operation)을 실행하여 확인할 수 있습니다. 이는 다소 추상적으로 들릴 수 있는데, 간단한 예시로 message라는 이름의 변수에 대하여 실행할 수 있는 몇몇 연산들을 살펴보겠습니다. // 'message'의 프로퍼티 'toLowerCase'에 접근한 뒤 // 이를 호출합니다 message.toLowerCase(); // 'message'를 호출합니다 message(); 위 코드를 분석해보면, 우선 첫 번째 실행 코드 줄에서는 toLowerCase라는 프로퍼티에 접근한 뒤 이를 호출합니다. 두 번째 줄에서는 message를 직접 호출하려 하고 있습니다. 하지만 message의 값이 무엇인지 모른다면 - 일반적.. 2023. 9. 27.
[공식문서] TypeScript for JavaScript Programmers 현대 프로그래밍 언어에서 TypeScript와 JavaScript의 관계는 다소 독특합니다. TypeScript은 JavaScript 위에 레이어로서 자리잡고 있는데, JavaScript의 기능들을 제공하면서 그 위에 자체 레이어를 추가합니다. 이 레이어가 TypeScript 타입 시스템입니다. JavaScript는 이미 string, number, object, undefined 같은 원시 타입을 가지고 있지만, 전체 코드베이스에 일관되게 할당되었는지는 미리 확인해 주지 않습니다. TypeScript는 이 레이어로서 동작합니다. 이는 이미 존재하고 잘 동작하는 JavaScript 코드는 동시에 TypeScript 코드라는 의미지만, TypeScript의 타입 검사기는 사용자가 생각한 일과 JavaScr.. 2023. 9. 27.
[공식문서] React 배우기 - UI 구성하기 React는 사용자 인터페이스(UI)를 렌더링하기 위한 JavaScript 라이브러리입니다. UI는 버튼, 텍스트, 이미지와 같은 작은 단위로 구성됩니다. React를 사용하면 재사용 가능하고 중첩 가능한 컴포넌트로 결합할 수 있습니다. 웹 사이트부터 휴대폰 앱까지 화면의 모든 것을 컴포넌트로 분류할 수 있습니다. 이 장에서는 React 컴포넌트를 만들고, 사용자 정의하고, 조건부로 표시하는 방법을 배웁니다. 이 챕터에서 다룰 내용 첫 번째 React 컴포넌트를 작성하는 방법 멀티 컴포넌트 파일을 생성하는 시기와 방법 JSX로 JavaScript에 마크업을 추가하는 방법 JSX와 함께 중괄호를 사용해 컴포넌트에서 JavaScript 기능에 엑세스하는 방법 prop으로 컴포넌트를 구성하는 방법 컴포넌트를 .. 2023. 9. 22.
[공식문서] React - React로 사고하기 React는 디자인을 바라보는 방식과 앱을 빌드하는 방식을 바꿀 수 있습니다. React로 사용자 인터페이스를 빌드할 때는 먼저 컴포넌트라고 하는 조각으로 분해합니다. 그런 다음 각 컴포넌트에 대해 서로 다른 시각적 상태를 기술합니다. 마지막으로 컴포넌트를 서로 연결해 데이터가 흐르도록 합니다. 이 튜토리얼에서는 React로 검색 가능한 제품 데이터 테이블을 구축하는 사고 과정을 안내합니다. mockup으로 시작하기 이미 JSON API와 디자이너의 목업이 있다고 가정해 보겠습니다. JSON API는 다음과 같은 데이터를 반복합니다. [ { category: "Fruits", price: "$1", stocked: true, name: "Apple" }, { category: "Fruits", price.. 2023. 9. 17.
[공식문서] React - 튜토리얼: Tic-Tac-Toe 이 튜토리얼에서는 React를 사용하여 작은 틱택토 게임을 만들 것입니다. 이 튜토리얼은 기존의 React 지식을 가정하지 않습니다. 튜토리얼에서 배울 기술은 모든 React 앱을 구축하는 데 필수적이며 완전히 이해하면 React에 대한 심도 있는 이해를 얻을 수 있습니다. 참고 이 튜토리얼은 직접 해보며 학습하고 무언가 구체적인 것을 빠르게 만들어 보기를 선호하는 사람들을 위해 설계되었습니다. 각 개념을 단계별로 배우는 것을 선호하는 경우 "UI 설명"부터 시작하십시오. 이 튜토리얼은 다음 섹션으로 나뉩니다: 튜토리얼을 위한 설정: 튜토리얼을 따라갈 수 있는 시작점을 제공합니다. 개요: React의 기초인 컴포넌트, 프롭스(props), 상태(state)를 가르칩니다. 게임 완성: React 개발에서 .. 2023. 9. 16.
[공식문서] React - Quick Start React 문서에 오신 것을 환영합니다! 이 페이지에서는 React 개념 중 일상적으로 사용하는 80%에 대한 소개를 제공합니다. 여러분은 다음을 배우게 됩니다. 컴포넌트를 만들고 중첩하는 방법 마크업과 스타일 추가 방법 데이터를 표시하는 방법 조건과 목록을 렌더링하는 방법 이벤트에 응답하고 화면을 업데이트하는 방법 컴포넌트 간 데이터 공유 방법 컴포넌트 만들기 및 중첩하기 React 앱은 컴포넌트로 구성됩니다. 컴포넌트는 자체 로직과 외형을 가진 UI(사용자 인터페이스)의 일부입니다. 컴포넌트는 버튼처럼 작을 수도 있고 페이지 전체처럼 크게 만들 수도 있습니다. React 컴포넌트는 마크업을 반환하는 JavaScript 함수입니다. function MyButton() { return ( I'm a bu.. 2023. 9. 16.
[공식문서] NextJS - Deploying Your Next.js App 이 마지막 기본 레슨에서는 Next.js 앱을 프로덕션 환경에 배포하는 방법을 알아보겠습니다. Next.js의 창시자들이 만든 플랫폼인 Vercel에 Next.js 앱을 배포하는 방법을 배우겠습니다. 또한 다른 배포 옵션에 대해서도 이야기할 것입니다. 사전 준비: 이 레슨을 수강하려면 GitHub 계정이 필요합니다. 이 레슨에서 다음을 배우게 됩니다. Next.js 앱을 Vercel에 배포하는 방법 DPS 워크플로우: 개발(Develop), 미리보기(Preview), 배포(Ship) Next.js 앱을 자체 호스팅 제공 업체에 배포하는 방법 시작 코드 다운로드(선택 사항) 이전 레슨에서 진행 중이 아니라면 다음 레슨을 위해 시작 코드를 다운로드하고 설치하고 실행할 수 있습니다. 이렇게 하면 이전 레슨의 .. 2023. 9. 14.

티스토리툴바