반응형 📍 Front-End/🜸 TypeScript10 [React/Typescript] styled-components로 global style 적용하기 1. 패키지 설치 타입스크립트 이용 시 @types/styled-components도 설치해주세요 yarn add styled-components yarn add -D @types/styled-components 2. global style 파일 생성 저는 루트(/src)디렉토리 하위에 style이라는 폴더를 생성하고 globalStyle.ts라는 파일에 아래 코드를 작성했습니다 import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` // 초기화 코드 `; export default GlobalStyle; 3. global style 적용 index.ts 파일로 돌아와서 global style.. 2022. 6. 10. React + Typescript + ESLint + prettier 환경 구성하기 (2022. 5. 29 기준) 📍 패키지 매니저로 yarn을 이용했습니다. 📍 Mac OS 기반으로 설치한 가이드입니다. 1. 프로젝트 생성 yarn create react-app template --template typescript // yarn create react-app ${프로젝트명} --template typescript --template typescript : typescript 모드로 프로젝트를 생성해준다는 명령어 옵션입니다! 2. ESLint 설치 yarn add -D eslint 3. ESLint의 config 파일을 초기화 $ yarn eslint --init You can also run this command directly using 'npm init @eslint/config'. Need to inst.. 2022. 5. 29. [TypeScript/타입스크립트] tsconfing.json에 대해 알아보자 .. 🧐 tsconfig.json 파일 생성 tsc --init tsconfig.json 파헤치기! 😵💫 루트 디렉터리 지정 //before "rootDir": "./", //after -> src 폴더의 상위 디렉토리에서는 .ts 파일 생성 불가 "rootDir": "./src", js파일로 컴파일된 ts파일의 디렉터리 지정을 하려면! //befor "outDir": "./", //after -> 현재 디렉토리에 build 디렉토리를 생성! "outDir": "./build", 브라우저에서 디버깅할 때 필요한 옵션 true로 설정하면 컴파일 시 IDE에 .map 파일이 생성되고 브라우저에서 ts 파일을 확인할 수 있다 "sourceMap": true, 2021. 7. 21. [타입스크립트/TypeScript] 타입스크립트의 OOP (객체지향 프로그래밍) 📍 객체지향이란? 객체(Object)는 변수와 메서드를 그룹핑한 것이다. 객제지향 프로그래밍은 서로 관련 있는 데이터와 함수를 객체로 정의해서 서로 상호작용할 수 있도록 프로그래밍하는 것이다. 절자치향 프로그래밍의 경우 데이터를 받아오고 처리하는 방법으로 프로그래밍되었다면 객제지향의 경우 프로그램을 '객체' 단위로 나누어 정의하고 각 객체들 간의 상호작용을 통해 프로그래밍을 해나간다. 레고 부품(=객체)을 조립하여 레고 완성품(=프로그램)을 만드는 것이라 생각하면 되겠다! 👍🏻 객체 지향의 장점 객체지향 프로그래밍은 코드 재사용을 통해 생산성을 높이고, 유지보수에 용이하다는 장점이 있다. 레고로 예를 들자면 똑같은 바퀴가 4개인 자동차를 만든다고 가정할 때, 차 본체에 맞는 타이어 하나를 고르면 나머지 .. 2021. 7. 15. 이전 1 2 3 다음 반응형
