I'm a Fig, Not a Pig

1. Next.js란?Next.js는 React 기반의 프레임워크로, 리액트에는 없는 서버 사이드 렌더링server-side rendering(SSR), 정적 사이트 생성static site generation(SSG), 증분 정적 재생성incremental static regeneration(ISR)과 같은 기능을 제공한다. 그렇다면 Next.js가 등장하게 된 배경은 무엇일까?   Next.js 등장 배경1. Static Site에서 SPA로과거의 대부분의 웹사이트들은 SSR과 MPA (Multi Page Application) 방식으로 동작했다. 하지만 페이지 전환시 깜박거리는 이슈로인해 사용자 경험이 좋지 못했고 동시에 스마트폰의 시대가 도래하면서 웹사이트를 사용할 때도 모바일 앱처럼 부드럽고 빠..

스터디 공부한거 정리하려고 커밋했는데 There was an error committing your changes: File could not be edited.이 뜨면서 커밋이 안된다. 몇 시간 전부터 안됐는데 아직도 그러네잉.. ㄱ-

in 문법: 객체에 특정 속성이 존재하는지 확인할 때 사용된다.typeof 문법: 변수의 타입을 확인할 때 사용된다 예제를 통해 알아보자.   1. in 문법interface Person { name: string; age?: number;}const person: Person = { name: "Alice", age: 30,};console.log("age" in person); // trueconsole.log("address" in person); // false    2. typeof 문법let x = "hello";let y = 42;let z = true;console.log(typeof x); // "string"console.log(typeof y); // "number"consol..

keyof 연산자는 객체 타입으로부터 프로퍼티의 모든 key들을 String Literal Union 타입으로 추출하는 연산자이다.주의할 점은 keyof 연산자는 오직 타입에만 적용할 수 있는 연산자라는 점이다. 따라서 값과 함께 사용하려고 하면 오류가 발생한다. typeof 연산자는 자바스크립트에서 특정 값의 타입을 문자열로 반환하는 연산자이다. 다른 기능은 타입을 정의할 때 사용하면 특정 변수의 타입을 추론하는 기능도 가지고 있다. type Person = typeof person;// 결과// {name: string, age: number, location:string}const person = { name: "John", age: 25,};   이러한 특징을 이용해 keyof 연산자를 다음과..

npm run build 이후 npm run start 실행 시 Failed to start serverError: listen EADDRINUSE: address already in use :::3000 에러가 발생했다. 찾아보니 EADDRINUSE 에러는 포트 3000이 이미 사용 중이기 때문에 발생하는 오류라고한다.따라서 포트 3000을 사용 중인 프로세스를 종료하거나 다른 포트를 사용하도록 설정해야한다. 1. 포트 3000을 사용 중인 프로세스를 종료하기먼저 포트 3000을 사용중인 프로세스를 찾아야 한다. Windows: netstat -ano | findstr :3000macOS/Linux: lsof -i :3000나는 Windows를 사용하고 있어서 명령어를 치면 아래와 같이 뜬다. 다음으로..

원격(remote) 브랜치인 uptream/feature 를 추적(track) 하는 새로운 브랜치를 생성하는 방법은 다음과 같다.git checkout --track -b feature origin/featuregit checkout -t upstream/feature 1. git checkout --track -b feature origin/feature : 새로운 로컬 브랜치 feature를 생성하고 origin/feature를 추적하는 명령어이다.2. git checkout -t upstream/feature : upstream/feature를 추적하는 동일한 이름의 로컬 브랜치를 자동으로 생성하는 명령어이다. 만약 로컬 브랜치에서 원격 브랜치의 이름과 해당 브랜치의 내용을 동일하게 로컬 브랜치로 ..

타입스크립트에서의 배열은 다음과 같이 정의할 수 있다.let numArr: number[] = [1, 2, 3]    문자열 배열 타입 정의만약 문자열을 담는 배열의 타입을 정의한다면 다음과 같이 하면 된다.let strArr: string[] = ["hello", "im", "winterlood"];    객체 배열 타입 정의객체를 담는 배열을 정의할 수 도 있다. 예시로 다음과 같은 객체 배열이 있다고 해보자.type Post = { title: string; content: string; author: { id: number; name: string; age: number; };};let posts: Post[] = [ { title: "첫 번째 게시글", con..

공식문서를 보면 Index Signature에 대한 내용으로 다음과 같이 적혀있다. Index SignaturesSometimes you don’t know all the names of a type’s properties ahead of time, but you do know the shape of the values. In those cases you can use an index signature to describe the types of possible values. 쉽게 말해 인덱스 시그니쳐는 객체의 프로퍼티의 key과 value의 타입을 정해주는 것을 말한다. 인덱스 시그니쳐는 객체의 모든 프로퍼티가 특정 타입을 갖도록 강제하며, {[key : T] : U} 형식이다. 예제를 통해 살펴보자...

1. JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요.타입 시스템은 크게 정적 타입 시스템과 동적 타입 시스템으로 나뉜다. 정적 타입 시스템은 코드 실행 전에 모든 변수의 타입을 고정적으로 결정하고 동적 타입 시스템은 코드를 실행하면서 유동적으로 변수의 타입을 결정한다. 정적 타입 시스템을 사용하는 언어에는 C나 Java 같은 엄격한 문법을 가진 언어들이 있고 동적 타입 시스템을 사용하는 언어에는 Python, JavaScript, Ruby와 같이 유연한 문법을 가진 언어들이 있다. JavaScript는 동적 타입 언어이다.배우기 쉽고 타입을 미리 설정하지 않아도 되지만, 실행 도중에 예상치 못한 타입이 들어와 타입 에러를 발생하는 경우가 있다. 또한 ..

저저번주에 모던 JS 스터디 하면서 클래스에 대해 공부했는데, 이번에는 TypeScript를 공부하며 또 만나게 되었다. 아직 class에 익숙하진 않지만, 알아갈 수록 유용하다고 생각된다. 오늘은 TypeScript에서 클래스를 사용하는 방법에 대해 살펴 볼 예정이다. 우선 JS 에서의 클래스를 먼저 간단하게 짚고가자.  1. JS Class클래스 선언class Student { } 클래스는 객체를 생성하는 틀이다. 붕어빵이 객체라면 붕어빵 기계는 클래스라고 볼 수 있다.   필드 선언class Student { // 필드 name; age; grade;}   생성자 선언생성자는 특수한 메서드로, 실질적으로 객체를 생성하는 함수이다.class Student { // 필드 name; a..