TypeScript5 [TypeScript] 타입스크립트란? 기초 원리와 설치 방법 TypeScript 기초 TypeScript란? 누가 TypeScript를 만들었을까? TypeScript와 JavaScript의 차이점 TypeScript의 장점 TypeScript의 작동 원리 TypeScript 설치 및 환경 구축 tsconfig.json 세팅 TypeScript 코드를 JavaScript 코드로 컴파일 하는 방법 TypeScript란? 타입스크립트는 타입 정의가 추가된 자바스크립트이다. 물론 Javascript도 number, string 등 타입이 있지만, 타입을 고정해 둘 수가 없다. 심지어, number로 선언한 변수에 string 타입의 값도 할당할 수 있다. 이는 미리 파악하기 힘든 런타임 에러를 발생시킬 가능성이 높다. 예를 들어, 사용자가 숫자를 입력할 거라고 생각하고.. 2023. 8. 3. [Typescript] 설치 및 초기 세팅 방법(node.js 환경) # Typescript 설치 및 세팅 방법 개요 - 타입스트립트는 node.js 관점에서는 npm module 중 하나일 뿐이다. - 따라서 `npm` 으로 typescript 모듈을 설치하고, `tsc` 명령어로 ts파일을 js파일로 컴파일하면 된다. # 설치 및 세팅 방법 1. node.js 설치 (3가지 방법이 있음) - 방법1(초보자 추천): node.js 홈페이지를 통해 설치한다. - 방법2: n 으로 설치(버전 업그레이드에 용이) - 방법3: nvm (버전 스위칭에 용이) 2. package.json 파일 생성 (프로젝트 루트 경로 터미널에서) - `npm init -y` : 디폴트 세팅으로 package.json파일을 생성해준다. (나중에 수정 가능) 3. typescript 모듈 설치 (.. 2023. 5. 8. [React] Next.js + ReduxToolkit + TypeScript 설정 방법 (next-redux-wrapper HYDRATE 사용 이유) # Next.js와 Redux 설정에 대하여 Next.js와 Redux를 연동하는 것은 생각보다 간단하지 않다. 왜냐하면, 본질적으로 Next.js 와 Redux 의 출신성분이 다르기 때문이다. 단순하게 정리하면, Next.js는 서버에서 돌아가고, Redux는 클라이언트(브라우저)에서 돌아간다. 여러 브라우저들에서 제각각 돌아가는 Redux의 전역상태를 서버에서 돌아가는 Next.js 에서 사용하려면 일이 복잡해진다. 이 글에서는 이에 대해 좀더 자세히 알아보고, 실제 설정하는 방법을 정리한다. (Next.js + Redux-Toolkit + TypeScript 연동 코드는 하단에 따로 정리해두었다. ) # Next.js 와 Redux의 관계 1. Next.js 는 "서버" 프레임워크다. 1) Next.. 2022. 8. 23. [TypeScript] enum 기초 사용법 (+ enum이 필요한 이유) # TypeScript 의 enum 이란? Typescript 는 JS의 기본 타입 외에도 몇 개의 타입을 더 제공하는데, 그 중 하나가 열거형이라고 불리는 enum 이다. enum은 말 그대로, 여러 값들에 미리 이름을 정의하여 열거해 두고 사용하는 타입이다. 예를 들어, 사용자를 권한별로 관리해야할 때 enum으로 정의해두고 사용한다. enum Auth { admin = 0, // 관리자를 0으로 표현 user = 1, // 회원은 1로 표현 guest = 2 // 게스트는 2로 표현 } 근데 도대체 왜 enum을 사용하는걸까? 그리고 언제! 어떻게! enum을 사용하는게 좋을까? enum의 기초 문법은 글 하단에서 살펴보기로 하고, 먼저 enum이 필요한 이유부터 정리해본다. # enum 의 필요성.. 2022. 8. 18. [React] TypeScript useRef 사용법 (+ ref 객체 타입) # TypeScript에서 useRef 사용 방법 TypeScript에서 useRef 사용시, 아래와 같이 제네릭과 초기값을 설정해야 한다. 1. 값 저장 용도 - 제네릭 : 값의 타입을 넣어준다. - 초기값 : 반드시 타입에 맞는 초기값을 할당해준다. // 값 저장 용도(number) const count = useRef(0); const text = useRef("") 2. DOM 취득 용도 - 제네릭 : 참조하는 HTML 엘리먼트를 넣어준다. - 초기값: null을 넣어준다. // DOM button 참조: 제네릭으로 html엘리먼트(button) 설정. 초기값은 null로 설정 const buttonRef = useRef(null); // DOM input 참조 : 제네릭으로 html엘리먼트(in.. 2022. 8. 11. 이전 1 다음
