2이번 글에서는 Vite와 TypeScript를 사용하여 React 프로젝트를 설정하는 방법을 단계별로 설명드리겠습니다.1. 폴더 생성 2. VSCode로 폴더 열기 3. 터미널 열기(Crtl + j) // git bash로 열어주세요. 4. Vite를 이용하여 프로젝트 생성npm create vite@latestvite@latest (파일이름) 으로 파일 이름을 지정해줘도 되지만,우리는 이미 파일을 열었기 때문에 .(현재 파일에 설치)를 입력해줘도 됩니다. 5. 설치과정Select a framework: React (리액트 사용할거니까)Select a variant: TypeScript / TypeScript + SWC둘 중에 어느거를 설치해도 상관없지만 저는 SWC버전으로 설치합니다. SWC는 Spe..

Componique 프로젝트는 다양한 최신 기술 스택을 바탕으로 UI 컴포넌트 라이브러리를 구축했습니다. 이번 글에서는 이 프로젝트에서 사용한 기술 스택을 하나씩 설명드리겠습니다.1. 개발 프레임워크 및 언어Next.jsComponique의 개발은 Next.js로 이루어졌습니다. Next.js는 React 기반의 프레임워크로 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원합니다. 이를 통해 SEO에 유리하고, 빠른 페이지 로딩 속도를 유지할 수 있었습니다. 특히 컴포넌트 기반 개발을 통해 코드 재사용성을 극대화했습니다.TypeScriptTypeScript는 자바스크립트의 정적 타입 언어로, 코드의 안정성과 유지보수성을 높이기 위해 사용했습니다. 프로젝트가 커지면서 발생할 수 있는 타입 관..

타입스크립트에서 타입을 지정하는 방법을 알려드리겠습니다.const a = { name: "Kim", age: 24,};console.log(a);//결과 : { name: 'Kim', age: '24' }변수 a를 const로 선언하고 객체를 할당했을 때,console.log로 변수 a를 출력하게 되면 다음과 같은 결과를 출력받게 됩니다. 이떄 타입스크립트에서는 Type을 지정할 수가 있습니다.const a: { name: string; age: number } = { name: "Kim", age: 24,};console.log(a);위의 코드와 같이 상수 a에 name은 문자열 age는 숫자형으로 명시해줌으로써 타입을 지정해줄 수가 있습니다.타입을 지정할때에는 해당 상수, 변수에 :를 붙이고 ..

TypeScripte(타입스크립트)는 자바스크립트의 상위 집합으로, 정적 타입을 지원하여 더 안정적이고 유지보수가 쉬운 코드를 작성할 수 있도록 도와주는 문법입니다.타입스크립트 작성을 위한 초기세팅을 알려드리도록 하겠습니다. 1. Node.js와 npm 설치타입스크립트 사용을 위해서는 최신 버전의 Node.js와 npm이 설치되어야 합니다.설치는 및에 공식 사이트에 접속하여 다운받으실 수 있습니다.Node.js — Run JavaScript Everywhere (nodejs.org) Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. 프로젝트..

리액트(React)는 현대 웹 개발에서 중요한 역할을 하는 라이브러리입니다.리액트의 핵심 개념과 JSX 문법을 간단히 설명하겠습니다.리액트는 UI를 컴포넌트 단위로 나눕니다. 각 컴포넌트는 트리 구조를 형성하며, 이 구조는 실제 DOM과 유사합니다.컴포넌트 트리는 DOM과 같은 형태로 구성됩니다. 리액트는 Virtual DOM을 사용하여 성능을 최적화합니다.Virtual DOM에서 변경 사항을 적용한 후, 실제 DOM에 필요한 부분만 업데이트하여 효율적으로 렌더링합니다.리액트에서는 JSX(Java Script XML) 을 사용합니다.(강제는 아니지만 권장,, 매우매우 높은 빈도로 사용중입니다.)JSX는 JavaScript 안에서 HTML을 작성할 수 있는 문법입니다.컴포넌트를 정의하고, render 함수..