본문 바로가기

전체 글24

Emotion 도입하기 리액트 프로젝트를 하면서 스타일링을 어떻게 할까 늘 고민이 됩니다~ 그래서 여러 프로젝트를 해보면서, 최종적으로 정착한 녀석을 소개합니다 ㅎㅎ. 역시 emotion 이모션이 젤 좋은거 같아요~ 먼저 개발자 경험(DX) 개선을 위해, Theme.d.ts 파일을 작성합니다. 코드 제안 자동 완성 기능을 위해 작성하는 것입니다. src/styles/Theme.d.ts declare module '@emotion/react' { export interface Theme { colors: { white: '#ffffff', black: '#000000', red: '#ff0000', }, backgroundColor: { primary: '#ffffff', secondary: '#000000', }, fontSi.. 2023. 6. 15.

1. TypeScript 기초 : 타입(Type) 타입스크립트를 공부하기 위한 목차 TypeScript 기초: 타입, 변수, 함수, 클래스, 인터페이스 등 TypeScript 특징: 제네릭, 모듈, 네임스페이스, 열거형 등 TypeScript 고급: 믹스인, 추상 클래스, 데코레이터, 고급 타입 등 TypeScript 활용: 프로젝트 구조 설계, 적용하기, 실제 애플리케이션 개발 등 1.1 타입 TypeScript에서 타입은 변수에 할당할 수 있는 값의 종류를 의미한다. 보통 사용되는 타입들은 다음과 같다. number, string, boolean 등의 Primitive 타입 객체 타입 배열 타입 튜플 타입 열거형 타입 any 타입 void 타입 등이 있습니다. 여기서 커스텀한 타입을 만들어서 사용할 수도 있다. (아래 예시의 Villein 인터페이스.. 2023. 2. 1.

Next.js Project Init $ npx create-next-app . --ts $ npm i recoil styled-reset styled-components babel-plugin-styled-components && npm i -D @types/styled-components .babelrc 생성 후 추가 : styled-components의 SSR, CSR 간 className이 달라서 발생하는 에러를 잡아줌 { "presets": ["next/babel"], "plugins": ["babel-plugin-styled-components"] } // 둘 중에 아무거나 사용, 아래는 조금 더 상세한 정보를 표시해줌 { "presets": ["next/babel"], "plugins": [ [ "babel-plugin-styl.. 2022. 3. 13.

Node server is running and available on the same network - run 'npm start' from react-native root 포트가 이미 사용중이라서 발생하는 에러이다. 사용중인 포트를 알아내서, 그 포트를 종료하면 해결된다. 현재 사용중인 전체 포트목록과 PID를 포함한 정보 확인하기 sudo lsof -PiTCP -sTCP:LISTEN 특정 8081 포트의 PID 확인하기 sudo lsof -i: 8081 사용중인 포트 종료하기 sudo kill -9 PID 2022. 2. 23.

이전 1 2 3 4 ··· 6 다음

티스토리툴바