시스템 요구 사항 Node.js 16.8 이상 macOS, Windows (WSL 포함), Linux을 지원합니다. 자동 설치 방법 새로운 Next.js 앱을 만드는 것을 추천하는 create-next-app을 사용하여 자동으로 모든 것을 설정합니다. 프로젝트를 만들려면 다음을 실행합니다: npx create-next-app@latest 설치 중에 다음과 같은 프롬프트가 표시됩니다: What is your project named? [프로젝트 이름] Would you like to use TypeScript with this project? Yes Would you like to use ESLint with this project? Yes Would you like to use Tailwind CSS w..
Next.js은 무엇인가? Next.js는 React 컴포넌트를 사용하여 웹 애플리케이션을 구축할 수 있는 프레임워크입니다. 내부에서 번들링, 컴파일 등의 도구를 추상화하고 자동으로 구성하여 애플리케이션 구축에 집중할 수 있습니다. 개인 개발자 또는 대규모 팀 모두 Next.js를 사용하여 대화형, 동적 및 빠른 웹 애플리케이션을 구축할 수 있습니다. 주요 기능 특징 설명 라우팅 (Routing) 서버 구성 요소 위에 구축된 파일 시스템 기반 라우터로, 레이아웃, 중첩된 라우팅, 로드 상태, 오류 처리 등을 지원합니다. 렌더링 (Rendering) Next.js에서 클라이언트 측 및 서버 측 렌더링을 지원하며, 클라이언트와 서버 컴포넌트를 사용하여 더욱 최적화된 정적 및 동적 렌더링을 제공합니다. 또한 ..
이 글은 2022년 7월에 작성된 것으로, RN으로 작업한 Inline Styling 방식이 Next.js로 진행된 웹 페이지의 스타일 작업 방식에 그대로 적용되었습니다. 그러나 RN과는 달리 디자인 요구 사항이 고도화되면서 Inline Styling 방식만으로는 스타일 코드를 관리하는 것이 어려워질 것으로 예상되어 팀 내에서 문제를 제기하고 다양한 해결 방안을 도출한 과정을 문서화한 것입니다. 현재 진행 중인 웹 프로젝트 CSS 적용 상태 날것 그대로의 Inline Styling 페이지단위로 styled component로 감싼 후 class 생성 같은 스타일인데 이름만 다른 class가 생성되는 경우 같은 이름의 class인데 스타일이 다른 경우 같은 스타일 & class이지만 여러 페이지, 컴포넌트..
맵드 타입(Mapped Type) 맵드 타입이란 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 문법을 의미합니다. 마치 자바스크립트 map() API 함수를 타입에 적용한 것과 같은 효과를 가집니다. 다음은 유니온 타입을 맵드 타입으로 변환하는 예제입니다. interface Person { name: string; age: number; } type PersonPartial = { [P in keyof Person]?: Person[P]; }; // 선택적으로 설정한 속성은 생략 가능 const person1: PersonPartial = { name: "Jane", }; type PersonReadonly = { readonly [P in keyof Person]: Person[P]; }; ..
유틸리티 타입 이란 타입스크립트에서는 유틸리티 타입이라는 것을 사용하여 타입을 쉽게 정의할 수 있습니다. 유틸리티 타입은 다양한 타입을 조작하고 결합하는 데 사용됩니다. Pick Pick 은 주어진 Type에서 지정된 속성만 선택하여 새로운 Type을 만듭니다. interface Person { name: string; age: number; address: string; } // bad type PersonNameAndAddress = { name: string; address: string; } // good type PersonNameAndAddress = Pick; const person: PersonNameAndAddress = { name: "John", address: "123 Main St..
타입스크립트를 사용하면서 제네릭에서 사용하는 extends와 인터페이스에서 사용하는 extends의 개념이 다르다는 점을 알고는 있었지만, 시간이 부족한다는 핑계로 자세히 알아보지 못한 것을 반성하며, 이에 대해 좀 더 자세히 알아보기로 마음먹었습니다. 지속적인 학습을 통해 더 나은 개발자로 성장하고자 하는 마음으로 글을 남깁니다. 🙏 제네릭에서의 extends 제네릭에서 extends 키워드는 타입 매개변수의 상한 경계(upper bound)를 지정하는 데 사용됩니다. 상한 경계는 특정 타입으로 제한하여 제네릭 타입이 해당 타입을 상속받거나 해당 인터페이스를 구현해야 한다는 제약을 설정합니다. 예를 들어, 와 같이 사용하여 타입 변수 T가 SomeClass를 상속받는 클래스일 수 있도록 제한할 수 있습..
1. 타입 추론의 기본 let x = 3; 위와 같이 x에 대한 타입을 따로 지정하지 않더라도 일단 x는 number로 간주됩니다. 이렇게 변수를 선언하거나 초기화할 때 타입이 추론됩니다. 이외에도 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입 추론이 일어납니다. 2. 인터페이스와 제네릭을 이용한 타입 추론 방식 interface Dropdown { value: T; title: string; } var items: Dropdown = { value: 10, title: "a", }; 인터페이스 Dropdown의 value는 타입파라미터를 참조하고 있고 실제 타입 파라미터에는 number을 넘겨주고 있기 때문에 value의 타입은 number로 추론되고 있습니다. 3. 복잡한 구조..
1. 제네릭 소개 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 개념입니다. 특히, 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는 데 사용됩니다. 그렇다고 타입스크립트의 제네릭이 C#, Java에서 사용되는 제네릭과 메커니즘이 같다는 의미는 아닙니다. 2. 제네릭의 기본 문법 function logText(text: T): T { return text; } logText('hi'); logText(10); logText(true); 3. 기존 타입 정의 방식과 제네릭의 차이점 제네릭을 사용하지 않고 기존 타입 정의 방식대로 하면 비슷한 기능의 함수를 구현하기위해 또 다른 함수를 만들어야 돼서 중복 코드가 생성됩니다. function logTe..
