프론트엔드 (37) Nextjs블로그에 Utterances댓글 달고 다크모드 적용하기 블로그에 댓글기능을 추가하고 싶어서 알아보던 중, 깃헙의 utterances를 사용했다.이유는 깃헙에 로그인을 해야 댓글을 달 수 있고, 마크다운을 사용할 수 있고, 직접 구현하지 않고 삽입해서 바로 사용가능하기 때문이다.Create Repository & Install Utterances우선 댓글용 레포지터리를 새로 생성한 뒤,Install Utterances에서 앱을 설치하고 새로 생성한 레포지터리를 연결한다.그럼 아래 스크립트가 생성된다.Comment 컴포넌트 생성리액트는 xss보안 이슈 때문에 위 스크립트가 적용된 컴포넌트를 생성해줘야한다.import React, { useEffect } from "react"const COMMENTS_ID = 'comments-container';export d.. 1분만에 Nextjs에서 다크모드 구현하기 (next-themes + tailwindCSS) Nextjs에서 다크모드 구현하기본 블로그는 next-themes(next-themes) + tailwindCSS를 사용하여 다크모드가 구현되어 있고, 그 방법이 매우 간편하여 소개하고자 한다.next-themesnext-thems설치$ npm install next-themes or$ yarn add next-themesnext-themes 사용Nextjs의 layout 파일에서 'use client'를 사용하고 있을 경우, 공식문서 그대로 컴포넌트를 ThemeProvider로 감싸주면 된다.// layout.tsximport { ThemeProvider } from 'next-themes'function MyApp({ Component, pageProps }) { return ( .. [TS] keyof 키워드, 타입변환기(mapping) 1. keyof 연산자keyof Object object타입이 가지고 있는 모든 key값을 union type으로 합쳐서 내보내준다.interface Person { age: number; name: string;}type PersonKeys = keyof Person; //"age" | "name" (리터럴)타입이 됨let a :PersonKeys = 'age'; //가능let b :PersonKeys = 'ageeee'; //불가능2. Mapped Typesobject내의 속성들을 다른 타입으로 한번에 변환하고 싶을 때 유용한 방법type Car = { color: boolean, model : boolean, price : boolean | number,}; 👇🏻 전부 string 타입.. declare & d.ts 파일 1. declare 키워드 : 변수 재정의일반 js파일 등에 있던 변수를 사용 시 에러나지 않도록 재정의할 때 사용declare let 변수 :타입;declare가 붙은 코드들은 js로 변환되지 않는다.👉🏻 컴파일러에게 힌트를 주는 역할의 코드이기 때문📌 tsconfig.json에서 allowJS: true로 설정하면 js파일도 타입지정이 알아서 implicit 하게된다.2. ambient modulets파일끼리 변수를 가져다 쓰고 싶을 경우, import/export해서 쓰면 되지만,ts파일은 __ambient module(글로벌 모듈)__이므로 ⭐️ import/export없이도 모든 ts파일에서 그냥 가져다 쓸 수 있다.📌 다른 파일에 영향을 끼치지 않기 위해 로컬모듈로 만들려면? __imp.. React(+Redux) + TypeScript 1. 설치신규설치: npx create-react-app 프로젝트명 --template typescript기존프로젝트에 설치: npm install --save typescript @types/node @types/react @types/react-dom @types/jest 2. tsx파일JSX문법이 있는 파일일 경우 tsx파일로!⭐️ JSX 타입지정let box :JSX.Element = ⭐️ component 타입지정 function Profile() :JSX.Element{ return ( 프로필입니다. ) }⭐️ props 타입지정function Profile(props :{name: string, age :string}) :JSX.Element{ return ( {.. [TS] Generic, 조건부 타입지정 아래와 같이 파라미터를 가변적으로 받고싶은 함수가 있을 경우, 파라미터를 unknown타입으로 받고 있기 때문에 return값인 파라미터[0]도 unknown타입이 되어 연산 시 에러가 발생한다. function 함수(x :unknown[]) { return x[0] } let a = 함수([4,2]) // 해결법은 narrowing !하지만, narrowing이 불편하고 귀찮다면? Generic함수 만들기(파라미터로 타입을 입력하는 함수)Generic함수선언시점이 아닌 __생성시점__에 __타입을 명시__하여 가변적으로 타입을 사용할 수 있게 한다.즉, 함수의 파라미터로 타입을 입력가능하게 함 funcion 함수명(){}한번의 선언으로 다양한 타입에 재사용 가능이때 타입 파라미.. [TS] Narrowing & Assertion 1. Narrowing타입스크립트에서 애매한 타입을 다룰 때 타입을 하나로 정해주는 것을 뜻한다.(일종의 코딩 방식 중 하나)typescript는 타입을 엄격히 다루기 때문에, 아래와 같은 함수는 에러를 발생시킨다.이유는 x라는 파라미터는 union타입이기 때문에 연산할 수 없기 때문. 👉🏻 union type 등 때문에 어떤 변수 타입이 아직 불확실하다면 if문 등으로 Narrowing(타입확정)해줘야 조작가능하다.if문은 끝까지 써야 안전하다. ⭐️ Narrowing으로 판정해주는 문법들typeof 변수, 속성명 in 오브젝트자료, 인스턴스 instanceof 부모 type Fish = {swim :string} type Bird = {fly :string} // ** 오브젝트 자료 배타속.. [TS] interface, index signature 1. interface 문법interface키워드로도 타입변수를 생성할 수 있다.interface 인터페이스명 { key :type }type alias와 용도와 기능이 같다.=interface Square { color :string, width :number }type Square = { color :string, width :number }2. interface의 장점⭐️ extends로 복사가능 interface Person { name :string } interface Student extends Person { age :number } let student :Student = {name:'kim', age:20}⭐️ implements 키워드 사용가능 (class 타입체크기능?)cla.. 이전 1 2 3 4 5 다음
