DevSeong2

팀 프로젝트 협업하기 (git 전략)

Wed, 25 Oct 2023 04:18:33 GMT

팀 프로젝트 협업하기

공유용으로 작성. Organization을 사용하려면 github 블로그에 작성한 글 참고 TIL 23-10-24

깃 전략 수립

github으로 협업하며 프로젝트 전반을 관리하기 위해 제공하는 기능들을 사용한다. 순서대로 기록해보았다.

커밋

커밋 메시지도 각자 작성하는 방식이 다르다. 특정 커밋을 보고 어떤 내용인지 충분히 추측 가능해야 한다. 그래야 가독성이 높아지고 개발 속도가 빨라지며 코드에 대한 리뷰도 수월해진다. 따라서, 공통적인 커밋 메시지 규칙을 정한다.

커밋 유형: 작업 내용 (#이슈 넘버)

type: subject (#issue_number)

커밋 유형

feat : 새로운 기능 추가
fix : 버그 수정
docs : 문서 수정
style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
refactor : 코드 리펙토링
test : 테스트 코드, 리펙토링 테스트 코드 추가
chore : 빌드 업무 수정, 패키지 매니저 수정

규칙

type은 소문자로 작성
제목 끝에 마침표 넣지 않기
명사형으로 작성

Issue

이슈(Issue)란 프로젝트 작업 단위이다. 개발, 오류, 건의 등 프로젝트에서 발생한 문제들을 이슈로 생성하여 관리한다. 커밋 메시지에 이슈 번호를 포함하면 이슈에 대한 커밋 내역들을 해당 페이지에서 확인할 수 있다. 작업을 시작하기 전 이슈를 생성하는 것이 가장 먼저 하는 일이다. 작업할 일을 명시하는 작업.

이슈 템플릿을 사용하면 일관된 양식으로 작성할 수 있다. 템플릿을 등록하면 이슈를 기능 구현과 버그 수정으로 구분하여 선택할 수 있다.

이슈를 생성할 때는 담당자(assignees)를 지정하고 Labels을 사용해 작업 유형을 구분한다. 그리고 Projects를 지정하면 프로젝트에서 이슈들을 한 눈에 확인할 수 있다. 제목은 다음과 같이 작성한다. [작업유형/기능명] 내용 작업유형은 커밋 메시지 컨벤션을 따른다.

Github Issue Templates으로 Issue 쉽고 체계적이게 작성해보기

Issue 작성법

템플릿에 맞게 Issue 내용 작성
담당자(Assignee)를 지정
라벨 달기
프로젝트 지정

Projects

잠시 살펴봤지만 Projects는 프로젝트의 작업 내용과 진행 사항을 볼 수 있는 페이지다. 이슈들과 PR(Pull Request)를 한 눈에 볼 수 있다. PR을 생성할 때도 Projects에 추가할 수 있다. Projects를 사용하면 작업을 추적하고 프로젝트를 직관적으로 관리할 수 있다.

To Do: 해야할 작업
In Progress: 진행 중인 작업
Done: 완료된 작업

노션에도 동일한 기능이 있지만 github에서 전반적으로 관리할 수 있다는 장점이 있어 사용한다. 템플릿은 변경할 수 있지만 칸반 보드 형식이 자주 사용되므로 Board를 사용한다.

PR

이슈를 기반으로 작업을 수행한 뒤 PR을 생성한다. 마찬가지로 정의된 템플릿을 활용해 PR을 생성하고 git-flow 개발 프로세스에 따라 개발한다. 커밋과 PR은 최대한 작은 단위로 쪼개는 것이 좋다.

규칙

제목은 이슈 제목과 동일하게 하고 이슈 번호 붙이기
- [feature/search] 검색 기능 구현 (#1)
Reviewers, Assignees, Labels, Projects, Linked issues 지정
검토가 끝나면 본인이 직접 PR을 merge하고 브랜치 삭제

▶ git 연습 레포에서 이미 생성된 PR을 가지고 왔다.

develop 브랜치와 main 브랜치는 브랜치 보호 규칙을 설정해 3명 이상 approve가 있어야 merge할 수 있도록 할 예정이다.

Wiki

문서를 공유하기 위해 github의 Wiki를 사용한다. 팀 소개와 프로젝트 내용, 개발 관련 문서 등 모두 Wiki에서 관리한다. 비슷한 유형의 문서끼리 분류하고 가독성을 높이기 위해 사이드바를 이용해 Wiki 문서를 표시할 수 있다.

브랜치 전략

브랜치 전략이란 여러 개발자가 협업하는 환경에서 git 저장소를 효과적으로 활용하기 위한 workflow이다. git-flow라는 브랜치 전략을 사용한다.

git-flow: 5가지의 브랜치를 이용해 운영하는 브랜치 전략

우린 Git-flow를 사용하고 있어요 | 우아한형제들 기술블로그

main: 배포 가능한 브랜치
develop: 개발한 기능이 모여있는 브랜치
feature: 기능을 개발하는 브랜치 (develop 에서 분기)
release: QA(품질검사)를 하기위한 브랜치 (출시 준비)
hotfix: main 브랜치에 발생한 버그를 긴급수정하는 브랜치

실제 적용은 main, develop, feature, hotfix 네 개의 브랜치만 사용할 듯하다.

브랜치 네이밍 컨벤션

main
develop
feature/{feature_name}
hotfix/{issue_number}

git-flow 개발 프로세스

develop 브랜치에서 새로운 기능 개발 브랜치 생성 feature/{feature_name}
개발 후 feature/{feature_name} 브랜치에 push
develop 브랜치에 pull requests
reviewer들의 리뷰가 승인되면 본인이 merge (merge한 브랜치는 삭제)
최종 테스트 후 main 브랜치에 merge

5.1. main 브랜치에서 버그가 발생한다면 hotfix 브랜치 생성

5.2. 버그 수정이 끝나면 develop과 main 브랜치에 각각 merge

타입스크립트 이해하기

Tue, 12 Sep 2023 04:57:52 GMT

"한 입 크기로 잘라먹는 타입스크립트 - 인프런" 강의를 요약하고 덧붙인 글입니다.

타입스크립트를 이해하기 위해

어떤 기준으로 타입을 정의하는지
어떤 기준으로 타입간의 관계를 정의하는지
어떤 기준으로 타입의 오류를 검사하는지 타입스크립트의 구체적인 원리와 동작 방식에 대해 살펴보겠습니다.

타입은 집합이다

타입스크립트의 타입은 '집합'입니다. 집합은 동일한 속성을 갖는 여러개의 요소들을 하나의 그룹으로 묶은 단위를 말합니다. 예를 들어, number 타입은 정수, 실수, 양수, 음수, 지수 등 모든 숫자 값들을 묶어 놓은 집합입니다. Number Literal 타입은 하나의 값만 포함하는 아주 작은 집합이라고 볼 수 있습니다. 모든 Number Literal 타입은 Number 타입이라는 집합에 포함되는 부분 집합으로 볼 수 있습니다. 타입스크립트의 모든 타입들은 집합으로써 서로 포함하고 또 포함되는 관계를 갖습니다.

다른 타입을 포함하는 타입을 슈퍼 타입(부모 타입), 반대는 서브 타입(자식 타입)이라고 합니다.

타입 호환성

타입 호환성은 어떤 타입을 다른 타입으로 취급해도 괜찮은지 판단하는 것을 말합니다.

예를 들어 Number 타입과 Number Literal 타입이 있을 때 서브 타입인 Number Literal 타입의 값을 슈퍼 타입인 Number 타입의 값으로 취급하는 것은 가능합니다. 그러나 반대로는 불가능합니다.

Number 타입이 Number Literal 타입보다 더 큰 타입이기 때문입니다.

let num1: number = 10;
let num2: 10 = 10;

num1 = num2; // ⭕
num2 = num1; // ❌

집합의 관점에서 본다면 Number Literal 타입의 값 10은 모든 숫자를 포함하는 Number 타입에 포함되지만 그 역은 성립하지 않습니다.

서브 타입의 값을 슈퍼 타입의 값으로 취급하는 것을 업 캐스팅, 반대는 다운 캐스팅이라고 부릅니다. 업 캐스팅은 모든 상황에 가능하지만 다운 캐스팅은 대부분 불가능합니다.

타입 계층도와 함께 기본타입 살펴보기

타입스크립트 타입 계층도는 기본 타입들간의 집합으로써 부모-자식 관계를 설명합니다.

unknown 타입 (전체 집합)

unknown 타입은 타입 계층도의 최상단에 위치합니다. unknown 타입은 모든 타입의 슈퍼타입, 모든 타입은 unknown 타입의 부분집합입니다.

따라서 unknown 타입 변수에는 모든 타입의 값을 할당할 수 있습니다(업 캐스팅).

let a: unknown = 1;
let b: unknown = 'a';
let c: unknown = true;
let d: unknown = null;
let e: unknown = undefined;
let f: unknown = [];
let g: unknown = {};
let h: unknown = () => {};

반대로는 불가능합니다. unknown 타입의 값은 any를 제외한 어떤 타입의 변수에도 할당할 수 없습니다(다운 캐스팅).

let unknownValue: unknown;

let a: number = unknownValue; // ❌

never 타입 (공집합 타입)

never 타입은 타입 계층도에서 가장 아래에 위치합니다. never 타입은 모든 집합의 부분집합 즉, 공집합입니다. 공집합은 원소의 개수가 0인 집합을 말합니다.

따라서 never 타입에 해당하는 값은 아무것도 없습니다. 어떤 값도 반환할 수 없는 무한루프나 비정상적 종료 등의 상황에 주로 사용됩니다.

공집합은 모든 집합의 부분집합. 그러므로 never 타입은 모든 타입의 서브 타입으로 모든 타입으로 업캐스팅 할 수 있습니다.

반대는 불가능합니다. 그래서 어떤 값도 저장되어서는 안 되는 변수의 타입으로 활용하기에 좋습니다.

let neverVar: never;

let a: number = neverVar; 
let b: string = neverVar; 
let c: boolean = neverVar;    
let d: null = neverVar;  
let e: undefined = neverVar;  
let f: [] = neverVar;     
let g: {} = neverVar;

let never1: never = 10; // ❌

void 타입

void 타입은 undefined 타입의 슈퍼타입입니다. 따라서 반환값을 void로 선언한 함수에서 undefined을 반환 해도 오류가 발생하지 않습니다. undefined 타입은 void 타입의 서브 타입이므로 업캐스팅이 가능하기 때문입니다.

function noReturnFuncA(): void {
  return undefined;
}

function noReturnFuncB(): void {
  return;
}

function noReturnFuncC(): void {}

void 타입의 서브타입은 undefined 타입과 never 타입 밖에 없습니다. 따라서 void 타입에는 undefined, never 이외에 다른 타입의 값을 할당할 수 없습니다.

any 타입 (치트키)

any 타입은 사실상 타입 계층도를 완전히 무시합니다. 모든 타입의 슈퍼타입이 될 수도 있고 모든 타입의 서브 타입이 될 수도 있습니다. any 타입은 모든 타입으로 다운캐스트 할 수 있으며 또 모든 타입은 any 타입으로 업 캐스트 할 수 있습니다.

let anyVar: any;
let unknownVar: unknown;
let undefinedVar: undefined;

anyVar = unknownVar; // 다운 캐스트
undefinedVar = anyVar; // 업 캐스트

단, never 타입의 변수에 any 타입의 값을 할당할 수는 없습니다.

let neverVar = anyVar; // ❌

객체 타입의 호환성

객체 타입은 프로퍼티를 기준으로 다른 객체 타입들과 슈퍼-서브 타입 관계를 갖습니다.

type Animal = {
  name: string;
  color: string;
};

type Dog = {
  name: string;
  color: string;
  breed: string;
};

let animal: Animal = {
  name: '기린',
  color: 'yellow',
};

let dog: Dog = {
  name: '돌돌이',
  color: 'brown',
  breed: '진도',
};

animal = dog; // ✅ OK
dog = animal; // ❌

Dog 타입이 더 많은 프로퍼티를 정의하고 있어 슈퍼타입처럼 보일 수 있지만 Animal 타입이 Dog 타입의 슈퍼타입입니다.

TypeScript의 타입 호환성은 구조적 서브 타이핑(subtyping)을 기반으로 합니다. 구조적 타이핑이란 오직 멤버만으로 타입을 관계시키는 방식입니다. 명목적 타이핑(nominal typing) 과는 대조적입니다. TypeScript의 구조적 타입 시스템의 기본 규칙은 y가 최소한 x와 동일한 멤버를 가지고 있다면 x와 y는 호환된다는 것입니다. - TypeScript 공식 문서 - 타입 호환성

타입스크립트는 프로퍼티를 기준으로 타입을 정의하는 구조적 타입 시스템을 따릅니다. Animal 타입은 name과 color 프로퍼티를 가지는 타입입니다. Dog 타입은 name과 color 프로퍼티, 추가로 breed 프로퍼티를 가집니다.

Dog 타입의 객체는 Animal 타입의 name과 color 프로퍼티를 반드시 가집니다. 따라서 Animal 타입에도 해당하는 객체입니다. 반대로 Animal 타입은 Dog 타입의 breed 프로퍼티를 가지고 있지 않으므로 Dog 타입에는 해당하지 않습니다.

집합의 관점에서 타입스크립트 바라보기

초과 프로퍼티 검사

Book 타입으로 정의된 변수에 ProgrammingBook 타입으로 보이는 초기값을 설정하면 오류가 발생합니다.

type Book = {
  name: string;
  price: number;
};

type ProgrammingBook = {
  name: string;
  price: number;
  skill: string;
};

let book: Book = { // ❌
  name: "한 입 크기로 잘라먹는 리액트",
  price: 33000,
  skill: "reactjs",
};

Book 타입은 ProgrammingBook 타입의 슈퍼타입입니다. 이것은 업캐스팅에 해당되는데 오류가 발생합니다.

그 이유는 ‘초과 프로퍼티 검사’가 발동했기 때문입니다. 초과 프로퍼티 검사란 변수를 객체 리터럴로 초기화 할 때 발동하는 타입스크립트의 특수한 기능입니다. 이 기능은 타입에 정의된 프로퍼티 외의 다른 초과된 프로퍼티를 갖는 객체를 변수에 할당할 수 없도록 막습니다.

초과 프로퍼티 검사는 단순히 변수를 '초기화'할 때 '객체 리터럴을 사용하지만 않으면' 발생하지 않습니다.

let programmingBook: ProgrammingBook = {
  name: "한 입 크기로 잘라먹는 리액트",
  price: 33000,
  skill: "reactjs",
};

let book3: Book = programmingBook;

Reference

타입스크립트 기본 - (2)

Fri, 08 Sep 2023 04:46:33 GMT

"한 입 크기로 잘라먹는 타입스크립트 - 인프런" 강의를 요약하고 덧붙인 글입니다.

타입 별칭(Type Alias)

객체 타입을 사용할 때 직접 해당 타입을 명시하였습니다.

let user: {
  id: number;
  name: string;
} = {
  id: 1,
  name: "cs",
}

그런데 같은 타입의 변수를 여러개 사용해야 한다면 아래와 같이 타입을 중복해서 정의해서 사용하게 됩니다.

let user1: {
  id: number;
  name: string;
} = {
  id: 1,
  name: "cs",
}

let user2: {
  id: number;
  name: string;
} = {
  id: 2,
  name: "jh",
}

타입 정의는 중복되는 코드입니다. 이는 유지보수를 어렵게 하고 가독성을 떨어트립니다. 그리고 때로는 같은 타입을 재사용하거나 또 다른 이름으로 부르고 싶은 경우도 존재합니다. 타입 별칭을 사용하면 변수를 선언하듯 타입을 별도로 정의할 수 있습니다. type 타입_이름 = 타입 형태로 타입을 정의합니다.

type User = {
  id: number;
  name: string;
}

let user: User = {
  id: 1,
  name: "cs",
}

단, 동일한 스코프에 동일한 이름의 타입 별칭을 선언하는 것은 불가능합니다. 타입 별칭은 타입 관련 문법이기 때문에 컴파일 결과 사라집니다.

인덱스 시그니처(Index Signature)

인덱스 시그니쳐는 객체 타입을 유연하게 정의할 수 있도록 돕는 특수한 문법입니다. 예를 들어 다양한 국가들의 영어 코드를 저장하는 객체가 있다고 가정하겠습니다.

type CountryCodes = {
  Korea: string;
  UnitedState: string;
  UnitedKingdom: string;
};

let countryCodes: CountryCodes = {
  Korea: "ko",
  UnitedState: "us",
  UnitedKingdom: "uk",
};

countryCodes에 100개의 프로퍼티가 추가되어야 한다면 타입 정의에도 각 프로퍼티를 모두 정의해주어야 합니다. 아직 추가되어야 할 프로퍼티 이름과 값을 알지 못한다면 타입을 정의하지 못할 것입니다. 하지만 객체의 키와 값의 타입 규칙을 알고 있다면 인덱스 시그니쳐를 이용하여 간단하게 타입을 정의할 수 있습니다.

type CountryCodes = {
  [key: string]: string;
};

let countryCodes: CountryCodes = {
  Korea: "ko",
  UnitedState: "us",
  UnitedKingdom: "uk",
  // (... 약 100개의 국가)
  Brazil : 'bz'
};

[key : string] : string, 키가 string 타입이고 값이 string 타입인 모든 프로퍼티를 포함한다는 의미입니다.

주의할 점은 인덱스 시그니쳐는 정의된 규칙을 위반하지만 않으면 모든 객체를 허용합니다. 빈 객체는 이를 위반하지는 않으므로 오류가 발생하지 않습니다.

type CountryNumberCodes = {
  [key: string]: number; 
}

let countryNumberCodes: CountryNumberCodes = {}; // ⭕

반드시 포함해야 하는 프로퍼티가 있다면 직접 명시할 수 있습니다. 단, 인덱스 시그니쳐의 value 타입과 직접 추가한 프로퍼티의 value 타입이 호환되거나 일치해야 합니다.

type CountryNumberCodes = {
  [key: string]: number;
  Korea: number; // Korea: string; ❌ Error
}

열거형(Enum) 타입

여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입입니다. 열거형 타입은 자바스크립트에는 존재하지 않고 오직 타입스크립트에서만 사용할 수 있는 특별한 타입입니다.

enum Role {
  ADMIN = 0,
  USER = 1,
  GUEST = 2,
}

const user1 = {
  name: "admin",
  role: Role.ADMIN,
}

enum 멤버에 숫자 값을 직접 할당하지 않아도 0부터 1씩 늘어나는 값으로 자동 할당됩니다.

enum Role {
  ADMIN, // 0 
  USER,  // 1 
  GUEST, // 2 
}

자동 할당되는 값은 기본적으로 0부터 시작합니다. 만약 이 값을 변경하고 싶다면 다음과 같이 시작하는 위치에 값을 직접 할당해주면 됩니다. 그럼 자동으로 그 아래의 멤버들은 1씩 증가된 값으로 할당됩니다.

enum Role {
  ADMIN = 10, // 10 
  USER,  // 11 
  GUEST, // 12
}

enum의 멤버에는 숫자 말고도 문자열 값도 할당할 수 있습니다. 숫자형 열거형에서 숫자만으로는 그 값이 어떤 의미인지 추측하기 힘들 때 프로퍼티의 값으로 사용할 수 있습니다.

enum Role {
  ADMIN,
  USER,
  GUEST,
}

enum Language {
  korean = "ko",
  english = "en",
}

const user1 = {
  name: "admin",
  role: Role.ADMIN, // 0
  language: Language.korean,// "ko"
};

enum의 컴파일 결과

타입스크립트 타입 관련 코드는 컴파일할 때 사라집니다. 그런데 enum은 컴파일될 때 다른 타입들처럼 사라지지 않고 자바스크립트 객체로 변환됩니다.

var Role;
(function (Role) {
    Role[Role["ADMIN"] = 0] = "ADMIN";
    Role[Role["USER"] = 1] = "USER";
    Role[Role["GUEST"] = 2] = "GUEST";
})(Role || (Role = {}));
var Language;
(function (Language) {
    Language["korean"] = "ko";
    Language["english"] = "en";
})(Language || (Language = {}));
var user1 = {
    name: 'admin',
    role: Role.ADMIN,
    language: Language.korean,
};

(+) enum을 사용하지 말아야 하는 이유

enum은 Tree-shaking 되지 않아 번들 파일의 크기를 증가시킬 수 있습니다

TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.
enum은 선언되지 않은 key로 접근이 가능합니다.
```
enum Role {
  ADMIN,
  USER,
  GUEST,
}

console.log(Role[3]) // undefined
```
Any 타입

any 타입은 특정 변수의 타입을 모를 때, 특정 값으로 인하여 타입 검사 오류가 발생하는 것을 원하지 않을 때 사용할 수 있습니다.
```
let anyVar: any = 10;
anyVar = "hello";
```

anyVar = true; anyVar = {};

anyVar.toUpperCase(); anyVar.toFixed(); anyVar.a;

any 타입은 어떠한 타입 검사도 받지 않기 때문에 아무 타입의 값이나 담아 사용할 수 있고 또 다양한 타입의 메서드도 마음대로 호출해서 사용해도 문제가 되지 않습니다.

그러나, 위의 코드를 실행해보면 런타임에 오류가 발생합니다. 타입스크립트를 쓰는 이유는 실행 전에 타입 오류를 검사해서 안정성이 높이는 것인데 any 타입은 타입 검사를 받지 않으므로 타입스크립트를 쓰는 의미가 없습니다.

그렇다면 값의 타입을 모르는 경우는 어떻게 해야할까요? `unknown` 타입을 사용합니다.


## Unknown 타입
unknown 타입은 어떤 타입의 값이든 다 저장할 수 있습니다. any 타입과 비슷하지만 unknown 타입은 어떤 타입의 변수에도 저장할 수 없습니다.
```ts
let num: number = 10;

let unknownVar: unknown;
unknownVar = "";
unknownVar = 1;
unknownVar = () => {};

num = unknownVar; // ❌ Error

또 unknown 타입의 값은 어떤 연산에도 참여할 수 없으며, 어떤 메서드도 사용할 수 없습니다. 어떤 변수가 어떤 값을 받게 될 지 모른다면 any 타입보다 unknown 타입을 사용하는게 더 안전합니다.

let unknownVar: unknown;
unknownVar * 2 // ❌ Error

연산을 수행하고 싶다면 조건문을 이용해 이 값이 특정 타입임을 보장해주면 됩니다.

if (typeof unknownVar === "number") {
  unknownVar * 2;
}

Void 타입

void 타입은 아무런 값도 없음을 의미하는 타입입니다. 함수에 return문이 없거나 명시적으로 값을 반환하지 않을 때 추론되는 타입입니다.

function func1(): void {
  console.log("hello");
}

function func2() {
  return;
}

함수의 void 반환 타입

타입스크립트에서 void 타입을 사용하더라도 값을 반환할 수 있습니다. void를 반환 타입으로 사용했을 때입니다.

void 반환 타입으로의 문맥적 타이핑은 함수를 아무것도 반환하지 않도록 강제하지 않습니다.이를 설명하는 또 다른 방법은, void 반환 타입을 가지는 문맥적 함수 타입(type vf = () => void)가 구현되었을 때, 아무값이나 반환될 수 있지만, 무시됩니다. - TypeScript: Documentation

void 반환 타입은 함수가 다른 값을 반환할 수도 있다는 것입니다. 아래의 코드들은 모두 유효한 코드입니다.

type voidFunc = () => void;

const f1: voidFunc = () => {
  return true;
};

const f2: voidFunc = () => true;

const f3: voidFunc = function () {
  return true;
};

자세한 내용은 ➡ 왜 TypeScript는 void 타입을 사용해도 값을 return 할 수 있을까?

Never 타입

never 타입은 결코 관측될 수 없는 값을 의미합니다. 보통 다음과 같이 함수가 어떠한 값도 반환할 수 없는 상황(무한 루프, 프로그램 실행 종료, 오류 발생 등)에 해당 함수의 반환값 타입을 정의할 때 사용됩니다.

function func3(): never {
  while (true) {}
}

function func4(): never {
  throw new Error();
}

void와 혼동하기 쉬우나 분명한 차이가 있습니다. void 타입은 아무것도 반환하지 않습니다. never 타입은 결코 반환값이 있을 수 없는, 반환이 '불가능'함을 나타내는 타입입니다.

변수의 타입을 never로 정의하면 어떠한 타입의 값도 변수에 담을 수 없습니다.

let anyVar: any;

let a: never;
a = 1; // ❌
a = null; // ❌
a = undefined; // ❌
a = anyVar; // ❌

추가로 읽을거리 타입스크립트의 Never 타입 완벽 가이드

Reference

타입스크립트 기본 - (1)

Tue, 05 Sep 2023 11:38:14 GMT

"한 입 크기로 잘라먹는 타입스크립트 - 인프런" 강의를 요약하고 덧붙인 글입니다.

기본 타입(Basic Types)

타입스크립트가 자체적으로 제공하는 타입을 뜻합니다. 자바스크립트에서 이미 사용하고 있는 타입들과 타입스크립트에서만 제공하는 독특한 타입들도 있습니다.

원시 타입

원시 타입은 하나의 값만 저장하는 타입으로 불변 값(변경할 수 없는 값)을 정의합니다. 값을 교체할 수는 있지만, 직접 변형할 수는 없습니다.

var bar = "baz";
console.log(bar); // baz
bar.toUpperCase();
console.log(bar); // baz

number

숫자를 의미하는 모든 값을 포함하는 타입입니다. 정수 뿐만 아니라 소수, 음수 그리고 세 가지 특별한 값도 표현할 수 있습니다.

Infinity: 양의 무한대
-Infinity: 음의 무한대
NaN: 산술 연산 불가 (not-a-number)

let num1: number = 123;
let num2: number = -123;
let num3: number = 0.123;
let num4: number = -0.123;
let num5: number = Infinity;
let num6: number = -Infinity;
let num7: number = NaN;

string

텍스트 데이터를 나타낼 때 사용합니다. 문자열은 작은따옴표(''), 큰따옴표("") 또는 백틱(``)으로 텍스트를 감싸서 표기합니다. 템플릿 리터럴로 만든 문자열도 포함합니다.

let str1: string = "hello";
let str2: string = 'hello';
let str3: string = `hello`;
let str4: string = `hello ${str1}`; // 템플릿 리터럴

템플릿 리터럴이란?

boolean

논리 요소를 나타내며 참과 거짓만을 저장하는 타입입니다. true와 false 두 가지 값만 가질 수 있습니다.

let bool1 : boolean = true;
let bool2 : boolean = false;

null

오직 null 값만 포함하는 타입입니다. null은 어떤 값이 의도적으로 비어있음을 표현하며 불리언 연산에서는 거짓으로 취급합니다.

let null1: null = null;

(+) 엄격한 Null 검사 옵션 - strictNullChecks

아직 값이 정해지지 않은 상태에서는 변수에 null을 할당하고 싶은 경우가 있습니다. 그러나 다른 타입의 변수에 null을 할당하면 오류가 발생합니다.

let numA: number = null;  // ❌

null 값을 변수의 임시값으로 활용하고 싶을 때 tsconfig.json의 strcitNullChecks 옵션을 false로 설정하면 됩니다. strictNullChecks 옵션은 타입스크립트에서 null 값을 null 타입 이외의 타입의 변수에 할당하는 것을 금지할지 허락할지 여부를 결정하는 옵션입니다.

{
  "compilerOptions": {
    ...
    "strictNullChecks": false,
        ...
  },
  "include": ["src"]
}

undefined

null 타입과 마찬가지로 undefined만 포함하는 타입입니다. 값을 할당하지 않은 변수는 undefined 값을 가집니다.

let unde1: undefined = undefined;

symbol

고유한 참조값을 생성하는데 사용할 수 있는 타입입니다. symbol은 외부에 노출되지 않고 다른 값과 중복되지 않는 유일한 값입니다. 다른 원시 값은 리터럴을 통해 생성하지만 symbol은 Symbol 함수를 호출해 생성합니다.

let sym1: symbol = Symbol();

리터럴

하나의 값만 포함하도록 값 자체로 만들어진 타입입니다. 리터럴을 사용하면 다양한 종류의 값을 생성할 수 있습니다. 변수의 타입을 값 자체로 정의하면 정의한 값 외에는 다른 값을 사용할 수 없습니다.

let numA: 10 = 10;
let strA: "hello" = "hello";
let boolA: true = true;
let boolB: false = false;

배열과 튜플

배열

배열을 저장하는 변수의 이름 뒤에 타입 주석의 시작을 의미하는 콜론(:)을 작성한 다음 배열요소타입[] 형식으로 배열 타입을 정의합니다.

let numArr: number[] = [1, 2, 3]
let strArr: string[] = ["hello", "world"];

Array<배열요소타입> 형태로도 배열의 타입을 정의할 수 있습니다. 꺽쇠와 함께 타입을 작성하는 문법을 타입스크립트에서는 ‘제네릭’ 이라고 부릅니다.

let boolArr: Array = [true, false, true];

배열의 타입을 정의하는 두 형식 모두 모양만 다를뿐 기능은 동일하기에 타이핑하기 쉬운 첫 번째 방식을 주로 사용합니다.

배열에 들어가는 요소들의 타입이 다양할 경우에는 소괄호와 바(|) 를 이용해 배열 요소가 둘 중 하나의 타입에 해당하도록 타입을 정의합니다.

// 배열 요소의 타입이 string이거나 number
let multiArr: (number | string)[] = [1, "hello"];

바(|)를 이용해 여러 타입중 하나를 만족하는 타입을 정의하는 문법을 유니온(Union) 타입 이라고 부릅니다.

튜플

튜플은 자바스크립트에는 없는 타입스크립트의 특수한 타입으로 길이와 타입이 고정된 배열을 의미합니다. 타입스크립트의 배열은 배열에 들어가는 타입은 고정시킬 수 있지만 길이까지 고정할 수는 없습니다.

let tup1: [number, number] = [1, 2];
let tup2: [number, string, boolean] = [1, "hello", true];

튜플은 별도로 존재하는 자료형이 아닌 자바스크립트 배열입니다. 타입스크립트 코드를 컴파일 해 보면 자바스크립트 배열로 변환됩니다. 그러므로 배열 메서드를 이용해 튜플을 다룰 수 있습니다. 그러므로 튜플을 배열 메서드를 이용해 요소를 추가하거나 삭제 등의 연산을 할 때에는 주의해야 합니다.

let tup1: [number, number] = [1, 2];
tup1.push(1);
tup1.pop();

튜플의 사용 예

회원 정보를 2차원 배열로 저장하는 상황을 가정해 보겠습니다. 회원의 이름과 아이디를 저장해두는 배열을 만들어 두었습니다.

const users = [
  ["Lee", 1],
  ["Park", 2],
  ["Kim", 3],
];

그런데 동료가 요소의 순서가 헷갈려 반대로 저장하였습니다. 이로 인해 오류가 발생합니다.

const users = [
  ["Lee", 1],
  ["Park", 2],
  ["Kim", 3],
  [4, "Choi"] // 추가
];

function makeUpperCase(inputString) { return inputString.toUpperCase(); }
makeUpperCase(users[3][0]) // ❌ Error
]

튜플을 사용하면 이러한 문제를 쉽게 해결할 수 있습니다. 배열을 사용할 때 인덱스에 따라 넣어야 할 값이 정해져 있고 순서가 중요할 때 튜플을 사용하여 실수를 방지할 수 있습니다.

const users: [string, number] = [
  ["Lee", 1],
  ["Park", 2],
  ["Kim", 3],
  [4, "Choi"] // ❌ Error
];

객체

원시 타입을 제외하고 가장 많이 마주치는 타입입니다.

자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다.

타입스크립트에서는 2가지 방식으로 객체의 타입을 정의합니다.

object로 정의

let user: object = {
  id: 1,
  name: 'cs',
};

그러나 타입스크립트에서 객체의 특정 프로퍼티에 접근하려고 하면 오류가 발생합니다.

let user: object = {
  id: 1,
  name: 'cs',
};

user.id; // ❌ Error

그 이유는 타입스크립트의 object 타입은 값이 객체임을 표현하는 것 외에는 아무 정보도 제공하지 않는 타입이기 때문입니다. 객체의 프로퍼티에 대한 정보가 없기 때문에 프로퍼티에 접근하려 하면 오류가 발생합니다. 객체의 모양을 정확히 타입으로 만드려면 다른 방법을 사용해야 합니다.

객체 리터럴 타입

객체 리터럴 타입은 다음과 같이 중괄호를 열고 객체가 갖는 프로퍼티를 직접 나열합니다. 객체 리터럴과 비슷한 문법으로 객체 타입을 정의한 타입을 객체 리터럴 타입이라고 부릅니다.

let user: {
  id: number;
  name: string;
} = {
  id: 1,
  name: "cs",
};

user.id;

객체의 타입을 정의할 때에는 object 보다는 객체 리터럴 타입을 사용하는 것이 좋습니다. 타입스크립트에서는 객체의 타입을 정의할 때 프로퍼티를 기준으로 객체의 구조를 정의하듯 타입을 정의합니다. 이런 특징을 구조적 타입 시스템이라고 부릅니다.

(+) 명목적 타입 시스템

명목적 타입 시스템은 구조적 타입 시스템과는 대조적으로 변수나 객체의 타입을 해당 타입의 이름 또는 명칭으로 식별합니다. 객체의 타입이 명시적으로 선언되어야 한다는 의미입니다. 클래스의 이름이 타입을 나타냅니다.

class Animal:
    def make_sound(self):
        pass

class Dog(Animal):
    def make_sound(self):
        print("멍멍")

def sound_maker(animal: Animal):
    animal.make_sound()

my_dog = Dog()
sound_maker(my_dog)  # "멍멍" 출력

구조적 타입 시스템의 예)

interface Animal {
    makeSound: () => void;
}

interface Dog extends Animal {
    bark: () => void;
}

function soundMaker(animal: Animal) {
    animal.makeSound();
}

const myDog: Dog = {
    makeSound: () => console.log("멍멍"),
    bark: () => console.log("왈왈")
};

soundMaker(myDog); // "멍멍" 출력

객체의 구조가 중요하며 객체가 특정 인터페이스 또는 구조를 따르면 해당 타입으로 간주됩니다. 타입의 이름이나 클래스의 이름은 중요하지 않습니다.

선택적 프로퍼티(Optional Property)

객체를 다루다보면 특정 프로퍼티를 사용하지 않는 경우도 있습니다. 특정 프로퍼티를 상황에 따라 생략하도록 만들고 싶다면 프로퍼티의 이름 뒤에 ? 붙여 선택적 프로퍼티로 만들어줍니다.

let user: {
  id?: number;
  name: string;
} = {
  id: 1,
  name: "cs",
};

user = {
  name: "jh",
};

읽기전용 프로퍼티(Readonly Property)

특정 프로퍼티를 읽기 전용으로 만들고 싶다면 다음과 같이 프로퍼티의 이름 앞에 readonly 키워드를 붙입니다. 읽기전용 프로퍼티를 사용하면 의도치 않은 프로퍼티의 수정을 방지할 수 있습니다.

let user: {
  id?: number;
  readonly name: string;
} = {
  id: 1,
  name: "cs",
};

user.name = "dskfd"; // Error

Reference

타입스크립트 개론

Fri, 04 Aug 2023 05:50:19 GMT

"한 입 크기로 잘라먹는 타입스크립트 - 인프런" 강의를 요약하고 덧붙인 글입니다.

타입스크립트 등장 배경

타입스크립트는 자바스크립트의 상위 집합으로서, 기본적으로 자바스크립트의 모든 기능을 포함하고 있습니다. 이 말은 곧 자바스크립트를 배우지 않고서는 타입스크립트를 배울 수 없음을 뜻합니다. 타입스크립트의 기반이 되는 자바스크립트를 먼저 알아보며 타입스크립트가 등장한 이유를 살펴보겠습니다.

자바스크립트의 탄생

초기 웹 페이지는 정적인 HTML로만 구성되었고, 사용자와의 상호작용이 제한적이었습니다. 기존의 정적인 웹 페이지를 "어떻게 동적인 웹 페이지를 만들 수 있을까?"를 고민하였고 '자바스크립트'가 탄생합니다.

자바스크립트는 웹 브라우저에서 동작하는 간단한 사용자 상호작용을 위한 언어로 개발되었습니다. 웹 페이지에 삽입되는 스크립트 언어로 브라우저에서 바로 실행되었고 자바스크립트를 통해 웹 페이지에 동적인 기능과 상호작용을 추가할 수 있었습니다.

스크립트 언어(scripting language)란 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어를 가리킨다. 스크립트 프로그래밍 언어라고도 한다. 스크립트 언어 - 위키백과

스크립트 언어, 자바스크립트

자바스크립트는 1995년에 불과 10일 만에 만들어진 언어입니다. 웹 브라우저에서만 동작하고 경고창 띄우기와 같은 아주 간단한 사용자 상호작용을 처리하였기에 엄격한 문법을 갖출 필요가 없었습니다. 대신 아주 유연하게 설계되었습니다. 버그로부터의 안정성이나 견고함은 일부 포기하는 대신 프로그래머가 쉽고 빠르고 간결하게 코드를 작성하는데에 중점을 두고 만들어졌습니다. 또한 초기 웹 브라우저들은 인터넷 속도가 느리고, 컴퓨터의 성능이 현재와 비교해 상당히 낮았으므로 가벼운 스크립트 언어를 사용한 것이죠.

더 깊은 이해를 위해서는 - Typescript는 어떻게 공부해야 하나요?

그러나 웹이 발전하고 자바스크립트 실행 환경 'Node.js'가 등장하면서 웹 브라우저뿐만 아니라 어디서든 자바스크립트를 실행할 수 있게 되었습니다. 오늘날에는 웹 개발부터 모바일 애플리케이션을 만들거나 데스크탑 애플리케이션을 만드는 등 무엇이든 자바스크립트로 다양한 프로그램을 만들 수 있습니다.

자바스크립트 이상하다

여기서 문제가 발생합니다. 프로그램의 규모가 커지자 자바스크립트의 유연함이 버그 발생 가능성을 높이고 프로그램의 안정성을 떨어뜨리게 된 것이죠. 예를 들어,

자바스크립트의 동일 비교 연산자는(==) 인수를 강제로 변환하여, 예기치 않은 동작을 유발합니다.

if ("" == 0) {
// true, Number("") == 0 => 0 == 0 => true
}
if (1 < x < 3) {
// true, 어떤 x 값이던 참!
}
true == "true" // false, Number(true) == Number("true") => 1 == NaN => false
(번외) "b" + "a" + +"a" + "a" // "baNaNa", "b" + "a" + Number("a") + "b" => "b" + "a" + NaN + "a"

연산 과정에서 강제 형변환으로 결과를 예측하기 어렵습니다. (+) JS Is Weird: 자바스크립트의 이상한 문법 퀴즈 풀어보기

자바스크립트는 존재하지 않는 프로퍼티의 접근을 허용합니다.
```
const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth; // NaN, 10 * undefined
```
문법 오류가 있더라도 자바스크립트는 오류를 출력하지 않고 실행됩니다. 즉, 프로그램을 실행해보지 않는 이상 어떤 문법 에러를 잡아낼 수 없습니다.

이렇게 예측하기 힘든 자바스크립트의 문제는 규모가 큰 프로그램에서 더욱 부각됩니다. 디버깅이 어렵고, 예기치 않은 동작이 여기저기서 발생할 수 있습니다.

이를 극복하기 위해 자바스크립트의 기존 문법은 유지하되 안정성을 확보한 언어가 필요해졌습니다. 이렇게 등장한 언어가 '타입스크립트'입니다.

자바스크립트의 한계점

위의 문제와 함께 자바스크립트가 어떤 한계가 왜 있었는지 더 구체적으로 들여다보겠습니다. 자바스크립트를 포함해서 모든 프로그래밍 언어에는 타입 시스템이라는게 존재합니다.

타입 시스템이란? 언어에서 사용할 수 있는 아주 여러가지 값들을 어떤 기준으로 묶어서 타입으로 정할지 결정하고 또 코드의 타입을 언제 검사할지 그리고 어떻게 검사할지 등의 우리가 프로그래밍 언어를 사용할때 타입과 관련해서 지켜야 하는 규칙들을 모아둔 체계.

타입 시스템은 크게 두가지로 나눌 수 있습니다.

코드를 실행하기 전에는 타입을 결정하지 않고 코드를 실행하고 나서 유동적으로 변수의 타입을 결정하는 '동적 타입 시스템'
코드 실행전에 모든 변수의 타입을 고정적으로 결정하는 '정적 타입 시스템'

동적 타입 시스템(Dynamic Type System)

변수의 타입을 코드가 실행되는 도중에(런타임에) 결정하기 때문에 개발자가 변수의 타입을 명시적으로 정의하지 않아도 됩니다.

let a = 'hello';

그리고 변수의 타입이 어떤 하나의 타입으로 딱 고정되지 않고 현재 변수에 담긴 값에 따라서 변수의 타입이 동적으로 계속해서 달라집니다.

let a = 'hello';
a = 2147483647

이처럼 유연하게 타입을 결정하고 간결한 코드 작성이 동적 타입 시스템의 장점입니다. 그러나, 큰 단점이 있습니다.

let a = 'hello';
a = 2147483647;
a.toUpperCase(); // ❌ Error 발생

위의 코드를 실행하면 실행은 되지만 오류가 발생하며 비정상적으로 종료됩니다. toUpperCase은 문자열을 대문자로 변환해 반환하는 문자열에만 사용할 수 있는 메서드입니다. 변수 a 값의 타입은 숫자(number)이므로 숫자 타입인 변수에 문자열에만 사용하는 메서드를 사용하니 당연히 오류가 발생합니다.

문제는 이 코드가 실행이 되기는 된다는 것입니다. 오류가 발생할 코드라면 실행 이전에 검사하여 실행되지 않도록 막는 것이 좋습니다. 복잡한 프로그램에서는 언제 터질지 모르는 시한폭탄과 같은 코드이기 때문입니다.

동적 타입 시스템은 프로그램이 런타임에 오류가 발생한다는 것이 치명적인 문제.

정적 타입 시스템(Static Type System)

반면에 정적 타입 시스템은 코드를 실행하기 전에 모든 변수의 타입을 결정합니다. 변수에 할당되는 값의 타입을 미리 명시하여 타입 오류를 사전에 방지할 수 있습니다.

#include 

int main() {
  int a = 123;
  char b[] = "hello";

  int c = a * b; // ❌ Error 발생

  return 0;
}

C 코드를 예로 들면 변수 a에는 정수 타입으로 값은 123을, 변수 b에는 문자열 배열로 값은 hello를 저장했습니다. a * b 연산은 정수 a와 문자열 b을 곱하는 불가능한 연산이므로 코드 실행 전에 타입 오류를 보여줍니다. 프로그래머가 실수를 하더라도 에디터 상에서 오류를 알려주기 때문에 바로잡을 기회가 주어집니다.

그러나, 정적 타입 시스템에도 단점은 있습니다. 모든 변수에 타입을 지정해주어야 하므로 개발 시간이 늘어날 수 있고 많은 타입 선언이 필요한 프로젝트의 경우 유지보수하는 것이 어려울 수 있습니다.

정리) 동적 타입 시스템과 정적 타입 시스템의 장단점

	동적 타입 시스템	정적 타입 시스템
장점	개발 속도와 유연성	타입 안정성
	짧은 코드 길이	코드 가독성
	자유로운 타입 변환이 가능	자동 완성과 코드 어시스트
단점	런타임 타입 오류	타입 선언의 부담
	타입 오류 발견의 어려움	개발 시간 증가
	디버깅 & 유지보수의 어려움	유연성 감소

타입스크립트의 독특한 타입 시스템

그래서 타입스크립트는 동적 타입 시스템과 정적 타입 시스템을 혼합한 것 같은 독특한 타입시스템을 사용합니다.

let a: number = 2147483647;

정적 타입 시스템과 같이 변수의 타입을 실행 전에 결정하고 타입 오류를 실행 전에 검사하여 알려줍니다. 타입스크립트는 정적 타입 시스템의 타입 안정성을 확보하면서도 동적 타입 시스템처럼 모든 변수의 타입을 직접 명시하지 않아도 됩니다.

그 이유는 타입스크립트에서는 변수의 타입을 직접 정의하지 않아도 변수에 담기는 초기값을 기준으로 자동으로 타입을 알아서 추론합니다.

let a = 2147483647;
a.toUpperCase(); // ❌ Property 'toUpperCase' does not exist on type 'number'

타입스크립트의 이런 독특한 타입 시스템은 동적 타입 시스템의 타입 안전하지 않은 문제를 해결하면서도 정적 타입 시스템의 귀찮음도 동시에 해결하는 멋진 타입 시스템입니다.

이런 타입시스템을 "점진적으로 타입을 결정한다"라고 해서 점진적 타입 시스템(Gradual Type System)이라고 부릅니다. 타입이 정의된 변수들에 대해서는 타입을 미리 결정하고 타입이 정의되지 않은 변수들은 타입을 자동으로 추론하는 타입 시스템.

정리하자면 타입스크립트는

자바스크립트를 더 안전하게 사용할 수 있도록 "타입 관련 기능들을 추가한 언어"로 자바스크립트의 확장판이라고 볼 수 있습니다.

타입스크립트는 점진적 타입 시스템을 채택해서 정적 타입 시스템처럼 프로그램 실행 전에 타입을 올바르게 썼는지 타입 검사를 해 타입 안정성을 확보하면서도 동적 타입 시스템처럼 모든 변수에 일일히 타입을 지정해주지 않아도 되는 유연함까지 확보한 독특한 타입 시스템을 갖추고 있는 언어!

Reference

리액트 다크모드 구현하기

Thu, 04 May 2023 09:19:31 GMT

지난 다크모드에 대해 알아보자 글 작성 이후 다크모드 구현한 내용을 정리해보았습니다.

다크모드 구현하기

익숙한 방법이었던 styled-components

이전 프로젝트에는 styled-components를 사용해 제공되는 ThemeProvider와 theme을 정의해서 구현했었다. (feat. recoil)

// Root.tsx
const Root = () => {
  const isDark = useRecoilValue(isDarkAtom);
  return (
    <>
      
        
        
        
      
    
  );
};

// theme.ts
import { DefaultTheme } from 'styled-components';

export const lightTheme: DefaultTheme = {
  bgColor: 'white',
  textColor: '#000',
  itemColor: '#E3CAA5',
  accentColor: '#AD8B73',
};

export const darkTheme: DefaultTheme = {
  bgColor: '#0A2647',
  textColor: '#fff',
  itemColor: '#205295',
  accentColor: '#2C74B3', // 379634
};

// styles.ts
export const Title = styled.h1`
  font-size: 48px;
  color: ${(props) => props.theme.accentColor};
`;

ThemeProvider의 props로 전달한 theme이 변경되면 정의한 theme에 따라 바뀌는 쉽고 유지보수가 편한 방법이었다. 모든 컴포넌트는 styled를 사용해 스타일을 정의할 때 이 theme 값을 사용하여 동적으로 스타일링 할 수 있었다.

하지만 이번에는 순수 CSS만으로만 구현하고자 하였고, styled-components를 사용했을 때보다 성능상의 이점을 얻고자 하였다.

CSS-in-JS 라이브러리는 브라우저에서 페이지가 로드될 때 스타일을 구문 분석해 적용한다.(런타임)

그래서 PostCSS

다크모드가 설정이 되면 html 태그에 다크모드 class 지정하는 방식으로 다크모드를 구현한다. css selector를 이용해 다크모드이면 다른 색상을 사용하는 방식. JS를 사용해 html 요소에 'dark' 클래스를 추가/제거하여 다크모드와 라이트모드를 설정한다.

스타일은 어떻게 적용?

사용자 지정 CSS 속성을 사용한다. :root 의사 클래스는 문서 트리의 루트 요소를 선택한다. 이를 전역 CSS 변수를 선언하는데 활용한다.

사용자 지정 속성은 두 개의 붙임표로 시작하는 속성의 이름과 함께, 유효한 CSS 값이라면 아무거나 그 값으로 지정해 선언합니다. 다른 일반적인 속성과 마찬가지로 사용자 지정 속성도 아래와 같이 규칙 집합 내에 작성합니다.

:root {
  --main-bg-color: brown;
}

위에서 언급했듯, 사용자 지정 속성의 값을 사용할 때에는 일반적인 값의 자리에 var() 함수를 지정하고, 그 매개변수로는 사용자 지정 속성의 이름을 제공합니다.

element {
  background-color: var(--main-bg-color);
}

사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN

(+) html에서 root는 항상 html을 가리키는데 html보다 :root 의사 클래스의 우선순위가 더 높다.

공통으로 사용할 속성을 미리 변수로 선언하고 다크모드가 적용되었을 때 속성을 기존의 변수에 덮어쓴다.

:root {
  --color-black: #000;
  --color-white: #fff;
  --color-accent: #03045e;
  --color-bg: #caf0f8;
  --color-bg-darker: #ade8f4;
  --color-bg-sidebar: #fff;
  --color-bg-nav-hover: #e8f8fb;
  --color-bg-actived: #023e8a;
  --color-border: #03045e;
  --color-text: #03045e;
  --color-text-actived: #fff;
  --color-text-hover: #0096c7;
  --color-badge: #fff;
}

html.dark {
  --color-accent: #495057;
  --color-bg: #212529;
  --color-bg-darker: #495057;
  --color-bg-sidebar: #343a40;
  --color-bg-nav-hover: #222;
  --color-bg-actived: #495057;
  --color-border: #f8f9fa;
  --color-text: #dee2e6;
  --color-text-actived: #fff;
  --color-text-hover: #adb5bd;
  --color-badge: #495057;
}

➡ 다크모드가 적용되었을 때 우선순위가 높은 html.dark 변수가 적용된 모습.

다크모드 Context

다크모드는 어플리케이션 전역에서 공통으로 사용되는 값이므로 Context API를 사용한다.

import React, { createContext, useContext, useEffect, useState } from 'react';
import { IChildren } from '../typing/db';

interface ContextProps {
  darkMode: boolean;
  toggleDarkMode: () => void;
}

// 다크모드 Context 생성
export const DarkModeContext = createContext({
  darkMode: false,
  toggleDarkMode: () => {},
});

// Context 내부 요소들에 value 전달할 Provider 생성
export const DarkModeProvider = ({ children }: IChildren) => {
  const [darkMode, setDarkMode] = useState(false);
  const toggleDarkMode = () => {
    setDarkMode(!darkMode);
    updateDarkMode(!darkMode);
  };

  // 어플리케이션이 실행될 때 localStorage에 다크모드인지 아닌지 
  // 혹은 브라우저가 다크모드인지 아닌지 확인한 다음 다크모드 초기값을 세팅
  useEffect(() => {
    const isDark =
      localStorage.theme === 'dark' ||
      (!('theme' in localStorage) &&
        window.matchMedia('(prefers-color-scheme: dark)').matches);
    setDarkMode(isDark);
    updateDarkMode(isDark);
  }, []);

  return (
    // 자식 컴포넌트에서 다크모드 설정값에 접근하고 값을 변경할 수 있도록
    // darkMode 변수와 toggle 함수를 전달
    
      {children}
    
  );
};

// 다크모드 값에 따라 document.documentElement 즉, 루트 요소(html)에 'dark' class 값을 추가, 제거
function updateDarkMode(darkMode: boolean) {
  if (darkMode) {
    document.documentElement.classList.add('dark');
    localStorage.theme = 'dark';
  } else {
    document.documentElement.classList.remove('dark');
    localStorage.theme = 'light';
  }
}

// 외부에서 다크모드 컨텍스트를 사용하기 쉽도록 custom hook을 만들어 사용
export const useDarkMode = () => useContext(DarkModeContext);

다크모드 세팅 기억

prefers-color-scheme CSS 미디어 특성은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용됩니다. prefers-color-scheme - CSS: Cascading Style Sheets | MDN

prefers-color-scheme 미디어 쿼리를 사용하면 사용자 운영체제의 다크모드 설정 여부를 알 수 있다. matchMedia() 메서드에 분석할 미디어 쿼리 문자열을 전달하면 반환되는 MediaQueryList 객체의 matches 속성은 반환값으로 참/거짓을 반환하는데 이를 활용. Window.matchMedia() - Web API | MDN window.matchMedia('(prefers-color-scheme: dark)').matches); 이를 활용해 최초 웹페이지에 접근하면 운영체제의 다크모드 설정 여부를 따르고 이후 localStorage의 theme 값에 따라 다크모드/라이트모드를 적용한다.

실제 적용

커스텀 hooks를 만들어두었기에 쉽게 사용 가능.

import React from 'react';
import { useDarkMode } from '../reducer/DarkModeContext';
import styles from './ToggleTheme.module.css';

export default function ToggleTheme() {
  const { darkMode, toggleDarkMode } = useDarkMode();

  return (
    
      
      
        
      
    
  );
}

결과

Reference

다크모드에 대해 알아보자

Wed, 12 Apr 2023 06:42:03 GMT

투두리스트 프로젝트 중 기능으로 다크모드를 추가하였으나 가독성과 컬러 선택이 아쉬워 다크모드에 대해 알아보았습니다.

다크모드

다크 모드(영어: Dark Mode), 다크 테마(dark theme), 블랙 모드(black mode), 나이트 모드(night mode)는 밝은 색의 텍스트, 아이콘, 그래픽 사용자 인터페이스 요소들을 어두운 배경 위에 사용하는 컬러 스킴으로, 컴퓨터 사용자 인터페이스 디자인과 웹 디자인 면에서 자주 논의되는 모드이다. 다크 모드 - 위키백과, 우리 모두의 백과사전

"다크모드를 지원해야 하는 이유"

사용자에게 좋은 경험을 제공하기 위해

사용자의 눈의 피로를 덜어주고 집중도를 높여줄 수 있는 방법으로 다크모드를 사용한다. 모니터 화면을 장시간 봐야 하는 경우 라이트 모드는 눈이 쉽게 피로해지는 반면 다크 모드는 상대적으로 피로감이 덜하다

또한, 다크모드 OS UI 사용자가 라이트 모드의 화면을 마주해 느낄 수 있는 이질감을 없애기 위함

다크모드 UI 디자인

다크 테마는 테마가 검은색이라는 말이 아닌 저조도의 테마라고 보는 것이 정확

주의할 점: 색상

채도가 높은 색상은 어두운 바탕에서는 떨리는 것처럼 보일 수 있기 때문에, 다크모드 UI에서는 채도가 높은 색상을 피하는 것이 좋다

색이 보다 선명할수록 채도가 높다고 말하며 회색이나 흰색 또는 검정과 같은 무채색에 가까울수록 채도가 낮다고 말한다.

텍스트와 함께 색상을 사용할 때는 콘트라스트 비율이 WCAG의 AA 표준인 최소 4.5대 1을 넘어야만 한다 (참고: 명도 대비 평가 도구)

배경이나 화면의 색으로는 순수한 검은색(#000000)을 사용하지 않는 것이 좋다

원칙

다크모드는 색상으로 높이차를 나타낸다. 위로 갈수록 밝은 색상 사용
- 이유: 라이트모드에서는 높이차를 그림자로 표현할 수 있으나 다크모드에서는 그림자 표현이 두드러지지 않기 때문
악센트 색상 사용
- 어두운 테마 UI에 제한된 색상 액센트를 텍스트나 버튼과 같은 핵심 요소를 강조하기 위해 드물게 사용해야 한다
Opacity 활용
- 텍스트의 강조를 위해. 가장 강조되어야 하는 텍스트는 87%, 그 다음 60%, 비활성화 상태의 텍스트는 38%가 적당하다

다크모드 설계 고려사항

컬러 시스템의 1대 1 매칭
- Hex 컬러 값으로 매칭하는 것이 아니라 해당 컬러가 사용된 UI와 목적에 따라 네이밍을 정해 시스템화하는 것이 필요하다
- e.g. #fff - white 대신 #fff - background로 네이밍. 다크 모드에서는 #121212 컬러로 지정하여 매칭
Elevated UI의 고려
- 2개 이상의 레이어가 겹치는 상황을 대비해 최소 3가지 이상의 Elevated UI 컬러를 지정

Reference

프로그래밍이란?

Thu, 26 Jan 2023 02:57:17 GMT

《모던 자바스크립트 Deep Dive》 1장을 학습하며 정리한 포스트입니다.

프로그래밍이란?

프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다

커뮤니케이션의 목적 중의 하나는 소통이나 관계를 통해 이루고자 하는 특정 요구를 실현하는 것이다. 컴퓨터에게 실행을 요구하는 이유, 프로그램이 필요한 이유는 주어진 문제를 더욱 간편하게 빠르게 쉽게 해결하기 위해서이다.

하지만, 컴퓨터는 0과 1밖에 알지 못하는 기계이다. 프로그래밍이란 멍청하지만 똑똑한 컴퓨터가 실행할 수 있도록 정확하고 상세하게 요구사항을 설명하는 작업이다. 문제(요구사항)를 명확히 이해하는 것을 우선으로 복잡함을 단순하게 분해하고 정리하여 구분해야 하며 순서에 맞게 행위를 배열해야 한다. 모호하고 대략적인 요구사항을 전달하면 기대하는 결과는 얻을 수 없다.

컴퓨터와 사람은 사고, 인지의 방식이 다르다. 따라서 컴퓨터의 관점에서 해결하려는 문제를 절차적으로 사고하고 효과적으로 해결할 수 있는 절차적 사고 능력이 필요하다.

프로그래밍 언어

이렇게 정의된 문제 해결 방안이 컴퓨터에게 전달된다. 그러나, 컴퓨터는 0과 1만을 이해한다고 했다. 명령을 수행하는 주체는 컴퓨터이므로 사람의 표현법이 아니라 컴퓨터의 표현법으로 명령을 전달해야 한다. 컴퓨터가 이해할 수 있는 언어는 0과 1로만 구성된 기계어이다.

하지만 사람이 기계어를 이해해서 직접 명령을 전달하는 것은 매우 어려운 일이다. 그렇기에 사람이 이해할 수 있는 약속된 구문(문법)으로 구성된 "프로그래밍 언어"를 사용해 프로그램을 작성한 후, 그것을 컴퓨터가 이해할 수 있는 기계어로 변환하는 일종의 번역기를 이용한다. 이 일종의 번역기를 컴파일러 혹은 인터프리터라고 한다.

구문과 의미

언어의 구성 요소에는 형태, 내용, 사용이 있다고 한다. 언어의 형태는 언어가 어떤 모양을 가지고 있는지, 내용은 언어가 가지고 있는 의미를, 사용은 실제로 언어가 어떻게 사용되는지를 말한다. 프로그래밍 '언어'는 구문과 의미의 조합으로 표현된다.

"외국어를 잘하려면 외국어 화자의 말이나 문장을 정확히 이해한 후, 문맥에 따른 적절한 어휘 선택, 그리고 순차적으로 결론을 향해 나아가는 문장 구성이 필요하다. 즉, 문법에 맞는 문장을 구성하는 것은 물론 의미(sementics)를 가지고 있어야 언어의 역할을 충실히 수행할 수 있다."

정의된 문제의 해결 방안은 프로그래밍 언어의 문법을 사용해 표현한다. 작성된 코드는 해결 방안의 구체적 구현물이다. 이것은 요구사항이 실현(문제가 해결)되어야 의미가 있다. 커뮤니케이션의 목적을 달성하는 것이다.

결국 프로그래밍은 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후, 그 흐름을 제어하는 것이다.

Review

컴퓨터는 정확하다. 요구한 대로 동작한다. 문제가 있는 것은 나의 코드이다. 코드를 먼저 작성하기보다 문제를 이해하고 작은 단위로 분해하고, 적절한 자료구조와 알고리즘을 사용하여 원활한 커뮤니케이션을 추구해야겠다.

[ReactJS] 2. styled-components 동작 원리

Wed, 18 Jan 2023 08:25:02 GMT

styled-components

styled-components는 CSS-in-JS 라이브러리로 Tagged Template Literals이라는 ES6 문법을 사용하여 스타일을 지정합니다. HTML 엘리먼트나 React 컴포넌트를 전달하고 백틱(`) 기호 내에 CSS 코드를 작성하면 스타일이 적용된 HTML 엘리먼트나 React 컴포넌트를 반환합니다.

동작 원리

Tagged template literals?

template literals 의 더욱 발전된 한 형태는 tagged templates 입니다. 태그를 사용하면 템플릿 리터럴을 함수로 파싱 할 수 있습니다. 태그 함수의 첫 번째 인수는 문자열 값의 배열을 포함합니다. 나머지 인수는 표현식과 관련됩니다.

** styled.h1`` ** 문법은 h1 이라는 함수를 호출하는 것(styled.h1())과 같습니다. 하지만 차이점은 tagged templates literals를 사용하면 템플릿 리터럴이 모두 분할되어 문자열 배열을 첫 번째 인자로 가지고 다음 인자는 스트링 템플릿(${})으로 전달된 값들을 갖습니다.

const logArgs = (...args) => console.log(...args)
const favoriteFood = 'pizza'

logArgs(`I like ${favoriteFood}`)
// I like pizza

logArgs`I like ${favoriteFood}`
// ['I like ', ''] 'pizza'

이를 사용한 styled-components에서의 예제로 살펴보겠습니다.

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
`;

const App = () => {
  console.log(Title);
  return ToDoList
};

전달한 HTML Element에 해시값으로 자동으로 클래스명이 생성되었고 스타일 태그로 적용된 것을 확인할 수 있습니다. 출력 결과의 componentStyle > rules를 살펴보면 tagged templates literals 문법으로 표현되어 있습니다.

데이터를 가공하는 방법에 대해서는 "Styled Components의 작동 원리 (ES6 태그 템플릿)" 이 영상을 참고해보세요.

styled-components는 렌더링 될 때 DOM 요소에 고유한 클래스명이 주입되므로 다른 요소에 영향을 미치지 않으며 CSS 표준 문법을 사용해 쉽게 스타일을 적용할 수 있게 합니다.

tagged templates literals로 함수가 호출될 때 실제 함수가 전달됩니다. 아래 예제에서 괄호를 사용해 execFunArgs 함수를 호출했을 때 실제 함수가 전달되지 않았기 때문에 아무 일도 일어나지 않습니다. 그저 단순한 문자열이 전달된 것입니다.

const execFuncArgs = (...args) => args.forEach(arg => {
  if (typeof arg === 'function') {
    arg()
  }
})

execFuncArgs(`Hi, ${() => { console.log('Executed!') }}`)
// undefined

execFuncArgs`Hi, ${() => { console.log('Executed!') }}`
// "Executed!"

template literal 문법으로 함수를 전달할 수 있기 때문에 props에 기반한 동적인 스타일링이 가능한 것!

const Button = styled.button`
  font-size: 1em;
  color: ${props => props.primary ? "white" : "palevioletred"};
`;

return (
  
    
    
  
);

Reference

[ReactJS] 1. styled-components 사용 이유

Tue, 17 Jan 2023 10:41:14 GMT

리액트 컴포넌트 스타일링 방법들

1. Inline style

가장 간단하고 쉬운 방법으로 리액트 컴포넌트에 직접 스타일을 적용 HTML 엘리먼트의 style 속성을 이용

import React from 'react';

const Box = () => {
  return ...;
};

export default App;

2. css/scss

외부 스타일 시트 파일을 리액트 컴포넌트에서 불러와서 스타일을 적용

// styles.css

.box {
  width: '200px';
  height: '200px';
  backgroundColor: 'teal';
}

import React from 'react';
import './styles.css'

const Box = () => {
  return ...;
};

export default Box;

3. css Module

css를 모듈화 하여 사용하는 방식. css 파일을 불러올 때 고유한 클래스명을 만들어서 클래스명이 중첩되는 현상을 방지

// box.module.css

.box {
  width: '200px';
  height: '200px';
  backgroundColor: 'teal';
}

import React from 'react';
import styles from './box.module.css'

const Box = () => {
  return ...;
};

export default Box;

문제점?

inline style => :hover과 같은 의사 클래스를 사용하지 못하고 지속/확장 가능하지 않기 때문에 권장X
css/scss => css파일의 코드들이 애플리케이션 전체에 적용 ➡ 전역적으로 css를 적용하게 되면 유지 관리와 사용하기가 어려움(전역 네임스페이스)
css Module => className만으로는 동적인 스타일링을 구현하기 어려움

CSS-in-JS

JavaScript를 사용하여 스타일을 지정하는 방법으로 스타일을 구성 요소 수준으로 추상화합니다(+ CSS는 스타일을 문서 수준으로 적용).
ReactJS를 사용해 웹을 개발하면 Component 단위로 만들어 조합하여 웹 페이지를 구성합니다. JavaScript 환경을 최대한 활용하며 컴포넌트 레벨로 추상화하기에 여러 장점이 있습니다.

styled-components

styled-components는 리액트 컴포넌트에 스타일을 효율적으로 작성하기 위한 대표적인 CSS-in-JS 라이브러리 중 하나입니다. 애니메이션, 테마, 전역 스타일링, props 기반의 동적 스타일링 등 여러 강력한 기능들을 제공합니다. 다크모드와 상태변화에 따른 동적 스타일링을 효율적으로 작성하기 위해 styled-components 라이브러리를 사용하여 앞으로의 프로젝트를 진행합니다.

styled-components 를 사용하는 8가지 이유 -번역

▶ 가장 인기 있는 CSS-in-JS 라이브러리 (23. 1. 17 기준) Link

Reference

HTML 문서 구조

Thu, 19 May 2022 12:56:31 GMT

HTML 문서 구조

시맨틱 태그

시멘틱(semantic) 이란 '의미론적인', '의미가 통하는'이라는 뜻이 있습니다. 의미에 맞는 태그, 요소를 사용하고 구조화를 잘 해주어야 기계뿐 아니라 사람에게도 명확한 의미를 전달할 수 있습니다.

시맨틱 태그를 사용하여 얻는 이점

검색 엔진에 의해 검색 결과가 상위에 노출될 수 있게 합니다.
- 검색 엔진의 동작 원리
  
  검색 엔진은 크게 정보 수집, 색인 그리고 검색의 순서로 동작합니다.
  
  검색 엔진은 사용자가 검색 엔진을 사용하기 전에 미리 웹 상에서 정보를 수집하여 색인을 만들어 놓습니다.
  
  그리고나서 사용자가 찾고자 하는 정보의 키워드를 입력하면, 미리 만들어 놓은 색인 중에서 입력된 키워드에 해당하는 정보들을 찾아서 보여주는 것입니다. 코딩의 시작, TCP School
시각 장애가 있는 사용자가 스크린 리더로 페이지를 탐색할 때 웹 사이트의 구조를 제대로 이해할 수 있습니다.
문서 구조가 정확히 나눠지므로 다양한 기기에서 웹 문서를 표현하기가 쉽습니다.

HTML 레이아웃

레이아웃(layout)은 각 구성요소를 제한된 공간 안에 효과적으로 배열하는 일을 의미합니다. 웹 페이지는 디자인은 서로 달라 보여도 대부분 비슷한 구조로 짜여져 있습니다.

HTML5에서는 웹 페이지의 레이아웃만을 위한 시맨틱 요소들을 제공합니다. 이는 웹 브라우저가 문서 구조를 파악하는데 중요한 역할을 합니다.


    HTML

...

    
        HTML Tags
        HTML tags are ...

같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만듭니다.

요소는 주요 탐색 링크에만 쓰입니다. 문서의 모든 링크가

요소 안에 있을 필요가 없으며 사이트 전체 탐색이나 현재 페이지 내 탐색으로 사용하는 등 하나의 문서에서 여러 개의

태그를 가질 수 있습니다. 주로 메뉴, 목차, 색인에 쓰입니다.


  
    Home
    About
    Contact

만 사용해야 합니다.


  Front-end web develop
  Front-end web development is the development of the graphical user interface of a website.
  
    HTML
    HyperText Markup Language (HTML) is the backbone of any website development process, without which a web page does not exist
  
  
    CSS
    Cascading Style Sheets (CSS) controls the presentation aspect of the site and allows your site to have its own unique look.
  
  
    JavaScript
    JavaScript is an event-based imperative programming language (as opposed to HTML's declarative language model) that is used to transform a static HTML page into a dynamic interface.

웹 페이지의 구역을 나타내는 데 사용됩니다. 섹션의 예로는 장(chapter), 탭 대화 상자 내의 다양한 탭 페이지, 논문의 장/절 등이 있습니다. 각각의 구역을 구별하기 위해 제목 요소(h1~h6)를 자식 요소로 포함하고 있는 경우가 많습니다. 단순한 스타일링이 목적이라면

요소를 사용해야 합니다.

문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구역을 나타냅니다. 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 여기에 해당합니다.

Most Popular Browsers

    Google Chrome
    Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!


    Mozilla Firefox
    Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.

article vs section

자체만으로 다른 페이지에 보여질 수 있을 때 article을 사용하며 section은 일반적으로 제목(h1-h6)으로 시작하여 관련된 정보를 포함하고 있는 구역입니다.

내에 많은 내용이 포함될텐데 연관있는 내용들을 묶어줄 때

을 사용할 수 있습니다. 여러 개의

을

로 묶을 수 있고 그 반대도 가능합니다.

주요 콘텐츠에 대한 몇 가지 추가 정보를 포함하는 데 사용됩니다. 문서의 주요 내용과 간접적으로만 연관되어 해당 콘텐츠들로부터 분리시킬 수 있는 콘텐츠로 구성된 페이지 영역을 정의합니다.

HTML(Hypertext Markup Language) is a markup language that tells web browsers how to structure the web pages you visit.

    markup language
    A markup language is a set of rules governing what markup information may be included in a document and how it is combined with the content of the document in a way to facilitate use by humans and computer programs.

작성자, 저작권 정보, 관련 문서, 사이트맵 등 문서 또는 구역의 바닥글 콘텐츠를 포함하는 데 사용됩니다. 연락처 정보는

태그 내에 작성합니다. 하나의 HTML 문서에는 여러 개의

요소가 포함될 수 있습니다.

 
    About Us|
    Privacy Policy
    Copyright © 2022 .. All rights reserved
    Contact 010-1234-5678

Reference

HTML 텍스트 관련 태그들

Mon, 02 May 2022 12:17:05 GMT

HTML 텍스트 관련 태그

HTML의 주요 작업 중 하나는 브라우저가 텍스트를 올바르게 표시 할 수 있도록 텍스트 구조와 의미를 제공하는 것입니다. 따라서 알맞는 태그를 사용하여 텍스트로 정보를 전달하는 것은 매우 중요합니다.

제목과 단락

제목 태그

제목(heading) 태그는 문서 내에 제목을 표현할 때 사용합니다. 제목 태그는

부터
까지 중요도에 다르게 사용합니다. 각 태그들은 계층적으로 올바른 순서로 사용해야 합니다. 6개의 제목 태그를 사용할 수 있지만 가급적 많은 목차 레벨을 갖지 않도록 하는 것이 좋습니다.

: 콘텐츠의 메인 테마나 제목과 같이 가장 중요한 텍스트를 나타내는 데 사용. 페이지당 하나만 사용하는 것을 권장

,
: 일반적으로 부제목으로 사용

`, ,`
: 하위 섹션 내에서 추가 구조를 제공

HTML의 제목은 검색 엔진이 웹 페이지의 구조를 이해하고 색인을 생성하는 데 도움이 됩니다. 제목 태그는 사용자에게는 콘텐츠를 미리 보여주며 검색 엔진에게는 문맥과 계층 구조를 제공합니다.

Why do we need structure?

단락 태그

단락(paragraph) 태그는 본문에 해당하는 내용을 표현할 때 사용합니다. 여러 개의
태그를 사용하면 브라우저는 자동으로 두 단락 사이에 공백 한 줄을 추가합니다. 단락 태그 내에 많은 공백을 넣으면 브라우저는 불필요한 공백과 추가된 줄을 제거합니다. 아래 두 코드의 실행 결과는 동일합니다.html은 한 칸 이상의 공백 및 개행을 무시하기 때문에 개행을 위해서는 태그를 사용합니다.

span 태그

태그는 컨텐츠에 추가적인 의미를 더하지 않고 스타일을 적용하거나 JavaScript로 조작하기 위해 사용합니다. 또한, 텍스트의 일부 언어를 변경하거나 특정 부분에 스크립트를 적용할 때 컨테이너로 사용됩니다.

리스트

리스트는 일련된 항목들이 나열된 것들을 의미합니다. 콘텐츠가 많은 포털이나 검색 엔진같은 사이트에는 분야나 항목으로 구분할 것이 많으므로 리스트가 자주 사용됩니다.

순서 있는 목록

순서 있는 목록(ordered list)이란 각 항목을 순서대로 나열한 것입니다. 숫자 순서 형식이나 알파벳 순서 형식 또는 순서가 강조되는 모든 형식으로 항목을 나타낼 수 있습니다.

type

1 (기본값) - 숫자(1, 2, 3)
I - 대문자 로마 숫자(I II III)
i - 소문자 로마 숫자(i ii iii)
A - 대문자 알파벳(ABC)
a - 소문자 알파벳(abc)


  Coffee
  Tea
  Milk

태그는 각 목록 항목을 정의하는 데 사용됩니다. 반드시

안에 위치해야 합니다.

순서없는 목록

순서 없는 목록(unordered list)은 항목의 순서가 중요하지 않은 항목 목록을 표시하는 데 사용합니다. 서로 다른 순서의 목록을 나타내기 위해

type 속성값이 있으나 HTML5에서는 지원되지 않습니다

disc(기본값) - 원
circle - 빈 원
square - 정사각형
none - 없음

설명 목록

dl(definition/description list) 태그는 용어와 그에 대한 정의를 표현할 때 사용합니다.

: 용어를 나타내는 태그: : 용어에 대한 정의 또는 설명

헤더	설명
Cache-Control: max-age	문서의 최대 나이를 정의합니다. 최대 나이는 문서가 처음 생성된 이후부터, 신선하지 않다고 간주될 때까지 경과한 시간의 합법적인 최댓값(초 단위)입니다. `Cache-Control: max-age=484200`
Expires	절대 유효기간을 명시합니다. 만약 유효기간이 경과했다면, 그 문서는 더 이상 신선하지 않음을 뜻합니다. `Expires: Fri, 05 Jul 2002, 05:0:00 GMT`

헤더	설명
If-Modified-Since:	만약 문서가 주어진 날짜 이후로 수정되었다면 요청 메서드를 처리. 이것은 캐시된 버전으로부터 콘텐츠가 변경된 경우에만 콘텐츠를 가져오기 위해 Last-Modified 서버 응답 헤더와 함께 사용됩니다.
If-None-Match:	마지막 변경된 날짜를 맞춰보는 대신, 서버는 문서에 대한 일련번호와 같이 동작하는 특별한 태그를 제공할 수 있습니다. 캐시된 태그가 서버에 있는 문서의 태그와 다를 때만 요청을 처리합니다.

지시어	목적
Cache-Control: max-stale Cache-Control: max-stale =	캐시는 신선하지 않은 문서라도 자유롭게 제공할 수 있습니다. 만약 ~~매개변수가 지정되면, 클라이언트는 만료시간이 그 매개변수의 값만큼 지닌 문서도 받아들입니다.~~
Cache-Control: min-fresh =	클라이언트는 지금으로부터 적어도 ~~초 후까지 신선한 문서만을 받아들입니다.~~
Cache-Control: max-age =	캐시는 ~~초보다 오랫동안 캐시된 문서를 반환할 수 없습니다.~~
Cache-Control: no-cache Pragma: no-cache	이 클라이언트는 캐시된 리소스는 재검사하기 전에는 받아들이지 않을 것입니다.
Cache-Control: no-store	이 캐시는 저장소에서 문서의 흔적을 최대한 빨리 삭제해야 합니다.
Cache-Control: only-if-cached	클라이언트는 캐시에 들어있는 사본만을 원합니다.

DevSeong2

팀 프로젝트 협업하기 (git 전략)

팀 프로젝트 협업하기

목차

깃 전략 수립

커밋

커밋 유형: 작업 내용 (#이슈 넘버)

커밋 유형

규칙

Issue

Issue 작성법

Projects

PR

규칙

Wiki

브랜치 전략

브랜치 네이밍 컨벤션

git-flow 개발 프로세스

타입스크립트 이해하기

타입스크립트를 이해하기 위해

타입은 집합이다

타입 호환성

타입 계층도와 함께 기본타입 살펴보기

unknown 타입 (전체 집합)

never 타입 (공집합 타입)

void 타입

any 타입 (치트키)

객체 타입의 호환성

초과 프로퍼티 검사

Reference

타입스크립트 기본 - (2)

타입 별칭(Type Alias)

인덱스 시그니처(Index Signature)

열거형(Enum) 타입

enum의 컴파일 결과

(+) enum을 사용하지 말아야 하는 이유

Any 타입

Void 타입

함수의 void 반환 타입

Never 타입

Reference

타입스크립트 기본 - (1)

기본 타입(Basic Types)

원시 타입

number

string

boolean

null

(+) 엄격한 Null 검사 옵션 - strictNullChecks

undefined

symbol

리터럴

배열과 튜플

배열

튜플

튜플의 사용 예

객체

object로 정의

객체 리터럴 타입

(+) 명목적 타입 시스템

선택적 프로퍼티(Optional Property)

읽기전용 프로퍼티(Readonly Property)

Reference

타입스크립트 개론

타입스크립트 등장 배경

자바스크립트의 탄생

스크립트 언어, 자바스크립트

자바스크립트 이상하다

자바스크립트의 한계점

동적 타입 시스템(Dynamic Type System)

정적 타입 시스템(Static Type System)

정리) 동적 타입 시스템과 정적 타입 시스템의 장단점

타입스크립트의 독특한 타입 시스템

정리하자면 타입스크립트는

Reference

리액트 다크모드 구현하기

다크모드 구현하기

익숙한 방법이었던 styled-components

그래서 PostCSS

스타일은 어떻게 적용?

,
: 일반적으로 부제목으로 사용

`, ,`
: 하위 섹션 내에서 추가 구조를 제공