클래스를 사용할 때, ts와js가 어떻게 다른지를 보자. 여기서는 ts로 객체지향 프로그래밍을 해보자. 왜냐면 ts가 클래스 같은 객체지향 기술을 구현하고 많은 기능을 갖고있다고 생각하기 때문이다. 그리고 ts가 많은 양의 반복되는 코드드를 쓰지 않도록 어떻게 막아주는지도 알아보자.

요구: Player라는 함수를 만들고 몇몇의 property들이 있게 해보자. 대게 js에서는 this.firstName = firstName 혹은 this.lastName = lastName으로 쓰여진다. ts에서는 파라미터들을 써주기만하면 ts가 알아서 constructor함수를 만들어준다.

class Player {
  constructor(
      private firstName:string,
    private lastName:string,
  ){}
}

으로 쓰면 된다. private는 js로 컴파일되면서 사라진다.

public도 추가해보자.

class Player {
  constructor(
      private firstName:string,
    private lastName:string,
      public nickname:string
  ){}
}

const coco = new Player('coco','kay','꼬꼬'); // 정상 동작

마찬가지로 public도 js로 컴파일되면서 사라진다. ts에서만 보호해주는걸로 작동한다.

만약

coco.fistName

으로 코드를 추가했을 때, 오류가 발생한다. 왜냐하면 ts에서 fistName은 private이기 때문이다. 하지만

coco.nickname

은 정상동작한다. public이기 때문이다.

클라스의 가장 멋있는 점은 추상클래스(Abstract Class)이다.

abstract class User {
  constructor(
    private firstName:string,
    private lastName:string,
      public nickname:string
  ){}
}

class Player extends User{

}

const coco = new Player('coco','kay','꼬꼬');

추상클래스(Abstract Class)는 오직 다른클래스에서 상속받을 수만 있는 클래스이다. 하지만 이 클래스는 직접 새로운 인스턴스를 만들수는 없다. ex) new User는 추상클래스가 인스턴스를 만들수 없다고 경고 오류를 발생시킨다. new Player만 가능하다.

추상클래스안의 메소드와 abstract method를 보자. 예를 들어 getFullName()의 method를 만들어보자.

abstract class User {
  constructor(
    private firstName:string,
    private lastName:string,
      public nickname:string
  )
  private getFullName(){
    return `${this.fistName} ${this.lastName}`
  }
}

class Player extends User{

}

const coco = new Player('coco','kay','꼬꼬');
nico.getFullName();

private 및 public이 property뿐만 아니라 metho에서도 작동한다. getFullName이 private이라서 정상적으로 작동하지 않아야함에도 불구하고 js는 정상적으로 작동한다. 하지만 ts에서는 오류를 발생시키며 동작하지 않는다. 위의 코드 예제는 ts가 에러가 생기기전에 코드를 어떻게 보호해주는지 알려주기위한 예를 보여주기위해 getFullName메소드 앞에 private를 붙인것이다. private를 제거하면 ts에서도 정상적으로 동작한다.

추상메소드를 만들려면, 메소드를 클래스 안에서 구현하지 않으면 된다.

getFullName(){
    return `${this.fistName} ${this.lastName}`
  }

위의 코드 중 return `${this.fistName}` `${this.lastName} 이 부분이 메소드의 implementation(구현)이다.

하지만 우리는 메소드를 구현해서는 안되고 대신에 메소드의 call signature만 적어둬야한다. 예를 들어, User추상클래스안에 getNickName인 추상메소드가 있다고하자(말이 안되지만 예를 들어보자)

abstract class User {
  constructor(
    private firstName:string,
    private lastName:string,
      private nickname:string // 수저
  )
  abstract getNickName():void; // new
  private getFullName(){
    return `${this.fistName} ${this.lastName}`
  }
}

class Player extends User{
}

const coco = new Player('coco','kay','꼬꼬');
nico.getFullName();

new부분을 보면 return이 void인 메소드의 call signature만 가지고있는걸 볼 수 있다. abstract getNickName(arr:string):void;처럼 argument를 가질 수 있다.

ts는 Player가 getNickName을 구현해야한다고 알려주고 있다. Player함수에 마우스를 호버해보면 ts가 Player가 getNickName을 구현하지 않았다고 알려주고 있는걸 확인할 수 있다.

그러면 getNickName을 구현하자.

abstract class User {
  constructor(
    private firstName:string,
    private lastName:string,
      private nickname:string // 수정
  )
  abstract getNickName():void; // new 추상메소드 부분.
  private getFullName(){
    return `${this.fistName} ${this.lastName}`
  }
}

class Player extends User{
  getNickName(){ // new
    console.log(this.nickName) // new
  }
}

const coco = new Player('coco','kay','꼬꼬');
nico.getFullName();

문제는 여기서 console.log(this.nickName)를 사용할 수 없다는 점이다. (this.까지만 입력해도 오류 발생) 왜냐하면 우리가 이것을 private property로 만들었기 때문이다. (private nickname:string).

만약 우리가 property를 private으로 만든다면, 그 클래스를 상속하였을지라도 그 property에 접근할 수 없다.

여기서 보다시피, Player가 User를 상속받지만 Player에서는 this.nickname을 접근할 수 없다.

이러한 것은 필드를 보호하기 위한 방법이 두개(private, public)만 있는게 아니라서 그렇다. protected라고 또 다른게 하나가 더 있다.

protected는 private과 다르다. 만약 private필드가 있다면 private property를 가진 인스턴스는 밖에서 당연히 접근할 수가 없고, 다른 자식클래스에서도 접근할 수 없다. private는 말 그대로 개인적인것을 말하고, User클래스의 인스턴스나 메소드에서 접근할 수 있으나 이 User 클래스는 추상클래스여서 인스턴스화 할 수 없다.

필드가 외부로부터는 보호되지만 다른 자식 클래스에서 사용되기를 원한다면 private을 쓰지말자. 그럴때는 대신하여 protected를 써라.

abstract class User {
  constructor(
    protected firstName:string, // protected로수정
    protected lastName:string, // protected로수정
      protected nickname:string // protected로수정
  )
  abstract getNickName():void;
  private getFullName(){
    return `${this.fistName} ${this.lastName}`
  }
}

class Player extends User{
  getNickName(){
    console.log(this.nickName) // 여기!, protect로 수정했기때문에 접근 가능.
  }
}

const coco = new Player('coco','kay','꼬꼬');
nico.getFullName();

coco.firstName // new. property를 protected로 수정했기때문에 불가능

이 접근이 불가능하다. 클래스 밖에서는 여기를 접근할 수 없다는 것이다. 하지만 User를 상속하면 user.nickname에 접근할 수 있다.

private,public,protected는 접근제어자===보호등급 을 뜻함. 기본적으로 public이다.

#4.1 Recap

실습: 단어사전 만들기. 지금까지 배운것을 이용해서 해시맵을 만들어보자. 해시알고리즘을 쓰는 완벽한 해시맵이 될 것이다.

type Words = { // Words 타입이 string만을 property로 가지는 object라는 것을 의미
  [key:string]: string
}

// ex
// let dict :Wors = {
//   "potato": "food"
// }

class Dict{
  private words: Words
}

위의 코드대로 하면 Dict 클래스함수의 private words:Words에 에러가 뜬다. 왜냐하면 initialzer가 없기 때문이다. 일반적이라면 코드를

class Dict{
  constructor{
    private words: Words
  }{}
}
//js 컴파일
class Dict{
  constructor(words){
    this.words = words;
  }
}

이렇게 constructor안에 쓰기 때문이다. 하지만 js컴파일을 보면 constructor가 words를 지정해는 방식이다. 우리는 지정해주기를 원하지 않는 방식으로 구현하려한다. 그러니 이런식으로 하면 안된다.

그렇기에 우리는 word를 initializer없이 선언해주고 constructor에서 수동으로 초기화시켜줄 것이다.

type Words = {
  [key:string]: string
}

// 1이것이 내가 만든 사전이다.
class Dict{
  private words: Words; // initializer없이 선언
  constructor(){
    this.words = {}; // constructor에서 수동으로 초기화
  }
  // 4단어를 추가하기 위한 메서드를 만들자.
  add(word:Word){
      if(this.words[word.term] === undefined){
      // 주어진 단어가 아직 사전에 존재하지 않을때
      this.words[word.term] = word.def;
    } 
  }
  // 6term을 이용해서 단어를 불러오는 기능을 만들자.
  def(term:string){
    return this.words[term];
  }
}

// 2각각의 단어 구현을 Word라는 이름을 가진 클래스 함수로 만들자.
class Word{
  constructor(
      public term:string,
    public def:string.
  ){}
}

// 3새로운 Word생성하자.
const kimchi = new Word("kimchi","없으면 밥 못먹어");

// 5잘 동작하는지 테스트해보자.
const dist = new Dict();
dict.add(kimchi); // 잘 작동

// 7마찬가지로 잘 동작하는 테스트해보자. 이부분에서 kimchui의 definition을 찾을 수 있어야한다.
dict.def("kimchi")"

words가 private이므로, dictionary안에서만 words를 보기를 원한다. 하지만 그 전에 term을 이용해서 단어를 불러오는 기능을 먼저 만들자. add메소드 하단에 def메소드를 추가하자.

여기서 Dict클래스의 constructor안에서 words를 수동으로 초기화했기때문에 Word클래스를 Dict클래스의 add메서드에서 타입처럼 사용할 수 있는것이다. (add(word:Word) 부분).

add메서드의 파라미터부분에 클래스를 입력해준적이 없지만, 클래스를 타입으로 쓸때는 가능한것이다. 보다시피, 여기서 이 파라미터가 이 클래스의 인스턴스이기를 원하면 이렇게 쓸 수 있다.

지금까지 우리는 concrete타입과 generic을 알아봤다. 클래스를 타입으로 쓴 것은 이번이 처음이다.

위 예제를 확장시켜서 추가 삭제등을 추가해보자. === 과제

Dict클래스에서 단어를 삭제하고 단어를 업데이트하는 메소드를 만들자. Word클래스에서는 단어의 정의를 추가하거나 수정하는 메소드, 그리고 단어를 출력하는 메소드를 만들자. 클래스랑 메소드, 그리고 private나 public같은 것들을 사용해서 뭔가를 만들어봐라.

다형성(polymorphism) ts에 어떻게 다형성을 주는지 살펴보자. generic이라 불리는 것을.

다형성이란, 우선 poly는 many,several, much, multi를 뜻을 가지고있고,
morphos 혹은 morphism은 form, structure라는 뜻을 가지고 있다. 따라서 다형성이란 여러가지 다른 구조물 이라는 뜻이다.

함수는 기본적으로 여러가지 다른 모양 또는 다른 형태를 가지고있다. 앞서 공부했던 내용을 보면 함수는 다른 2~3개의 parameter를 가질 수 있다고 했었다. 또는 ts에서 함수는 string이나 object를 첫번째 파라미터로 가질 수 있다고 했다.

따라서 우리는 이미 약간의 여러가지 모양의 다형성(polymorphism)을 해본것이다.

이번에는 제네릭이 어떻게 좀 더 도움을 줄 수 있는지 알아보자.

타입에 신경쓰지 않고 숫자로 이루어져있는 배열을 받고, 그 배열의 요소인 숫자를 각각 하나씩 print(출력)해주는 함수를 예로 만들어보자. 또한 string으로 이루어져있는 배열을 받고, string을 하나씩 출력하자.

// 첫번째로 call signature를 선언.
type SuperPring = {
  (arr: number[]):void // number배열을 받고, void를 리턴한다. 왜냐면 함수는 아무것도 리턴하지 않으니까.
}

// 그다음에 superPrint함수를 만든다.
const superPrint: SuperPrint = (arr) => {
  arr.forEach(i=>console.log(i)); // 리턴하지 않고 각 요소를 출력한다.
}

위 예제에서 문제가 있다. 우리는 배열이 number로 이루어져있는지, boolean인지 string인지 정하지 않은 배열을 받아서 출력하려고한다.

// 첫번째로 call signature를 선언.
type SuperPring = {
  (arr: number[]):void
  (arr: boolean[]):void
}

// 그다음에 superPrint함수를 만든다.
const superPrint: SuperPrint = (arr) => {
  arr.forEach(i=>console.log(i)); 
}

superPrint([1,2,3,]); // 잘 동작
superPrint([true, false, true]); // 잘 동작
superPrint(['a','b','c']); // 동작 안 함. 에러 발생.

string배열을 받는 함수를 동작시키기위해서 call signature에 (arr: string[]):void를 추가해야할까? 물론 그렇게해도 동작은 되지만 정답은 아니다.

여기에서 다형성을 사용하여 ts에게 더 나은 방법으로 알려줄 수 있다.

type SuperPring = {
  (arr: number[]):void
  (arr: boolean[]):void
}

위 코드에서 number, boolean은 concreate type이 아니다. concreate type이란, 우리가 전부터 봐왔던 타입을 말한다. number타입, boolean타입, string타입, void, unknown이 concreate type이다.

generic이란, 타입의 placeholder같은거다. generic은 우리가 call signature를 작성할 때, 타입란에 들어올 확실한 타입을 모를 때 사용한다.

type SuperPring = {
  (arr: number[]):void
  (arr: boolean[]):void
  (arr: string[]):void
  (arr: number | boolean[]):void  
}

// 그다음에 superPrint함수를 만든다.
const superPrint: SuperPrint = (arr) => {
  arr.forEach(i=>console.log(i)); 
}

superPrint([1,2,3,]);
superPrint([true, false, true]);
superPrint(['a','b','c']);
superPrint([1,2,true,false]); // 를 받는 함수를 위해 call signature를 수정.

만약 위의 예시처럼 number와 boolean을 갖는 배열을 함수로 보낼때 call signature에 (arr: number | boolean[]):void를 추가해야 할까? 추가하면 물론 동작은 된다. 하지만 배열에 string이 추가되면? 그럼 또 call signature에 또 추가를 해야하고 무수한 가능성에 대해 생각해서 미리 작성해놔야한다.

이것은 옳은 방법이 아니다.

그래서 generic을 사용하는 것이다. generic을 사용하는 방법은, 먼저 ts에 generic을 사용하고 싶다고 알려야한다.

type SuperPring = {
  <TypePlaceholder>(arr: TypePlaceholder[]):void
 }

위의 코드예시처럼 꺽쇠안에 generic을 입력 후 타입란에도 동일한 generic을 사용하면 된다. 대게 <TypePlaceholder> 라는 이름 대신 <T, V>를 많이 보게 될 것이다. 이름은 상관없다. 이름이 <Potato>가 될 수도 있는 것이다.

type SuperPring = {
   <TypePlaceholder>(arr: TypePlaceholder[]):void
}

// 그다음에 superPrint함수를 만든다.
const superPrint: SuperPrint = (arr) => {
  arr.forEach(i=>console.log(i)); 
}

superPrint([1,2,3,]); // 잘 동작
superPrint([true, false, true]); // 잘 동작
superPrint(['a','b','c']); // 잘 동작
superPrint([1,2,true,false]); // 잘 동작

그러면 아무 문제 없이 잘 동작하는걸 볼 수 있다. ts가 타입추론을 하게 하는 것이다. 제네릭은 여전히 내가 함수에 타입을 입력하는 것을 허용한다.

다른 예를 들어보자. 만약 superPrint함수의 리턴 타입을 바꾸고 싶다면 함수는 배열을 받게되고 그 배열의 첫번째요소를 리턴하게 만들자.=== superPrint함수는 arr을 받고, 그 배열의 첫 번째 요소를 리턴하자.

type SuperPring = {
   <TypePlaceholder>(arr: TypePlaceholder[]) => TypePlaceholder
}

// 그다음에 superPrint함수를 만든다.
const superPrint: SuperPrint = (a) => a[0];

cosnt a = superPrint([1,2,3,]); // 타입 number
cosnt b = superPrint([true, false, true]); // 타입 boolean
cosnt c = superPrint(['a','b','c']); // 타입 string
cosnt d = superPrint([1,2,true,false,'a']); // 타입 string | number | boolean

리턴타입이 ts가 타입추론하여 나온다.

위의 call signature는 type SuperPrint = <T>(arr: T[]) => T로 자주 쓰인다.

#3.3 Generics Recap

제네릭은 내가 요구한대로 call signatuer를 생성해줄 수 ㅣ있는 도구다.

superPrint타입 제네릭을 하나 더 추가하고싶다고 예를 들어보자. 아주 쉽다.

type SuperPrint = <T, M>(arr: T[], b:M) => T

const superPrint: SuperPrint = (a) => a[0];

cosnt a = superPrint([1,2,3], 'x');

여기서 b부분이 ts가 알게되는 곳이다. ts는 제네릭이 처음 사용되는 지점을 기반으로 이 타입이 무엇인지 알게된다. (, 'x') 두번째 인자를 넣음으로써 ts는 이제 두번째 arguments가 함수에서 제네릭으로 되었다는것을 알게된다. ts는 제네릭을 처음 인식했을 때와 제네릭의 순서를 기반으로 제네릭의 타입을 알게된다.

#3.4 Conclusions

제네릭 마무리 앞으로 우리는 제네릭을 사용해서 직접 call signature를 만들 일은 없을 것이다. 라이브러리를 만드는 개발자는 유용하겠지만, 그 외 대부분의 경우에는 직접 제네릭을 작성할 일은 없을 거다.

다른 사용 방법을 보자. 왜냐하면 함수의 call signature 외에 이것을 또 어디서 쓸 수 있는지 아는것도 중요하기 때문이다.

위에서 들었던 예시는 이런식으로 모양을 변형할 수 있다. 위의 예시와 똑같은 동작을 한다.

function superPrint<T>(a: T[]){
  return a[0]
}

cosnt a = superPrint([1,2,3], 'x');

또는 제네릭을 이런식으로 사용할 수 있다.

type Player<E> ={
  name:string
  extraInfo:E
}

const coco: Player<{favFood:string}> = {
  name:'koko',
  extraInfo:{
    favFood:'kimchi'
  }
}

위의 예제는 이렇게 할 수도 있다.

type Player<E> ={
  name:string
  extraInfo:E
}

type CocoPlayer = Player<{favFood:string}> // new

const coco: CocoPlayer = { // new
  name:'koko',
  extraInfo:{
    favFood:'kimchi'
  }
}

이렇게도 가능하다

type Player<E> ={
  name:string
  extraInfo:E
}

type CocoExtra = { // new
  favFood:string
}

type CocoPlayer = Player<CocoExtra> // new

const coco: CocoPlayer = {
  name:'koko',
  extraInfo:{
    favFood:'kimchi'
  }
}

이런식으로 코드 확장이 가능하다.

다른 플레이어를 추가해보자

type Player<E> ={
  name:string
  extraInfo:E
}

type CocoExtra = { // new
  favFood:string
}

type CocoPlayer = Player<CocoExtra> // new

const coco: CocoPlayer = {
  name:'koko',
  extraInfo:{
    favFood:'kimchi'
  }
}

const vita: Player<null> = {
  name:'vitamin',
  extraInfo:null
}

type들까리 일종의 상속을 할 수 있다. 굳이 따지자면 지금은 상속이 아닌 재사용이긴하다.

제네릭은 함수에서만 쓰이는게 아니라 정말 많은 곳에서 쓰인다. 예를 들면, 대부분의 기본적인 ts타입은 제네릭으로 만들어져있다.

위 사진에서 자동완성의 ts표준 라이브러리를 보면 Array에 interface Array<T>라고 되어있는걸 볼 수 있다.

type A = Array<number>
let a:A = [1,2,3,4]

위 예시 또한 제네릭을 사용하는 다른 방법 중 하나이다.

만약, printAllNumber라는 함수를 만들고 여기에 number로 이루어진 배열을 받는다면 코드는 아래와 같을것이다.

function printAllNumber(arr:number[]){}
// 혹은 이렇게 쓸 수도 있다.
function printAllNumber(arr:Array<number>){}

Reactjs에서 useState는 제네릭을 받는다.

useState<number>()

call signature===function signature

다형성(polymorphism), 오버로딩(overloading), 제네릭(generics)

call signature란 함수 위에 마우스를 올렸을 때 보게되는걸 말한다.

위 사진의 call signature중 '(a:number, b:number)'는 내가 함수를 어떻게 호출해야하는것인지 알려주고, '=> number'는 함수의 반환 타입을 알려준다.

자, 이제 우리만의 call signature를 어떻게 선언할 것인지 알아보자.

type Add = (a:number, b:number) => number;

위 코드가 바로 함수의 call signature 타입을 만드는 것이다.

사용은

const add:Add = (a,b) => a+b

이렇게 하면 된다. 그러면 ts한테 타입이 number라고 말해줄 필요가 없다. add라는 변수가 Add타입을 알고있으니 ts가 유추할 수 있게 된다.

이것은 내가 타입을 만들 수 있고, 함수를 구현하기 전에 그 함수가 어떻게 작동되는지 서술해 둘 수 있다는 것이다. 슈퍼 쿨~

call signature는 함수의 인수 및 반환값의 유형을 알려주는 것이고, 따로 함수를 구현하지 않는다. 또한 javascipt로 컴파일되지 않는다. call signature는 여러 함수에 동일한 call signature를 사용할 수 있다.

# 3.1 Overloading

function overloading === method overloading Overloading

실제로 많은 오버로딩된 함수를 직접 작성하지 않는다. 우리가 개발할때 사용하는 패키지나 라이브러리들은 오버로딩을 엄청 많이 사용한다.

그래서 우리는 오버로딩이 어떻게 생겼는지, 어떻게 동작하는지를 아는 것이 매우 중요하다.

오버로딩은 함수가 서로 다른 여러개의 call signatures를 가지고 있을 때 발생시킨다. 함수가 다른 인수 유형을 수락해야하는 경우에 사용해야한다.

바보같은 예시를 보자

type Add = {
  (a: number, b: number) : number
  (a: number, b: string) : number
}

const add: Add = (a, b) => {
  if(typeof b === 'string') return a;
  returns a+b
}

이 예시는 매우 나쁜 예시이다.

Next.js에서 사용되는, 실제 개발하면서 자주 접한 오버로딩을 보자.

Router.push({
  path: '/home',
  state: 1
})

.push(/'home')

object로도 보낼 수 있고, string으로 보낼 수 있다.

ts로 구현해보자.

type Config = {
  path: string,
  state: object
}

type Push = {
  (path:string):void, // argument 1개임.
  (config:Config):void // argument 1개임.
}

//push 구현
const push:Push = (config) => {
  if(typeof config === 'string') {console.log(config);}
  else{console.log(config.path);}
}

위 예시는 아주 좋은 예시이다. 이것은 패키지나 라이브러리를 디자인할 때 많은 사람들이 사용한다. 오버로딩은 이런식으로 사용된다.

이번에는 다른 여러개의 argument를 가지고 있을 때 발생하는 효과에 대해 알아보자.

type Add ={
  (a: number, b: number) : number // argument 2개임.
  (a: number, b: number, c: number) : number // argument 3개임.
}

const add:Add = (a,b,c) => {
  return a+b
}

일 때를 예로 들어보자.

add함수에서 argument에 오류가 뜬다.

우리는 지금까지 argument가 한 개이고 개수의 차이가 없는 상황에서의 오버로딩을 보았다. 하지만 지금은 argument의 개수가 차이가 난다.

다른 개수의 파라미터(===argument)를 가지게 되면, 나머지 파라미터도 타입을 지정해줘야한다. 여기서 c파라미터는 옵션같은거다.

이 call signatur는 Add를 부를 때, a와b를 부를수도있고, 또는 a,b,c를 부를수도 있다는걸 말해주고있다. 그래서 c가 옵션인걸 알수 있다.

이럴때에는

const add:Add = (a,b,c?:number) => {
  if(c) return a+b+c
  return a+b
}

add(1,2)
add(1,2,3)

이렇게 파라미터중 c에게 너는 아마도 number일 것이다 라는것을 알려주면 된다. 잘 동작한다.

ts 타입에 대해 알아보자.

예를 먼저 들자.

// 오류 발생 코드
const player:{
  name:string,
  age:number
}={
  name:'coco'
};

일 때, ts에서는 오류를 내뱉는다. 이유는, name과 age를 받는다고 했는데, 실제로는 name하나만 있기 때문이다. age가 꼭 필수가 아닌 경우에는 어떻게 하냐면

//...
age?:number

라고 수정하면 ts오류가 뜨지 않는다. 이것이 optional parmeter(선택적 변수)를 지정하는 방법이다.

// 수정된 코드
const player:{
  name:string,
  age?:number
}={
  name:'coco'
};

이제 if문으로 age가 10이상일 때 실행하게 될 코드를 적어보자.

// 오류 발생 코드
if(player.age < 10){}

위 코드에서 ts오류가 나타난다. 왜냐하면 age가 필수 입력값이 아니기때문에 age의 타입이 number또는 undefined가 들어올 수 있기 때문이다.

그래서 player.age가 있고, 있다면 실행하게끔 수정을 해야한다. &&연산자를 사용한다.

// 수정된 코드
if(player.age && player.age < 10){}

자, 그렇다면 무수히 많은 player가 있다고 가정해보자. 그러면 코드를 이렇게 작성하게 될 것이다.

const playerJin:{
  name:string,
  age?:number
}={
  name:'jinjin'
};

const playerSol:{
    name:string,
      age?:number
}={
  name:'solsol',
  age: 2
};

.
.  
.

위의 코드를 보면 어떠한가? 중복된 타입 지정이 거슬리지 않는가?? 그렇다. 위의 코드는 중복된 코드를 Alias(별칭)타입을 생성해서 따로 뺄 수 있다.

코드를 수정해보자

type Player = {
  name:string,
  age?:number
}

const playerJin:Player={
  name:'jinjin'
};

const playerSol:Player={
  name:'solsol',
  age: 2
};

코드가 한 결 간결하지고 깔끔해졌다. 타입별칭을 사용할 때는 항상 type으로 선언을 하고 선언명의 첫문자는 꼭 대문자여야 한다.

여기서 더 나아가면, Player라는 별칭을 타입으로 사용하여jin과 sol모두 player라는걸 알 수 있기때문에 playerJin을 jin으로, playerSol을 sol로 변수이름을 수정할 수 있다.

type Player = {
  name:string,
  age?:number
}

const jin:Player={
  name:'jinjin'
};

const sol:Player={
  name:'solsol',
  age: 2
};

여기서 Alias는 object만 가능한것이 아닌 여러 타입이 가능하다.

type Age = number;
type Name = string;
type Player = {
  name: Name,
  age: Age
}

하지만 위 처럼 과도하게 재사용하는 것은 좋지 않은 방법이다. 코드가 깔끔하고 명확해질 때까지만 이 작업을 하면 된다.

이번엔 함수의 return값의 타입을 지정하는 방법을 배워보자. 조건: 이 함수는 player의 object를 만들고 그 결과로 player를 반환한다.

type Age = number;
type Name = string;
type Player = {
  name: Name,
  age: Age
}

function playerMaker(name:string){
  return{
    name // name:name 과 동일하다. key value가 똑같은 이름이면 하나만 써도 됨.
  }
}

위의 코드에서 ts는 우리가 object를 return하는 것만 알고있다. 타입이string인 name이 들어있는 object를 말이다. 하지만 우리는 ts에게 playerMaker는 Player타입을 return하고 있다고 알려주고싶다.

const coco = playerMaker('kko'); // 인자에 아무것도 들어있지 않으면(===playerMaker()) 오류를 발생시킴.
coco.age = 2;

위의 코드에서 playerMaker에는 name만 있는 object를 반환하기 때문에 coco.age를 찾을 수 없어서 오류를 일으킨다. 하지만 우리는 위에서 말했듯이 Player타입을 return하고 있다고 알려주고싶다.

방법은 간단하다. 함수 뒤에 타입을 명시하면 된다.

type Age = number;
type Name = string;
type Player = {
  name: Name,
  age: Age
}

function playerMaker(name:string):Player{
  return{
    name // name:name 과 동일하다. key value가 똑같은 이름이면 하나만 써도 됨.
  }
}

const coco = playerMaker('kko');
coco.age = 2;

playerMaker함수에서 인자를 받는 괄호 옆에 콜론:을 쓰고 리턴타입을 명시해주면 된다. 그러면 더이상 coco.age에서 오류가 생기지 않는다.

ES6문법인 화살표함수로 바꾸어보자

type Age = number;
type Name = string;
type Player = {
  name: Name,
  age: Age
}

const playerMaker = (name:string) : Player => ({name});
const coco = playerMaker('kko');
coco.age = 2;

#2.3 Types of TS part Two

js에서는 없는 readonly 동작이 ts에서는 가능하다. 위의 코드를 예로 들어보자

type Age = number;
type Name = string;
type Player = {
  readonly name: Name,
  age: Age
}

const playerMaker = (name:string) : Player => ({name});
const coco = playerMaker('kko');
coco.age = 2;
coco.name = 'koko'

Player 타입에서 name속성을 readonly로 바꾸었다. 'readonly'를 앞에 추가하면 읽기전용이 되어 수정이 불가하다. 그러므로 coco.name = 'koko'로 수정할 때 ts는 오류를 발생시켜준다.

readonly를 다른곳에서도 활용할 수 있다.

const numbersArr : readonly number[] = [1,2,3,4];
numbersArr.push(5);

위 코드처럼 numberArr변수의 타입을 readonly로 정하면 .push할 때 ts에서 'push라는 것이 readonly number[]타입에 존재하지 않기' 때문에 오류를 발생시킨다. readonly를 지우면 .push가 잘 동작한다.

배열을 바꾸지 않는 .map이나 .filter는 readonly가 붙어도 사용할 수 있다.

이번엔 Tuple에 대해 배워보자. tuple도 ts에만 있다.

Tuple은 array를 생성할 수 있게 한다. 최소한의 길이를 가져야하고, 특정 위치에 특정 타입이 있어야한다.

예를 들어보자

const player : [string, number, boolean] = ['coco',2,true];

player변수는 ts에게 이 array가 최소 3개의 아이템을 가지며, string,number,boolean순서대로여야 한다는 것을 알릴 수 있다.

Tuple은 항상 정해진 개수의 요소를 가져야하는 array를 지정할 수 있다는 것이 중요하다.

튜플로 타입 선언된 변수를 수정할 때 잘못되었다면 바로 알 수 있다.

const player : [string, number, boolean] = ['coco',2,true];
player[0] = 1; // 오류 발생. 0번째 배열은 항상 string인데 number로 바꿀 수 없다.

readonly와 함께 쓰면 올바른 수정이라 할지라도 수정이 불가능하게 할 수 있다.

const player : readonly [string, number, boolean] = ['coco',2,true];
player[0] = 'koko';

any 타입은 타입을 지정하지 않는다면 기본적으로 타입추론에 의해 any가 들어가게 된다.

const aa = []; // 여기서 aa의 타입은 any[]로 되어있다.

any는 쉽게말해서 ts에서 벗어나 js가 되고싶을때나 ts에게 바보같은 짓을 하고싶다고 허락받고 싶을 때 사용한다. any는 ts의 모든 보호장치를 비활성화 시킨다. 무분별한 any는 ts를 활용하지 못하고 있는 것이다. 지양해야한다.

#2.4 Types of TS part Three

unknown 어떤 타입인지 모르는 변수는 ts에게 어떻게 말해줘야할까? 이럴 때 unknown을 사용하면 된다.

let a: unknown;

a변수의 타입을 unknown으로 해두면, 어떤 작업을 할려면 a변수의 타입을 먼저 확인하는 방식으로 할 수 있다. 예를 들어서

let a: unknown;

let b = a + 1;

변수 b를 선언하여 a변수에 1을 더한다고 하면 ts는 오류를 발생시킨다. 왜냐하면 a는 unknowm이기 때문에 number인 1을 더할 수 없기 때문이다 이럴때는 위에서 말한것처럼 a변수의 타입을 먼저 확인하는 방식으로 해야한다.

let a: unknown;

if(typeof a === 'number'){
  let b = a + 1;
};

이렇게 typeof를 사용하여 a변수의 타입이 number인지 먼저 확인한 후에 맞다면 조건문 안의 코드를 수행하게 된다.

또는

let a: unknown;

if(typeof a === 'number'){
  let b = a + 1;
};
a.toUpperCase();

변수 a를 upperCase(===대문자) 하고싶지만 a는 unknown이기 때문에 못한다. 이럴때에도 a변수 타입을 먼저 확인하는 방식으로 해야한다.

let a: unknown;

if(typeof a === 'number'){
  let b = a + 1;
};

if(typeof a === 'string'){
  a.toUpperCase();
};

이러면 에러없이 잘 동작한다.

void void는 아무것도 return하지 않는 함수를 대상으로 사용한다.

// void발생 함수
function hello(){
  console.log('hi');
}

일 때, 함수 hello타입은 void로 되어 있는걸 확인할 수 있다.

void는 따로 지정할 필요가 없다. ts는 함수가 아무것도 return하지 않는다는것을 자동으로 인식한다.

never never타입은 많이 사용하진 않지만 무엇인지 아는 것은 중요하다. never는 함수가 절대 return하지 않을 때 발생한다.

function hello():never{
  return 'x';
}

일 때 return문에 에러가 발생한다.

하지만 return문에 오류를 발생시키면 오류가 나지 않는다.

// 여기서의 hello함수는 return하지 않고 오류를 발생시키는 함수임.
function hello():never{
  throw new Error('x');
}

또한 nenve는 타입이 두가지 일수도 있는 상황에 발생할 수 있다.

function hello(name:string|number){
  if(typeof name === 'string'){
    name // 여기서의 name 타입은 string이다.
  } else if(typeof name === 'number){ 
    name // 여기서의 name 타입은 number이다.
  } else {
    name // 여기서의 name 타입은 never이다.
  }
}

• 안정성. 타입 안정성이 큰 장점.
• 타입 안정성덕분에 런타입에러가 줄고 덕분에 생산성도 높아짐. ex)

만약 js에서 [1,2,3,4,5]인 배열과 boolean인 false를 추가한다면

const ex1 [1,2,3,4,5]+false;
console.log(ex1); // 1,2,3,4false

결과는 1,2,3,4false가 된다. - 여기에는 두가지 문제가 있다. 1. 배열이 사라진다. 1. boolean이 사라진다. - 결국 배열도, boolean이 아닌 string타입으로 변환되어 반환된다. 또다른 예를 들어보자.

function addEx(a,b){
  return a/b;
}
addEx(2,3);
addEx("xxxx");

위의 함수일 때, addEx(2,3)을 하면 결과는 0.6666666으로 함수의도대로 잘 동작한다. 하지만 addEx("xxxx")를 함수에 전달하면 결과는 NaN을 반환한다.

JS는 정말 친절한 언어이다. 개발자가 실수를 할 것이라고 생각하지않고 최대한 반환을 한다.

그래서 addEx함수에 두개의 입력값이 필요한대도 하나의 입력값만 보내도 실행을 시켜 NaN을 반환한 것이다. 에러가 없는것이다. 이것은 결코 개발자에게 좋은 것이 아니다.

다음은 런타임에러를 일으키는 예를 들어보자.

const hi = {name:'coco'};
hi.hello();

위의 예로 실행을하면 console창에 에러가 뜬다. 타입에러가 뜬다. Uncaught TypeError: hi.hello is not a function at <anonymouse>가 뜨는 이 에러는 유저의 컴퓨터에서 코드가 실행되면 나타나느 에러 이다.

코드가 실행하기 전에 오류를 띄워주어야한다. 그래서 타입스크립트를 사용하는 개발자가 많아지는 것이다.

#2.0 How Typescript Works

• 브라우저는 ts를 js로 변환하여 이해한다. Nodejs는 ts, js다 이해한다.
• ts는 개발자가 실수하지 않도로 보호해준다.
  • Q: 타입스크립트가 어떻게 우릴 보호해주냐
  • A: 타입스크립트코드가 자바스크립트로 변환되기 전에 발생한다. 즉, ts가 우리의 코드를 확인한 다음에 변환된 js안에서 실수가 일어나지 않게 확인을 해준다.
• 실수가 있는 ts코드는 런타임에 js코드로 변환되지 않는다. 실수가 없는 ts코드는 js코드로 변환된다.
• 이러한 보호장치는 런타임(유저가 코드를 실행하는)에 발생하는 것이 아니다.

ts에서 같은 js예제를 사용해보자.

const hi = {name:'coco'};
hi.hello();

ts코드에서 저렇게 작성하면 런타임 이전에 코드 작성이 완료된 시점에 hello에 빨간 밑줄이 생길 것이다. 밑줄에 마우스를 갖다대면 Property 'hello' does not exist on type '{name:'coco'}'. 라는 에러를 띄어준다. 그렇기에 우리는 실수했다는것과 실행이 안될거라는 것을 알 수 있다.

타입추론 덕에 이러한 보호장치가 가능한 것이다.

#2.1 Implicit Types vs Explicit Types

예

let a = 'hello'; // 타입추론을하여 a변수는 string타입을 받는 변수라고 추론한다.
a = 'bye'; // string을 할당하였으니 문제가 없다.
a = false; // string타입으로 추론된 a변수에 boolean이 들어오면 에러를 발생?표시?시킨다.
let b : boolean = fasle; // 명시적으로 변수 b는 boolean타입임을 표시했다.
b = 'hi'; // boolean타입으로 명시된 변수 b에 string인 hi가 할당되면 에러를 표시한다.

let c = [1,2,3];
let d : number[] = [1,2,3]; 
// 변수 c와 d는 타입이 같다.

// 타입추론과 명시는 어디에서든 가능하다
const player = {
    name:'coco'; // 타입추론으로 string타입인 것을 알 수 있다.
}
player.name = 1; // 타입추론된 string이 아닌 number이기 때문에 에러가 발생.
player.hello(); // player함수에는 hello가없기 때문에 에러 발생.

업로드 버튼 한 개

import axios from 'axios';
import React, { useEffect, useRef, useState } from 'react';

const FileLoad = () => {
  const [file, setFile] = useState();
  const [fileName, setFileName] = useState();
  const [fileArr, setFileArr] = useState([]);
  const [allFile, setAllFile] = useState([]);

  // 파일 업로드
  const handleSubmit = async (e) => {
    e.preventDefault();

    const formdata = new FormData();
    formdata.append('키', 값);
    formdata.append('키', 값);
    ...

    try {
      await axios.post(
        'http:// 파일 업로드 api 주소 ',
        formdata,
        { headers: { 'Content-Type': 'multipart/form-data' } },
      );
      location.reload(); // 새로고침
    } catch (error) {
      console.log(error);
    }
  };

  // 파일 리스트
  useEffect(() => {
    const data = { api요구 '키':값 };
    const fetchData = async () => {
      try {
        const res = await axios.post(
          'http:// 파일 리스트 api 주소 ',
          data,
          { headers: { 'Content-Type': 'application/json' } },
        );

        setAllFile(res.data);
      } catch (error) {
        console.error();
      }
    };
    fetchData();
  }, []);

  const handleClick = (e) => {
    setFile(e.target.files[0]);
    setFileName(e.target.files[0].name);
  };

  return(
   <>
      <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleClick} />
      <button type="submit">버튼</button>
    </form>
    {allFile.length &&
      allFile.map(file => {
        return (
          <ul key={file}>
            {file.split('/')[1] ? (
              <li>{file.split('/')[1]}</li>
            ) : (
              <li>파일명 : {file.split('/')[0]}</li>
            )}
          </ul>
        );
      })}
   </>
  );
};

export default FileLoad;

업로드 버튼 한 개 이상

• 조건 : form제출 시 파일 세 개를 같이 제출. 단, 하나의 업로드 버튼에서 세 개의 파일을 업로드하는 것이 아닌, 세 개의 업로드 버튼에서 각각 하나의 파일만 업로드한다.

  // 파일 세 개의 경로(Root)와 이름(Name)을 하나의 state에서 객체로 관리
  const [fileRoot, setFileRoot] = useState({
  fileOne:'',
  fileTwo:'',
  fileThree:''
  })
  const [fileName, setFileName] = useState({
  fileOne:'',
  fileTwo:'',
  fileThree:''
  })
  

// 파일 업로드 const handleFileUpload = async (e) => { e.preventDefault();

let formdata = new FormData();
 formdata.append('키', 값);
 formdata.append('키', 값);

try {
  const res = await axios.post(
    'http:// 파일 업로드 api주소 ',
    formdata,
    { headers: { 'Content-Type': 'multipart/form-data' } },
  );

  setFileRoot(fileRoot => ({ // fileRoot나 prevState로 설정해도 결과는 똑같다.
    ...fileRoot,
    [e.target.className]: res.파일의 경로값,
  }));

  setFileName(prevState => ({ // fileName이나 prevState로 설정해도 결과는 똑같다.
    ...prevState,
    [e.target.className]: res.파일의 이름,
  }));
} catch (error) {
  console.log(error);
}

};

// 파일 다운로드 const handleFileDownload = async (e) => { try { const data = {'키':값 }; const res = await axios.post( 'http:// 파일 다운로드 api 주소 ', data, { headers: {}, responseType: 'blob', }, ); 'downloadRes'); const extractDownloadFilename = res => { const disposition = res.headers['content-disposition']; const fileName = decodeURI( disposition .match(/filename[^;=\n]=((['"]).?\2|[^;\n]*)/)[1] .replace(/['"]/g, ''), ); return fileName; }; const blob = new Blob([res.data]); const fileObjectUrl = window.URL.createObjectURL(blob);

  const link = document.createElement('a');
  link.href = fileObjectUrl;
  link.style.display = 'none';
  link.download = extractDownloadFilename(res);

  document.body.appendChild(link);
  link.click();
  link.remove();

} catch (error) {
  console.log(error);
}

};

return( <>

```

• 업로드 설명

• 각각의 업로드 할 파일버튼을 생성.

• 하나의 함수handleFileDownload에서 업로드를 처리.

• onChange시 호출되는 함수에 event를 props로 넘겨준다. 넘겨 받은 함수에서 className을 검색하여, 변수를 선언한 객체의 키값이 className과 같으면 키값과 값을 저장한다.

• spread 문법을 사용하였다.

• 다운로드 설명

• 파일 다운로드도 업로드와 같다.

• 다운로드에서 중요한 부분은 blob이다.

• 파일 이름으로 다운로드하기 위해서는 content-disposition값을 가져와서 디코딩을 필수로 거쳐야한다.

• 필요한 부분을 정규표현식(regex)과 replace로 추출한다.

• new Blob() 생성자를 사용하여 유형이 지정된 배열에서 blob을 만들 수 있다.

• window.URL.createObjectURL()을 사용하여 url을 생성한다.

• <a>태그를 생성하여 attribute를 설정한다.

• 설정된 <a>태그를 document.body에 붙인다.

Spread 문법(...)이란?

• ECMAScript6(2015)에서 새로 추가된 문법이다. 문법 이름처럼 객체 혹은 배열들을 펼칠 수 있게 해준다.
• ES6의 Spread 문법(…)을 사용한 배열을 인수로 함수에 전달하면 배열의 요소를 분해하여 순차적으로 파라미터에 할당한다.
• 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있다.
• rest문법과 형태는 똑같으나, 사용이 다르다.

• Blob https://ko.javascript.info/blob https://www.w3.org/TR/FileAPI/#blob-section
• content-disposition https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition

string.replace MDN 굿~

저장할 때

import {useCookies} from 'react-cookie;
const [cookies,setCookies,removeCookies] = useCookies(['aa']);
setCookies('aa', encodeURIComponent(ㅌㅌㅌ@ㅌㅌㅌ.com));

쿠키에 저장되어있는 aa를 보면 ㅌㅌㅌ%40ㅌㅌㅌ.com으로 값이 저장되어 있다. %40 === @

불러올때,

import {useCookies} from 'react-cookie;
const [cookies,setCookies,removeCookies] = useCookies(['aa']);
decodeURIComponent(cookies.userEmail.replace(/%40/i, '@'));

정규표현식을 굳이 써봤다. replace('40%','@')해도 됨.

• next qeury hide
• nextjs remove query params
• nextjs router hide query params

1. window.history.replaceState (react)

• https://developer.mozilla.org/ko/docs/Web/API/History/replaceState
• history.replaceState(stateObj, title[, url])
• url은 optional

  2. router.replace()

  • url에서 모든 쿼리 매개변수를 제거한다.
  • router.replace('/??',undefined,{shallow:true});
  • 특정 매개변수만 제거한다.

  • const removeQueryParam = (param) => {
    const { pathname, query } = router;
    const params = new URLSearchParams(query);
    params.delete(param);
    router.replace(
     { pathname, query: params.toString() },
     undefined, 
     { shallow: true }
    );
    };
    

removeQueryParam('something');

- https://stackoverflow.com/questions/65606974/next-js-how-to-remove-query-params

## 3. Link태그 내의 'as' prop 사용 
- Link 의 as는 브라우저 URL 표시줄에 표시 될 경로에 대한 선택적 데코레이터이다.
    - https://nextjs.org/docs/api-reference/next/link

4. push 대신 url 바꾸기(Replace the URL instead of push)

• Link 컴포넌트의 기본 동작은 새로운 URL을 이력(기록) 스택에 푸시하는 것이다. 다음 예와 같이 replace prop을 사용하여 새 엔트리(항목)를 추가하지 않도록 할 수 있다.
• replace - 새 URL을 스택에 추가하는 대신 현재 기록 상태를 바꾼다. 기본값은 false이다.
  • 예) <Link href='/about' replace> About us </Link>
• https://nextjs.org/docs/api-reference/next/link

etc

• 페이지를 새로고침하지않고 url을 수정하려면 history.pushState()를 사용한다.
• window.onpopstate로 뒤로/앞으로 버튼 탐색을 감지하는 데 사용할 수 있다.
• shallow?
  • shallow - getStaticProps, getServerSideProps 또는 getInitialProps를 다시 실행하지 않고 현재 페이지의 경로를 업데이트한다. 기본값은 false이다.
  • shallow Routing(얕은 라우팅)
    • https://nextjs.org/docs/routing/shallow-routing
      • 상태를 잃지 않고 라우터 개체(userRouter 또는 withRouter)를 통해 업데이트된 pathname과 query를 받게 된다.
      • 얕은 라우팅을 활성화하려면 shallow옵션을 true로 설정한다.

• https://nextjs.org/docs/api-reference/create-next-app

MSOffice문서

• https://learn.microsoft.com/ko-kr/windows/dev-environment/javascript/nextjs-on-wsl

Automatic Setup

1. $ npx create-next-app my-app --use-npm
   • --use-npm을 붙여서 npm을 사용해서 앱을 부트스트랩하도록 CLI에 명시적으로 지시해준다.
   • nextjs 프로젝트가 생성되면 자동으로 page폴더가 생성되고, 터미널에서 npm run dev명령어를 실행할 수 있다.
   • 에디터로 next프로젝트를 실행된 기본 폴더구조.
   • npm run dev로 개발환경으로 띄운 화면.

* 예제 출처

• Nextjs 공식 페이지의 'Learn'의 Next.js 'Create your first Next.js app' 을 예제로 가져왔습니다.
• 예제 코드는 'https://nextjs.org/learn/foundations/about-nextjs?utm_source=next-site&utm_medium=nav-cta&utm_campaign=next-website' 이 링크 클릭하세요.

나눔스퀘어와 나눔스퀘어ac 차이점?

ac가 붙은 폰트의 경우 일종의 하이브리드 폰트로써 레이아웃은 OTF로 처리되었지만 윤곽선은 TTF로 처리되어 좀 더 자연스러운 느낌을 줄 수 있습니다.

1. 폰트 적용 전

• font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 가 설정 되어 있는걸 확인할 수 있다.

2. 폰트 적용 하기

a. 폰트를 담을 폴더 생성.

• 다운로드 받은 폰트 파일을 담을 폴더를 생성한다.
• 생성할 폴더의 위치는 root폴더의 public폴더 내부에 해준다.
• 폴더의 이름은 fonts로 했다.
• 생성한 fonts 폴더에 적용하려고 다운받은 폰트를 넣어준다.

b. @font-face 적용.

• root폴더의 styles폴더에서 global.css파일을 연다.
• 초기 global.css 파일의 내부 코드는 아래 이미지처럼 되어있을 것이다.
• Visual Studio Code는 Emmet abbreviations(에멧 단축키)과 snippets(스니펫)이 내장되어있다.
• 그래서 '@f'만 입력해도 제안 목록에 @font-face를 보여준다.
• 에멧 단축키를 확장하기 위해 Tab키를 누른다.
• 그러면 이미지의 빨간 화살표처럼 기본 형식으로 코드를 뱉어준다.

@font-face 의 font-family 속성에는 내가 폰트를 가져와서 사용할 이름이기 때문에 명시적으로 지어야 한다. src 속성의url()에 폰트 경로를 입력한다. 추가로 font-weight 속성을 추가한다.

• @font-face를 설정 한 코드

c. font-family 적용.

• 적용하려는 컴포넌트에 css를 적용 한다.

  • CSS 스타일 적용하는 세 가지 방법
  • 인라인 스타일(inline style)
  • 내부 스타일 시트(internal style sheet)
  • 외부 스타일 시트(external style sheet)

• 인라인 스타일로 CSS 적용

  • 적용하려는 태그에 인라인 스타일로 css 적용 header 태그인 <h1></h1> 태그 내부에 style속성을 추가해서 font-family 속성을 입력하고 global.css에서 설정한 @font-face의 font-family를 입력하면 적용이 된다.

• 태그에 인라인 스타일 적용한 후

global.css에서 설정한 font-family속성이 지워지고 새로 설정한 폰트가 적용되었다.

3. 폰트 적용 후

• 'January 2, 2020'인 날짜 컴포넌트에 font-family속성에 'NanumSquareR' 을 적용했고, 본문 컴포넌트에는 'NotoSansKR_Regular' 를 적용했다.

그 외 : Next.js _document.js 파일에서 폰트 설정

                        ** 추후 작성 예정**

• (https://nextjs.org/docs/basic-features/font-optimization)
• (https://nextjs.org/docs/advanced-features/custom-document)

• nvm은 node js버전 매니저로, 시스템에 여러 개의 nodeJS를 설치하고 사용할 버전을 쉽게 전환 할 수 있도록 도와주는 shell script로 rvm(Ruby version manager)과 비슷한 역할을 수행한다.

1. Node 버전 확인

   • $ node -v
   • 버전이 없어야 함(설치되어있는 nodejs가 없어야함).
   • Nodejs홈페이지에서 설치했다면 삭제 후 NVM으로 설치하자.

2. NVM 설치

   • NVM의 Github Repository에 방문해서 NVM 설치파일을 다운로드. (https://github.com/coreybutler/nvm-windows)
   • README.md -> Download Now!버튼 클릭.
   • 'nvm-setup.zip(4.14MB)' 파일 클릭.
   • 다운로드 한 zip파일을 열어서 'nvm-setup.exe'파일 열기.
   • 다운로드. Next 계속.

3. 설치 후 관리자권한으로 PowerShell을 열고 windows-nvm을 사용하여 현재 설치된 노드버전을 나열해야한다(이 시점에서는 없어야함).

   • $ nvm ls

4. NVM 사용법, 명령어

   • $ nvm만 입력하면 사용법이 표시됨.

5. Node 버전 변경

• 먼저 'nvm list available'을 사용해서 현재 LTS 버전 번호를 확인하고, 안정적인 Node.js 최신 LTS릴리스(권장)를 설치한 다음, 'nvm install<버전>'을 사용해서 LTS버전을 설치한다.
  • $ nvm list available 혹은
    
  • $ nvm install <원하는 버전> $ nvm install 16.6.2 64 $ nvm install 10.16.3
  • [arch]는 설치될 Node.js환경을 설정해준다. 32bit 환경이라면 32를 입력하고, 64bit환경이면 64를 입력해주면 된다.(잘 안쓰는듯) $ nvm arch 64 // or 32로 입력해줘도 된다.
  • $ nvm list 또는 $ nvm ls 설치되어 사용할 수 있는 Node.js버전이 조회된다.
  • nvm install 명령어를 통해 설치 시 wsarecv: An existing connection was forcibly closed by the remote host. 이 오류가 출력될 수 있다. 이는 nvm의 문제가 아니라 네트워크와 관련된 문제로 Node.js DIST(https://nodejs.org/dist/)접근하여 Node.js를 다운로드할 때 해당 URL이 차단되어 발생하는 현상이다. 이런경우에 Node.js DIST에서 Node.js를 직접 다운받아서 설치하면 된다.
  • Node.js DIST로 이동해서 원하는 버전으로 들어가면 tar.gz, zip등의 설치파일이 많은데 환경에 맞는 Node.js로 압축 형식으로 된 Node.js를 다운받고 이 경로로 이동하자.C:\Users\사용자 이름\AppData\Roaming\nvm
  • 해당 경로로 이동하면 nvm list나 nvm ls로 확인했던 버전이 존재한다. 이 경로에 Node.js버전 명으로 해서 압축해제 한다.
  • 압축 해제 후 nvm list 또는 nvm ls 명령어로 사용이 가능한 상태로 목록에 출려될 것이다.
    
  • $ nvm use <사용할 버전> $ nvm use 16.6.2
  • (microsoft) 프로젝트에서 사용할 Node.js버전을 변경하려면 새 프로젝트 디렉터리 mkdir NodeTest를 만들고 cd NodeTest 디렉터리로 들어간 다음, nvm use<버전>을 입력하고 사용하려는 버전 번호로 바꾼다.
  • $ node -v 또는 npm --version Node.js버전이 변경이 되어있는지 확인.
  • 이 버전 번호는 현재 Node.js버전과 연결된 npm버전으로 자동 변경된다.

NVM 에러 - exit status 5:

• nvm use 버전 명령어를 실행했는데, exit status 5: 라는 에러가 떴다.

  해결한 방법

• PowerShell을 관리자로 실행으로 열고 다시 했더니 node 버전 변경이 잘 되었다.

NVM 에러 - C:\Users\�����\AppData\Roaming\nvm could not be found or does not exist. Exiting.

• nvm을 설치하고 nvm list명령어를 실행했는데, 위의 캡쳐본의 문구가 뜨긴 하지만 그 윗줄에 nvm을 설치한 경로와 함께 could not be found or does not exist. Exiting. 문구가 같이 떴다. 윈도우 계정을 한글로 설정해서 그런거라고 한다.

  해결한 방법1

• 관리자로 실행한 CMD창에 nvm root "C:\Users\계정명\AppData\Roaming\NVM" 을 입력한다.
  • 계정명에는 본인 컴퓨터 계정명 입력하면 됨. 아니면 nvm 설치 경로 긁어오면 됨.
  • 꼭 큰 따옴표로 묶어주어야하고, 마지막은 대문자로 NVM이라고 적어야 한다.

    또다른 방법

• nvm 설치 경로를 c드라이브 하위로 바로 설정하여 설치.

참고자료

• (https://codepathfinder.com/entry/NVM-Nodejs-%EB%B2%84%EC%A0%84-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0)
• (https://docs.microsoft.com/ko-kr/windows/dev-environment/javascript/nodejs-on-windows)
• (https://kdydesign.github.io/2020/09/16/nvm-for-windows/)
• (https://kjchoi.co.kr/20)
• (https://sloth.tistory.com/72)
• (https://jinnnkcoding.tistory.com/189)

// error메시지:
Error: Cannot find module 'C:\Program Files\Git\node_modules\npm\bin\npm-cli.js'
     at Funtion.Module._resulveFilename(~~)
     at Funtion.Module._load(~~)
     at Funtion.executeUserEntryPoin[as runMain](~~){
   code: 'MODULE_NOT_FOUND',
   requireStack:[]'
}

난 그냥 npm start를 했을 뿐인데, 위와 같은 에러 메시지가 터미널에 찍혔다.

에러 해결을 위한 구글링

바로 구글링 했다. 내가 찾아본 stackoverFlow글들.

• https://stackoverflow.com/questions/44363066/error-cannot-find-module-lib-utils-unsupported-js-while-using-ionic
• https://stackoverflow.com/questions/24721903/npm-npm-cli-js-not-found-when-running-npm

해결을 위해 해 본 순서

aka 삽질 순서

1. VSC 종료 후 재시작.

2. npm 실행이 안되는 파일을 VSC로 열고 node_modules폴더 삭제.

3. 터미널 창에서 npm i입력. (하지만 위의 동일한 에러가 뜸.)

4. 스택오버플로우 댓글 싹 다 읽기.

   • 그 중에 위의 답변대로 다 했지만 해결이 안되었고, pc를 껐다가 켰더니 npm실행이 되었다는 글을 발견.

5. PC 종료 후 재시작.

6. VSC열고 npm i 입력.

   • 위의 node_modules삭제했기때문에 재설치를 위해 npm i 명령어를 사용했음.

해결

• PC 종료 후 재시작.

결과

너무 잘 됨.

결론

뭔가가 안된다? 일단 침착하게 PC를 껐다가 키자. 컴퓨터 껐다가 키는게 최고다.

• checkbox인 경우는 다중선택이 가능함을 의미하고
• radio인 경우는 단일선택이 됨을 의미한다.

radio버튼의 경우 nameattribute 같은 이름을 주어 연관성을 주지 않는다면 checkbox와 마찬가지로 여러 선택이 된다. 접근성의 의미가 없어진다.

라디오버튼 단일선택. 연관성주기.

<!-- HTML -->
<input type='radio' name='fruit'/> 사과
<input type='radio' name='fruit'/> 바나나
<input type='radio' name='fruit'/> 감

이렇게 코드를 짜면 nameattribute끼리 연관성이 생겨서 세 개의 라디오버튼 중 하나의 라디오버튼만 체크가 가능하다.

하지만 위의 코드로 작성하게 되면 라디오버튼만 클릭해야 체크가 되고, 텍스트를 클릭했을때는 라디오버튼이 체크되지않는다.

라디오버튼 글자클릭 시 라디오버튼 체크. label태그 사용

label태그 사용법1

<!-- HTML -->
<input type='radio' id='americano' name='cafe'/>
<label for='americano'>아메리카노</label>
<input type='radio' id='latte' name='cafe'/>
<label for='latte'>라떼</label>
<input type='radio' id='coldbrew' name='cafe'/>
<label for='coldbrew'>콜드브루</label>

과일과의 연관성을 설명한 이미지에서는 달라진게 없이 보이는데, html코드를 보면 label태그의 forattribute를 input태그의 idattribute와 같은 이름으로 주어서 연결을 해주었다. 글자(텍스트)를 클릭해도 해당 라디오버튼에 체크가 된다.

label태그 사용법2

<!-- HTML -->
<label>
  <input type='radio' name='cafe'/>
</label>

코드는 <label>안에 <input>을 중첩시켜 사용할 수 있다. 이 경우 암묵적으로 연관이 되기 때문에 for 및 id속성이 필요없다.

React에서 사용시 알아두어야 할 사항

form태그 안에서 사용한다면 label의 forattribute가 아닌 htmlForattribute를 사용한다.

문자열에서 특정 내용을 찾거나 대체, 중요한 부분을 가려 뽑을 때 사용한다.

주로 이메일, 전화번호 등의 입력받는 형식이 유효한지 체크할 때 사용한다.

양수, 음수, 소수점 숫자만 허용하는 정규표현식 리터럴 표기법

<!--html 구문-->
<input type='text' onChange={lookingForNum} />

/^[+-]?\d*(\.?\d*)?$/

// JS 구문
const[numbers,setNumbers] = useState('');

const lookingForNum = e =>{
 const num = /^[+-]?\d*(\.?\d*)?$/;

  if(!num.test(e.target.value))return;

}

영문자만 허용하는 정규표현식 리터럴 표기법

/[^a-zA-Z]/g

정규표현식 확인해 볼 수 있는 사이트

https://www.regexpal.com/

vscode에서 github에 push할 때

원인

1. 다른 사용자 또는 멤버(=통상 User)가 remote origin/main에 수정 commit
2. commit을 pull하기 전에 내가 같은 브랜치에 수정
3. pull하지 않은 상태에서 commit.

나의 경우엔 3번 원인이였다.

해결하기

1. git pull 시에 –allow-unrelated-histories 옵션 추가

git pull origin main –-allow-unrelated-histories git에서는 서로 관련 기록이 없는 두 프로젝트를 병합할때 기본적으로 거부하는데, 이 거부를 허용해주는 명령어다. branch에 pull할 권한이 있다면 이 방법 사용할 수 있지만, pull할 권한이 없다면 다음 방법들 중 하나를 사용하자.

2. GitHub에서 Git Repository에서 과거 Commit내역 삭제

과거 커밋내역을 삭제해도 상관없는거라면 과거 커밋내역 다 삭제하고 push하면 된다.

3. git pull 시에 --force 옵션 추가

git push origin main --force 명령어로 과거 커밋 내역이랑 상관없이 현재 커밋 내용으로 덮어씌운다.

나의 경우에는 branch를 master -> main으로 바꾸고 commit, push main할 때 오류가 난 상황이었고, pull 후에 merge를 했는데도 push할 때 오류 해결이 안되서 3번 --force명령어를 사용해서 해결했다.

• Local branch(로컬 브랜치) : main
• Remote branch(원격 브랜치) : main, master, feature01, feature02

원인:

• github초대 받고 난 후, branch생성 후 main에 push. 그리고 branch삭제안함. * 3
• 어찌저찌후에 clone해 놓은 파일 삭제후 다시 clone 함.. vscode켜보니 main브랜치 하나뿐.
• github에는 branch가 여러개. github에 있는 branch 삭제하고싶음.

과정:

• git remote update
  • 원격 브랜치에 접근하기위해 업데이트 먼저 해줘야한다.
• git branch
  • 위 명령어로 브랜치 확인해보면, 기존에 있는 main브랜치 하나만 존재한다.
• git branch -r
  • -r옵션을 주면 원격 저장소의 branch리스트를 볼 수 있다.
• git branch -a
  • -a옵션을 주면 로컬, 원격 모든 저장소의 branch리스트를 볼 수 있다.
• git push origin --delete (브랜치 이름)
  • 원격 저장소의 branch를 삭제하면서 push하는것.

검색하면서 알게 된 명령어

• git checkout -t (origin가 붙은 브랜치이름)
  • 로컬브랜치에 없지만, 원격브랜치에 있는 브랜치를 갖고 오려면 이 명령어를 사용하면 된다.

검색하면서 알게 된 지식

• 로컬에서 git branch -r명령어로 보여지는 remote branch는 실제 remote저장소의 branch가 아니다. remote저장소의 branch를 바라보는 참조내역이라고 보면 된다.
• 원격저장소의 branch가 삭제되어도 로컬에서 git branch -r로 나오는 list는 변화가 없다. 이때는 git fetch --all --prune나 git remote prune origin 둘 중 하나를 쓰면 동기화가 된다.

github에 만든 레포지토리가 있다는 전제 하에 설명. organization이랑 collaboration은 둘 다 협업을 위한 기능이다.

Collaboration

구성원 초대 방법(A가 B초대)

• 레포지토리의 'settings' -> 'Manage access' -> 'invite a collaborator' 클릭 -> 초대할 대상 아이디 입력
• 초대대상의 이메일로 초대링크가 전송됨.

구성원 대상 = 초대받은 대상(B)

• github계정 생성때 사용한 이메일 계정으로 들어가서 초대 메일 'view invitation' 클릭.
• github창 열리면 'Accept invitation'클릭. (=수락된거임)

구성원(B)이 다음으로 해야할 일.

• Collaboration은 A의 github의 레포지토리에 A,B모두 관리자권한을 동일하게 갖고 운영(?)하는 것.
• fork하지말고, window는 gitbash열어서 clone하자. (mac은 terminal사용)

내가 한 순서.

• 바탕화면에 새로운 폴더 만들어서 그 안에서 실행함.

1. $ git clone 초대보낸사람의 깃주소
2. $ git remote -v 해서 연결이 잘 되었는지 확인.
3. $ git branch 브랜치생성이름 브랜치 바로 생성하기. ex) $ git branch mybrnach
4. $ git checkout 브랜치생성이름 생성한 브랜치로 이동하기. ex) $ git checkout mybrnach

    `Switched to branch 'mybranch'`

5. $ git branch 입력하면 main에서 내가 생성한 브랜치로 이동된걸 확인할 수 있음. ex) main -> mybranch
6. vscode열어서 코딩작업하기. remote연결했기때문에 add, commit, push, pull ... 다 가능함.
   • 합쳐야할 작업물들 옮기고 add, commit, push함.
7. push하고 github레포지토리 보면, 'Pull requests'가 생김. 확인해서 merge해주면 끝!

merge 하기 위해 Create pull request 클릭하면 두가지 방법이 있음.

1. Create pull request
2. Crate draft pull request

• 'draft' 모드는 이 작업이 현재 진행중이며, 아직 merge할 수 있는 상태가 아니란 것을 나타내고, 코드에 대한 토론을 원할때 사용한다.(merge불가능)

참고 : https://dsc-sookmyung.tistory.com/24

• 문제 npm start 하고 MongooseServerSelectionError: connect ECONNREFUSED 127.0.0.1:27017 at NativeConnection.Connection.openUri 이런 오류 메세지가 뜸.

• 문제 해결 mongodb가 시작되지 않아서였음.

  1. 제어판 -> 관리도구 -> 서비스
  2. 서비스 새 창이 뜨면 MongoDB Server(MongoDB)를 오른쪽마우스 클릭해서 '시작' 클릭.

• 다시 npm start하면 연결 됨!

npm start명령어는 nodemon설치해서 nodemon --watch src/ -r esm src/index.js 명령어로 연결해둠.

• cra설치하기. $ npx create-react-app my-app $ cd my-app $ npm start -> 설명: $ npx create-react-app *폴더명지정* : 위의 코드에서는 my-app이라는 이름으로 만듦. $ cd my-app : 만든 폴더로 경로 이동. $ npm start : cra실행하는 명령어. 이 후에 $ code . 를 입력하면 vscode창이 뜬다.

1. VSCode 확장의 마켓플레이스에서 ESLint와 Prettier-Code formatter 설치.

2. eslint

• eslint-config-airbnb설치.

  $ npm i eslint-config-airbnb

  yarn쓰는 분들은 아래 명령어 입력.

  $ yarn add eslint-config-airbnb

  2-1. package.json에 "dependencies"에 "eslint-config-airbnb"가 생겼는지 확인.

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-prettier": "^3.4.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },

2-2. eslint 설정.

루트폴더에 .eslintrc.json 파일 만들기.

"plugins": ["import", "html"],
  "extends": "react-app",
  "rules": {
    "prettier/prettier": "error",
    }

저 위의 코드가 중요하다 생각함.

3. prettier

• eslint-plugin-prettier 와 eslint-config-prettier설치

  $ npm i -D prettier eslint-plugin-prettier eslint-config-prettier

3-1. 루트 폴더에 .prettierc 파일 만들기.

{
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "semi": true,
  "useTabs": false,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

3-2. 루트경로에 .eslintrc.json 파일 수정하기.

"plugins": ["import", "html","prettier"],
  "extends": ["plugin:prettier/recommended","react-app"],
  "rules": {
    "prettier/prettier": "error",
    }

4. VSCode - 파일 -> 기본설정 -> 설정 -> 설정 열기(JSON)

"editor.formatOnSave": true 로 바꿔주기.

• 타입수준? 값수준? : 공용 어휘다.

  • 여기서는 타입 수준 코드를 '타입과 타입 연산을 포함하는 코드'를 의미한다.(유효한 자바스크립트 코드는 아니지만, 유효한 타입스크립트 코드)
  • 값 수준 코드는 그 밖의 모든 것을 가리킨다.(유효한 자바스크립트 코드)

• 타입 어노테이션(type annotation)? : 어떤 변수 또는 값의 타입을 명시하는 방식.

• 타입 별칭? : let, const, var로 변수를 선언해서 값 대신에 변수를 칭하듯이, 타입 별칭으로 타입을 가리킬 수 있다.

    type Age = number;
    type Person = {
        name: string;
        age: Age;
    }
  
    // 타입스크립트는 별칭을 추론하지 않기 때문에 반드시 별칭의 타입을 명시적으로 정의해야 한다.
    let age: Age = 55;
    let user: Person = {
        name: 'hong';
        age: age;
    }

  • 타입 별칭은 복잡한 타입을 DRY(don't repeat yourself=반복하지말라)하지 않도록 해준다. 변수가 어떤 목적으로 사용되었는지 쉽게 이해할 수 있도록 도와준다(사바사).

• 유니온(union,합집합)과 인터섹션(intersection,교집합) : 실전에서는 유니온을 자주 사용한다.

ts함수 타입시그니처(=호출시그니처)

이 문법은 화살표 함수와 아주 비슷하다.

// 타입스크립트 표현
(a:number, b:number) => number

// 타입스크립트 활용 표현
type add = (a:number, b:number) => number

함수 호출 시그니처는 값이 아닌 타입 정보만 포함한다.(= 타입 수준 코드 정보만 포함한다.) 또한, 바디를 포함하지 않아 타입스크립트가 타입을 추론할 수 없기때문에 반환 타입을 명시해야 한다.

위의 단축형 호출 시그니처를 더욱 명확하게 표현할 수 있다.

//단축형 호출 시그니처
type add = (a:number, b?:number) => number

//전체 호출 시그니처
type add = {
    (a:number, b?:number):number
}

간단한 함수라면 단축형을 주로 사용, 복잡한 함수라면 전체 시그니처를 사용.

함수 시그니처 오버로딩(overloading)

오버로드 된 함수 : 호출 시그니처가 여러 개인 함수.

대부분의 프로그래밍 언어에서 여러 매개변수를 인수로 받아 어떤 타입의 값을 반환하는 함수를 선언한 다음, 이 함수가 요구하는 정확한 매개변수 집합을 건네 함수를 호출하면 항상 똑같은 타입의 반환값을 받게 된다. 타입스크립트는 이런 동적 특징을 오버로드된 함수 선언을 통해 제공하고, 입력 타입에 따라 달라지는 함수의 출력 타입은 정적 타입 시스템으로 각각 제공한다. 고급기능에 속한다!

type Vacation = {
    (from: Date, to: Date, destination: string): Holiday;
}

//type Vacation을 편도 여행과 왕복 여행을 지원하도록 코드를 수정했다.
type Vacation = {
    (from: Date, to: Date, destination: string): Holiday;
    (from: Date, destination: string): Holiday;
}

// vacation의 구현 코드다.
let vacation: Vacation = (from, to, destination) => { //... };

위의 코드는 에러를 발생시킨다. 왜일까? -> 조합된 오버로드 시그니처가 존재하지 않기 때문이다.(자동으로 추론하지 않는다) 직접 선언해서 다시 코드를 바꿔보자.

// 편도 여행과 왕복 여행 지원한 코드다.
type Vacation = {
    (from: Date, to: Date, destination: string): Holiday;
    (from: Date, destination: string): Holiday;
} // - 1

// vacation의 구현 코드다.
let vacation: Vacation = (
    from: Date, 
    toOrDestination: Date | string, 
    destination?: string
) => { // - 2
    //... 
};

• 1오버로드 된 함수 시그니처 두 개를 선언함.
• 2vacation구현의 시그니처는, 두 개의 오버로드 시그니처를 수동으로 결합한 결과와 같다.