타입스크립트 (7) 썸네일형 리스트형 nextjs에서 eslint 세팅중 갑자기 Error: 'React' is not defined 등 각종 에러가 쏟아짐 nextjs 13 버전에 익숙해지고자 토이 플젝을 진행하고 있다. 초기 셋팅하는데부터 자꾸 문제가 터져서 매우 곤혹스러움.. 근데 error ESLint: Failed to load config "prettier" to extend from. 이런 에러가 뜨길래 서칭해봤더니 eslint-config-prettier 라이브러리가 필요하대서 설치. 그랬더니만 이번에는 Error: 'React' is not defined, Error: 'Image' is defined but never used. 등등 아주 다양한 에러를 뱉기 시작했다.. webpack에 runtime: automatic을 설정해줘야 한다는 글들을 보고, SWCplugin에서 설정도 추가해봤지만 달라지는 게 없음.. 그래서 이것저것 eslin.. [주니어도 하는 타입스크립트] 리액트에서 타입스크립트로 코드 짜기 (feat. 제네릭) 리액트 실무자로서, 타입스크립트를 활용한 리액트 프로젝트는 어떻게 만드는지 궁금해졌다. 그래서 제네릭 기법을 활용한 간단한 타입스크립트 코드를 리액트에서 실행시켜보기로 했다. 제네릭 사용법은 앞에서 이미 숙지한 바 있으므로 아래 링크로 대체한다. [주니어도 하는 타입스크립트] 제네릭이란 무엇이고 어떻게 쓰는것일까? 먼저 타입스크립트에서 예제를 통해 사용하는 일반적인 제네릭 사용법을 숙지해보자. type User = { id: number; name: string; gender: number; } function testUser(value: any): any { return value; } functio.. bomango.tistory.com 먼저 타입스크립트 코드 기반으로 리액트 프로젝트를 만드려고 한다.. [주니어도 하는 타입스크립트] 제네릭이란 무엇이고 어떻게 쓰는것일까? 먼저 타입스크립트에서 예제를 통해 사용하는 일반적인 제네릭 사용법을 숙지해보자. type User = { id: number; name: string; gender: number; } function testUser(value: any): any { return value; } function testUserInfo (obj: T): T { return obj; } let test1 = testUser(10); let test2 = testUserInfo('10'); let test3 = testUserInfo({id: 1, name: '홍길동', gender: 1}) test1의 경우 타입이 any로 설정되었으므로 숫자 10이 들어가도 아무 문제가 없다. 대신, 숫자가 아닌 스트링이나 다른 타입이 들어.. [주니어도 하는 타입스크립트] 리액트 프로젝트에서 타입스크립트 사용하기 타입스크립트를 이용하면 코드를 보다 안정적이고 재사용가능하게 짤 수 있다는 이점이 있어, 이 부분을 평소 쓰던 프레임 워크인 리액트에 이용하고 싶어졌다. 그래서 리액트에 타입스크립트로 프로젝트를 생성해보고자 했다. 마침 리액트 공식 문서에 이 부분이 친절히 명시되어 있다. 1. 타입스크립트로 리액트 앱 생성하기 npx create-react-app my-app --template typescript 혹은 yarn create react-app my-app --template typescript 로 명령어를 치면 tsx 확장자로 앱이 생성된다. 2. 리액트 앱에 타입스크립트 추가하기 이미 리액트 앱이 생성이 되어 있다면 install 혹은 add로 타입스크립트 추가가 가능하다. npm install --s.. [자바스크립트+타입스크립트] 왕초보도 이해한 '클로저' 완전 분석 클로저란 무엇일까? 여러 문서들을 살펴봐도 정확하게 개념을 깨우치기 너무 힘들었다. 대략 본인이 이해했을때 '클로저'란 외부에 존재하는 데이터에 접근할 수 있는(엮여있는) 함수를 말한다. function outerFunc() { let name = "bomango"; return function callName() { console.log(name); } } const func = outerFunc(); func(); 위의 예제에서 outerFunc라는 함수 안에는 name이라는 변수와 callName이라는 함수가 존재한다. 위 예제에선 callName이라는 함수가 클로저로 작용한다. 클로저가 작동하기까지의 과정을 실행 순서를 통해 살펴보자. 1. 먼저 func라는 변수에 outerFunc라는 함수가 저.. 인터페이스에서 readonly 제어가 안되는 오류 타입스크립트를 공부하면서 인터페이스에 readonly를 줬는데도 프로퍼티가 제어가 안되고 수정이 되는 오류?를 발견했다. 대체 왜 readonly가 안 먹히는 걸까! 고민하면서 열심히 찾아본 결과, 인터페이스의 개념과 상속 부분을 제대로 이해하지 못했다는 걸 깨달았다. interface Container { readonly name: string; readonly age: number; } class Person implements Container { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; console.log(`${this.name} is ${this.age}.. 타입스크립트 왕초보의 '클래스' 개념 정리 기본 자바스크립트에서 개발을 시작한 프엔들에게 클래스라는 개념은 너무나 거리가 멀다. 그래서 처음 클래스를 접하면서 납득하기? 어려웠던 개념 정리를 해보고자 한다. 1. 자바스크립트 클래스 vs 타입스크립트 클래스 클래스는 객체를 생성하기 위한 템플릿이자 '함수'다. 자바스크립트에서는 es6 이후 현재 사용되는 클래스 기반의 개발이 시작됐고, 타입스크립트로 넘어가면서 보다 엄격한 객체 지향형 개발이 가능해졌다. 타입스크립트의 클래스가 자바스크립트의 그것과의 가장 큰 차이는 프로퍼티에 타입을 선언해야 한다는 점이다. /* 자바스크립트 */ class Animal { constructor(name) { this.name = name } call () { return this.name } } let dog =.. 이전 1 다음
