Front-end

[Typescript] React에서 type, interface는 어디에 정의하는게 좋을까?

이 글의 디자인 패턴 부분은 TypeScript | Organizing and Storing Types and Interfaces (by Andres Reales)를 참고하여 작성하였습니다. 기본적으로는 컴포넌트 내부에 정의하되, 컴포넌트 간 의존성을 경계하기 만약 type이나 interface가 특정 컴포넌트에서만 필요한 것이라면 그냥 그 컴포넌트 내부에 정의하면 된다. 보통 이런 local적인 데이터에는 props가 있다. // StudentList 컴포넌트 interface Student { id: number; name: string; age: number; } interface StudentListProps { classNum: number; students: Student[]; } functi..

[Typescript] 이미 존재하는 CRA에 Typescript 추가하기

CRA 생성할 때부터 Typescript 설정하기 npx create-react-app my-app --template typescript 이랬다면 좋겠으나... 때로는 CRA 설치하고 온갖 라이브러리 설정도 다 해놓은 다음에 Typescript 설정을 하지 않았다는 사실을 알고 멘붕이 오기도 한다. 그 때는 TS에 필요한 패키지와 설정을 추가로 해주면 된다. 이미 존재하는 CRA에 Typescript 추가하기 1. 패키지 설치 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 2. 파일 확장자 .ts 혹은 .tsx로 바꾸기 jsx 문법을 사용하고 있던 파일은 .tsx로, 순수 js 파일은 .ts로 확장자..

[Typescript] interface vs type

Interface와 Type Alias 일반적으로 object 타입에 대해 타입 선언을 할 때에는 둘에 별 차이가 없다. 선언 예시 interface Cat { name: string; age: number; } type Cat = { name: string; age: number; } // 사용은 둘 다 똑같다 const kitty: Cat = { name: 'Kitty', age: 5 } 다만 공식 문서의 type alias와 interface 항목을 보면 다음과 같이 정의되어 있다. type alias A type alias is exactly that - a name for any type. 변수 옆에 콜론(:)으로 직접 타입을 지정하던 것을 여러번 재사용하고 별칭을 지어주기 위한 목적으로 만들어..

[React] React에서 불변성을 지켜야 하는 이유, 불변성이란?

불변성이란? react에서는 불변성을 지켜야 한다고 말한다. 불변성이 무엇인지부터 알아보자. 불변성은 어떤 객체나 배열의 내부 값이 직접 변경되지 않아야 한다는 것을 의미한다. 불변성을 지키기 위해서는 새로운 배열, Object를 생성해서 할당한다. let arr1 = [1, 2, 3]; arr1.push(4);// 배열을 직접 건드렸으므로 불변성을 해치게 된다. arr1 = [1, 2, 3, 4];// 새로운 배열을 할당했다. 참조값이 바뀌게 된다. // or arr1 = [...arr1, 4]; arr1 = arr1.concat(4); 어떤 배열이 불변성을 지킨다면 그 배열은 immutable 하다고 말하기도 한다. 불변성은 immutability라고 한다. React에서 불변성을 지켜야 하는 이유 ..

[CSS] 상하반전, 좌우반전, 크기조절 - scale, scaleX, scaleY 속성

scale은 보통 크기 조절을 할 때 쓰는 속성이라고 알고 있을 것이다. 그런데 scale로도 상하좌우 반전을 할 수 있다. 음수 값을 주면 된다. 상하반전 - scaleY transform: scaleY(-1); 좌우반전 - scaleX transform: scaleX(-1); scale로 한번에 모두 설정 * 반전도 시키면서 크기 조절을 하고 싶으면 값을 크거나 작게 조절 하면 됨 상하좌우 모두 반전 transform: scale(-1); // 또는 transform: scale(-1, -1); 좌우만 반전시키고 싶을 때 transform: scale(-1, 1); 상하만 반전시키고 싶을 때 transform: scale(1, -1); 좌우로 2배로 늘리면서 높이는 0.5배로 줄이는 동시에 상하반전 ..

[CSS] a 태그 padding, margin 제거하기 (React router dom의 Link 태그에도 해당)

a 태그를 다른 태그의 내부에 집어넣으면 위 아래에 미묘하게 padding이 생긴다. 또 a 태그를 inline 혹은 inline-block으로 만들었을 때 좌우로 margin이 생겨서, 좌우로 딱 붙이고 싶어도 붙지않는 경우가 생긴다. 이럴 때는 a 태그를 감싼 부모 태그에 font-size: 0을 준다. React에서 react-router-dom의 태그를 사용하고 있다면 Link 태그의 부모에도 마찬가지로 font-size: 0을 주면 된다.

[React] emotion 설치 및 typescript에서 사용하기 (pragma 제거방법)

react typescript 프로젝트 생성 및 emotion 설치 npx create-react-app [만들 프로젝트 경로] --template typescript npm install @emotion/react React가 v17 이후에 emotion을 사용하려면 다음과 같은 pragma를 앞에 입력해줘야 한다. /** @jsxImportSource @emotion/react */ import { css } from "@emotion/react"; 제거하는 방법은 바벨 설정을 건드리는 것인데 CRA로 만든 프로젝트에서는 eject(숨겨진 웹팩 설정 파일들을 보이게 하는 것)을 하면 되돌릴 수 없기 때문에 eject 하지 않고도 설정을 건드릴 수 있는 craco라는 패키지의 도움을 받을 것이다. pr..

[CSS] left로 가운데 정렬하기

left 속성이란? left 속성은 position이 static이 아니라 relative, absolute, fixed일 때 사용할 수 있다. static일 때 사용하면 아무 일도 벌어지지 않으므로 꼭 position 속성과 함께 사용되어야 한다. left는 absolute, fixed일 때는 브라우저 내부의 칸으로부터 지정한 만큼 떨어질 수 있게 한다. .div1 { left: 50%; transform: translateX(-50%); } 좌상단의 꼭짓점을 가운데에 맞추고, 좌상단 꼭짓점을 기준으로 했기 때문에 오른쪽으로 약간 쏠린 몸체를 가운데로 옮기기 위해 엘레먼트의 반만큼 왼쪽으로 옮기기 위해 transform: translateX(-50%)을 준다.