# typescript

Typescript 숙제와 함께 익숙해지기
클리닝함수( '1', 2, '3' ) 이렇게 숫자와 문자가 섞인 array를 입력하면 1,2,3 이렇게 숫자로 깔끔하게 변환되어 나오는 클리닝함수를 만들어오고 타입지정내가 처음에 만들었던 함수는 이랬다.근데 클리닝배열 변수를 숫자만 이루어진 배열로 지정해주고,if문을
React + styled-components 설정 & global style & ThemeProvider 적용
https://kyounghwan01.github.io/blog/React/styled-components/basic/

React Quill Editor을 적용해보자
이번 프로젝트에서 위지윅(WYSIWYG) 에디터이다. 여러 에디터가 있지만 그 중에 react-quill이라는 에디터를 이용하게 되었다. 이 에디터를 선택하게 된 이유와 react-quill 기본이랑 커스텀 툴바, 이미지 resize와 handler등 총 3부분으로 나
타입스크립트 3
컴파일러에게 사용하는 타입을 명시적으로 지정하는 시스템컴파일러가 자동으로 추론하는 시스템 (명시적으로 지정하지 않으면 자동추론)타입이란 해당 변수가 할 수 있는 일을 결정한다.똑같은 코드를 타입스크립트로 사용한다면? noimplicityAny 옵션을 켜서 타입스크립트가
[Typescript] 공변성과 반공변성
기본적으로 타입스크립트에서는 공변성을 갖고 있지만, 함수의 매개변수는 반공변성을 갖고 있습니다 반환값은 공변성을 띄지만, 매개변수는 반공명성을 띕니다. 공변성 반공변성 참조 https://www.zerocho.com/category/TypeScript/post
[Effective TypeScript] 5장 38 any 다루기
아이템 38) any 타입은 가능한 한 좁은 범위에서만 사용하기 의도치 않은 타입 안정성의 손실을 피하기 위해서 any의 사용 범위를 최소한으로 좁혀야 합니다. 함수의 반환 타입이 any인 경우 타입 안정성이 나빠집니다. 따라서 any타입을 반환하면 절대 안 됩니다

(번역) tRPC와 리액트를 사용해 풀 스택 타입스크립트 앱 만들기
서버에서 Node + Express를 사용하고 클라이언트에서 React를 사용하여 작은 규모의 CRUD 애플리케이션을 만드는 방법을 안내합니다.
[TypeScript] 'textRef.current' is possibly 'null'.ts(18047)
'textRef.current' is possibly 'null'.ts(18047) 오류typescript에서 any를 사용하는 건 아니라 생각해서.. 두번째 방법으로...참고1 TypeScript: React useRef Hook참고2: how-to-fix-objec
[Next.js] 포트폴리오 웹 페이지 제작기 - 12. import 개선 (path alias)
현재 index.ts의 import들이 보기가 좋지 않다.가독성이 매우 떨어진다고 생각한다.이는 다른 파일에서도 마찬가지다.이런 식으로 상대 경로와 절대 경로가 뒤죽박죽 섞여있으면 가독성은 더욱 떨어지게 된다.path alias를 정의해서 이 문제를 해결할 수 있다.위

Next.js 폰트 최적화
next.js의 13버전에서는 폰트 최적화를 지원함.next/font에는 모든 폰트 파일에 대한 내장 자체 호스팅이 포함되어 있다.이 새로운 폰트 시스템은 성능과 개인 정보 보호를 고려하여 모든 Google 폰트를 편리하게 사용할 수 있게 한다.CSS 및 폰트 파일은
[TypeScript | 에러] Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.
CNA + ts로 미니 프로젝트를 진행하던 중, interface로 타입을 지정한 파일들을 폴더별로 나눠 저장한 후, 해당 파일들 안에서 export {} 를 해줬다.그런데, 이후 컴파일을 해보니 다음과 같은 에러 메세지가 떴다."Re-exporting a type w

[Next.js + Typescript] 개발 환경 세팅하기
create-next-app를 사용하여 Next.js + Typescript 개발 환경 구축하기 ⚙️자동으로 생성해주는 방법과 수동으로 생성해주는 두 가지 방법을 정리해 볼게요!자동으로 설정해주는 create-next-app를 사용하여 Next.js 앱 생성하기 \--

Redux-saga 소스 리펙토링
특정 데이터를 api를 call 하는 제네레이터를 사용하여 데이터를 불러오는 작업을 진행하는 데 요청사항으로 특정 url들을 base64로 인코딩을 해줘야 한다.하지만 여기서 해당 이미지들의 url들이 우리 서버에 위치하지 않기 때문에 api를 활용하여 수정하는 작업을

TypeScript 기초 문법
1. 타입추론 변수에 타입이 선언이 되어있지 않는 경우에는 코드를 읽고 타입을 유추해낸다.(할당값을 바탕으로 타입추론) 2. 타입명시 변수를 선언할 때 변수의 값의 타입을 명시(변수 값의 데이터 타입을 지정) 3. interface interface는 위와 같은

[Typescript] #0 타입스크립트를 쓰는 이유
쉽게 설명하자면 Javascript + Type 이라고 생각하면 된다. 자바스크립트의 모든 단점을 보완해 만든 언어이다. (JS의 확장버전) 아래 이미지로 쉽게 설명이 된다.자바스크립트는 동적 타입의 인터프리티 언어이다.이 말은 런타임(실행) 시에 타입을 결정해서 적용

[typeScript] useState 타입 동작
useState에 타입 적용하기 제네릭 타입으로 넘기면 타입스크립트가 usestate의 초기값으로 타입 추론! const [name, setName] = useState() 만약, 초기값이 없다면 undefined로 설정 example 초기값이 설정되어 있다면 초
[Challange] 유저정보 리코일로 관리하기
recoil은 사용해본 적이 없는데 왜 쉽다고 하는지 알 것 같다. useState쓰듯이 쓰면 되더라.atomuseRecoilValue