Just Do IT!

tailwind CSS란? 맞춤형 사용자 인터페이스를 빠르게 구축하기 위한 유틸리티 우선 CSS 프레임워크이다. 공식 홈페이지: https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com 모든 HTML 파일, JavaScript 구성 요소 등에서 클래스 이름을 검색하고 해당 스타일을 생성한 다음 정적 CSS 파일에 작성하여 작동하기 때문에 빠른 코드 작..

react hook form이란? React 내에서 form, 양식을 만들 때 사용하는라 이브러리다. 복잡한 폼을 만들 때 간결하고 쉬운 코드 작성에 도움이 된다. 기존 폼에서 입력해야 하는 번거롱룬 작업을 줄여주며, 타입스크립트로 작성된 라이브러리이기 때문에 타입스크립트와 잘 맞는다. 불필요한 렌더링을 최소화한다. 공식 문서 https://react-hook-form.com/ Home React hook for form validation without the hassle react-hook-form.com 설치하기 npm install react-hook-form react-hook-form 적용 전 import { useState } from "react"; const Login = () => { ..

class-validator란? typescirpt를 사용할 때 decorator를 이용하여 편하게 검증할 수 있는 라이브러리이다. 유효성 검사를 하거나 데이터가 제대로 온 것인지 검증해야 할 때 유용하게 사용할 수 있다. 검증하고 싶은 파라미터 위에 데코레이터를 사용하면 검증할 수 있다. 타입스크립트 데코레이터(decorator)의 개념 상에 빌드되며 새로운 작업 방식을 제공 클래스 내 데코레이터의 도움을 받아 검증(validation) 규칙(rule)을 추가하게 해준다 클래스를 인스턴스화할 때마다 실제로 우리가 설정한 규칙에 따라 검증할 수 있다 특정 속성들(properties)을 검증하고자 하는 모델 및 클래스에 추가해야 한다 class-valiator로부터 검증 방식(validate method)..

class-transformer란? 자바스크립트에는 두 가지 형태의 객체가 있다. literal objects : Obejct 클래스의 인스턴스 / { } 표기법을 통해 생성 class(constructor) objects : 생성자, 프로퍼티 및 메소드가 있는 크랠스의 인스턴스 class-transformer 는 자바스크립트의 literal object를 class object로 쉽게 변환해준다. 서버에서 데이터를 얻고 나서 간편한 방식으로 호출할 수 있고, 이 호출한 데이터를 자동 변환해준다. 공식 문서 : https://github.com/typestack/class-transformer GitHub - typestack/class-transformer: Decorator-based transfor..

Webpack이란? 파일을 묶는(bundle) 것을 도와주는 도구 bundling & building & orchestration (묶고 빌드하고 종합하는 도구) ⇒ 코드를 묶음으로써 Http 요청의 양을 줄이는 걸 도와준다 코드를 최적화하고 빌드 절차를 추가하고, 추가 빌드 툴을 제공한다 코드를 묶어서 import를 덜 할 수 있게 해준다 코드를 최적화하여 적은 코드를 싣게 하고 사용자들이 적은 코드를 다운로드 할 수 있게 해준다 원하면 개발 서버를 추가할 수 있다 공식 문서에 더 정확한 설명이 적혀있으니 공식 문서를 읽어보는 것이 더 좋다. https://webpack.js.org/ webpack webpack is a module bundler. Its main purpose is to bundle..

이번 프로젝트에서 리액트로 만든 프로젝트를 타입스크립트로 리팩토링하는 과정에서 타입 에러가 생겨서 어떤 식으로 해결해야 할 지 몰랐던 때가 있었다. 팀원들끼리 엄청 고민하다가 다른 분이 @ts-ignore 라는 걸 알려주셔서 덕분에 그 주석 처리로 인해 타입 에러를 넘어갈 수 있었다. 정확한 용도를 몰라서 구글링하고 공식문서를 보고 정리해본다. @ts-ignore 란? // @ts-ignore suppression comment (억제 주석) type checking 할 때 바로 다음 행의 타입 에러를 무시할 수 있다 다음 행에 오류가 없을 경우 아무것도 하지 않는다. 어떨 때 사용하는가? 더 큰 프로젝트를 갖고 있고 코드에서 발생한 새로운 오류의 명확한 책임자를 찾기 힘든 경우 TypeScript의 두..

tsconfig.json 유데미 강의를 통해 tsconfig.json 파일에 있는 옵션들에 대해 공부해보았고 이를 정리해보았다. 아래 코드에 적힌 옵션들에 대한 설명이다. { "compilerOptions": { /* 기본 옵션 * ------------------------------------------------------------------------------------------------------------------------------------------------ */ // "incremental": true, /* 증분 컴파일 활성화 */ "target": "es5", /* ECMAScript 목표 버전 설정: 'ES3'(기본), 'ES5', 'ES2015', 'ES2016', ..

Typescript 란? JavaScript + Type 문법 큰 프로젝트에서 주로 쓰인다 자바스크립트는 dynamic typing이 가능하지만, 코드가 길어지고 프로젝트가 커지면 별로 좋지 않다 TypeScript는 타입을 엄격하게 지켜주고 에러 메세지가 더 정확하다 설치하기 1. node.js 가 우선 설치되어 있는지 확인한다 $ node -v // node version 확인 설치 되어 있지 않다면? https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 터미널에서 설치하기 $ npm install -g typescr..