천진난만 코딩 스토리

2023.06.17) 타입스크립트의 클래스 & 인터페이스 (2)

Wisdom_1104 — Sat, 17 Jun 2023 21:22:32 +0900

1. Type

type 의 특징을 몇 가지 짚어보자면,

// 1, 2
type Health = number;
// 3
type Team = "red" | "blue" | "yellow";

type Player = { nickname: string; team: Team; health: Health };

const rhino: Player = {
  nickname: "ori",
  team: "blue",
  health: 1,
};

특정 값이나 객체의 값에 대한 타입을 지정해줄 수 있다.
Type alias를 만들어줄 수 있다.
타입을 특정한 값을 가지도록 제한할 수 있다.

2. Interface

type과 비슷한 것이 있는데, 바로 interface 이다.

오브젝트 모양을 타입스크립트에게 설명해 주기 위한 키워드이다.

즉, type보다 활용도는 떨어지지만 간단하게 나타낼 때 좋다.

//type
type Player = {
  nickname: string;
  team: Team;
  health: Health;
}
//interface
interface Player {
  nickname: string;
  team: Team;
  health: Health;
}

위 두개는 같다. 객체의 타입 설정에 유용하게 쓰일 수 있다.

interface의 또 다른 특징으로는 속성들을 '축적'시킬 수 있다는 것이다.

interface User {
  name: string;
}
interface User {
  lastName: string;
}
interface User {
  health: number;
}
const ori: User = { name: "ori", lastName: "p", health: 5 };

3. Type과 Interface 차이점

1) 타입을 특정한 값이나 alias 자체를 interface가 설정하지 못한다.

① type

// O
type Team = "red" | "blue" | "yellow";
type Mumber = number;

② interface

// X
interface Team = "red" | "blue" | "yellow";
interface Mumber = string;

2) 상속받는 문법 및 중복 사용

① type

type A = {
  firstName: string;
};

type AA = A & {
  lastName: string;
};

// 불가능
// 이미 선언되어서 중복이 안됨
type AA = {
  age: number;
};

② interface

interface B {
  firstName: string;
}
interface BB extends B {
  lastName: string;
}
// 가능
interface BB {
  age: number;
}
// 가능
interface B {
  lastName: string;
  age: number;
}

4. Interface 사용

1) 객체 지향과 비슷한 문법을 사용해 extends로 상속받을 수 있다.

interface User {
  name: string;
  readonly age: number; //읽기 전용
}
interface Player extends User {}

const Olaf: Player = {
  name: "Olaf",
  age: 5,
};
Olaf.age = 7; // X, 읽기 전용 속성이므로 'age'에 할당할 수 없습니다.

2) 추상 클래스를 Interface와 접목 가능하다.

abstract class User {
  constructor(
    protected firstName: string, 
    protected lastName: string
  ) {}
  abstract sayHi(name: string): string;
  abstract fullName(): string;
}
class Player extends User {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
  sayHi(name: string) {
    return `Hello ${name}. My name is ${this.fullName()}`;
  }
}

위의 코드에서 User를 직접적으로 만지지않고, 상속받고 파생되는 클래스와 인스턴스로 사용할건데,

JS 컴파일 되도 남아있다. 이를 없애고 싶다면?

Interface를 사용하여 JS로 컴파일 시 사라지고, 클래스보다 훨씬 가벼우면서 교체가능하도록 한다.

interface User {
  firstName: string;
  lastName: string;
  sayHi(name: string): string;
  fullName(): string;
}
class Player implements User {
  constructor(
    public firstName: string, 
    public lastName: string
  ) { }
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
  sayHi(name: string) {
    return `Hello ${name}. My name is ${this.fullName()}`;
  }
}

추상클래스는 interface로 바꾼다.
implements 키워드를 써서 User를 구현해야하는(추상클래스 상속) Player 클래스 생성한다.
추상클래스에 썼던 생성자를 작성한다.
(보호레벨을 public으로 받는다. 인터페이스를 상속받을 땐 다른 레벨이 아닌 public로만 받아야한다)
구현한 메소드도 그대로 작성한다.
2개 이상의 인터페이스를 상속받을 수 있다.

3) 함수형에서 사용

// 파라미터에 User 적용
function makeUser(user: User) {
  return "Hello!";
}

// return까지 User 타입으로
function makeUserReturn(user: User): User {
  return { 
  	firstName: "Ol", 
    lastName: "af", 
    fullName: () => "Xx", sayHi: (name) => "string"
  };
}
makeUser({ 
	firstName: "Ol", 
    lastName: "af", 
    fullName: () => "Xx", sayHi: (name) => "string" 
});

2023.06.05) Migratory Birds (2)

Wisdom_1104 — Mon, 5 Jun 2023 19:50:41 +0900

1. 문제 및 예시

2. 내가 푼 풀이

function migratoryBirds(arr) {
  let count = {};
  for (let i = 0; i < arr.length; i++) {
    if (count[arr[i]]) {
      count[arr[i]]++;
    } else {
      count[arr[i]] = 1;
    }
  }
  
  let max = 0;
  let most = 0;
  for (const bird in count) {
    if (count[bird] > max) {
      max = count[bird];
      most = bird;
    }
  }
  return most;
}

3. 풀이 설명

다른 방법으로는

배열을 순회하면서 새의 종류별 등장 횟수를 계산하여 객체에 저장하도록 하였다.

그 후 개체를 순회하며넛 가장 많이 등장한 새의 종류를 찾는 방법으로 풀었다.

너무 어려운 것.....

2023.06.04) Migratory Birds (1)

Wisdom_1104 — Mon, 5 Jun 2023 02:31:36 +0900

1. 문제 및 예시

2. 내가 푼 풀이

function migratoryBirds(arr) {
    // Write your code here
    let ar = arr.sort()
    let answer = 0;
    let max = 1;
    let count = 1;
    for(let i=0; i<ar.length; i++){
        count = (ar.lastIndexOf(ar[i]) - ar.indexOf(ar[i])) + 1;
        if(count>max){
            max=count;
            answer=ar[i]
        }
    }
    return answer;
}

3. 풀이 설명

이번 문제는 꽤 많이 어려웠고, 이해하기 위해 직접 종이에 풀이를 써보며 계산해보았다...

for(let i=0; i<ar.length; i++){
        count = (ar.lastIndexOf(ar[i]) - ar.indexOf(ar[i])) + 1;
        if(count>max){
            max=count;
            answer=ar[i]
        }
    }

이 부분이 너무 어려웠는데,

if문은 count가 max보다 커졌을 경우에만 실행된다.

관건은,

count = (ar.lastIndexOf(ar[i]) - ar.indexOf(ar[i])) + 1;

이 부분이었는데........

ar.lastIndexOf(ar[i]) 는

ar[i]인 요소 중 가장 마지막에 위치하는 자리이다.

ex) ar = [1,2,2,2,2,3,3,4] 에서 ar[2]인 요소는 2이고 2의 마지막 위치는 ar[4]이다.

ar.indexOf(ar[i])) 는

ar[i]인 요소가 가장 처음에 위치하는 자리이다.

ex) ar = [1,2,2,3,3,4] 에서 ar[2]인 요소는 2이고 2의 처음 위치는 ar[1]이다.

+ 1 을 해주는 이유는

현재 새의 종류가 적어도 1번은 등장했다는 것을 의미한다.

그렇기에,

ar[2]라면, 4-1+1 = 4가 되어 2가 4번 나왔다는 것을 알려준다.

count가 이 횟수보다 커지지 않으면 if문을 실행되지 않고,

2를 반환하게 되는 것이다.

다만 한 케이스에서 효율성에 걸렸다......

다른 방법을 찾아보는걸로.....

2023.06.02) position의 사용법

Wisdom_1104 — Fri, 2 Jun 2023 14:31:35 +0900

1. position

CSS의 속성중 하나
웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성
position 속성을 이용하여 텍스트나 이미지같은 요소들을 원하는 곳에 위치
position의 종류 5가지
- static
- relative
- fixed
- absolute
- sticky

1) static

static은 원래 있어야할 위치이며 기본값
position속성의 기본 값
다른 요소와의 관계에 의해 자동으로 배치
top, left, right, bottom등의 offset 값을 지정 불가

2) relative

relative는 static인 상태에서의 위치를 기준으로 top, right, bottom, left로 지정된 거리만큼 이동하여 위치
원래 있던 위치를 기준으로 좌표를 지정
원래 있던 위치는 position : static(default) 이었을 때를 기준으로 좌표를 지정

3) absolute

absolute는 가장 가까운 static이 아닌 포지션을 가진 부모에 대해 상대적인 위치를 가짐
포지션을 가지는 부모가 없다면 body에 대해 상대적인 위치를 가짐
원래 위치와 상관 없이 절대 좌표와 함께 위치를 지정 가능
absolute 속성은 기준점이 중요
absolute는 position 값이 static이 아닌 것 중 가장 가까운 요소(부모태그)를 기준

4) fixed

fixed는 위치를 지정하면 뷰포트(현재 화면에 보여지고 있는 직사각형의 영역, 전체화면)에 대해서 상대적인 위치를 차지함
absolute속성과 비슷하게 문서의 흐름과 상관없이 절대 좌표와 함께 위치를 정해줌
기준점은 뷰포트의 왼쪽 위 꼭지점으로 함

5) sticky

sticky는 사용자의 스크롤 위치를 기반으로 배치됨
relative처럼 동작하다가 화면이 스크롤되어 요소가 화면 밖으로 벗어나려고 하면 fixed처럼 동작하여 뷰포트에 고정함
sticky는 기준점을 넘지 않을 때는 relative처럼 동작하다가 기준점을 벗어나면 fixed처럼 동작함
scroll이 계속되면 마지막 위치에서 멈춤
일반적인 상황에서 sticky속성의 기준점은 부모요소가 됨

2023.06.02) HTTP & HTTP의 메세지 구조

Wisdom_1104 — Fri, 2 Jun 2023 13:59:52 +0900

1. HTTP

서버와 클라이언트의 사이에서 어떻게 메시지를 교환할지를 정해놓은 규칙
HTTP는 기본적으로 request(요청)/response(응답) 구조

2. HTTP 메세지 구조

1) Request Message 구조

① Start Line

HTTP method : 요청의 의도를 담고 있는 GET, POST, PUT, DELETE등
Request target : HTTP Request가 전송되는 목표 주소
HTTP version : version에 따라 Request 메세지 구조나 데이터가 다를 수 있어서 version을 명시

② Headers

해당 request에 대한 추가 정보를 담고 있는 부분
request 메세지
body의 총 길이

③ Body

request의 실제 메시지/내용
전송하는 메세지가 없다면 body부분은 비어있음

2) Response Message 구조

① Status Line

Response의 상태를 간략하게 나타내주는 부분
HTTP version
Status Code
Status Text

② Headers

해당 request에 대한 추가 정보
Response 메세지
body의 총 길이

③ Body

request의 실제 메시지/내용- 모든 Response가 body가 있음
데이터를 전송할 필요가 없을 경우 body가 비어있음

2023.06.01) 캐시의 장단점과 활용

Wisdom_1104 — Thu, 1 Jun 2023 11:42:44 +0900

1. 캐시란?

캐시란 자주 사용하는 데이터나 값을 미리 복사해 놓은 임시 장소를 의미한다.

캐시를 통해 이전에 접근한 데이터를 다시 불러올 때 속도를 향상시키고 데이터 처리 속도를 높일 수 있다.

1) 장점

접근 시간과 계산시간을 절약하여 빠른속도로 데이터에 접근할 수 있습니다.
캐시에 저장된 데이터를 다시 불러오면 데이터 처리에 필요한 리소스를 절약할 수 있다.

2) 단점

비용이 비싸다.
데이터를 미리 저장하기 때문에 저장 용량이 한정되어 있다.
리액트에서는 캐싱을 위해 이 데이터가 원래 저장되어진 데이터와 같은지 비교하는 연산이 추가되기 때문에,

3) 프론트엔드에서 캐시의 활용

① 브라우저 캐싱에 사용

브라우저는 이전에 방문했던 페이지나 이미지를 캐싱을 한다.

다음에 이 데이터가 필요할 때, 서버로 요청하지 않고 캐시메모리에서 바로 응답 받을 수 있어 속도를 올릴 수 있다.

우리가 한 번 접속한 사이트에 다시 접속할 때 속도가 빠른 이유가 바로 이 캐시때문이다.

② 리액트에서 React.memo, useCallback, useMemo를 이용해 사용

개발자가 부모컴포넌트를 렌더링할 때 자식컴포넌트가 불필요한 리렌더링을 하지 않도록 캐싱해주는 역할을 한다.

고비율의 연산을 방지해주는 기능을 수행할 수 있다.

2023.06.01) 프레임워크와 라이브러리 차이점

Wisdom_1104 — Thu, 1 Jun 2023 11:21:30 +0900

1. 프레임워크와 라이브러리의 차이점

제어흐름이 어디있냐의 차이이다.

프레임워크는 전체적인 흐름을 자체적으로 가지고있어 개발자가 프레임워크 안에서 필요한 코드를 작성하고,

라이브러리는 개발자가 흐름을 가져 능동적으로 필요한 곳에 호출하여 사용한다.

1) 프레임워크

뼈대나 기반구조를 뜻한다.

완성된 제품을 만들기 위해서 개발자를 도와주는, 기반 역할을 한다.

소프트웨어의 특정 문제를 해결하기위해 상호 협력하는 클래스와 인터페이스의 집합이다.
(Vue.js, Angularjs, nodejs 등)

2) 라이브러리

단순 활용가능한 도구들의 집합이다. 프로그래머가 어떤 기능을 수행하기위해 도움을 주고 필요한 것을 제공해주는 역할을 한다.

개발자가 만든 클래스에서 호출하여 사용, 클래스들의 나열로 필요한 클래스를 불러서 사용하는 방식이다.

( React, Redux, styled-component 등)

2023.05.31) parameter & argument

Wisdom_1104 — Wed, 31 May 2023 12:31:36 +0900

1. parameter와 argument의 차이에 대해 설명해주세요.

1) parameter

parameter(매개변수)는 함수 내부에 있는 인자로,

특정한 값으로 정해진 것이 아니라 함수를 어디선가 호출하며 건네준 argument가 담기는 공간이다.

2) argument

argument(전달인자)는 함수를 호출할 때 값을 전달한다는 의미로 전달인자라고도 불리며 인수라고도 한다.

매개변수와 달리 전달인자는 고정되어있지 않고, 호출할 때 마다 수시로 변하는 값이기 때문에 변수가 아닌 값으로 정의한다.

2023.05.31) Hoisting & TDZ

Wisdom_1104 — Wed, 31 May 2023 11:56:59 +0900

1. Hoisting 이란?

Hoisiting이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.

대표적으로 호이스팅되는 것

var
let
const
선언적함수
class

이때 const, let, class는 TDZ의 영향을 받는다.

2. TDZ란?

TDZ란 Temporal Dead Zone으로 const, let, class가 호이스팅 시 초기화되지않기 때문에 갖는 일시적 사각지대이다.

var는 변수객체를 생성한 후 AllocateTo메소드를 통해 바로 메모리 공간에 공간을 할당하지만,

let과 const는 set_initializer_position메소드를 통해 해당 코드의 위치를 의미하는 position값만 정해준다.

즉, 선언은 되어있지만 변수에 값을 담기 위한 메모리에 공간이 확보되지 않은 상태이기때문에 let과 const는 TDZ의 영향을 받는다.

따라서, 선언은 되어있지만 아직 초기화 되지 않아 변수에 담길 값을 위한 공간이 메모리에 할당되지 않은 상태의 구역이 TDZ이다.

2023.05.30) 랜더링 & Restful API

Wisdom_1104 — Tue, 30 May 2023 13:59:09 +0900

1. 웹페이지가 브라우저에 랜더링되는 과정을 설명해주세요.

렌더링의 기본적인 동작 과정

HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing)
두 Tree를 결합하여 Rendering Tree를 만든다. (Style)
Rendering Tree에서 각 노드의 위치와 크기를 계산한다. (Layout)
계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint)
레이어를 합성하여 실제 화면에 나타낸다. (Composite)

Parsing

브라우저가 페이지를 렌더링하려면 가장 먼저 받아온 HTML 파일을 해석해야한다.

Parsing 단계는 HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성하는 단계이다.

파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM(CSS Object Model) Tree 구성 작업도 함께 진행한다.

Style

Parsing 단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜서 실제로 화면에 그려질 Tree인 ender Tree를 구성한다.

예를 들면 Render Tree를 구성할때 visibility: hidden은 요소가 공간을 차지하고,

보이지만 않기 때문에 Render Tree에 포함이 되지만, display: none 의 경우 Render Tree에서 제외된다.

Layout

Render Tree를 화면에 어떻게 배치해야 할 것인지 노드의 정확한 위치와 크기를 계산한다.

루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영한다.

만약 크기 값을 %로 지정하였다면, Layout 단계에서 % 값을 계산해서 픽셀 단위로 변환한다.

Paint

Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환한다.

이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리된다.

당연한 말이지만 스타일이 복잡할수록 Paint 시간도 늘어난다.

예를 들어, 단색 배경의 경우 시간과 작업이 적게 필요하지만, 그림자 효과는 시간과 작업이 더 많이 필요하다.

Composite

Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다.

우리는 화면에서 웹 페이지를 볼 수 있다.

2. Restful API에 대해 설명해주세요. GET,POST 외에 알고있는 메소드와 그 기준을 설명해주세요. RESTful API 가 아닌 것들은 어떤게 있나요?

RESTful API 구분

RESTful이란? REST의 설계규칙을 올바르게 지킨 시스템을 RESTful하다 말할 수 있으며,

모든 CRUD 기능을 POST로 처리하는 API 혹은 URI규칙을 지키지 않은 API.

즉, REST API의 설계 규칙을 올바르게 지키지 못한 시스템은 RESTful하다고 말할 수 없다.

RESTful API에는 다음과 같은 주요 구성요소를 포함하는 요청이 필요하다.

고유 리소스 식별자

서버는 고유한 리소스 식별자로 각 리소스를 식별한다.

REST 서비스의 경우 서버는 일반적으로 URL(Uniform Resource Locator)을 사용하여 리소스 식별을 수행한다.

URL은 리소스에 대한 경로를 지정한다. URL은 웹페이지를 방문하기 위해 브라우저에 입력하는 웹 사이트 주소와 유사하다.

URL은 요청 엔드포인트라고도 하며 클라이언트가 요구하는 사항을 서버에 명확하게 지정한다.

메서드

개발자는 종종 Hypertext Transfer Protocol(HTTP)을 사용하여 RESTful API를 구현한다.

HTTP 메서드는 리소스에 수행해야 하는 작업을 서버에 알려준다.

4가지의 일반적인 HTTP 메서드

1) GET

클라이언트는 GET을 사용하여 서버의 지정된 URL에 있는 리소스에 액세스한다.
GET 요청을 캐싱하고 RESTful API 요청에 파라미터를 넣어 전송하여 전송 전에 데이터를 필터링하도록 서버에 지시할 수 있다.

2) POST

클라이언트는 POST를 사용하여 서버에 데이터를 전송한다.
여기에는 요청과 함께 데이터 표현이 포함된다.
동일한 POST 요청을 여러 번 전송하면 동일한 리소스를 여러 번 생성하는 부작용이 있다.

3) PUT

클라이언트는 PUT을 사용하여 서버의 기존 리소스를 업데이트한다.
POST와 달리, RESTful 웹 서비스에서 동일한 PUT 요청을 여러 번 전송해도 결과는 동일하다.

4) DELETE

클라이언트는 DELETE 요청을 사용하여 리소스를 제거한다.
DELETE 요청은 서버 상태를 변경할 수 있다. 하지만 사용자에게 적절한 인증이 없으면 요청은 실패한다.

HTTP 헤더

요청 헤더는 클라이언트와 서버 간에 교환되는 메타데이터이다.

예를 들어, 요청 헤더는 요청 및 응답의 형식을 나타내고 요청 상태 등에 대한 정보를 제공한다.

데이터

REST API 요청에는 POST, PUT 및 기타 HTTP 메서드가 성공적으로 작동하기 위한 데이터가 포함될 수 있다.

파라미터

RESTful API 요청에는 수행해야 할 작업에 대한 자세한 정보를 서버에 제공하는 파라미터가 포함될 수 있다.

파라미터 유형예시

URL 세부정보를 지정하는 경로 파라미터.
리소스에 대한 추가 정보를 요청하는 쿼리 파라미터.
클라이언트를 빠르게 인증하는 쿠키 파라미터.

2023.05.26) 타입스크립트의 클래스 & 인터페이스 (1)

Wisdom_1104 — Fri, 26 May 2023 22:08:43 +0900

1. classes

자바스크립트와 동일하게 타입스크립트에도 class가 있다.

다만, 차이점도 존재한다.

어떤 보호 등급인지, 이름, 타입을 적어준다.
문법 오류나 오용 등을 거르고 컴파일 될 때 걸러지게 된다.

//JavaScript code
class Player {
	constructor(firstname, lastname, nickname) {
    	this.firstname = firstname;
        this.lastname = lastname;
        this.nickname = nickname;
    }
}
const ori = new Player("ori", "park", "박오리");

위와 같이 자바스크립트에서는 this를 꼭 써주어야 했지만,

타입스크립트에서는 그냥 써주면 된다.

객체필드도 사용용도에 따라 적어줄 수 있다.

public 혹은 private 등이 있는데,

private 써준 건 객체 밖에서 사용할 수 없다.

class Player {
  constructor(
    protected firstname: string,
    private lastname: string,
    public nickname:string
  ) {}
}

const olaf = new Player("olaf", "park", "박올라프")

2. Astract Class

추상 클래스란 다른 클래스가 상속받을 수 있는 클래스이다.

다만, 이 클래스는 직접 새로운 인스턴스를 만들 수는 없다.

즉, 추상 클래스는 오직 다른 곳에서 상속받을 수만 있는 클래스이다.

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

class Player extends User {
  // 추상 메서드는 추상 클래스를 상속받는 클래스들이 반드시 구현해야하는 메서드.
  getNickname() {
    console.log(this.nickname)
  }
}

// 불가
const ori = new User("ori", "park", "박오리")
// 가능
const olaf = new Player("olaf", "park", "박올라프")

클래스의 메소드 getFullName이 무어을 구현해야하는지 단서를 주는 것이다.

상속받은 클래스는 상속을 준 클래스의 메소드도 사용 가능하다.

olaf.getFullName();
olaf.getNickname();

3. Method in Abstract Class

메소드는 클래스 안에 있는 함수를 말한다.

물론 추상화를 쓸 수 있다.

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

class Player extends User {
  // 추상 메서드는 추상 클래스를 상속받는 클래스들이 반드시 구현해야하는 메서드.
  // 즉, getNickname을 꼭 구현해야한다.
  getNickname() {
    console.log(this.firstName)
    console.log(this.nickname)
  }
}

2023.05.25) 타입스크립트의 함수 (1)

Wisdom_1104 — Thu, 25 May 2023 21:04:41 +0900

1. call signatures

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

함수를 어떻게 호출해야하는지와 함수의 반환 타입을 알려준다.

타입을 만들 수 있고, 함수가 어떻게 작동하는지 서술해둘 수 있다.

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

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

2. overloading

함수 이름은 같지만 매개변수 또는 반환값의 타입이 다른 함수를 말한다.

선언부와 구현부로 나뉜다.

선언부 : 가능한 매개변수 타입만 지정

구현부 : 함수 구현, 모든 선언부를 표현할 수 있어야 함. 선언부의 마지막 부분에 작성되어야 함.

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

type Push = {
	(path: string): void
    (config:Config): void
}

const push: Push = (config) => {
	if (typeof config === "string") { console.log (config) }
    else {
    	console.log (config.path)
    }
}

3. polymorphism

여러가지 다양한 형태들이란 뜻이다.

type SuperPrint = {
	<T>(arr: T[]): T
}

const superPrint: SuperPrint = (arr) => arr[0]

const a= superPrint([1,2,3,4])
const b = superPrint ([true, false])
const c = superPrint (["a","b","c"])
const d = superPrint ([1,2,true,"a"])

generic을 사용하여,

함수의 call signatures를 입력할 때 placeholder를 사용하게 한다.

4. generic

generic을 쓰는 이유는 any처럼 처리하기 편하면서도 한 함수 안에서 타입을 담아 전달할 수 있기 때문에

강력한 타입 체크도 겸할 수 있기 때문이다.

제네릭 타입의 변수 이름으로 보통 JS 변수처럼 이름을 붙여줘도 되지만 T(타입), V(밸류)를 많이 쓴다.

앞에 브라켓을 넣어서 변수 선언한다.

interface SuperPrint {
  <T, M>(arr: T[], b: M): T;
}
const superPrint: SuperPrint = (arr) => {
  return arr[0];
};
const a = superPrint([1, 2, 3], "x");
const b = superPrint([1, 2, 3], [1]);

5. generic의 확장

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

type OriPlayer = Player<OriExtra>;

type OriExtra = { age: number };

const player: OriPlayer = {
  name: "Ori",
  extraInfo: {
    age: 5,
  },
};

const olafPlayer: Player<null> = {
  name: "Olaf",
  extraInfo: null,
};

이런식으로 코드 재사용을 하며 사용할 수 있다.

2023.05.25) 타입스크립트의 타입 (3)

Wisdom_1104 — Thu, 25 May 2023 17:30:45 +0900

1. unknown

any 타입과 동일하게 모든 값을 허용하지만, 할당된 값이 어떤 타입인지 모르기 때문에 함부로 프로퍼티나 연산을 할 수 없다.

unknown 타입으로 변수를 정의하면 '변수의 타입이 unknown이라 어떤 값이든 올 수 있기에 엄격하게 검사'하도록 한다.

unknown과 any 비교

unknown	any
모든 타입을 허용합니다.
프로퍼티 또는 연산을 하는 경우 컴파일러가 체크한다. -> 문제 되는 코드를 미리 예방할 수 있다.	TypeScript에서 타입 검사를 느슨하게 한다. -> 개발 당시에는 문제가 없으나 애플리케이션 또는 웹 페이지 개발 후 예기치 못한 문제가 발생할 가능성이 매우 높다.

2. void

void는 아무것도 return하지 않는 함수를 말한다.

보통은 따로 void라는 것을 지정해주지 않는다.

3. never

많이 사용하지는 않는다.

never는 함수가 절대 return 하지 않을 때 발생한다.

예를 들어, 함수에서 exception(예외)가 발생했을 경우가 있다.

// return하지 않고 에러를 발생시키는 함수
function hello():never{
	throw new Error("xxx")
}

2023.05.22) 타입스크립트의 타입 (2)

Wisdom_1104 — Tue, 23 May 2023 00:01:41 +0900

1. readonly 속성

readonly 속성은 요소를 읽기 전용으로 만들어 준다.

const names: readonly string[]=["1", "2"]
names.push()    //불가능
names.filter()    //가능
names.map()   //가능

readonly 속성을 적용하게 되면 값을 수정할 수 없게 된다.

다만, array를 변경하지 않는 즉, 불변성을 지켜주는 filter나 map은 사용할 수 있다.

다시 정리하면, readonly는 요소이 불변성을 지켜주는 보호장치인 셈이다!

2. Tuple

Tuple은 array를 생성하게 한다.

다만 최소한의 길이를 가져야 하고, 특정 위치에 특정 타입이 있어야 한다.

const user:[string, number, boolean] = ["ori", 5, true]
player[0] = 7   // 오류가 남. player[0]의 요소는 string 타입이기 때문.

타입이 주어진 위치대로 타입을 가지게 된다.

원한다면 Tuple에 readonly도 적용할 수 있다.

const user:[string, number, boolean] = ["ori", 5, true]
player[0] = "olaf"   // 타입은 같지만, readonly기 때문에 오류가 남.

3. any

any는 typescript에서 빠져나오는 방법이다.

그렇게 되면 javascript에 있는 것이 되고, typescript로서의 보호장치를 잃어버리게 된다.

const a : any [] = [1,2,3]
const b : any = true

a + b   //오류가 나지 않는다.

2023.05.18) 타입스크립트의 타입 (1)

Wisdom_1104 — Thu, 18 May 2023 19:20:34 +0900

1. 타입스크립트에서 타입을 지정해주는 방법

타입스크립트란 말 그대로 타입을 지정해준다는 의미이다.

보통 자바스크립트에서는

[1,2,3]+flase
=> 123flase

이렇게 말도 안되는 코드를 실행해준다.

number와 boolean을 더해주는 말도 안되는 실행을 보여준다.

실행되는 이유는 자바스크립트는 우리가 작성하는 코드를 최대한 이해하려고 하고,

추론하여 실행하기 때문이다. 그렇기에 저런 이상한 코드를 작성해도 오류가 발생하지 않는다.

하지만, 타입스크립트는 타입을 지정해주기에 오류가 난다고 알려주게 된다.

타입스크립트로 타입을 지정해주는 방식에는 두 가지가 있는데,

1. 명시적으로 지정해주는 방식

2. 타입스크립트가 추론하게 하는 방식

이렇게 두 가지가 있다.

let a : string = "2"    // type: string
let b = "2"    // type: string
let c : number[] = [1,2,3]    // type: number[]
let d = [1,2,3]    // type: number[]

a와 c는 타입을 명시해 주었고, b와 d는 타입을 명시해주지 않았지만,

타입스크립트가 타입을 추론하여 타입을 부여해준다.

2. 선택적 사용

const player : {
	name: string,
    age:number
} = {
	name: "Ori"
}

위의 형태로 사용할 때 age를 선택적으로 사용하려고 하면,

player 내에 age가 없을 땐 오류가 나게 된다.

그럴 땐,

const player : {
	name: string,
    age?:number
} = {
	name: "Ori"
}

?를 사용하여 선택적이게 만들어주면 되는데,

?를 사용하게 되면 age?: number | undefined 가 되어서 선택적으로 사용할 수 있게 된다.

근데 player 객체가 여러개일 때 타입을 저렇게 명시적으로 쓰게 되면 코드가 길어지고 가독성이 좋지 않아진다.

3. Alias 타입

type Player = {
	name: string,
    age?: number
}
const ori : Player = {
	name: "ori"
}
const olaf : Player = {
	name: "olaf",
    age: "5"
}

이렇게 Player라는 Alias를 타입을 적용할 수도 있다.

Alias 타입은 객체에만 이용되는 것이 아니라, 다른 곳에도 이용할 수 있다.

물론, Alias 안에 Alias를 이용할 수도 있다.

이렇게 하면 코드 재사용을 할 수 있어서 좋다!!

다만, 너무 무턱대고 Alias를 마구잡이로 사용하지는 말아야 한다.

4. 함수에서의 타입

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

function playerMaker(name:string):Player {
	return {
    	name
    }
}
//화살표 함수의 경우
const playerMaker = (name:string):Player => ({name})

const ori = playerMaker("ori")
ori.age = 7

playerMaker라는 함수의 프로퍼티인 name의 타입을 지정해주고,

return의 타입도 함수의 괄호 옆에 ':타입'을 하여 지정해줄 수 있다.

2023.05.14) 항해 14주차 회고

Wisdom_1104 — Mon, 15 May 2023 00:03:08 +0900

드디어 실전 프로젝트가 끝났따.....!!!!!!!

리팩토링에 리팩토링의 리팩토링을 거쳐,

발표 준비에 발표를 거쳐 드디어 다 끝났다!!!!!

진짜 발표하려는데 너어어어어무 떨려서 파들파들 떨렸지만!!

내색하지 않고 잘 마친 것 같다.

프로젝트 주차는 마무리 되었지만?!

끝날 때까지 끝난게 아니지....

끝없는 디벨롭과 공부...

그리고 이력서와 면접 준비까지!!!!!

할건 많구 내 몸은 하나고....

이와중에 날씨는 좋고!!!!!!!!

그렇지만 집중해서 하려고 노력 중!!!!!!

2023.05.14) styled-components와 emotion

Wisdom_1104 — Sun, 14 May 2023 23:43:23 +0900

원래는 styled-components 를 사용해서 프로젝트를 해왔다.

근데 이번에 emotion을 알게 되었고, 이 둘을 비교하여 공부를 해봤다.

결론부터 말하자면? 별 다를게 없다!!

사용법도 크기도 확연한 차이를 드러내지 않는다.

그래서 뭘 써도 상관이 없을 듯 하다.

다만 타입스크립트 사용시 styled-components는

@types/styled-components

따로 설치 해주어야 한다는 차이점 정도??

속도나 크기에선 미미한 차이가 있거나 상황에 따라 달라지기에

굳이 이 둘을 따로 공부할 필요는 없는 것 같다.

//스타일드 컴포넌트
@styled-components
@types/styled-components

//이모션
@emotion/react
@emotion/styled

2023.05.13) 타입스크립트 시작하기

Wisdom_1104 — Sun, 14 May 2023 02:24:34 +0900

정리할 건 많지만,,, 노션에만 정리해두고 블로그는 못 한지 오래...

오늘은 이력서 쓰고 타입스크립트로 슬랙 클론 + 또두리스트를 만들기 위해 준비를 하려고 한다!!

또두리스트 하구 프로젝트도 타입스크립트로 변경해보고 이래저래 써봐야겠다.

타입스크립트를 수동으로 환경 세팅해주니 유익하긴 하지만, 너무 오래 걸리고 복잡해서

결국 명령어로 설치 해버렸당...

$ yarn create react-app . --template typescript
  // or 
$ npx create-react-app . --template typescript

명령어로 타입스크립트로 리액트를 설치해주었다!!

문제는 서버였다.... 이래서 백부분도 공부하라는건가보다.

파일구조 자체는 클론해올 수 있어서 클론을 했지만 디비 연결은 직접 해야했기에

mysql 설치부터 시작했다.

홈브루로 설치를 하고, 비밀번호 설정 하는 부분에서 조금 헤맸던 것 같다.

알아보니 비밀번호에 대한 정책이 강화되어서 그렇다고 한다!!

정책에 맞추어 비밀번호를 생성하니 문제없이 패스!!

이후에 스키마 생성하고, 테이블 생성한 후 기초 데이터까지 넣어주니 슝슝 돌아갔다.

물론 백 서버만...ㅎㅎ

npx sequelize db:create(스키마 생성)
npm run dev했다가 ctrl + c로 끄기(테이블 생성)
npx sequelize db:seed:all(기초 데이터 넣기)
npm run dev(앞으로 매번 이걸로 백엔드 서버 켜야 함)

localhost:3095에서 서버 돌아가는 중

구조 상 한 파일 내에 front 폴더와 back 폴더가 있기에

터미널도 두개를 열어 백과 프론트를 왔다갔다 했다 ㅎㅎ

뭔가 굉장히 흥미롭... 재미써ㅠㅠㅠㅠ

2023.04.25) 항해 79일차 (실시간 시간에 따른 예약 유무 확인)

Wisdom_1104 — Wed, 26 Apr 2023 15:14:26 +0900

회의실 예약을 하게 되면 예약한 날짜와 회의 시작, 끝 시간이 들어오게 된다.

현재 시각에 따른 예약 유무를 확인해야해서 고민을 해봤다.

들어오는 데이터를 어떻게 가공을 하고 회의 중인 저 시간에 어떻게 예약 유무를 보여 줄 것인지 고민을 했다.

정리를 해서 해야한 고민을 적자면,

1. {start: '2023-04-25T13:00', end: '2023-04-25T13:59'} 이렇게 들어오는 데이터에서

날짜와 시간을 따로 꺼내서 어떻게 가공해 쓸 것 인지.

2. start와 end의 시간 사이에 현재 시각이 위치 한다면 어떻게 구분해야할지.

3. 현재 시간은 어떻게 받아와야 할지.

4. 어떻게 예약 유무를 회의실 요소에 표현할 것인지.

들어오는 데이터와 표시하는 모습

이 고민을 해결하기 위해서

1. 데이터를 T로 잘라서 앞은 날짜로 저장하고, 뒤는 :로 다시 나눠서 시간 부분만 저장했다.

2. 분까지 계산할 필요는 없고, 시간만 생각하면 될 것 같다고 판단하여 분은 사용하지 않기로했다.

3. 현재 시간은 getData로 현재 연도, 월, 일, 시간, 분을 반아와서 날짜와 시간에 각각 저장하였다.

형식은 회의실 예약 데이터에 넘어오는 데이터와 형식을 맞추었다.

4. 현재 날짜,시간과 예약된 날짜, 시간을 검사하여 회의실 예약 유무를 임시로 보여주었다.

예약이 있다면, 현재 날짜와 같은지 검사하고 같다면 같은 시간이 있는지 검사하여 있다면 배경색을 변경하도록 표시하였다.

아직은 완벽하지 않기 때문에 내일 다시 점검해보고 제대로 연결해보려고 한다.

2023.04.23) 항해 11주차 회고 (협업, 실전프로젝트, 중간발표)

Wisdom_1104 — Mon, 24 Apr 2023 10:41:00 +0900

실전 프로젝트 기간 중 반인 3주가 지났다.

3주 동안 무언가 많이 한 것 같다.

구조물 드래그 앤 드롭, 계층형 리스트 드래그 앤 드롭 이라는 큰 과제부터

백엔드와 디자이너와의 협업도 하며 실력을 키워갔다.

드래그 앤 드롭을 크게 총 두번을 해보았는데,

그 두개도 많이 달랐다. 드래그 앤 드롭이라는 것만 같고,

코드는 아예 달랐기에 다시 공부를 하게 되었던 것 같다.

그러면서 아직 리액트와 리덕스만으로도 벅찬데

하고싶었던 공부인 타입스트립트와 next js를 해보아도 될지 고민을 했다.

그래서 생각해본 결과, 드래그 앤 드롭은 추후 블로그에도 정리해보고

앞으로 남은 기간동안 해야할 추가 기능을 구현하고,

꾸준한 리펙토링과 함께 공부도 시작해보려 한다.

조금은 더 무리해보며 할 때가 된 듯하다!!

(어쩌면 늦었다는 생각도 들지만.....!)

중간 발표를 하며 멘토님이 기술면접질문을 해주셨는데,

이 부분에 대해서도 생각해보며 좀 더 준비를 해야할 것 같다는 생각을 했다.

왜냐? 일단 최종 발표는 리더인 내가 할 것 같으니까......

내가 헤매면 모두 망하는거야...또륵...........

2023.04.09) 항해 9주차 회고 (협업, 실전 프로젝트)

Wisdom_1104 — Sun, 9 Apr 2023 20:07:51 +0900

7주차의 미니프로젝트 주차와 8주차의 클론코딩 프로젝트 주차를 지나서

어느새 실전 프로젝트 주차가 되었다.

7,8주차에는 일주일동안 만들어내야 해서 뭔가 바쁘게 지나갔던 것 같다.

실전 프로젝트는 그만큼 스코프도 넓고 실전이고 팀 리더이기에 따라오는

부담감과 책임감은 있지만, 기간이 길어서 그런지 촉박하거나 불안하지는 않다.

오히려 해야할 것들을 하나하나 해결해 나가며 얻는 뿌듯함이 더 크달까??

7주차에는 협업이라는 것에 들떠서 했던 것 같고,

8주차에는 클론 답게 똑같이 만드는 과정에 허덕였던 것 같고,

이번엔 약간 지친 상태에서 시작을 한 것 같다.

하지만 팀원들과 기획을 하고 프로젝트를 진행 하면서 오히려 힘을 얻어간 것 같다.

이번 실전 프로젝트에서는 드래그 앤 드롭으로 space를 구성하고 space의 요소를 원하는 위치로 옮기며 space를 수정하고

space를 계층형으로 관리하는 작업을 맡았다. 물론 추가될 것 같지만..!!!

주차 시작하고 이틀은 꼬박 아이디어회의를 했다.

아이디어를 픽스하고 와이어 프레임 구상에 api 명세서까지 했더니 이틀이 뚝딱 사라졌다.

코드를 본격적으로 짜기 시작한 것은 월요일부터였다.

지금 보니 6일동안 굉장한 발전을 한 것 같다.

select 영역에 있는 요소를 드래서해서 드롭할 때 복제되어 드롭되게 만들어야 했다.

첫 번째 문제는 드래그 앤 드롭 자체가 처음이었다는 것이다.....

라이브러리도 있고 다양한 방법이 있었지만, 내장 api인 드래그 앤 드롭 기능을 사용하여 시도하였다.

두 번째 문제는 기존 요소를 드래그 앤 드롭하는 기능은 잘 되었지만 복제한 요소를 드래그 앤 드롭 기능을 구현 시,

드래그 후 드롭 시 드롭하려는 곳보다 아래쪽에 드롭이 되는 문제점을 발견하였다.

여러 시도를 해본 결과 요소를 클릭 시 그 요소의 데이터를 가져와서 움직인 곳의 좌표를 다시 저장하도록 해서 해결했다.

세 번째 문제는 드롭이 가능한 영역을 설정하고 그 영역이 아닌 곳에 드롭을 하면 드롭이 되지 않게 설정을 해야 했다.

복제한 요소를 드롭할 때에는 잘 동작하였지만, 복제된 요소를 다시 드래그하여 드롭할 때에는 영역 구분없이 드롭이 되었다.

이를 해결하는 것이 제일 힘들었던 것 같다.

해결 방안으로 두 가지를 생각했었다. 드롭할 때에 설정한 영역이 아니면 드롭이 되지 않게 할 건지,

아니면 드래그 조차 안되게 할 건지의 방법 중에서 후자를 선택했다.

space를 구성할 때 이렇게 하는 것이 사용자가 이용 시 편하게 사용할 수 있을 것이란 생각이 들었기 때문이다.

설정한 영역인 부모 영역에 제한을 두어 부모 영역의 내부에서만 드래그 되도록

부모 영역의 상하좌우 좌표를 기준으로 자식 요소의 드래그 제한을 걸어주었다.

이 부분에서 반응형으로 제한이 걸려 있던 게 아니어서 반응형으로 동작하도록 변경해주었다.

네 번째 문제는 좀 치명적인 문제였다. 요소 복제 시 복제된 요소 위에 드롭하게 되면 드롭하는 요소가 두개로 복제되어 엉뚱한 위치에

생성이 되는 문제였다. 이를 해결하기 위해 기존에 복제되어 있던 요소와 위치가 겹친다면 드롭이 되지 않도록 처리해주었다.

기존에 복제된 요소의 위치와 크기를 구한 후 겹쳐지면 드롭이 되지 않도록 조건을 걸어주었다.

이러한 드래그 앤 드롭 기능을 구현하고 서버와 연결을 시도하였다.

아직은 space CRUD는 다 되었지만, 요소들은 조회, 추가, 삭제 까지만 되었다.

추가도 중복 이슈가 있어서 다시 잡아야 한다!

2023.03.14~16) 항해 37~39일차

Wisdom_1104 — Sat, 18 Mar 2023 09:07:30 +0900

과제만 주구장창 했기에 오류와 싸우느라 바빠서

블로그에 적을 것들을 잊어버렸당.......

그나마 기억나는 것을 적어야겠다.

일단 느낀 건 thunk는 어렵다...... 리액트 쿼리랑 너무 비교될 정도로 어려웠다.

그치만 thunk로도, 리액트 쿼리로도 과제 구현에 성공했다!!!!

먼저 데이터를 받아와서 get을 해주고 상세페이지를 연결해야 하는데

상위 컴포넌트에서 get을 한 것이 아니기에 오류가 났다..

그래서 아예 Router.js에서 get을 해주고 데이터를 내려주었다.

그렇게 사용하니 문제없이 사용할 수 있었다!!

과제 해둔게 배포 안되어 뭔가 했더니

yarn build로 확인해보니!

리액트 아이콘 패키지 설치 안했다...

별다른 오류는 안 떠서 몰랐다.....

패키지 설치하니 잘 된다!!!!

2023.03.13) 항해 36일차 (4-인증/인가_쿠키,세션,토큰,JWT)

Wisdom_1104 — Mon, 13 Mar 2023 20:55:03 +0900

이 부분 내용들을 아직은 와닿지 않는다....

중요한 부분인 것은 알겠고 흐름까지는 이해했지만,

이 부분은 협업 때 사용하기 위해 더 공부가 필요할 것 같다.

다시 한번 보는걸로!!!

1) 인증&인가

① 인증(Authentication) vs. 인가(Authorization)

❶인증(Authentication)

서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차이다.

❷인가(Authorization)

특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차이다.

② http 프로토콜 통신의 특징

❶ 무상태 (Stateless)

서버는 클라이언트의 상태를 기억하지 않는다.

각 요청마다 서버에서 요구하는 모든 상태 정보를 담아서 요청해야 한다.

서버는 클라이언트를 기억하지 않는다!!!

상태값은 매 요청마다 클라이언트가 가지고 오기 때문에,

서버는 클라이언트의 상태를 별도로 기억할 필요없이 주문받은 대로 응답해준다.

무상태라는 특성 덕분에 동일한 서버를 여러개로 확장시킬 수 있다. (Scale-Out)

❷비연결성 (Connectionless)

서버와 클라이언트는 연결되어 있지 않다.

서버 입장에서는 매번 새로운 요청이다.

왼쪽 이미지를 봐야함.

비연결성으로 인해 최소한의 서버 자원으로 서버를 유지할 수 있게 해준다.

하지만, 각 사용자별 요청이 잦은 서비스의 경우 이러한 비연결성은 오히려 비효율적일 수 있다.

2) 쿠키, 세션, 토큰

① 쿠키 (cookie)

무상태와 비연결성이라는 http 통신의 특징에도 불구하고 ,

마치 서버가 클라이언트의 인증 상태를 기억하는 것처럼 구현할 수 있는 수단으로 사용할 수 있다.

쿠키란 브라우저에 저장되는 텍스트 파일이며, key-value 형태로 저장된다.

쿠키는 별도로 삭제처리하거나 유효기간이 만료되지 않는 이상 서버와 통신할 때 자동으로 주고 받게 된다.

서버에 특정 API 요청을 했을 때 서버가 응답 시 header 안에 set-cookie 속성으로 쿠키 정보를 담아주면,

응답을 받은 브라우저는 쿠키를 브라우저에 자동으로 저장한다.

(저장된 쿠키정보는 개발자도구 → 애플리케이션 → 저장용량 → 쿠키 에서 확인 가능해보자!)

서버에 http 요청 할 때 마다 브라우저에 저장되어 있는 쿠키는 자동으로 서버에 보내진다.

(단, 동일한 Origin 또는 CORS를 허용하는 Origin에만 쿠키를 보낸다.)

(ex- 유튜브 서버에서 받은 쿠키는 유튜브 이용 시에만 주고 받을 수 있다.)

❶ Origin

출처(origin) 이란 protocol + host + port 를 의미한다.

❷ CORS

Cross Origin Resource Sharing(CORS)는 다른 출처에 리소스 요청하는 것을 허용하는 정책이다.

브라우저는 보안상의 이유로 기본적으로 Same Origin Policy(SOP)를 원칙으로 하고 있지만,

서버와 클라이언트 각각 CORS 설정을 통해 상호합의된 웹사이트는

예외적으로 서로 다른 출처(Cross-Origin)임에도 API 요청이 가능하다.

쿠키는 클라이언트에서 직접 추가/수정/삭제 할 수 있다.

② 세션 (session)

세션이란 사용자와 서버 간의 연결이 활성화된 상태를 의미하는 개념이다. (또는 인증이 유지되고 있는 상태)

로그인 성공 → 서버에서 세션 생성 및 저장(key-value 형식) → key(sessionId)를 브라우저에 응답(by 쿠키)

❶ 쿠키-세션 인증 방식

¹ 로그인/회원가입 시 세션 인증

²로그인/회원가입 성공 시 서버에서 쿠키에 sessionId를 담아서 보내준다.

세션 유지 상태 : 서버에서 관리하는 세션 저장소에 회원 데이터가 있다.

세션 만료 상태 : 서버에서 관리하는 세션 저장소에 회원 데이터가 없다.

³ 인가(Authorization) 필요한 API 요청/응답

⁴ 서버는 인가가 필요한 API 요청을 받으면 클라이언트 쿠키에 들어 있는

sessionId를 세션 저장소에 조회하여 있으면 DB에 데이터를 조회하여 응답한다.

③ 토큰 (token)

클라이언트에서 보관하는 암호화된 인증 정보를 의미한다.

세션처럼 서버에서 사용자의 인증 정보를 보관할 필요가 없기 때문에, 서버 부담을 줄여주는 인증 수단이라 할 수 있다.

웹에서 인증 수단으로 사용되는 토큰은 주로 JWT (Json Web Token) 을 이용한다.

❶ JWT의 특징

header.payload.signature 형식으로 3가지 데이터로 구성되어 있다.

국제 인터넷 표준 인증 규격 중 하나이다.

암호화된 토큰을 누구나 복호화하여 payload를 볼 수 있다. → 토큰의 용도는 인증정보(payload)에 대한 보호가 아니라 위조 방지다.

정보(payload)를 토큰화할 때 signature에 secret key가 필요하고,

secret key는 복호화가 아니라 토큰이 유효한 지를 검증하는 데 사용된다.

❷ JWT 토큰 인증 방식

¹ 로그인/회원가입 시 토큰 인증

²인가(Authorization) 필요한 API 요청/응답

³ Refresh Token 으로 보안 강화

리소스 접근 인가를 받기 위해 사용되는 토큰을 Access Token 이라고 부른다.

Access Token의 만료기간을 길게 잡고 인증상태를 오래 가져갈 경우 서버 부담은 줄어드나 보안성(탈취 당할 경우)에 허점이 있다.

인증 보안이 중요한 서비스의 경우 인증 시 2개의 토큰 (Access Token, Refresh Token)을 발급하고

Access Token의 기간은 30분 정도로 짧게 가져 가고, Refresh Token은 1~2주 정도로 길게 잡는 경우가 많다.

이 경우 서버에서는 Access Token이 만료되었을 때 Refresh Token 이 유효한 상태면

새로운 Access Token을 클라이언트에 발급해주고 인증상태를 유지할 수 있도록 하고,

Refresh Token 만료 시 다시 로그인하라는 메시지를 응답한다.

❸ 세션 인증 vs. 토큰 인증

	세션 인증	토큰 인증
인증정보 저장위치	서버	클라이언트
확장성 (Scale-out)	Bad	Good
보안성 (상대적)	Good	Bad
비용 (상대적)	Expensive	Cheap

2023.03.13) 항해 36일차 (3-Throttling & Debouncing)

Wisdom_1104 — Mon, 13 Mar 2023 20:53:51 +0900

이 내용은 뭔가 재미있는 부분이었다!!

테스트 하기 위해 버튼을 여러번 타다다다다닥 누르며

스트레스를 풀었달까 ㅎㅎㅎㅎㅎ

많이 어렵지도 않고 재미있어서 좋았다

하지만 이 부분이 나중에 내게 어떤 어려움으로 다가올지

아주 두근하다.....!!

1) Throttling & Debouncing

짧은 시간 간격으로 연속해서 이벤트가 발생했을 때,

과도한 이벤트 핸들러 호출을 방지하는 기법에 쓰로틀링과 디바운싱이 있다.

Timer Web API 중 setTimeout 메소드를 사용하여

쓰로틀링과 디바운싱을 각각 구현해보고 원리를 이해하고 적용할 줄 알아야 한다.

① Throttling

짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여

처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것이다.

주로 사용되는 예: 무한스크롤

  // Throttling 예제코드
  const throttle = (delay) => {
    if (timerId) {
      // timerId가 있으면 바로 함수 종료
      return;
    }
    timerId = setTimeout(() => {
      console.log(`${delay}ms 지남 추가요청 받음`);
      // alert("Home / 쓰로틀링 쪽 API호출!");
      timerId = null;
    }, delay);
  };

② Debouncing

짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가

마지막 이벤트로부터 일정 시간(delay)이 경과한 후에 한 번만 호출하도록 하는 것이다.

주로 사용되는 예: 입력값 실시간 검색, 화면 resize 이벤트

// Debouncing 예제코드
  const debounce = (delay) => {
    if (timerId) {
      // 할당되어 있는 timerId에 해당하는 타이머 제거
      clearTimeout(timerId);
    }
    timerId = setTimeout(() => {
      // timerId에 새로운 타이머 할당
      console.log(`마지막 요청으로부터 ${delay}ms지났으므로 API요청 실행!`);
      timerId = null;
    }, delay);
  };

③ 메모리 누수(Memory Leak)

필요하지 않은 메모리를 계속 점유하고 있는 현상이다.

페이지 이동 전에 setTimeout 으로 인해 타이머가 동작중인 상태에서

clearTimeout을 안해주고 페이지 이동 시,

컴포넌트는 언마운트 되었음에도 불구하고 타이머는 여전히 메모리를 차지하고 동작하고 있다.

이 경우 메모리 누수(Memory Leak)에 해당한다고 말할 수 있다.

이러한 경우에는

useEffect(()=>{
	return () => {
    //언마운트 시
    	if(timerId) {
    		clearTimeout(timerId);
    	}
    };
}, []};

위의 코드를 사용하여 이 컴포넌트가 사라질 때 타이머 아이디가 존재하면

기존의 존재하고 있는 이 타이머를 없애달라고 할 수 있다.

그럼 메모리 누수를 잡을 수 있다.

2023.03.13) 항해 36일차 (2-React Query)

Wisdom_1104 — Mon, 13 Mar 2023 20:53:40 +0900

리액트 쿼리...... 생각보다 이 친구가 날 괴롭혔다...

썽크를 해서 가볍게 할 줄 알았던 나 반성해....

결국 이 내용을 이해하기 위해 내가 전에 만들었던 투두리스트 파일을

뜯어가며 새로 고쳐보며 이해하였다.

결국 강의에 나오지 않은 부분도 완성하기 성공했다ㅡㅜㅜㅜ

너무 감격스러운 것 ㅠㅠㅠㅠㅠ

요 몇 주 심각히 힘들었는데 보상받은 기분이라 너무 좋았다!

1) React Query

① 리액트 쿼리란

❶ 기존 미들웨어의 한계

우리는 다른 서버와의 API 통신과 비동기 데이터 관리를 위해

Redux-thunk, Redux-Saga 등 미들웨어를 채택해서 사용할 수 있다.

하지만 다음과 같은 문제가 있습니다.

보일러 플레이트 : 코드량이 너무 많다.
규격화 문제 : Redux가 비동기 데이터 관리를 위한 전문 라이브러리가 아님(규격화 문제)

❷ 리액트 쿼리의 강점

너무 쉽고, 책임에서 자유롭다.
보일러 플레이트 만들다가 오류날 일이 없다!
내가 만든 부분 아니기 때문에 잘못이 일어난들 내 잘못이 아니다!!
사용방법이 기존 thunk 대비 너무 쉽구요, 직관적이자.

②주요 키워드

❶ Query

어떤 데이터에 대한 요청을 의미한다.

axios의 경우 get 요청과 비슷하다.

ex) const response = await axios.get(’http://localhost:3000/todos’)

❷ Mutation

어떤 데이터를 변경하는 것이다.

어떤 데이터라 함은, 데이터 그룹 그 자체를 의미한다.

바꾼다는 것은 추가, 수정, 삭제를 의미해요. CRUD 중, CUD에 해당한다. (Create, Update, Delete)

axios의 경우 post, put, patch, delete 요청과 비슷하다.

ex) axios.post(’http://localhost:3000/todos’., newTodo);

ex) axios.patch(http://localhost:3000/todos/${id}, {isDone: true});

❸ Query Invalidation

Query를 invalidation. 즉, 무효화 시킨다는 의미이다.

기존에 가져온 Query는 서버 데이터이기 때문에, 언제든지 변경이 있을 수 있기에 최신 상태가 아닐 수 있다.

그런 경우, 기존의 쿼리를 무효화 시킨 후 최신화 시켜야 하는데 이런 과정을 React Query에서는 알아서 해준다.

그 유용한 기능이 바로 Query Invalidation이다.

뿌듯!!!!

2023.03.13) 항해 36일차 (1-미들웨어, thunk)

Wisdom_1104 — Mon, 13 Mar 2023 20:50:10 +0900

지금 이 내용들은 "아 이렇게 쓰는거구나.", "이런식으로 사용하면 되겠네"라는 이해는 되지만

막상 과제에서는 잘 적용할 수 있을지 모르겠다.

사실 걱정되는 것이 이번 주차는 저번 주차의 과제를 하고 강의를 늦게 보기 시작해서 속도가 많이 느리다...

그래서 더 분발하고 있지만 내용이 어려운 만큼 시간이 부족한 것 또한 사실이다..

그래서 과제 두 개를 모두 해낼 수 있을지도 모르겠다.

그렇지만 일단 기죽지는 않기로 했다!!

1) Redux 미들웨어

① 미들웨어란?

리덕스에서 dispatch를 하면 action 이 리듀서로 전달이 되고, 리듀서는 새로운 state를 반환한다.

근데 미들웨어를 사용하면 이 과정 사이에 우리가 하고 싶은 작업들을 넣어서 할 수 있다.

만약 counter 프로그램에서 더하기 버튼을 클릭했을 때 바로 +1를 더하지 않고 3초를 기다렸다가,

+1이 되도록 구현하려면 미들웨어를 사용하지 않고서는 구현할 수 없다.

왜냐하면 dispatch가 되자마자 바로 action이 리듀서로 달려가서 새로운 state를 반환해버리기 때문이다.

즉, 여기서 “3초를 기다리는 작업" 이 작업을 미들웨어가 해주는 것이다.

보통 우리가 리덕스 미들웨어를 사용하는 이유는 서버와의 통신을 위해서 사용하는 것이 대부분이다.

2) thunk

① thunk란

리덕스에서 많이 사용하고 있는 미들웨어중에 하나이다.

thunk를 사용하면 우리가 dispatch를 할때 객체가 아닌 함수를 dispatch 할 수 있게 해준다.

즉 dispatch(객체) 가 아니라 dispatch(함수)를 할 수 있게 되는 것이다! 와우!!

그래서 중간에 우리가 하고자 하는 작업을 함수를 통해 넣을 수 있고, 그것이 중간에 실행이 되는 것이다.

그래서 아래 흐름과 같이 실행이 되는 것이고 , 이 함수를 thunk 함수라고 부른다.

dispatch(함수) → 함수실행 → 함수안에서 dispatch(객체)

② thunk 사용하기

툴킷에서는 createAsyncThunk 라는 API를 사용해서 thunk 함수를 생성할 수 있다.

이 API는 함수인데, 첫번째 인자에는 Action Value, 두번째 인자에는 함수가 들어간다.

이 함수에 우리가 하고 싶은 작업들을 구현하면 된다.

두번째로 들어가는 함수에서 2개의 인자를 꺼내 사용할 수 있는데,

첫번째 인자는 컴포넌트에서 보내준 payload이고, 두번째 인자는 thunk에서 제공하는 여러가지 기능이다.

fulfillWithValue 는 툴킷에서 제공하는 API 이다.

Promise에서 resolve된 경우, 다시 말해 네트워크 요청이 성공한 경우에 dispatch 해주는 기능을 가진 API 이다.

그리고 인자로는 payload를 넣어줄 수 있다.

rejectWithValue 도 툴킷에서 제공하는 API 이다.

Promise가 reject 된 경우, 네트워크 요청이 실패한 경우 dispatch 해주는 기능을 가진 API 이다.

마찬가지로 인자로 어떤 값을 넣을 수 있다.

// thunk 함수는 createAsyncThunk 라는 툴킷 API를 사용해서 생성한다.

// __가 함수 이름에 붙는 이유는 이 함수가 thunk 함수라는 것을 표시하기 위한 개인의 convention이다.

export const __addNumber = createAsyncThunk(
	"ADD_NUMBER_WAIT",
	(arg, thunkAPI)=>{},
);

③ 코드로 알아보기 1

thunk 함수를 만들어보자!

thunk 함수의 역할은 “3초를 기다리는 것” 이다.

그리고 3초가 지나면 원래 하려고 했던 ADD_NUMBER를 해주는 것 까지가 thunk함수가 해야 할 일 이다.

// src/redux/modules/counterSlice.js

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

export const __addNumber = createAsyncThunk(
	// 첫번째 인자 : action value
  "addNumber", 
	// 두번째 인자 : 콜백함수 
  (payload, thunkAPI) => {
    setTimeout(() => {
      thunkAPI.dispatch(addNumber(payload));
    }, 3000);
  }
);

const initialState = {
  number: 0,
};

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    }
  },
});

export const { addNumber } = counterSlice.actions;
export default counterSlice.reducer;

모듈에서 thunk로 3초 기다린 후에 실행되도록 한다.

// src/App.jsx

import React from "react";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { __addNumber } from "./redux/modules/counterSlice";

const App = () => {
  const dispatch = useDispatch();
  const [number, setNumber] = useState(0);
  const globalNumber = useSelector((state) => state.counter.number);

  const onChangeHandler = (evnet) => {
    const { value } = evnet.target;
    setNumber(+value);
  };

  // thunk 함수를 디스패치한다. payload는 thunk함수에 넣어주면,
  // 리덕스 모듈에서 payload로 받을 수 있다.
  const onClickAddNumberHandler = () => {
    dispatch(__addNumber(number));
  };

  return (
    <div>
      <div>{globalNumber}</div>
      <input type="number" onChange={onChangeHandler} />
      <button onClick={onClickAddNumberHandler}>더하기</button>
    </div>
  );
};

export default App;

thunk로 만든 함수를 적용한다.

④ 코드로 알아보기 2

통신 진행중, 실패, 성공

//모듈
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import axios from "axios";

const initialState = {
  todos: [],
  isLoading: false,
  error: null,
};

export const __getTodos = createAsyncThunk(
  "todos/getTodos",
  async (payload, thunkAPI) => {
    try {
      const data = await axios.get("http://localhost:4000/todos");
      return thunkAPI.fulfillWithValue(data.data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  }
);

export const todosSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {},
  extraReducers: {
    [__getTodos.pending]: (state) => {
      state.isLoading = true; // 네트워크 요청이 시작되면 로딩상태를 true로 변경합니다.
    },
    [__getTodos.fulfilled]: (state, action) => {
      state.isLoading = false; // 네트워크 요청이 끝났으니, false로 변경합니다.
      state.todos = action.payload; // Store에 있는 todos에 서버에서 가져온 todos를 넣습니다.
    },
    [__getTodos.rejected]: (state, action) => {
      state.isLoading = false; // 에러가 발생했지만, 네트워크 요청이 끝났으니, false로 변경합니다.
      state.error = action.payload; // catch 된 error 객체를 state.error에 넣습니다.
    },
  },
});

export const {} = todosSlice.actions;
export default todosSlice.reducer;

//브라우저
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { __getTodos } from "../redux/modules/todosSlice";

function Second() {
  const dispatch = useDispatch();
  const { isLoading, error, todos } = useSelector((state) => state.todos);

  useEffect(() => {
    dispatch(__getTodos());
  }, [dispatch]);

  if (isLoading) {
    return <div>로딩 중....</div>;
  }

  if (error) {
    return <div>{error.message}</div>;
  }

  return (
    <div>
      {todos.map((todo) => (
        <div key={todo.id}>{todo.title}</div>
      ))}
    </div>
  );
}

export default Second;

2023.03.12) 항해 5주차 회고

Wisdom_1104 — Sun, 12 Mar 2023 23:37:00 +0900

이번 주는 월요일부터 멘탈이 깨져서 쉽지 않은 주였다.

그렇기에 지치기도 많이 지쳤고 멘타도 여러번 깨져서 쉽지 않은 주를 보냈다.

하지만 그 계기로 각성하는 계기가 되기도 했다...

저번주차에는 리덕스가 뭔지도 몰랐으니 성장하고 있다는거니까.....!

2023.03.11) 항해 34일차 (3- 비동기 통신 - axios)

Wisdom_1104 — Sun, 12 Mar 2023 14:06:56 +0900

드디어 걱정되던 비동기 시작......!!!

내용 자체는 크게 어렵지 않았다.

다만 포트를 잘못 연결해서 오류가 나거나

깃 하면서 오류가 났어서 그렇지........

강의에는 없는 내용인 인풋에서 값 입력 후 버튼을 누르면 인풋을 빈 값이 되도록 구현도 하였다.

오늘은 좀 늦게까지 공부하느라 힘들긴 했지만 뿌듯하니 됐당!!!!!!!!

*이번 내용에서 사용하게 될 기본 명령어 모음!

yarn add react-redux @reduxjs/toolkit //리덕스 툴킷 설치
yarn add json-server //json-server 설치
yarn json-server --watch db.json --port 4000 //json-server의 4000 port 실행

1) Axios

공식문서에 따르면 axios 란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트 라고 한다.

즉, http를 이용해서 서버와 통신하기 위해 사용하는 패키지이다.

① Axios 설치하기

yarn add axios

설치 후 테스트를 해야 하니 json-server도 설치 후 실행해주자!

2) GET

① Axios get 사용방법

get은 서버의 데이터를 조회할 때 사용한다.

// url에는 서버의 url이 들어가고, config에는 기타 여러가지 설정을 추가할 수 있다.
// config는 axios 공식문서에서 확인하기!

axios.get(url[, config]) // GET

참고 공식문서 링크: https://axios-http.com/kr/docs/req_config

② 우리가 사용하는 json-server API 명세서 확인하기

우리가 Axios를 사용해서 GET 요청 코드를 작성하기에 앞서,

어떤 방식으로 요청 해야할지는 우리가 사용하는 json-server의 방식을 알아야 한다.

즉, Axios는 GET 요청을 할 수 있도록 도와주는 패키지일뿐이지,

“어떻게 요청을 해야하지?” 와 같은 방식에 대한 확인은 우리가 사용할 API 명세서를 보아야 한다.

ex) GET 요청을 할 때 path variable로 해야할지, query로 보내야할지는 API를 만든 사람이 하라는대로 해야 한다....!

json-server의 공식문서를 보면,

전체 정보나 상세 정보는 아래와 같이 path variable 로 url을 작성하면 된다고 한다.

그리고 filter와 같은 기능을 위해서 GET 요청을 하고자할 때는 query로 보내라고 한다.

③ 코드로 알아보기

코드를 통해 사용방법을 알아보자.

우리가 만든 json-server에 있는 todos를, axios를 이용해서 fetching하고 useState를 통해서 관리하는 로직이다.

import React, { useEffect, useState } from "react";
import axios from "axios";

const App = () => {
  const [todos, setTodos] = useState(null);

  // axios를 통해서 get 요청을 하는 함수를 생성힌다.
  // 비동기처리를 해야하므로 async/await 구문을 통해서 처리한다.
  const fetchTodos = async () => {
    const { data } = await axios.get("http://localhost:3001/todos");
    setTodos(data); // 서버로부터 fetching한 데이터를 useState의 state로 set 한다.
  };

  // 생성한 함수를 컴포넌트가 mount 됐을 떄 실행하기 위해 useEffect를 사용한다.
  useEffect(() => {
    // effect 구문에 생성한 함수를 넣어 실행한다.
    fetchTodos();
  }, []);

  // data fetching이 정상적으로 되었는지 콘솔을 통해 확인한다.
  console.log(todos);
  return (
    <div>
      {todos?.map((item) => {
        return (
          <div key={item.id}>
            {item.id} : {item.title}
          </div>
        );
      })}
    </div>
  );
};

export default App;

콘솔로 결과를 확인하니, 우리가 생성한 Todos를 정상적으로 서버에서 가져와서 state가 set 한 것을 확인할 수 있다.

3) POST

① Axios post 사용방법

Axios POSTpost는 보통 서버에 데이터를 추가할 때 사용한다.

다만 post 요청에 대한 로직은 BE 개발자가 구현하는 것이기때문에 추가외에 다른 용도로 사용될 수 있지만,

보통은 클라이언트의 데이터를 body형태로 서버에 보내고자 할 때 사용한다.

axios.post(url[, data[, config]]) // POST

② 코드로 알아보기

화면에 인풋과 버튼이 있고, 인풋에 어떤 값을 넣고 버튼을 클릭했을 때 onSubmitHandler 이 실행된다.

onSubmitHandler 함수의 목적은 todo를 body에 담아 서버로 POST 요청을 보내는 것이다.

아까의 get을 사용했던 코드에 아래의 코드를 추가만 해 주었다!

const App = () => {
  const [todo, setTodo] = useState({
    title: "",
  });

  // 추가 함수
  const onSubmitHandler = async () => {
    axios.post(`${process.env.REACT_APP_SEVER_KEY}/todos`, todo);
    setTodos([...todos, todo]);
  };

  return (
    <>
      {/* Input영역 */}
      <form
        onSubmit={(e) => {
          // submit했을 때 브라우저의 새로고침을 방지한다.
          e.preventDefault();
          onSubmitHandler(todo);
        }}
      >
        <input
          type="text"
          onChange={(ev) => {
            const { value } = ev.target;
            setTodo({
              ...todo,
              title: value,
            });
          }}
        />
        <button>추가하기</button>
      </form>
      {/* 데이터 영역 */}
      <div>
        {todos?.map((todo) => (
          <div key={todo.id}>
            {todo.id} : {todo.title}
          </div>
        ))}
      </div>
    </>
  );
};

export default App;

4) DELETE

① Axios delete 사용방법

DELETE는 저장되어 있는 데이터를 삭제하고자 요청을 보낼 때 사용한다.

axios.delete(url[, config]) // DELETE

② 코드로 알아보기

onClickDeleteButtonHandler 와 map 을 돌린 항목별로 삭제하기 버튼을 추가해준다.

삭제 버튼을 누르면 삭제 된다.

기존 위의 코드들에 아래 코드만 추가해주었다.

 //삭제 함수
  const onClickDeleteButtonHandler = (id) => {
    axios.delete(`http://localhost:4000/todos/${id}`);
    setTodos(
      todos.filter((item) => {
        return item.id !== id;
      })
    );
  };

      <div>
        {todos?.map((todo) => (
          <div key={todo.id}>
            {todo.id} : {todo.title}
            //삭제 버튼 추가
            <button
              type="button"
              onClick={() => onClickDeleteButtonHandler(todo.id)}
            >
              삭제하기
            </button>
          </div>
        ))}
      </div>

5) PATCH

① Axios patch 사용방법

patch는 보통 어떤 데이터를 수정하고자 서버에 요청을 보낼 때 사용하는 메서드 이다.

다만, 이것은 http 환경에서 서로가 한 약속이자 문맥이기때문에,

수정을 하고자 반드시 patch, put 을 써야만 하는 것은 아니다.

BE에 의해서 POST를 통해서 “수정" 이라는 기능은 충분히 만들 수 있기 때문이다.

다만 이러한 약속들을 대부분의 개발자들이 지키고 있다는 점을 알고 있자!

axios.patch(url[, data[, config]])  // PATCH

② 코드로 알아보기

Todo를 수정하기 위해 필요한 데이터는 2개가 있다.

수정하고자하는 Todo의 id, 그리고 수정하고자 하는 값이다.

수정하고자 하는 값은 기존에 있던 todo라는 state를 사용하면 될 것이고,

id는 직접 입력을 해서 url로 넘겨주는 방식으로 구현했다.

마찬가지로 위의 코드들에 밑의 코드만 추가했다.

  const [targetId, setTargetId] = useState("");
  const [editTodo, setEditTodo] = useState("");

  //수정 함수
  const onClickEditButtonHandler = async () => {
    axios.patch(`http://localhost:4000/todos/${targetId}`, {
      title: editTodo,
    });
    setTodos(
      todos.map((item) => {
        if (item.id == targetId) {
          return { ...item, title: editTodo };
        } else {
          return item;
        }
      })
    );
    setTargetId("");
    setEditTodo("");
  };

  return (
        <div>
          <input
            type="text"
            placeholder="수정하고싶은 Todo ID"
            value={targetId}
            onChange={(e) => {
              setTargetId(e.target.value);
            }}
          />
          <input
            type="text"
            placeholder="수정값 입력"
            value={editTodo}
            onChange={(e) => {
              setEditTodo(e.target.value);
            }}
          />
          <button
            // type='button' 을 추가해야 form의 영향에서 벗어남
            type="button"
            onClick={() => onClickEditButtonHandler()}
          >
            수정하기
          </button>
        </div>

6) ENV

변수명은 반드시 'REACT_APP_'으로 시작해야 한다.

.gitignore에 env를 등록해야 한다.

기본으로 세팅이 되어있지만 확인해주도록 하자!!

소스코드에서 import 없이 process.env.REACT_APP_변수명으로 불러오면 적용된다.

만약 env의 값을 변경하여 적용하고 싶다면, 변경 후 server를 다시 실행시켜주어야 정상적으로 적용된다.

import React, { useEffect, useState } from "react";
import axios from "axios";
const REACT_APP_SEVER_KEY = "http://localhost:4000";

const App = () => {
  // 조회 함수
  const fetchTodos = async () => {
    const { data } = await axios.get(`${REACT_APP_SEVER_KEY}/todos`);
  };

  // 추가 함수
  const onSubmitHandler = async () => {
    axios.post(`${REACT_APP_SEVER_KEY}/todos`, todo);
  };

  //삭제 함수
  const onClickDeleteButtonHandler = async (id) => {
    axios.delete(`${REACT_APP_SEVER_KEY}/todos/${id}`);
  };

  //수정 함수
  const onClickEditButtonHandler = async () => {
    axios.patch(`http://localhost:4000/todos/${targetId}`, {
  };

7) instance와 interceptor

① axios interceptor

이름에서 알 수 있듯, 다음 두 상황에서 흐름을 가로채서 여러분이 어떠한 코드 상의 관여를 할 수 있게 한다.

요청(request)이 처리되기 전( = http request가 서버에 전달되기 전)
응답(response)의 then(=성공) 또는 catch(=실패)가 처리되기 전

따라서, 우리가 가정했던 상황들을 포함하여 요청 및 응답시에 필요한 작업들을 한꺼번에 처리를 할 수 있다.

요청 헤더 추가
인증 관리
로그 관련 로직 삽입
에러 핸들링

이러한 부분에서 빛을 발한다.

② 코드로 알아보기

❶ instance 만들기, baseURL 설정하기

const data = axios.get("<http://localhost:4000/>");

axios를 사용하는 방법으로 데이터 통신을 해왔다.

완전히 plain axios, 순수 axios이다.

즉, custom 설정이 전혀 되어있지 않았는데, 이 axios를 인스턴스(instance)라고 한다.

이걸 변경하여 사용할 수 있다.

먼저, api 파일을 만든다.

//src > axios > api.js

import axios from "axios";

// axios.create의 입력값으로 들어가는 객체는 configuration 객체이다.

const instance = axios.create({
	baseURL: "http://localhost:4000",
});

export default instance;

다음 app 파일에 연결을 해준다.

import api from "./axios/api";

  // 조회 함수
  const fetchTodos = async () => {
    const { data } = await api.get("/todos");
  };

  // 추가 함수
  const onSubmitHandler = async () => {
    api.post("/todos", todo);
  };

  //삭제 함수
  const onClickDeleteButtonHandler = async (id) => {
    api.delete(`/todos/${id}`);
  };

  //수정 함수
  const onClickEditButtonHandler = async () => {
    api.patch(`/todos/${targetId}`);
  };

api를 import 하고 기존에 axios.을 사용하였던 것을 api.으로 바꾸고,

주소도 지워줄 수 있어 /todos로 연결할 수 있다.

❷ request, response에 적용해보기

요청을 보낼 때, 그리고 서버로부터 응답을 받을 때(혹은 실패할 때)

특정한 일을 수행해야 한다면 interceptors를 사용할 수 있다.

//api.js

import axios from "axios";

const instance = axios.create({
  baseURL: "http://localhost:4000",
  // timeout: 1,
  //0.001초의 시간을 주어 이 시간내에 응답을 못 받으면 오류가 나게 한다.
});

instance.interceptors.request.use(
  // 요청을 보내기 전 수행되는 함수
  function (config) {
    console.log("인터셉트 요청 성공!");
    return config;
  },
  // 오류 요청을 보내기 전 수행되는 함수
  function (error) {
    console.log("인터셉트 요청 오류!");
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  //응답을 내보내기 전 수행되는 함수
  function (response) {
    console.log("인터넵트 응답 받았어요!");
    return response;
  },
  // 오류응답을 내보내기 전 수행되는 함수
  function (error) {
    console.log("인터셉트 응답 못받았어요...ㅠㅠ");
    return Promise.reject(error);
  }
);

export default instance;

이렇게 instance.interceptors를 사용하여 성공 시와 오류가 났을 때의 함수를 만들어준다.

또한, request와 response로 요청 시와 응답 시에 실행되도록 한다.

만약 settimeout:1을 해주게 되면 0.001초라는 짧은 시간내에 응답을 받아야 하기에 오류가 날 수 밖에 없다.

이런 식으로 오류가 났을 시의 함수를 확인하면 될 것 같다!

2023.03.11) 항해 34일차 (2-json-server, HTTP)

Wisdom_1104 — Sun, 12 Mar 2023 14:03:56 +0900

협업이 곧 얼마 남지 않았음이 와닿는 주차긴 하다.

json-server도 사용해보고 HTTP 프로토콜도 배우고 나니

뭔가 설레면서 걱정되는 기분이 동시에 들었다.

다른 분들의 발목을 잡지 않기 위해 열심히 해야겠따!!!

1) json-server

json-server를 통해서 FE에서는 BE가 하고 있는 작업을 기다리지 않고,

FE의 로직과 화면을 구현 할 수 있어 효율적으로 협업을 할 수 있다.

json-server란, 아주 간단한 DB와 API 서버를 생성해주는 패키지 이다.

우리가 json-server를 사용하는 이유는BE에서 실제 DB와 API Server가 구축될 때까지,

FE 개발에 임시적으로 사용할 mock data를 생성하기 위해서다!

① json-server 설치하기

yarn add json-server

CRA로 프로젝트를 새로 생성하고, yarn 또는 npm을 이용해서 설치한다.

나는 yarn을 사용하니 yarn으로 설치했당.

② json-server 사용하기

json-server가 간단한 패키지이긴 하나, 말그대로 서버 이다.

그래서 리액트와는 별개로 따로 실행을 해줘야 한다.

즉, 리액트도 start하고, json-server로 start 해야 한다....!

그래야 리액트와 json-server가 서로 통신 할 수 있다.

아래 명령을 통해 json-sever를 실행하면 된다.

(명령어의 대략적인 뜻은 db.json 이라는 것을 db로 삼고, 3001 포트에서 서버를 시작하겠다는 뜻)

yarn json-server --watch db.json --port 3001

③ 설치 후 db.json 파일과 코드 자동 생성

이렇게 명령어를 입력하면 db.json이 자동으로 생성된다.

이 json 파일을 db로 사용하는 것이다.

그리고 posts, comments, profile 라는 기본적인 값들을 자동으로 넣어준다.

❶ 설치 후 db.json 파일의 모습

//db.json 파일
{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

❷ 설치 후 터미널의 모습!!

❸ db 수정해보기!

//db에 todos를 추가해보았다
{
  "todos": [
    {
      "id": 1,
      "title": "json-server",
      "content": "json-server를 배워봅시다."
    }
  ]
}

todos가 추가되었고 브라우저도 정상적으로 보인다~

❹ 서버 들어가보기! (맥 기준 cmd키를 누르며 주소창 클릭하면 된당)

서버에 들어가보면 터미널에서

이렇게 누군가 GET했다고 알려준다.

2) HTTP

① 프로토콜

웹에서 서버(웹 서버)와 클라이언트(웹 브라우저)가 대화하기 위해 서로 약속된 방식이 필요하고,

그 방식대로 서로 데이터를 주고 받아야만 오류가 없다.

약속을 프로토콜(protocol)이라고 한다.

특히, 웹에서 서버 ↔ 클라이언트간 주고 받은 상호간의 약속(프로토콜)을 HTTP 프로토콜이라고 하고,

데이터를 주고 받기 위해 HTTP 프로토콜을 사용하고 있다.

② 요청(Request)과 응답(Response)

서버와 클라이언트가 서로 데이터를 주고 받기 위해서는 항상 ‘요청(request)’을 하고, 그에 따른 ‘응답(response)’을 준다.

보통 클라이언트가 대화를 시도하고, 서버는 요청을 받아 그에 따른 응답을 준다.

③ URL

URL에서 등장하는 용어들

protocol
domain(sub domain, domain name)
resource path(path/page)
query variable, path variable

④ 메서드

메서드란 HTTP 요청의 종류로, 클라이언트가 서버에 하는 요청의 종류이다!

(더 많지만 간략하게 알고, 필요할때 마다 찾아보기!)

(참고 링크: https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods)

메서드GET - 조회
POST - 생성
PUT, PATCH - 수정(변경)
DELETE - 삭제

⑤ 상태코드

클라이언트가 서버에 어떤 요청(request)를 하고 나면, 서버는 그에 맞는 응답(response)를 제공한다.

그 때, 각 응답은 상태코드를 갖는다.

상태코드

1xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다.
2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용하였습니다.
3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요합니다.
4xx(클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다.
5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패했습니다.

2023.03.11) 항해 34일차 (1-리덕스 툴킷)

Wisdom_1104 — Sun, 12 Mar 2023 13:58:59 +0900

리덕스에 데여서 괜히 겁먹고 리덕스 툴킷도 어려울까봐 걱정을 엄청하며 두려운 마음으로 시작했다.

근데 다행히도 걱정과는 다르게 빠르게 이해할 수 있었다!!

괜히 쫄았네....

이번 주차에서 비동기 부분이 힘들다고 하니 쉽지만은 않겠지만 시작은 좋당!

1) 리덕스 툴킷

리덕스 툴킷은 리덕스를 개량한 것이다!

코드는 더 적게 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷 이고, 줄여서 RTK 라고도 한다.

새로운 것이 아닌, 리덕스의 전체 코드의 양을 줄이기 위해 새로운 API가 추가되었고,

일일히 손으로 만들어 줘야 했던 ducks 패턴의 요소들이 어느정도 자동화 되었다.

컴포넌트에서 useSelector를 통해서 사용하는 것은 모두 똑같다.

바뀐 부분은 그저 모듈 파일일 뿐!! 리덕스 툴킷은 우리가 배웠던 리덕스와 구조나 패러다임이 모두 똑같다.

① 툴킷 설치하기

yarn add react-redux @reduxjs/toolkit

② 모듈과 스토어 연결

일반 리덕스와 큰 차이는 없지만, 조금의 차이는 있다.

// src/redux/modules/config/configStore.js

import { configureStore } from "@reduxjs/toolkit"; //기존 리덕스와 다르다!!
import counter from "../modules/counterSlice";
import todos from "../modules/todosSlice";

//모듈(Slice)이 여러개인 경우, 추가할때마다 reducer 안에 각 모듈의 slice.reducer를 추가해줘야 한다.

//아래 예시는 하나의 프로젝트 안에서 counter 기능과 todos 기능이 모두 있고,
//이것을 각각 모듈로 구현한 다음에 아래 코드로 2개의 모듈을 스토어에 연결해준 것 이다.

const store = configureStore({
  reducer: { counter: counter, todos: todos },
});

export default store;

➂ index.js

생성한 store를 export default 해서 최상위의 index.js Provider에 주입해주는 것은 전혀 바뀐게 없다.

// index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import store from "./redux/config/configStore";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

➃ 모듈

리덕스 툴킷에서는 큰 차이점은 Action Value와 Action Creator를 이제 직접 생성해주지 않고,

Action Value, Action Creator, Reducer가 하나로 합쳐졌다는 점 이다.

이제 우리는 Slice 라는 API를 사용한다.

이 슬라이스를 사용하면 Action Value, Action Creator, Reducer를 각각 만들어줄 필요 없이,

한번에 3개가 모두 만들어진다.

// src/redux/modules/counterSlice.js
// 파일명이 다르다는 것을 눈치채보자!

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  number: 0,
};

const counterSlice = createSlice({
  name: "counter", // 이 모듈의 이름
  initialState, // 이 모듈의 초기상태 값
  reducers: { // 이 모듈의 Reducer 로직
  // 리듀서 안에서 만든 함수 자체가 리듀서의 로직이자, 액션크리에이터가 된다.
  // 그래서 Reducer만 만들어 주면 된다.
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },

    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

// 액션크리에이터는 컴포넌트에서 사용하기 위해 export 하고
export const { addNumber, minusNumber } = counterSlice.actions;
// reducer 는 configStore에 등록하기 위해 export default 합니다.
export default counterSlice.reducer;

➄ 모듈 조회

App.jsx에서는 툴킷을 사용해서 만든 모듈을 조회할 수 있다.

방식은 일반리덕스를 사용했을 때와 동일하다.

// src/App.js

import React from "react";
import { useSelector } from "react-redux";

const App = () => {
  // Store에 있는 todos 모듈 state 조회하기
  const todos = useSelector((state) => state.todos);

  // Store에 있는 counter 모듈 state 조회하기
  const counter = useSelector((state) => state.counter);

  return <div>App</div>;
};

export default App;

2023.03.10) 항해 33일차

Wisdom_1104 — Fri, 10 Mar 2023 23:27:12 +0900

오늘은 어제 멘탈터져서 다른 공부하느라 못 했던 과제를 했다.

스타일트 컴포넌트로 버튼, 인풋, 모달, 셀렉트를 만들어내는 것이었다.

버튼은 어려울 것 없이 뚝딱!!

인풋도 괜찮았지만 단 하나,

인풋창에 숫자만 입력되게 하고 세자릿수마다 콤마가 찍히도록 하기 위해서

정규식을 사용해야만 했던 것이다...

  const priceChangHandler = (setPrice, e) => {
    e.target.value = e.target.value.replace(/[^0-9]/g, ""); // 입력값이 숫자가 아니면 공백
    e.target.value = e.target.value.replace(/,/g, ""); // ,값 공백처리
    e.target.value = e.target.value.replace(/\B(?=(\d{3})+(?!\d))/g, ","); // 정규식을 이용해서 3자리 마다 , 추가
    setPrice(e.target.value);
  };

이렇게 정규식을 적용하였더니 문제없이 돌아가서 행복했다ㅠㅠ

모달도 div 박스로 구현해서 true이면 display가 flex로,

false이면 display가 none으로 동작하게 해서 모달창을 구현하였다.

모달창 두 개 중 하나는 모달박스 바깥 영역을 누르면 모달창이 꺼지도록 만들어야 했는데,

모달박스를 눌러도 꺼져서 모달박스에

onClick={(e) => e.stopPropagation()}

위의 코드를 넣어서 이벤트 버블링을 막아주었다.

셀렉터는 제일 어려웠는데......

overflow를 사용하니 생각보다 별거 없었다.....

div박스를 이곳저곳에 만들어보며 별 짓을 다 했는데,,,

해결하고 버튼의 크기가 변하는 것을 막기 위해

min-heigth도 주었다!!!

2023.03.09) 항해 32일차

Wisdom_1104 — Thu, 9 Mar 2023 21:56:38 +0900

리액트 패턴중에 하나인 컴파운드 패턴을 연습했다.

최대한 컴파운드를 기능단위로 쪼개서 칠드런으로 컴파운드를 계속 뱉어 들어간다.

이렇게하면 코드 재사용이 매우 편해진다는 장점이 있다.

애지간하면 props를 자제하는게 좋은데 분기가 단순한 경우에는 props 한둘 정도는 넣어도 괜찮다.

컴파운드컴포넌트 패턴을 사용하면 복잡한 컴포넌트를 유연하게 사용할수 있다는 장점이 있다.

해당 패턴이 들어가는 컴파운드 부분에서 전체적인 구조를 한눈에 알아 볼 수 있고,

스타일 지정하고 디자인을 변경하는게 아주 용이하다.

협업시 다른 개발자가 볼 경우 한번에 뭐가 뭔지 알아볼 수 있게 하는 게 중요하니깐 네이밍이 중요하니 연습이라도 해보았다.

밑은 예시코드이다!

return (
<Wrap>
	<StForm onSubmit={submit}>
		<StRowFlexDiv style={{ justifyContent: 'space-between' }}>
			<StRowFlexDiv style={{ gap: '5px' }}>
				<input ref={titleRef} placeholder='Title' />
				<input ref={memoRef} placeholder='Memo' />
			</StRowFlexDiv>
			<button type='submit'>Submit</button>
		</StRowFlexDiv>
	</StForm>
</Wrap>

uuid를 이용한 고유한 값 생성 uuid는 소프트웨어 구축에 쓰이는 식별자 표준이다.

uuidsms 32개의 16진수로 표현되며 총 36개의 문자로 된 8-4-4-4-12라는 5개의 그룹을 하이픈으로 구분한다.

550e8400-e29b-41d4-a716-446655440000

이런식~~~ 으로~~ 표현된다.

2.71 * 10^18 개의 UUID를 생성했을 때 최소 1개가 중복(충돌) 될 확률이 약 50%라고 한다.

따라서 uuid가 중복될 걱정은 안하고 고유값으로 사용해도 될 거 같다.

그리고 실제로도 현업에서도 많이 사용한다.

명령어 - npm install uuid (uuid 생성 패키지를 받는다!)

import {v4 as uuidv4} from 'uuid'; uuidv4(); 함수를 실행하면 사용한다!!

2023.03.08) 항해 31일차 (투두리스트 상세페이지)

Wisdom_1104 — Wed, 8 Mar 2023 23:06:44 +0900

오늘은 만들던 투두 리스트 과제를 끝냈다!!!!!

상세페이지도 연결하고, 수정기능과 글자수 제한도 만들었당.

다른 것보다 수정기능이 너무 어려웠지만!

잘 이겨냈다!!

비록 커스텀 훅을 만드는 것을 잊어버렸지만....제출을 해버렸으니,,

그래도 내일 한번 만들어 보려고 한당~

1) 상세 페이지 연결

// Working 컴포넌트
const navigate = useNavigate();               
<Link to={`/sub/${item.id}`}>상세페이지</Link> 	  // 1번째 방법
<button 				// 두번째 방법
  onClick={() => {
    navigate(`/sub/${item.id}`);
  }}
>

버튼이나 링크로 상세페이지를 연결했다.

id로 연결하였고,

//Router.js
<Route path="sub/:id" element={<Sub />} />

라우터 파일에서도 id로 연결되게 했다.

이후에 스타일을 주고 배포까지 했다! 뿌듯

별거 없는 것 같지만 3일동안 날 괴롭힌 친구다...

https://todo-redux-2.vercel.app/

React App

todo-redux-2.vercel.app

2023.03.07) 항해 30일차 (깃, 투두리스트)

Wisdom_1104 — Tue, 7 Mar 2023 21:55:43 +0900

오늘은 어제 파일을 날렸기 때문에 다시는 그런 불상사가 일어나지 않기 위해.....

깃 명령어를 공부하고 커밋하는 습관을 가져야겠다.

1) 깃

처음 깃 연결 및 커밋 푸시 할 때,

git init
git add .
git commit -m "커밋명"
git remote add origin 깃허브주소
git push origin 브랜치명

변경 사항 있을때마다,
git add .
git commit -m "새로운 커밋명"
git push origin 브랜치명

-이 외

$ git remote -v 현재 연결되어 있는 원격 레파지토리를 확인한다.

git remote remove origin을 사용해 주시면 연결되어 있는 저장소를 간단하게 끊을 수 있다.

2) 투두 리스트 대략적인 과정

리덕스와 라우터 돔 기본 폴더 구조를 만든다.

yarn add react-router-dom  //라우터 돔 패키지 설치
yarn add redux react-redux //리덕스 패키지 설치
yarn add styled-components //스타일드 컴포넌트 패키지 설치

사용하기 위한 패키지를 설치한다.

//Router.js

import React from "react";
// 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다.
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import Sub from "../pages/Sub";

// 2. Router 라는 함수를 만들고 아래와 같이 작성합니다.
//BrowserRouter를 Router로 감싸는 이유는,
//SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어줍니다!
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/sub" element={<Sub />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

두 페이지를 연결하기 위해 작성해준다. (이 부분은 추후 상세페이지 연결 위해 바뀌긴 한다..)

//App.js

import React from "react";
import Router from "./shared/Router"; // 불러오는 주소 조심!!

function App() {
  return <Router />;
}
export default App;

라우터 import하는 과정에서 경로가 잘못 되어 있어서 오류가 났었따...

주의하자!

//index.js
// 원래부터 있던 코드
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

// 우리가 추가할 코드
import store from "./redux/config/configStore";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(

	//App을 Provider로 감싸주고, configStore에서 export default 한 store를 넣어줍니다.
  <Provider store={store}> 
    <App />
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

스토어 사용을 위해 추가로 작성해주어야 한당.

//configStore

import { legacy_createStore as createStore } from "redux"; //스토어를 만들어 주는 api
import { combineReducers } from "redux"; // 리듀서들을 하나로 묶는 역할
import todos from "../modules/todos"; // 모듈을 스토어에 연결하려면 임포트해야 한다!

const rootReducer = combineReducers({ todos });
const store = createStore(rootReducer);

export default store;

스토어에 기본적으로 적어주는 것들!!!! todos는 당연히 바뀌는 값이다!!!!

여기까진 기본적으로 만들어지는 부분이었다.

투두리스트를 만들고 추가, 삭제, 완료, 취소, 상세페이지 까지 구현하고 컴포넌트도 분리했지만!!!

몸이 좋지 않은 관계로 수정하기와 스타일드 컴포넌트는 하지 못했다....

또르륵....

내일 완벽하게 마무리 해야겠다!!!

2023.03.06) 항해 29일차

Wisdom_1104 — Tue, 7 Mar 2023 02:10:53 +0900

오늘은 리액트 훅과 리덕스, 라우터 돔에 대해 총정리를 했다.

리액트 훅은 어제 정리를 했지만, 리덕스와 라우터 돔은 오늘 시작했다.

개념 정리도 하고 코드도 치고 페이지도 만들어보며 다 완성을 했지만,,,,,

커밋도 하지 못한 내 파일... 날려버렸다.....

진짜 오류도 많이 나고 힘들게 만들었는데 그걸 날렸...... 진짜 너무 속상했다.

하루종일 공부하고 정리한 내용이 그대로 모래가...........

진짜 너무 속상해서 울 뻔 했는데 그거 꾹 참고 있었다.

근데 이저어언 조의 팀원분이 오셔서 도와주실 거 있나 하셨다가 그 소리에 눈물이 터져버렸다ㅠㅠ

민망하셨을텐데ㅠㅠㅠㅠ 난 그런거도 안보이고 속상한 맘이 더 컸다...힝 ㅠㅠ

그 후에 다른 분들까지 우르르 오셔서 위로해주시고 걱정해주셔서 감사했다ㅠㅠ

덕분에 울고나니 마음은 한결 가벼워졌다!

그래서 가벼워진 마음으로 과제를 시작했다. 결국 새벽까지 하게 되었지만,

평소보다 피곤하진 않다!

과제 기능 구현은 다 했으니 만족!!

내일은 본격적으로 과제를 다시 만들어볼 생각이다 :)

오늘 힘들었으니 내일은 더 잘할거야!!!!!!

내일두 완전 열심히 해야지!!!!!

위로해주시고 걱정해주신 분들의 마음을 생각하며

훌훌 털어버려야지~

파일은 이제부터라도 잘 관리하면 되는거니까!!!

내일부터는 다시 밝은 모습으로 과제를 해결해봐야겠다!!!!

2023.02.05) 항해 4주차 회고

Wisdom_1104 — Sun, 5 Mar 2023 21:40:06 +0900

이번주에는 리액트와 리덕스에 배워가는 시간이었다.

리액트 훅..... 공부하면 잊어버리고... 마치 내 머릿속에 지우개가 있는 느낌이었다.

리덕스는 할만 한 듯 했지만 뒤통수 맞았다.하ㅣ하하핳 ㅠㅠㅠㅠㅠㅠ

이번 개념들을 배우기 위해 다시한번 레더링에 대한 것을 공부하게 되었고,

직접 써보며 공부하는 시간도 가졌다....

다시한번 배운 내용들을 총정리 느낌으로

리액트 훅과 리덕스와 라우터 돔을 공부 한 후에 과제를 해야겠다.

매우 머리가 아프지만 해내보겠다!!!!

2023.03.04) 항해 27일차 (2-React Router Dom)

Wisdom_1104 — Sat, 4 Mar 2023 23:00:38 +0900

라우터 돔은 생각보단 괜찮았는데 손에 익지는 않아서

내일 리덕스와 함께 해봐야겠다는 생각을 했다.

일요일이지만 쉴 수 없다.......

이해 못한 나를 탓해야지...어쩔 수 없지!!!!

1) react-router-dom

페이지를 구현할 수 있게 해주는 패키지이다.

//아래의 명령어로 설치한다
yarn add react-router-dom

react-redux처럼 react-router-dom도 폴더를 생성해 주어야 한다.
pages폴더 생성 -> 안에 필요한 여러 페이지 생성 ex) Home.jsx , About.jsx ...
shared 폴더 생성 -> 안에 Router.js 생성 -> router 설정 코드 작성
App.js 에서 import도 해야한다.

Routes안에 있는 Route에는 react-router-dom에서 지원하는 props들이 있다.

path는 원하는 "주소"를 넣어준다.
element는 해당 주소로 이동했을 때 보여주고자 하는 page 컴포넌트를 작성한다.

//Router.js
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Contact from "../pages/Contact";
import Works from "../pages/Works";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="works" element={<Works />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

Router.js 파일을 App.js에 import 해주어야 한다.

Router.js를 다른 곳도 아닌 App 컴포넌트에 넣어주는 이유는,

우리가 만든 프로젝트에서 가장 최상위에 존재하는 컴포넌트가 App.js 이기 때문이다.

즉 ,우리가 어떤 컴포넌트를 화면에 띄우던 항상 App.js를 거쳐야만 한다.

그래서 path 별로 분기가 되는 Router.js 를 App.js에 위치시키고,

우리의 서비스를 이용하는 모든 사용자가 항상 App.js → Router.js 거치도록 코드를 구현해주는 것이다.

//App.js
import React from "react";
import Router from "./shared/Router";

function App() {
  return <Router />;
}

export default App;

2) react-router-dom Hooks

① useNavigate

버튼의 클릭 이벤트 핸들러에 코드를 작성하면 버튼을 클릭했을 때 우리가 보내고자 하는 path로 페이지를 이동시킬 수 있다.

꼭 버튼이 아니더라도, 컴포넌트의 클릭 이벤트 핸들러를 통해서 활용할 수 있다.

navigate 를 생성하고, navigate(’보내고자 하는 url’) 을 통해 페이지를 이동 시킬 수 있다.

// src/pages/home.js
import { useNavigate } from "react-router-dom";

const Home = () => {
  const navigate = useNavigate();

  return (
    <button
      onClick={() => {
        navigate("/works");
      }}
    >
      works로 이동
    </button>
  );
};

export default Home;

② Link

페이지를 이동시키고자 할때 useNavigate 또는 Link를 사용할 수 있다.

Link 는 훅이 아니지만, 꼭 알아야 할 API이다.

Link 는 html 태그중에 a 태그의 기능을 대체하는 API 이다.

만약 JSX에서 a 태그를 사용해야 한다면, 반드시 Link 를 사용해서 구현해야 한다.

a태그 말고 Link를 사용해야 하는 이유

a 태그를 사용하면 페이지를 이동하면서 브라우저가 새로고침(refresh)된다.
브라우저가 새로고침 되면 모든 컴포넌트가 다시 렌더링되야 하고,
리덕스나 useState를 통해 메모리상에 구축해놓은 모든 상태값이 초기화 된다.
이것은 곧 성능에 악역향을 줄 수 있고, 불필요한 움직임이다.

import { Link, useLocation } from 'react-router-dom';

const Works = () => {
  const location = useLocation();
  console.log('location :>> ', location);
  return (
    <div>
      <div>{`현재 페이지 : ${location.pathname.slice(1)}`}</div>
      <Link to="/contact">contact 페이지로 이동하기</Link>
    </div>
  );
};

export default Works;

3) Dynamic route 기법과 useParam hook

① Dynamic Route란?

동적 라우팅이라고도 말하고, path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법을 말한다.

react-router-dom에서 지원하는 Dynamic Routes 기능을 이용해서 간결하게 동적으로 변하는 페이지를 처리할 수 있다.

Works 페이지에 여러개의 Work가 있고, 그것을 클릭했을 때 각각의 상세페이지로 이동하게끔 구현해봅시다. 일단 Work 라는 페이지가 먼저 있어야겠죠? Work 컴포넌트를 추가해주세요.

// src/pages/Works.js

import React from "react";

const Works = () => {
  return <div>Works</div>;
};

export default Work;

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import Works from "../pages/Works";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="works/:id" element={<Works />} /> //추가한 코드
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

이전과는 다르게 path에 works/:id 라고 path가 들어갑니다. :id 라는 것이 바로 동적인 값을 받겠다라는 의미입니다.

그래서 works/1 로 이동해도 <Work /> 로 이동하고, works/2, works/3 …. works/100 모두 <Work /> 로 이동하게 해줍니다.

그리고 :id 는 useParams 훅에서 조회할 수 있는 값이 됩니다.

② useParams

Dynamic Routes를 사용하면 element에 설정된 같은 컴포넌트를 렌더링하게 됩니다.

우리가 설정한 예제 코드에서도 Work 페이지 컴포넌트를 모두 동일하게 렌더링하겠죠?

하지만 useParams를 이용하면 같은 컴포넌트를 렌더링하더라도 각각의 고유한 id 값을 조회할 수 있습니다.

아래 코드를 추가해볼까요? useParams이라는 훅을 사용해봅시다.

useParams 은 path의 있는 id 값을 조회할 수 있게 해주는 훅 입니다.

그래서 만약에 우리가 works/1로 이동하면 1 이라는 값을 주고, works/100으로 이동하면 100 이라는 값을 사용할 수 있게 해줍니다.

// src/pages/Work.js

import React from 'react';
import { useParams } from 'react-router-dom';

const data = [
  { id: 1, todo: '리액트 배우기' },
  { id: 2, todo: '노드 배우기' },
  { id: 3, todo: '자바스크립트 배우기' },
];

function Work() {
  const param = useParams();

  const work = data.find((work) => work.id === parseInt(param.id));

  return <div>{work.todo}</div>;
}

export default Work;

useParams 훅을 이용해서 불러온 parameter를 가져온다.
Router.js에서 설정한 Workd/:id에서 id로 parameter를 설정해놨기 때문에 하위페이지로 넘어왔을때,

이게 무슨 페이지인지 useParams를 이용해서 확인할 수 있게 된 것이다.

2023.03.04) 항해 27일차 (1-Redux)

Wisdom_1104 — Sat, 4 Mar 2023 22:58:31 +0900

오늘은 리덕스를 배웠다.

새로운 개념이라 긴장하고 좀 두려운 마음으로 리덕스를 접했다.

생각보다는 어떤 건지 감은 일찍 잡을 수 있었지만..............

머릿속에 콕 박히지 않았다.

그래서 중간에 머리를 식힐 겸 드라이브를 하고 와서

다시 보니 조금은 이해가 되긴 했지만

확실하게 이해하기 위해서는 내일 코드를 여러 번 쳐봐야 할 것 같다.

1) 리덕스란

리덕스란 “중앙 state 관리소”를 사용할 수 있게 도와주는 패키지(라이브러리)이다.

프론트엔드 개발자들은 “리덕스”를 전역 상태관리 라이브러리라고 많이 표현한다.

전역 상태, 즉 Global State를 의미하고 그것을 관리하게 도와주는 라이브러리 (패키지) 이기 때문이다.

① useState의 불편함

컴포넌트에서 컴포넌트로 State를 보내기 위해서는 반드시 부-모 관계가 되어야 한다.
조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할 때도 반드시 부모 컴포넌트를 거쳐야만 한다.
자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다.

이러한 불편함을 개선하는 그 새로운 도구가 바로 리덕스다.

우리가 리덕스를 사용하면 State를 공유하고자 할때 부-모 관계가 아니어도 되고, 중간에 의미 없이 컴포넌트를 거치지 않아도 된다.

자식 컴포넌트에서 만든 State를 부모 컴포넌트에서도 사용할 수 있게 된다.

② Global state와 Local state

Local state (지역상태)
- 컴포넌트에서 useState를 이용해서 생성한 state 다. (좁은 범위 안에서 생성된 State)
Global state (전역상태)
- Global state는 컴포넌트에서 생성되지 않는다.
- 중앙화된 특별한 곳에서 State들이 생성된다. (중앙 state 관리소)

앞으로 State를 Global state와 Local state라는 것을 따로 구분지어서 표현할 것이다.

2) 리덕스 설정

yarn add redux react-redux

패키지를 설치하고, 폴더를 생성한다.

redux : 리덕스와 관련된 코드를 모두 모아 놓을 폴더
config : 리덕스 설정과 관련된 파일들을 놓을 폴더
configStore : “중앙 state 관리소"인 Store를 만드는 설정 코드들이 있는 파일
modules : 만들 State들의 그룹

// src/configStore.js
import { createStore } from "redux";  //리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수)
import { combineReducers } from "redux";//여러 개의 독립적인 reducer의 반환 값을 하나의 상태 객체로 만들어준다

const rootReducer = combineReducers({}); 
const store = createStore(rootReducer); 

export default store; 


//index.js
// 원래부터 있던 코드
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

// 우리가 추가할 코드
import store from "./redux/config/configStore";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(

	//App을 Provider로 감싸주고, configStore에서 export default 한 store를 넣어줍니다.
  <Provider store={store}> 
    <App />
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

3) 카운터 프로그램 만들며 설정 이해하기

① 모듈 만들기

// src/modules/counter.js

// 초기 상태값
const initialState = {
  number: 0,
};

// 리듀서
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

// 모듈파일에서는 리듀서를 export default 한다.
export default counter;

위 코드에서 만든 State의 초기값은 { } (객체)이고, 그 안에 number라는 변수에 초기값 0을 할당해 준 것이다.

초기값은 꼭 객체가 아니고, 배열, 원시데이터, 여러 개의 변수를 가진 객체도 넣어줄 수 있다.

리듀서란, 변화를 일으키는 함수다.

리듀서의 인자에 보면 (state = intialState, action)이라고 되어 있는데,

리듀서 인자 첫 번째 자리에서는 state를, 두 번째 자리에서는 action이라는 것을 꺼내서 사용할 수 있다.

state = intialState처럼 state에 initialState를 할당해줘야 한다.

② 카운터 모듈을 스토어에 연결하기

모듈파일에서 초기 상태값과 리듀서를 작성했고, 이제 만든 모듈을 스토어에 연결시켜야 한다.

아직까진 모듈과 스토어가 각각 따로 분리되어 있는 상태이기 때문에 만든 State를 스토어에서 꺼낼 수 없다.

configStore.js 파일에 모듈을 연결시켜주어야 한다.

// src/redux/modules/config/configStore.js


// 원래 있던 코드
import { createStore } from "redux";
import { combineReducers } from "redux";

// 새롭게 추가한 부분
import counter from "../modules/counter";

const rootReducer = combineReducers({
  counter: counter, // <-- 새롭게 추가한 부분
});
const store = createStore(rootReducer);

export default store;

③ 스토어와 모듈 연결 확인하기

"useSelector = 스토어 조회"

우리가 생성한 모듈을 스토어에 잘 연결했는지 확인하는 방법은 컴포넌트에서 스토어를 직접 조회하면 된다.

컴포넌트에서 리덕스 스토어를 조회하고자 할 때는 useSelector라는 ‘react-redux’의 훅을 사용해야 한다.

//useSelector의 사용법

// 1. store에서 꺼낸 값을 할당 할 변수를 선언합니다.
const number = 

// 2. useSelector()를 변수에 할당해줍니다.
const number = useSelector() 

// 3. useSelector의 인자에 화살표 함수를 넣어줍니다.
const number = useSelector( ()=>{} )

// 4. 화살표 함수의 인자에서 값을 꺼내 return 합니다. 
// 우리가 useSelector를 처음 사용해보는 것이니, state가 어떤 것인지 콘솔로 확인해볼까요?
const number = useSelector((state) => {
	console.log(state)
	return state
});

이렇게 화살표 함수에서 꺼낸 state라는 인자는 현재 프로젝트에 존재하는 모든 리덕스 모듈의 state 인 것이다.

④ counter.js 모듈의 state 수정 기능 만들기 (+ 1 기능 구현해 보기)

리덕스에서 값의 수정은 리듀서에서 일어난다.

counter.js 모듈에 있는 number에 +1을 하고 싶으면,

리듀서에게 보낼 number를 +1 하라는 “Action”을 만든다.
Action을 보낸다.
리듀서에서 Action을 받아 number +1을 한다.

Action을 코드로 나타내면 객체로 만들어서 이것을 액션 객체 라고 한다.

액션 객체는 반드시 type이라는 key를 가져야 한다.

액션 객체를 리듀서에게 보냈을 때 리듀서는 객체 안에서 type이라는 key를 보기 때문이다.

리덕스 모듈에 있는 state을 변경하기 위해서는 그에 해당하는 액션 객체를 모두 만들어줘야 한다.

❶ 액션 객체 보내기

액션객체를 보내기 리듀서로 보내기 위해서는 useDispatch라는 훅을 사용해야 한다.

react-redux에서 import 해서 사용할 수 있으며, 우리가 만든 액션 객체를 리듀서로 보내주는 역할을 하는 훅이다.

useDispatch라는 훅을 사용하기 위해서는 컴포넌트 안에서 아래와 같이 먼저 코드를 작성해서 dispatch라는 변수를 생성해줘야 한다.

이렇게 생성한 dispatch는 사용할 때 ()를 붙여서 함수를 실행하게 됩니다.

그리고 dispatch를 사용할 때 ( ) 안에 액션객체를 넣어주면 된다.

// src/App.js

import React from "react";
import { useDispatch, useSelector } from "react-redux"; // import

const App = () => {
  const dispatch = useDispatch(); // dispatch 생성

  const number = useSelector((state) => state.counter.number);

  return (
    <div>
      {number}
      <button
        onClick={() => {
          dispatch({ type: "PLUS_ONE" }); 
          //마우스를 클릭했을 때 dispatch가 실행되고, ()안에 있는 액션객체가 리듀서로 전달된다.
        }}
      >
        + 1
      </button>
    </div>
  );
};

export default App;

❷ 액션객체 명령대로 리듀서가 state값을 변경하는 코드 구현하기

리듀서가 액션객체를 받아 상태를 바꾸는 원리

컴포넌트로부터 dispatch를 통해 액션객체를 전달받는다.
action 안에 있는 type을 스위치문을 통해 하나씩 검사해서, 일치하는 case를 찾는다.
type과 case가 일치하는 경우에, 해당 코드가 실행되고 새로운 state를 반환(return) 한다.
리듀서가 새로운 state를 반환하면, 그게 새로운 모듈의 state가 된다.

// src/modules/counter.js

// 초기 상태값
const initialState = {
  number: 0,
};

// 리듀서
const counter = (state = initialState, action) => {
  console.log(action);
  switch (action.type) {
		// PLUS_ONE이라는 case를 추가한다.
		// 여기서 말하는 case란, action.type을 의미한다.
		// dispatch로부터 전달받은 action의 type이 "PLUS_ONE" 일 때
		// 아래 return 절이 실행된다. 
    case "PLUS_ONE":
      return {
				// 기존 state에 있던 number에 +1을 더한다.
        number: state.number + 1,
      };

    default:
      return state;
  }
};

// 모듈파일에서는 리듀서를 export default 한다.
export default counter;

⑤ Action Creator

만약에 우리가 액션객체의 value를 변경할 일이 생긴다면 코드에서 모두 찾아서 변경해주어야 한다.

이렇게 하면 오타가 날 수도 있고 번거롭기 때문에 ,

액션객체를 한 곳에서 관리할 수 있도록 “함수"와 액션 value를 상수로 만들 수 있다.

// src/redux/modules/counter.js

const PLUS_ONE = "PLUS_ONE"; // value는 상수로 생성

// 액션객체를 반환하는 함수 생성
// export 가 붙는 이유는 plusOne()는 밖으로 나가서 사용될 예정이기 때문이다.
export const plusOne = () => { 
  return {
    type: PLUS_ONE, // type에는 위에서 만든 상수로 사용 (vscode에서 자동완성 지원)
  };
};

value를 상수로 생성하고,

dispatch() 안에 있던 액션객체를 import 한 Action Creator들로 변경한다.

// src/App.js

import React from "react";
import { useDispatch, useSelector } from "react-redux";

// 사용할 Action creator를 import 한다.
import { plusOne } from "./redux/modules/counter";

const App = () => {
  const dispatch = useDispatch();
  const number = useSelector((state) => state.counter.number);

  return (
    <div>
      {number}
      <button
        onClick={() => {
          dispatch(plusOne()); // 액션객체를 Action creator로 변경한다.
        }}
      >
        + 1
      </button>
    </div>
  );
};

export default App;

❶ dispatch() 안에는 반드시 객체만 들어가야 한다고 알았지만, 함수가 들어갈 수 있는 이유!

{type: “PLUS_ONE”} === plusOne()는 같은 값이다.
함수를 실행한 것은 함수의 return 값과 같다.
즉, const one = () => {return 1; }로 함수를 만들었을 때 one() === 1이다.

❷ Action creator를 사용해야 하는 이유

휴먼에러 (오타) 방지
유지보수의 효율성 증가
코드 가독성 높임

⑥ payload

state를 변경할 때 리듀서에게 어떤 값을 같이 보내줘야 하는 경우,

payload를 액션객체에 같이 담아 보낼 수 있다.

// src/redux/modules/counter.js

// Action Value
const ADD_NUMBER = "ADD_NUMBER";

// Action Creator
export const addNumber = (payload) => {
  return {
    type: ADD_NUMBER,
    payload: payload,
  };
};

payload가 필요한 Action Creator에서는 함수를 선언할 때 매개변수 자리에 paylaod를 넣어줘야 한다.

Action Creator를 사용하는 컴포넌트에서 리듀서로 보내고자 하는 payload를 인자로 넣어줘야 하기 때문이다.

// 리듀서

const counter = (state = initialState, action) => {
  switch (action.type) {
    case ADD_NUMBER:
      return {
// state.number (기존의 nubmer)에 action.paylaod(유저가 더하길 원하는 값)을 더한다.
        number: state.number + action.payload,
      };
    default:
      return state;
  }
};

사용자가 컴포넌트에서 Action Creator로 payload를 담아 보내는 것은 액션객체에 담기고,

그렇게 담긴 것은 리듀서에서 action.payload에서 꺼내 사용해서 기존의 값에 더해줌으로써 기능을 구현하는 것이다.

2023.03.03) 항해 26일차 (3-React Hooks 최적화)

Wisdom_1104 — Fri, 3 Mar 2023 22:54:42 +0900

오히려 리액트 훅만 볼 때 보다 최적화를 위한 훅이 더 잘 와 닿았다.

콘솔을 여러번 찍어보며 보니 더 와닿을 수 있었다.

이것도 마찬가지로 많이 사용해볼 수 있으려나 모르겠다.....

2) React Hooks - 최적화

① 리-렌더링의 발생 조건과 최적화

❶ 리-렌더링의 발생 조건

컴포넌트에서 state가 바뀌었을 때
컴포넌트가 내려받은 props가 변경되었을 때
부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두

❷ 최적화

리액트에서 리렌더링이 자주 일어난다는 것은 좋지 않다.

비용이 발생하는 것은 최대한 줄여야 하는 작업을 최적화(Optimization)이라고 한다.

최적화하는 대표적인 방법

memo(React.memo) : 컴포넌트를 캐싱
useCallback : 함수를 캐싱
useMemo : 값을 캐싱

② React.memo

부모 컴포넌트가 리렌더링 되면 자식컴포넌트는 모두 리렌더링 된다.

자식 컴포넌트의 입장에서는 변경사항이 없지만 불필요하게 렌더링 될 수 있는데, 이 부분을 돕는 도구가 바로 React.memo이다.

React.memo를 이용해서 컴포넌트를 메모리에 저장해두고 필요할 때 갖다 쓸 수 있다.

이렇게 하면 부모 컴포넌트의 state의 변경으로 인해 props가 변경이 일어나지 않는 한 컴포넌트는 리렌더링 되지 않는다.

이것을 컴포넌트 memoization 이라고 합니다.

export default React.memo(컴포넌트이름);

③ useCallback

useCallback은 인자로 들어오는 함수 자체를 기억(메모이제이션)한다.

React.memo를 통해서 하위 컴포넌트를 메모이제이션을 했는데도 리렌더링이 되는 이유

함수형 컴포넌트를 사용하기 때문이고, App.jsx가 리렌더링 되면서 코드가 다시 만들어지기 때문이다.
자바스크립트에서는 함수도 객체의 한 종류이다.
모양은 같더라도 다시 만들어지면 그 주솟값이 달라지고 이에 따라 하위 컴포넌트는 props가 변경됐다고 인식한다.

그렇기 때문에, 이 함수를 메모리 공간에 저장해놓고, 특정 조건이 아닌 경우엔 변경되지 않도록 해야한다.

// 변경 전
const initCount = () => {
  setCount(0);
};

// 변경 후
const initCount = useCallback(() => {
  setCount(0);
}, []);

④ useMemo

동일한 값을 반환하는 함수를 계속 호출해야 하면 필요없는 렌더링을 하게 된다.

맨 처음 해당 값을 반환할 때 그 값을 특별한 곳(메모리)에 저장하다면 필요할 때 마다 다시 함수를 호출해서 계산하는게 아니라,

이미 저장한 값을 단순히 꺼내와서 쓸 수 있다.

// as-is
const value = 반환할_함수();

// to-be
const value = useMemo(()=> {
	return 반환할_함수()
}, [dependencyArray]);

dependency Array의 값이 변경 될 때만 반환할 함수()가 호출된다.

그 외의 경우에는 memoization 해놨던 값을 가져오기만 한다.

import React, { useEffect, useState } from "react";

function ObjectComponent() {
  const [isAlive, setIsAlive] = useState(true);
  const [uselessCount, setUselessCount] = useState(0);

  const me = {
    isAlive: isAlive ? "생존" : "사망",
  };

  useEffect(() => {
    console.log("생존여부가 바뀔 때만 호출해주세요!");
  }, [me]);

  return (
    <>
      <div>
        <button
          onClick={() => {
            setIsAlive(!isAlive);
          }}
        >
          누르면 살았다가 죽었다가 해요
        </button>
        <br />
        생존여부 : {me.isAlive}
      </div>
      {uselessCount}
      <br />
      <button
        onClick={() => {
          setUselessCount(uselessCount + 1);
        }}
      >
        누르면 숫자가 올라가요
      </button>
    </>
  );
}

export default ObjectComponent;

useEffect hook을 이용해서 me의 정보가 바뀌었을 때만 발동되게끔 dependency array를 넣어놨지만,

엉뚱하게도 count를 증가하는button을 눌러보면 계속 log가 찍힌다.

이 부분은 불변성과 관련이 깊다.

위 예제에서 버튼이 선택돼서 uselessCount state가 바뀌게 되면

→ 리렌더링이 되고, 컴포넌트 함수가 새로 호출된다

→ me 객체도 다시 할당한다(이 때, 다른 메모리 주소값을 할당받는다)

→ useEffect의 dependency array에 의해 me 객체가 바뀌었는지 확인해봐야 하는데, 이전 것과 모양은 같은데 주소가 다르다.

→ 리액트 입장에서는 me가 바뀌었구나 인식하고 useEffect 내부 로직이 호출된다.

const me = useMemo(() => {
  return {
    name: "Ted Chang",
    age: 21,
    isAlive: isAlive ? "생존" : "사망",
  };
}, [isAlive]);

useMemo()만 이렇게 써주면, uselessCount가 아무리 증가돼도 영향이 없게 된다.

주의해야 할 사항

useMemo를 남발하게 되면 별도의 메모리 확보를 너무나 많이 하게 되기 때문에 오히려 성능이 악화될 수 있다.
필요할 때만 써야 한다.

2023.03.03) 항해 26일차 (2-React Hooks)

Wisdom_1104 — Fri, 3 Mar 2023 22:54:29 +0900

리액트 훅.......

이게 매우 중요하다는 것도 알고, 어려운 내용이고 공부할 양이 많다고 다들 말해주셨다.

근데 주어진 자료를 보고 자료수집을 더 해보아도,

어떻게 사용하는 것인지, 어떤 상황에서 사용하는지 감은 잡히지만,

막상 코드로 작성해보려니 코드적인 상황이 떠오르지 않아서 좀 멘탈이 터졌다...

많이 사용해보고 적응해야 하는 건 알지만, 아직은 많이 사용해볼 만한 상황을 못 찾았다........

1) Reat Hooks

① useState

setState를 사용하는 방식에는 우리가 알고 있는 방식이 아닌 또 다른 방식인 함수형 업데이트 방식이 있다.

일반 업데이트 방식은 버튼을 클릭했을 때 setNumber가 각각 실행되는 것이 아니라, 배치(batch)로 처리한다.

-아래코드를 참고하여 설명하자면-

우리가 onClick을 했을 때 setNumber 라는 명령을 세번 내리지만, 리액트는 그 명령을 하나로 모아 한번만 실행한다.

그래서 setNumber을 3번 명령하던, 100번 명령하던 1번만 실행된다.

반면에 함수형 업데이트 방식은 3번을 동시에 명령을 내리면, 그 명령을 모아 순차적으로 각각 1번씩 실행한다.

0에 1더하고, 그 다음 1에 1을 더하고, 2에 1을 더해서 3이 되는 것이다.

useState가 이렇게 동작하는 이유는,

리액트는 불필요한 리-렌더링을 방지(렌더링 최적화)하기 위해

즉, 리액트의 성능을 위해 한꺼번에 state를 업데이트 하기에 나타나는 결과이다.

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
			// 일반적인 방법 {/* 버튼을 누르면 1씩 플러스된다. */}
      <div>{number}</div> 
      <button
        onClick={() => {
          setNumber(number + 1); // 첫번째 줄 
          setNumber(number + 1); // 두번쨰 줄
          setNumber(number + 1); // 세번째 줄
        }}
      >
        버튼
      </button>
			//함수형 업데이트 방법 {/* 버튼을 누르면 3씩 플러스 된다. */}
      <div>{number}</div>
      <button
        onClick={() => {
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
        }}
      >
        버튼
      </button>
    </div>
  );
}

export default App;
```

② useEffect

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다.

어떤 컴포넌트가 화면에 보여졌을 때(혹은 사라졌을 때) 내가 무언가를 실행하고 싶다면 useEffect를 사용한다.

//useState와 마찬가지로 React에서 제공하는 훅 (기능) 이므로,
import React, { useEffect } from "react"; 
//로 import 해서 사용해야한다.

useEffect는 useEffect가 속한 컴포넌트가 화면에 렌더링 될 때 실행된다.

그렇기에 원치 않는 상황에서도 렌더링에 의해 실행되는 경우도 있다.

이 경우에는 의존성 배열을 사용하여 해결할 수 있다.

❶ 의존성 배열(dependency array)

"이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행할게" 라는 것 이다.

// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳 입니다.
useEffect(()=>{
	// 실행하고 싶은 함수
}, [의존성배열])

어떤 함수를 컴포넌트가 렌더링 될 때 단 한번만 실행하고 싶으면 의존성 배열을 [ ] 빈 상태로 넣으면 된다.

➂ useRef

DOM 요소에 접근할 수 있도록 하는 React Hook 이다.

리액트에서도 DOM을 선택해야 할 상황이 생길 때, useRef hook을 사용한다.

ex) 화면이 렌더링 되자마자 특정 input 태그가 focusing이 돼야 하는 경우 등

const ref = useRef("초기값");
console.log("ref 1", ref);

ref.current = "바꾼 값";
console.log("ref 1", ref);

다만, 이렇게 설정된 ref 값은 컴포넌트가 계속해서 렌더링 되어도 unmount 전까지 값을 유지한다는 것을 주의해야한다.

이러한 특징 때문에 useRef는 다음 2가지 용도로 사용된다.

저장공간
- state와 비슷한 역할을 한다. (다만 state는 변화가 일어나면 다시 렌더링이 일어나서 내부 변수들은 초기화)
- ref에 저장한 값은 렌더링을 일으키지 않는다. (ref의 값 변화가 일어나도 내부 변수들이 초기화 X)
- state는 리렌더링이 꼭 필요한 값을 다룰 때 쓰면 된다.
- ref는 리렌더링을 발생시키지 않는 값을 저장할 때 사용한다.
DOM
- 렌더링 되자마자 특정 input이 focusing 돼야 한다면 useRef를 사용한다.

④ useContext

props를 하여 GrandFather 컴포넌트 > Father 컴포넌트 > Child 컴포넌트로 name을 전달해준다하면,

Father 컴포넌트는 중간다리 역할을 하게 된다. 근데 만약, Father 컴포넌트가 100개가 넘는다면?

굉장히 비효율적이다. 이 비효율적인 방법을 대신하도록 useContext를 사용할 수 있다.

//context > FamilyContext.js
import { createContext } from "react";

// 여기서 null은 createContext의 기본값이다.
export const FamilyContext = createContext(null);

context 를 생성하고,

import React from "react";
import Father from "./Father";
import { FamilyContext } from "../context/FamilyContext";

function GrandFather() {
  const name="olaf";

  return (
    <FamilyContext.Provider value={{ name }}> //Provider란 제공자
      <Father /> //context에서 전해주기에 props가 필요없다.
    </FamilyContext.Provider>
  );
}

export default GrandFather;

context에서 전해줄 것이기 때문에 더 이상 props가 필요없다.

그렇기에 FamilyContext.Provider로 전해주고,

props를 받던 Father 컴포넌트에서도 Child에게 props를 줄 필요가 없다.

import React, { useContext } from "react";
import { FamilyContext } from "../context/FamilyContext"; //연결

function Child({ name }) {
  const data = useContext(FamilyContext); //적용

  return (
    <div>
      이름은 <span style={stressedWord}>{data.name}</span>랍니다.
      //props로 내려준 값이 아니라 context를 이용해서 값을 받아옴.
    </div>
  );
}

export default Child;

주의할 점

useContext를 사용할 때, Provider에서 제공한 value가 달라진다면,
useContext를 사용하고 있는 모든 컴포넌트가 리렌더링 된다.
value 부분을 항상 신경써야 하고, 그 대안으로 메모이제이션이 있다.

2023.03.03) 항해 26일차 (1-CSS-in-JS,전역스타일링)

Wisdom_1104 — Fri, 3 Mar 2023 22:19:10 +0900

styled-components 자체는 크게 어렵지 않았다.

문법자체도 달라지는게 없었기에 수월하게 할 수 있었지만,

새로 배운 개념이기에 정리를 해봤다.

1) CSS-in-JS

CSS-in-JS방식이란, 단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식이다.

순수한 CSS코드를 우리가 아니라, 자바스크립트를 이용해서 CSS코드를 만들어내는 것이다.

CSS-in-JS 방식을 사용하기 위해

플러그인 설치 후, 터미널에서 styled-components를 설치해준다.

// 터미널에서 아래 명령어로 설치
yarn add styled-components

① styled-components 사용하기

classname을 사용해서 구현하기는 조금 까다로운 조건부 스타일링을 styled-components를 이용하면 간편하게 할 수 있다.

CSS-in-JS 방식의 강점이 바로 스타일 코드를 JS코드 작성하듯이 스타일 코드를 작성할 수 있다는 점 이다.

props는 부모 컴포넌트에서 자식 컴포넌트로 어떤 정보를 전달하고자 할 때 사용한다.

styled-components도 말 그대로 컴포넌트 이기에,

box에 prosp를 통해서 border color에 대한 정보를 전달해줄 수 있다.

즉, props를 통해서 부모 컴포넌트로부터 값을 전달받고, 조건문을 이용해서 조건부 스타일링을 할 수 있다.

// src/App.js

import React from "react";
import styled from "styled-components"; //해주어야 적용이 된다.

const StContainer = styled.div` //styled. 뒤에는 html 요소가 오고 `백틱을 사용한다.
  display: flex;
`;

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor}; //props를 받는다.
  margin: 20px;
`;
// 박스의 색을 배열에 담는다.
const boxList = ["red", "green", "blue"];

// 색을 넣으면, 이름을 반환해주는 함수를 만든다.
const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "빨간 박스";
    case "green":
      return "초록 박스";
    case "blue":
      return "파란 박스";
    default:
      return "검정 박스";
   }
};
const App = () => {
  return (
    <StContainer>
			{/* map을 이용해서 StBox를 반복하여 화면에 그린다. */}
      {boxList.map((box) => (
        <StBox borderColor={box}>{getBoxName(box)}</StBox>
      ))}
    </StContainer>
  );
};

export default App;

2) 전역 스타일링 ( 그 외 Sass, css reset)

① 전역 스타일링

공통적으로 들어가야 할 스타일을 적용해야 할 상황도 있다.

그럴 경우 ‘전역적으로(globally)’ 스타일을 지정한다고 하는데, 그럴 때 적용하는 방법이 바로 전역 스타일링이다.

이 때, 공통적으로 적용되는 스타일링 부분은 빼줄 필요가 있다.

//GlobalStyle.jsx
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body {
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
  }
`;

export default GlobalStyle;

이렇게 공통적으로 들어가는 스타일을 따로 빼내서

//App.jsx
import GlobalStyle from "./GlobalStyle";
import BlogPost from "./BlogPost";

function App() {
	const title = '전역 스타일링 제목입니다.';
	const contents = '전역 스타일링 내용입니다.';
  return (
    <>
      <GlobalStyle />
      <BlogPost title={title} contents={contents} />
    </>
  );
}

export default App;

이렇게 적용을 시킨다.

② Sass

CSS를 전통적인 방법보다 효율적으로 사용하기 위해 만들어진 언어이다.

코드의 재사용성을 높이고, 가독성 또한 향상시켜줄 수 있는 방법이다.

// 변수 사용
$color: #4287f5;

div {
	background: $color;
}
//중첩 사용
label {
      color: $colorPoint;
      
      &:hover {
        color: white;
      }
}
//다른 style 파일 import
//common.scss
$color1: #ed5b46;
$color2: #f26671;
//style.scss
@import "common.scss";

.box {
	background-color: $color3;
}

③ css reset

브라우저는 기본적으로 default style을 제공한다.

하지만, 다양한 웹브라우저들은 저마다 조금씩은 다른 default style을 제공하고 있기에,

이를 초기화하고 우리가 정하는대로만 표현될 수 있도록 하는 방법도 알아야 한다.

=> reset.css코드를 작성해 적용시키면 default style이 적용되지 않는다.

2023.03.02) 항해 25일차

Wisdom_1104 — Thu, 2 Mar 2023 22:45:29 +0900

오늘은 버츄얼돔과 렌더링에 대해 다시 짚어보았다.

다시 짚어보다가 렌더링 최적화에 대해 알게 되었다..

최적화를 하기 위해서 무엇을 해야하는지 알아고보, 시도도 해보았지만

아쉽게도 실패했다..ㅠ

렌더링 최적화를 하기 위해서는 어느 한 부분에 리렌더링이 일어날 때,

하위의 컴포넌트도 렌더링이 되지 않도록 연결고리를 끊어야 한다는 것은 알았다.

하지만 어떻게 해야할지 몰라서 이 부분은 더 찾아보고 시도해야할 듯하다.

못하니까 괜히 오기가 생기는.......

렌더링 최적화 외에 흥미가 생기는 주제가 또 있었다.

바로, '컴파운드 컴포넌트 패턴'이다.

개발자의 입장에서 컴포넌트의 구조를 한 눈에 보기 좋고,

좀 더 수정 등의 유지보수가 간단하게 짤 수 있는 컴포넌트 형태에 대한 방법이다.

* 컴포넌트 하나에 props를 전달하는 방식
	* 이 컴포넌트가 어떤 역할을 하는지를 한 눈에 보았을때 추측하기 어렵다.
	* 수정사항이 생길 경우 전달해야 할 props가 늘어날 수 있고, 불필요한 props까지 전달하게 되는 상황이 생길 수 있다. + props가 늘면 코드도 더욱 복잡해진다.
	=> 유지보수 측면에서 어려울 수 있다.

<Modal
  buttonName={"열어주세요."}
  contents={"안녕하세요"}
  fontColor="white"
  bc="red"
  buttonSize="large"
  margin="10px"
  position="right"
/>

-------

const Modal = ({ buttonName, contents, bc, fontColor, buttonSize, margin }) => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button
        style={{
          backgroundColor: bc,
          color: fontColor,
          width: buttonSize === "large" ? "120px" : "50px",
          margin: margin ? margin : "none"
        }}
        onClick={() => setOpen((pre) => !pre)}
      >
        {buttonName}
      </button>
      {open ? <div>{contents}</div> : null}
    </>
  );
};

한눈에 보기 어려운 이 코드를 컴파운드 컴포넌트 패턴으로 다시 작성하면,

* 컴파운드 패턴
	* 대부분의 인자를 children으로 전달하고, 수정이 간단하다.
	* 굳이 타고 들어가지 않아도 어떤 인자가 어디로 어떻게 전달되는지 추측하기 쉽다.
	* props를 늘려서 코드가 복잡해질 일도 없고, props driling도 상대적으로 줄일 수 있다.
	=> 유지보수 측면에서 좋은 방법

<ComModal.Root>
  <ComModal.Trigger>
    <Button fontColor="white" bc="red" buttonSize="large">
      열기
    </Button>
  </ComModal.Trigger>
	<ComModal.Content>안녕하세요</ComModal.Content>
</ComModal.Root>

------

const Context = createContext();

export const ComModalRoot = ({ children }) => {
  const [open, setOpen] = useState(false);
  return (
    <Context.Provider
      value={{
        open,
        setOpen
      }}
    >
      {children}
    </Context.Provider>
  );
};

const ComModalTrigger = ({ children }) => {
  const { setOpen } = useContext(Context);
  return <div onClick={() => setOpen((pre) => !pre)}>{children}</div>;
};

const ComModalContent = ({ children }) => {
  const { open } = useContext(Context);
  return <div>{open ? children : null}</div>;
};

이렇게 한 눈에 보기 편한 코드가 된다.

아직은 완벽하게 이해한 것은 아니지만 이 방법에 대해 좀 더 깊게 알아볼 필요성을 느꼈다.

2023.02.28) 항해 23일차

Wisdom_1104 — Wed, 1 Mar 2023 00:33:52 +0900

오늘은 어제 만들었던 투두리스트의 컴포넌트를 분리해 보았다.

분리하면서 props를 받을 때 구조분해할당으로 받지 않아서 오류가 났었다.

처음엔 뭐가 문제인지 몰라서 헤맸는데, 이 때문에라는 것을 알고 허무했다... 중괄호 때문에....

컴포넌트를 다 분리하고 나니 함수 중에서 중복으로 사용되는 함수가 있어서 어떻게 해야 하나 하다가

함수도 컴포넌트 분리하듯이 분리해 버리자!! 생각하고 실행에 옮겼다.

파일에 함수를 옮기고 export 하여 컴포넌트 파일에 import를 하였는데,

오류가 나며 실행이 되지 않았다....

분명 제대로 받아왔는데 왜 안되나... 알아보니 여러 문제가 있었다....

첫 번째로 export 할 때 매개변수로 넣어준 것들을

컴포넌트 파일의 함수 적용하는 곳에도 똑같이 넣어주어야 한다는 것이다.

두 번째로 컴포넌트 파일을 분리하며 props로 받아 온 함수를 지워주지 않아서 오류가 났던 것이다..

수정하고 나니 잘 되어서 신난 나머지 모든 함수를 착착 분리해 버렸다....!

물론 불필요한 리렌더링을 정리해주어야 하는데..

그 부분은 아직 부족하여하지 못했다..ㅜㅠ

내일 매니저님께 코드리뷰 부탁드리고 해 봐야겠다..!

팁이 필요해!!!!!

분리한 모습

2023.02.27) 항해 22일차

Wisdom_1104 — Mon, 27 Feb 2023 22:02:29 +0900

오늘은 리액트로 투두리스트를 만들어 보았다.

투두 리스트 추가와 삭제는 강의 내용을 토대로 만들면 어렵지 않게 만들 수 있었다.

하지만 완료 버튼을 누르면 투두가 완료 자리에 가도록 하는게 어려웠다...

완료 자리에 갈 수 있도록 투두에 ' isDone: false '를 기본값으로 주고,

완료 버튼을 클릭하면 false가 true로 바뀌고, 완료 자리로 가도록 하려고 하였다.

그렇게 하기 위해서 map에 if문을 사용하여 바뀌도록 하였다.

생각은 했지만 뭔가 변하는게 없어보여서 혼란스러웠다.

그래서 결국 도움을 받아 조금씩 코드를 작성해 갔다.

적용이 잘 되었지만, 구역을 나누는 기준이 작성되어있지 않았다.

  //투두 완료
  const clickDoneBoxHandler = (id) => {
    const newTodos = todos.map((todo)=>{
      if(todo.id === id){
        todo.isDone = true;
      }
      return todo;
    });
    setTodos(newTodos);
  }

그래서 진행중인 구역에는 false인 투두만 들어오고,

완료인 구역에는 true인 투두가 들어오도록 하였다.

// 진행중인 구역
<div className='working'>
          {todos.filter ((item) => item.isDone === false)
          .map(function (item) {
            return ...
            
// 완료 구역
<div className='done'>
        {todos.filter ((item) => item.isDone === true)
          .map(function (item) {
            return ...

이렇게 하자 바뀌는 값에 따라 투두가 잘 들어갔다!!

추가로 완료 버튼을 누르면 완료구역으로 넘어가고 완료 버튼이 취소 버튼이 되게 만든 다음,

취소 버튼을 누르면 다시 false로 바뀌게 하여 진행중인 구역으로 들어가도록 하였다.

완성된 화면

추가로 스타일링도 하고 원하는 폰트도 찾아서 적용시켜 보았다!!

아직은 매우매우 심플하게 생겼지만...

실력을 더 갈고 닦다보면 엄청난 투두를 만들 수 있을거라 기대한다 :)

그런의미로 다시 한번 투두리스트를 만들어보려고 한다!

2023.02.26) 항해 3주차 회고

Wisdom_1104 — Sun, 26 Feb 2023 21:31:57 +0900

이번주에는 자바스크립트 문법을 마저 공부하느라 어지러웠다.....

코어 자바스크립트 책을 보며 공부했는데, 아니 이거 너무 어렵네요..

특히 클로저 개념 공부할 땐 어지러웠다... 쉽지 않아,,

금요일부터는 주차가 바뀌어서 리액트를 본격적으로 접하기 시작했다.

자바스크립트 문법만 보다가 리액트를 만지작거리니 재미있기도 하고 생각보단 쉬웠다.

아직까진 쉬운 개념들만 접한건진 몰르겠지만, 생각보다 할만 햇다는 것에 만족!!!!

내일부터는 과제로 주어진 투두리스트를 만들어보고, 또 만들어보고 반복하며 리펙토링 하는 시간을 가질거다.

물론 여유가 남는다면 다른 리액트 관련 가의도 봐야겠다!

일단 의욕은 충만하다!!

2023.02.25) 항해 20일차

Wisdom_1104 — Sat, 25 Feb 2023 20:42:51 +0900

어제 보던 강의를 마저 보았다.

생각보다 많이 어렵지는 않았다. 강의를 보며 차근차근 손코딩 해보며 이해하니까 생각보다 수월했다.

이 전에 css작업도 해보고 순수 자바스크립트 작업도 해보아서 아직까지는 괜찮다!!

1) State

State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.

name이라는 정보를 const name = “ ”; 으로 만들었는데,

만약 name이라는 값이 바뀌어야만 하는 정보였어야 했다면 state로 생성한다.

State를 만들 때는 useState()를 사용한다.

useState 라는 함수를 이용해서 state를 만든다.

useState 는 state를 만들어주는 리액트에서 제공하는 기능이고, “훅”이라고 부른다.

① useState 훅을 사용하는 방식

const 로 선언을 하고 [ ] 빈 배열 을 생성하고,

배열의 첫번째 자리에는 이 state의 이름, 두번째 자리에는 set 을 붙이고 state의 이름을 붙인다.

useState( ) 의 인자에는 이 state의 원하는 처음값 을 넣어준다.

const [ value, setValue ] = useState( 초기값 )

// state 사용 예시
import React, { useState } from 'react'

function App() {
  const [id,setId]=useState("")
  const [password,setPassword]=useState("")
  return (
    <div>
      아이디:
      <input 
        type="text" value={id}
        onChange={function(event){
          setId(event.target.value);
        }}
      />
      <br/>
      비밀번호:
      <input
        type="password" value={password}
        onChange={function(event){
          setPassword(event.target.value);
        }}
      />
      <br/>
      <button onClick={() => {
        alert(`입력한 아이디는 ${id}이며, 비밀번호는${password}입니다.`);
        setId('');
        setPassword('');
      }}> 로그인</button>
    </div>

  )
}

export default App

2) 불변성

리액트는 화면을 렌더링할지를 state의 변화에 따라 결정하고, 단순 변수는 무시한다.

(리액트에서 렌더링이란, 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업이다.)

원시 데이터가 아닌, 객체나 배열 등은 스프레드 문법이나 map, filter 등 불변성을 지켜주는 방법을 사용해서 처리한다.

원시데이터는 수정을 했을 때 메모리에 저장된 값 자체는 바꿀 수 없고,

새로운 메모리 저장공간에 새로운 값을 저장한다.

원시데이터가 아닌 데이터는 수정했을 때 기존에 저장되어 있던 메모리 저장공간의 값 자체를 바꿔버린다.

그때, state가 변했는지 변하지 않았는지 확인하는 방법이 state의 변화 전, 후의 메모리 주소를 비교한다.

리액트에서 원시데이터가 아닌 데이터를 수정할 때 불변성을 지켜주지 않고,

직접 수정을 가하면 값은 바뀌지만 메모리주소는 변함이 없게 되어버려 문제가 생기는 것이다.

배열을 setState 할 때 불변성을 지켜주기 위해 직접 수정을 가하지 않고 전개 연산자를 사용해서,

기존의 값을 복사하고 그 이후에 값을 수정하는 식으로 구현한다.

import React, { useState } from 'react'
import "./App.css";

function App() {
  const [fruit = ["딸기", "수박", "망고", "복숭아", "사과"]]
  return (
    <div className='body'>
      {fruit.filter(function(item){
        return item !== '망고';
      })
      .map(function(item){
        return <div className='box'>{item}</div>
      })}
    </div>
  )
}

export default App

실습을 해보며 삭제버튼도 구현해보고 컴포넌트를 분리도 해보았다.

//삭제버튼
const clickDeleteBoxHandler = (id) => {
  const newUser = user.filter(person => person.id !== id);
  setUser(newUser);
}

const Button =({clickAddBoxHandler}) => {
  return <button onClick={clickAddBoxHandler}>추가</button>;
};

export default Button;

// 분리한 컴포넌트를 연결하였다.
import React, { useState } from 'react'
import "./App.css";
import Button from 'components/Button';
import User from 'components/User';

2023.02.24) 항해 19일차

Wisdom_1104 — Fri, 24 Feb 2023 22:08:35 +0900

오늘부터 본격적으로 리액트를 접하기 시작했다. 리액트는 처음이라 긴장하며 시작했지만, 생각보다 할 만했다.

사실 쉬는 시간을 많이 가져서 생각보다 공부를 많이 하지는 않았지만, 이정도로도 나쁘지 않다!! 물론 내일이 힘들겠지만...!

리액트지만 뭔가 자바스크립트의 문법을 토대로 하다보니 그렇게 어렵진 않아서 끙끙대지는 않았다.

(물론, 많이 안 본 탓도 있지만......)

그래도 뭔가 재미있어서 내일 강의 얼른 다 보고 과제하며 코드를 짜보는 시간을 가져야겠다!!!

지금 실력으로는 어림도 없지...!

1) 개발환경 (npm, yarn)

	npm	yarn
공통점	① 자바스크립트 런타임 환경인 노드의 패키지 관리자 ② 전 세계의 많은 개발자들이 만든 유용하고 다양한 패키지 ③ 프로그램을 올려놓은 '온라인 데이터베잇'에서 쉽게 설치하고, 삭제할 수 있도록 도와주는 관리자
차이점	① node.js를 설치할 때 자동으로 생성된다. ② Node Package Manager의 약자 ③ NPM platform 자체	① 2016년에 페이스북에서 개발한 패키지 관리자 ② npm과 호환성이 좋다. ③ npm보다 속도, 안정성 측면에서 훨씬 좋다.

2) CRA (Create-react-app)

리액트 프로젝트를 하기 위해 필요한 여러 프로그램을 자동으로 설치해주는 도구이다.

-순서-

① 터미널에서 원하는 폴더로 들어간 후에 yarn create react-app week-1를 하여 생성한다.

② 생성된 폴더로 이동하여 yarn start를 하면 리액트 앱이 실행된다.

3 ) Component

리액트 세계에서 말하는 컴포넌트(블럭)는 즉 함수다.

컴포넌트를 만든다는건 html을 return 하는 함수를 만드는 것이다.

이렇게 컴포넌트를 구분하여 사용한다.

① 컴포넌트 안에 컴포넌트 넣기

컴포넌트는 다른 컴포넌트를 품을 수 있다.

이때 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트라고 부르고,

다른 컴포넌트 안에서 품어지는 컴포넌트를 자식 컴포넌트라고 부른다.

function Mom() { //부모 컨포넌트
  return <Child />
}

function Child() { //자식 컨포넌트
  return <div>나는 딸입니다.</div>;
}

function App() {
  return <Mom />;
}

export default App;

4) JSX (JavaScript + HTML)

리액트에서는 딱 하나의 html 파일만 존재한다. (public 폴더 아래에 있는 index.html)

App.js 파일에서 JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 뷰를 그린다.

컴포넌트에서 반환할 수 있는 엘리먼트는 1개이기 때문에 여러개를 작성하면 오류가 난다.

// 이렇게 태그로 전체를 감싸주어 하나로 만들어야 한다
return ( 
    <div>
      <p>안녕하세요 :)</p>
      <input type='text'/>
    </div>
  );

① JSX에서 javascript 값, map , 삼항 연산자 가져오기

JSX에 javascript 값, map , 삼항 연산자 등을 중괄호{ }를 사용하여 쓸 수 있다.

JSX로 작성하는 태그 내에서 클래스 명을 정해줄 땐 속성 값을 className으로 사용한다. (id는 id로 사용한다)

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const number = 1;

  return (
    <div className="App">
      <p>안녕하세요 :)</p>
      {/* JSX 내에서 코드 주석은 이렇게 쓴다 :) */}
      {/* 삼항 연산자를 사용한다면 */}
      <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
    </div>
  );
}

export default App;

② 인라인으로 style 주기

스타일을 줄 땐, css 문법 대신 json 형식으로 넣어준다.

// 중괄호를 두 번 쓰는 이유? 딕셔너리도 자바스크립트니까!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있다!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}

5) Props

props는 부모 컴포넌트로부터 받아온 데이터이다.

props를 받고 전달만 해주는 중간다리 역할을 하는 현상을 Props Drilling라고 한다.

function App() {
  function Grandfa() {
    const name= 'Ori';
    return <Mom grandfaName={name}/> //props로 name을 전달했다.
  }

  //Props Drilling
  function Mom(props){ //이게 바로 props다.
    return <Son grandfaName={props.grandfaName}/> //props로 name을 전달했다.
  }

  function Son(props){ //이게 바로 props다.
    return <div>I'm {props.grandfaName}.</div>
  }

  return (
    <Grandfa />
  )
}

① children

<Component props={props} /> 와 다른 방식으로 자식 컴포넌트에 정보를 전달해준다.

Layout 컴포넌트를 만들 때 자주 사용한다.

import React from "react";

function User(props) {
  return <div>{props.children}</div>; //정보를 받는 방식은 기존과 동일
}

function App() {
  return <User>안녕하세요</User>; //children props를 보내는 방식
}
export default App;

② 구조분해할당

앞서 설명했듯이 props는 object literal 형태의 데이터 입니다. 그래서 우리는 구조 분해 할당을 이용할 수 있습니다.

만약 여러개의 props를 받는다면, { } 안에 여러개의 props를 그대로 써주면 됩니다.

function Todo({ one, two, three, four }){
	return <div>{two}</div>
}

③ defaultProps

defaultProps란, 부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기 값이다.

function Child({ name }){
	return <div>내 이름은 {name} 입니다. </div>
}

// 이렇게 defaultProps를 설정한다.
Child.defaultProps={
	name: '기본 이름'
}


// 구조 분해 할당 문법을 사용하면 이렇게도 할 수 있다.
function Child({ name = '기본이름' }){
	return <div>내 이름은 {name} 입니다. </div>
}

2023.02.23) 항해 18일차

Wisdom_1104 — Thu, 23 Feb 2023 22:30:13 +0900

오늘 공부 내용은 상당히 어려웠다.....

동기 비동기의 차이는 이해가 되는데, promise 부분에서 좀 헤맸다.

다행히 영상의 도움을 받아서 감은 잡혔지만, 역시나 직접 사용해봐야 명확히 알게 될 것 같다.

동기 비동기는 깇이 이해하려고 하면 양이 엄청 많아진다고 한다.

그건 추후에 어느정도 이해가 되었을 때 해보기로 한다.

지금 괜히 시도했다간 지금 이해한 내용도 헷갈릴지 몰라...

1) 동기 / 비동기 (태스크큐, 이벤트루프)

동기는 직렬적으로 태스크를 수행하고, 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기한다.

비동기는 병렬적으로 태스크를 수행하고, 태스크가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 태스크를 실행한다.

자바스크립트의 대부분의 DOM 이벤트 핸들러와 Timer 함수(setTimeout, setInterval), Ajax 요청은 비동기식 처리 모델로 동작한다.

① 싱글 쓰레드란

자바스크립트는 싱글쓰레드(single-thread) 이다.

싱글 쓰레드는 쓰레드가 하나뿐이라는 의미이며 이말은 곧 하나의 작업(task)만을 처리할 수 있다는 것을 의미한다.

하지만 실제로 동작하는 웹 애플리케이션은 많은 task가 동시에 처리되는 것처럼 느껴진다.

이처럼 자바스크립트의 동시성(Concurrency)을 지원하는 것이 바로 이벤트 루프(Event Loop)이다.

Call Stack: 자바스크립트에서 수행해야 할 함수들을 순차적으로 스택에 담아 처리
Web API: 웹 브라우저에서 제공하는 API로 AJAX나 Timeout등의 비동기 작업을 실행
Task Queue: Web API에서 넘겨받은 Callback함수를 저장
Event Loop: Call Stack이 비어있다면 Task Queue의 작업을 Call Stack으로 옮김

2) 콜백 지옥 탈출하기

콜백 기반 비동기 처리는 한 개 혹은 두 개의 중첩 호출이 있는 경우는 보기에도 나쁘지 않다.

콜백 지옥은 꼬리에 꼬리를 무는 비동기 동작이 많아지면 깊은 중첩 코드가 만들어지는 패턴을 말한다.

콜백지옥을 방지하기 위해 promise와 asyanc/await을 사용할 수 있다.

3) promise

new Promise에 전달되는 함수는 executor(실행자, 실행 함수) 라고 부른다.

executor는 new Promise가 만들어질 때 자동으로 실행되는데, 결과를 최종적으로 만들어내는 제작 코드를 포함한다.

executor는 자동으로 실행되는데 여기서 원하는 일이 처리되고, 끝나면 executor는 성공 여부에 따라 resolve나 reject를 호출한다.

resolve(value) — 일이 성공적으로 끝난 경우 그 결과를 나타내는 value와 함께 호출
reject(error) — 에러 발생 시 에러 객체를 나타내는 error와 함께 호출

Promise 객체는 executor와 결과나 에러를 받을 소비 함수를 이어주는 역할을 한다.

소비함수는 .then, .catch, .finally 메서드를 사용해 등록된다.

.then의 첫 번째 인수는 Promise가 이행되었을 때 실행되는 함수이고, 여기서 실행 결과를 받느다.
.then의 두 번째 인수는 Promise가 거부되었을 때 실행되는 함수이고, 여기서 에러를 받는다.
에러가 발생한 경우만 다루고 싶다면 .then(null, errorHandlingFunction)같이 null을 첫 번째 인수로 전달하면 되고,
.catch를 써도 된다. (.catch는 .then에 null을 전달하는 것과 동일하게 작동한다)
.finally에선 성공·실패 여부에 상관없이 절차를 마무리하는 ‘보편적’ 동작을 수행한다.
.finally 핸들러는 자동으로 다음 핸들러에 결과와 에러를 전달한다.

① Promise 체이닝

promise 체이닝은 result가 .then 핸들러의 체인(사슬)을 통해 전달된다

promise 체이닝이 가능한 이유는 promise.then을 호출하면 promise가 반환되기 때문이다.

반환된 프라미스엔 당연히 .then을 호출할 수 있다.

핸들러가 값을 반환할 때엔 이 값이 promise의 result가 된다.

// Promise 체이닝 예제코드

new Promise(function(resolve, reject) {

  setTimeout(() =&gt; resolve(1), 1000); // ① 1초 후 최초 프라미스가 이행

}).then(function(result) { // ② 이후 첫번째 .then 핸들러가 호출

  alert(result); // 1
  return result * 2;

}).then(function(result) { // ③ 2에서 반환한 값은 다음 .then 핸들러에 전달

  alert(result); // 2
  return result * 2;

}).then(function(result) {

  alert(result); // 4
  return result * 2;

});

② fetch와 체이닝 함께 사용하기

fetch는 자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고, 새로운 정보를 받아오는 일을 한다.

// url에 네트워크 요청을 보내고 프라미스를 반환한다. 
fetch('/article/promise-chaining/user.json')
  // 원격 서버가 응답하면 .then 아래 코드가 실행된다.
  .then(function(response) {
    // response.text()는 응답 텍스트 전체가 다운로드되면
    // 응답 텍스트를 새로운 이행 프라미스를 만들고, 이를 반환한다.
    return response.text();
  })
  .then(function(text) {
    // 원격에서 받아온 파일의 내용
    alert(text); // {"name": "Violet-Bora-Lee", "isAdmin": true}
  });

4) Promise API

① Promise.all

요소 전체가 Promise인 배열(엄밀히 따지면 이터러블 객체이지만, 주로 배열)을 받고 새로운 Promise를 반환한다.

모든 Promise가 이행될 때까지 기다렸다가 그 결괏값을 담은 배열을 반환한다.

주어진 Promise 중 하나라도 실패하면 Promise.all는 거부되고, 나머지 Promise의 결과는 무시된다.

그렇기에, Promise 결과가 모두 필요할 때같이 ‘모 아니면 도’ 일 때 유용하다.

② Promise.allSettled

모든 프라미스가 처리될 때까지 기다린다.

반환되는 배열은 다음과 같은 요소를 갖는다.

응답이 성공할 경우 – {status:"fulfilled", value:result}
에러가 발생한 경우 – {status:"rejected", reason:error}

fetch를 사용해 여러 정보를 가져오고 있고, 여러 요청 중 하나가 실패해도 다른 요청 결과는 여전히 필요하다면,

이럴 때 Promise.allSettled를 사용하면 각 프라미스의 상태와 값 또는 에러를 받을 수 있다.

③ Promise.race

Promise.all과 비슷하지만 가장 먼저 처리되는 프라미스의 결과(혹은 에러)를 반환한다.

첫 번째 프라미스가 가장 빨리 처리상태가 되기 때문에 첫 번째 프라미스의 결과가 result 값이 된다.

이렇게 Promise.race를 사용하면 결과가 나타난 순간 다른 프라미스의 결과 또는 에러는 무시된다.

5) promisification (프로미스화)

콜백을 받는 함수를 프라미스를 반환하는 함수로 바꾸는 것이다.

프로미스화는 async/await와 함께 사용하면 더 좋지만, 콜백을 완전히 대체하지는 못한다.

왜냐하면, Promise는 하나의 결과만 가질 수 있지만, 콜백은 여러 번 호출할 수 있기 때문입니다.

그렇기에, 프로미스화는 콜백을 단 한 번 호출하는 함수에만 적용해야 한다.

프로미스화한 함수의 콜백을 여러 번 호출해도, 두 번째부터는 무시된다.

6) async / await

async가 붙은 함수는 반드시 프로미스를 반환하고, 프로미스가 아닌 것은 프로미스로 감싸 반환한다.

await는 async 함수 안에서만 동작하는데, 프로미스가 처리될 때까지 기다렸다가 결과를 반환한다.

await는 promise.then보다 좀 더 세련되게 프로미스의 result 값을 얻을 수 있도록 해준다.

promise.then보다 가독성 좋고 쓰기도 쉽다.

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프로미스가 이행될 때까지 기다린다.

  alert(result); // "완료!"
}

f();

2023.02.22) 항해 17일차

Wisdom_1104 — Wed, 22 Feb 2023 22:06:43 +0900

오늘 공부 내용은 this, 콜백 함수, 클로저이다.

사실 이 세 가지 개념이 모두 어렵다고 생각되었던 내용이기에 쉽지 않았다.

다만 this와 콜백 함수는 강의를 보고 책을 읽다 보니 할만했지만 클로저는......

클로저 공부하는 데에 나머지 두 개념보다 시간을 3~4배는 쓴 듯하다....

사실 아직도 완벽하게 이해했다고 자신 있게 말하기는 어렵다.

어떤 느낌인지 감은 잡았지만 명확하지 않고 두루뭉술한 느낌이다...

이를 위해 모던 자바스크립트 딥다이브 책도 주문하였다.....ㅎ

1) this

자바스크립트에서의 this는 어디서든 사용할 수 있지만,
상황에 따라 this가 바라보는 대상이 달라지는데 엉뚱한 대상을 바라보는 경우도 있다.
함수와 메서드의 구분이 느슨한 자바스크립트에서 this는 실질적으로 이 둘을 구분하는 거의 유일한 기능이다.
this는 함수를 호출할 때 결정된다. (this는 실행 컨텍스트가 생성될 때 결정되는데, 실행 컨텍스트는 함수를 호출할 때 생성된다)
함수 호출 방식에 따라 값이 달라진다.

(1) 기본적인 this의 규칙

전역 공간에서 this는 전역 컨텍스트를 생성하는 주체인 전역 객체를 가리킨다.

그렇기에 대부분의 경우에서 전역공간의 '전역변수 a = window a= this.a'가 된다.

예외의 경우는 delete 연산자를 썼을 경우이다. (delete 연산자 = window.delete)

처음부터 전역객체의 프로퍼티로 할당한 경우에는 삭제가 되지만, 전역변수로 선언한 경우에는 삭제가 되지 않는다.
전역변수를 선언하면 자바스크립트 엔진이 이를 자동으로 전역객체의 프로퍼티로 할당하는데,
이때 해당 프로퍼티의 변경 및 삭제 가능성을 false로 정의하기 때문이다.

① 함수와 메서드에서의 this

함수는 그 자체로 독립적인 기능을 수행하고, 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행한다는 차이가 있다.

메서드로 호출 : 점 표기법이나 대괄호 표기법으로 함수를 호출할 때 함수 이름 앞에 객체가 명시되어 있는 경우이다.

함수로 호출 : 메서드로 호출한 경우를 제외한 경우이다.

메서드로 호출하는 경우 this는 함수명 앞의 객체의 정보를 담는데, 점 표기법의 경우에 마지막 점 앞에 명시된 객체가 this이다.

함수로 호출하는 경우 this는 지정되어 있지 않고, 전역 객체를 가리킨다.

화살표 함수는 실행 컨텍스트를 생성할 때 this의 바인딩 과정 자체가 빠지게 되어 상위 스코프의 this를 그대로 사용한다.

콜백함수에서 제어권을 받은 함수에서 콜백함수에 별도로 this가 될 대상을 지정하면 그 대상을 참조하고,

그렇지 않으면 전역 객체를 참조한다.

생성자 함수로 호출된 경우 내부에서의 this는 곧 새로 만들 구체적인 인스턴스 자신이다.

( 생성자는 구체적인 인스턴스를 만들기 위한 일종의 틀이다)

(2) 명시적 this 바인딩의 경우 (위의 규칙에 부합하지 않는 경우)

call, apply 메서드는 this를 명시적으로 지정하며 함수나 메서드를 호출하고,

bind 메서드는 this 및 함수에 넘길 인수를 이루 지정하여 새로운 함수를 만들고,

요소를 순회하며 콜백함수를 반복호출하는 일부 메서드는 별도의 인자로 this를 받는다.

2) 콜백함수

콜백함수는 다른 코드에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다.

위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적당한 시점에 실행한다.

(callback은 되돌아 호출해 달라는 명령이다)

콜백 함수는 어떤 객체의 메서드를 전달하더라도 그 메서드는 메서드가 아닌 함수로서 호출된다.

어떤 함수의 인자에 객체의 메서드를 전달하더라도 결국 메서드가 아닌 함수다.

객체의 메서드를 콜백 함수로 전달하면 해당 객체를 this로 바라볼 수 없게 된다.

콜백 함수 내부에서 this가 객체를 바라보게 하고 싶다면 bind 메서드를 사용할 수 있다.

(1) 콜백 지옥과 동기/비동기

콜백 지옥은 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여 쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상이다.

동기적인 코드는 현재 실행 중인 코드가 완료된 후에나 다음 코드를 실행하는 방식이고,

즉시 처리가 가능한 대부분의 코드이다.

비동기적인 코드는 현재 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가고,

별도의 요청, 실행대기, 보류 등과 관련된 코드이다.

① 비동기적인 일련의 작업을 동기적으로 처리해 주는 장치

promise는 new 연산자와 함께 호출한 promise의 인자로 넘겨주는 콜백 함수는 호출할 때 바로 실행되지만,

그 내부에 resolve나 reject 함수를 호출하는 구문이 있을 경우,

둘 중 하나가 실행되기 전까지는 다음(then)이나 오류구문(catch)으로 넘어가지 않는다.

비동기 작업이 완료될 때 비로소 resolve나 reject를 호출하는 방법으로 비동기 작업의 동기적 표현이 가능하다.

asyanc/await는 비동기 작업을 수행하고자 하는 함수 앞에 async를 표기하고,

함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await를 표기하는 것 만으로

뒤의 내용을 promise로 자동전환하고 , 해당 내용이 resolve 된 후에야 다음으로 진행한다.

3) 클로저

(1) 클로저와 LexicalEnvironment

클로저는 함수와 그 함수가 선언될 당시의 LexicalEnvironment의 상호관계에 따른 현상이다.

주로 상태를 안전하게 변경하고 유지하기 위해 사용한다. (의도치 않은 상태의 변경을 막기 위해서)

자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라, 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다.

LexicalEnvironment의 outerEnvironmentReference에 호출되는 환경과 상관없이 정의된 환경에 대한 정보를 저장한다.

외부 함수보다 중첩 함수가 더 오래 유지되는 경우,

가비지 컬렉터의 동작 방식에 의해 실행 종료된 외부 함수의 변수를 여전히 참조할 수 있도록 한다.

//예제 코드

const x = 1;

function outer() {
    const x = 10;
    const inner = function () { console.log(x) };
    return inner;
}

const innerFunc = outer();
innerFunc();

위의 코드를 보며 설명하자면,

outer 함수를 호출하면 중첩 함수 inner를 반환하게 된다.
그리고 outer 함수의 실행 컨텍스트는 실행 컨텍스트 스탭에서 역할을 다 했기 때문에 제거된다.
inner함수가 innerFunc에 전달되었는데, 이는 outer 함수의 렉시컬환경을 참조하고 있다.
즉, outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 제거되지만,

inner함수에서 outer 함수의 변수를 사용하기에 outer 함수의 렉시컬 환경까지 소멸하는 것은 아니다.

(2) 클로저가 아닌 경우

중첩 함수이지만 상위 스코프를 참조하지 않으면 클로저라고 하지 않는다.
중첩 함수이고 상위 스코프를 참조하지만 선언 후 바로 실행하고 소멸하는 경우에는 클로저라고 하지 않는다.

종합해 보자면 클로저가 되려면,

중첩함수이고 상위 스코프의 식별자를 참조하며 outer 함수보다 inner 함수가 더 오래 유지되어야 한다.

2023.02.21) 항해 16일차

Wisdom_1104 — Tue, 21 Feb 2023 16:54:15 +0900

오늘은 데이터 타입과 실행 컨텍스트에 대해 공부했다.

데이터 타입은 크게 어렵지 않았지만, 실행 컨텍스트의 호이스팅과 스코프에서 좀 헤맸다.

1) 데이터 타입

데이터 타입에는 크게 두 가지가 있다.

기본형 (숫자, 문자열, 불리언, null, undefined)은 기본적으로 불변성을 띄고,

참조형 (객체, 배열, 함수, 날짜, 정규표현식)은 가변성을 띄지만 상황에 따라 불변값을 사용하는 경우도 있다.

1bit는 0과 1이고, 1byte는 8bit이다.

변수는 변할 수 있는 무언가(데이터)이고,식별자는 변수명이다.

데이터 할당 시 변수 영역과 데이터 영역이 있다.

변수 영역의 값에 데이터 영역의 주소를 저장하고, 데이터 영역의 주소에 할당하려는 데이터를 저장한다.

얕은 복사는 바로 아래의 단계의 값만 복사하는 방법이고, 원본과 사본이 동일하다.

깊은 복사는 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법이고, 원본과 사본이 다르다.

기본형 데이터는 그대로 복사하면 되지만, 참조형 데이터는 다시 그 내부의 프로퍼티를 복사해야지 깊은 복사가 된다.

undefined와 null은 모두 '없음'을 나타내는 값이지만 의미와 사용 목적이 다르다.

undefined는 사용자가 명시적으로 부여도 가능하고 자바스크립트 엔진이 자동으로 부여하기도 한다.

• 자동으로 부여하는 경우

- 값을 대입하지 않은 변수

- 객체 내부의 존재하지 않는 프로퍼티

- return문이 없거나 호출되지 않는 함수의 실행결과

값으로써 어딘가에 할당된 undefined는 실존하는 데이터이고,

자바스크립트 엔진이 반환해 주는 undefined는 문자 그대로 값이 없다는 것을 말한다.

그렇기에 '비어있음'을 명시적으로 나타내고 싶을 때에는 undefined가 아닌 null을 사용한다.

1. 다른 언어에서는 어떻게 데이터 타입을 정의할까요?

C/C++, 자바 등 정적 타입 언어의 경우 타입별로 할당할 메모리 영역을 2바이트, 4바이트로 나누어 정해놓고 사용한다.

2. 다른 언어들처럼 데이터 타입을 다룬다면 장단점은 무엇이 있을까요?

받아서 저장해야 할 값이 명확히 정해져 있기 때문에 잘못 입력하게 된다면 오류가 나서 쉽게 문제점을 알 수 있는 장점이 있다.

다만 사용자가 명확히 값을 지정해 주어야 하기에 사용하기에 번거롭다는 단점이 있다.

3. 기본형 데이터와 참조형 데이터를 굳이 왜 구분해서 다룰까요? 혹시 하나의 방식으로 다 다룰 수는 없을까요?

기본형 데이터와 달리 참조형 데이터는 추가로 객체의 변수영역도 존재한다.

또한 기본형과 참조형 모두 같은 주소를 바라보게 되는 점과 복사과정을 동일하지만,

데이터 할당과정에서 차이가 있고 변수 복사 이후의 동작에서도 큰 차이가 있다.

그렇기에 적재적소에 사용하듯이 구분하여 사용하는 것이 좋다고 생각한다.

4. 왜 불변 객체를 이용해야 할까요? 어떤 실수가 있을 수 있을까요?

값으로 전달받은 객체에 변경을 가하더라도 원본 객체는 변하지 않아야 하는 경우에 불변 객체를 사용하게 된다.

얕은 복사를 하게 된다면 원본과 사본이 같아지는 문제가 생긴다.

그렇기에 깊은 복사를 하여 원본과 사본은 분리해야 한다.

5. 왜 자바스크립트에는 undefined와 null이 있을까요?

undefined와 null은 모두 '없음'을 나타내는 값이지만 의미와 사용 목적이 다르다.

undefined는 사용자가 명시적으로 부여도 가능하고 자바스크립트 엔진이 자동으로 부여하기도 한다.

값으로써 어딘가에 할당된 undefined는 실존하는 데이터이고,

자바스크립트 엔진이 반환해 주는 undefined는 문자 그대로 값이 없다는 것을 말하기에 차이가 있다.

그렇기에 '비어있음'을 명시적으로 나타내고 싶을 때에는 undefined가 아닌 null을 사용한다는 점에서

undefined와 null의 차이점이 존재한다.

2) 실행 컨텍스트

스택은 쌓은 순서대로 뒤에부터 다시 꺼내는 데이터 구조이고, 큐는 쌓은 순서대로 앞에서부터 꺼내는 데이터 구조이다.

실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.

콜 스택에 쌓아 올렸다가 위에 있는 것부터 실행하는 전체 코드의 환경과 순서를 보장한다.

자바스크립트 코드를 실행하는 순간 콜 스택에 전역 컨텍스트가 담기게 되고, 관련된 함수들을 위에 쌓는다.

실행 시 위에서부터 실행하게 되는데 마지막에는 전역 컨텍스트까지 제거되며 콜 스택에는 아무것도 남지 않게 된다.

Variable Environment는 현재 컨택스트 내의 식별자들에 대한 정보+외부환경 정보이다. (변경사항 반영 X)

Lexical Environment는 Variable Environment와 처음은 같지만 변경사항이 실시간으로 반영되는 것이다.

outerEnvironmentRefernce는 현재 호출된 함수가 선언될 당시의 Lexical Environment를 참조한다.

그렇기에 가장 가까운 요소부터 차례대로만 접근할 수 있다.

함수 선언문은 function 정의부만 존재하고 별도의 할당 명령이 없는 것을 의미한다.

함수 표현식은 정의한 function을 별도의 변수에 할당하는 것을 의미한다.

함수 표현식에는 기명 함수 표현식과 익명 함수 표현식이 있는데 일반적으로는 익명 함수 표현식을 사용한다.

3) 호이스팅

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것이다.

var로 선언한 변수는 호이스팅 시 undefined로 변수를 초기화한다.

let과 const로 선언한 변수는 호이스팅 시 변수를 초기화하지 않는다.

호이스팅은 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것"이라 한다.

따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다.

다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 된다.

4) 스코프

스코프는 식별자에 대한 유효범위이다.

참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를

찾아내기 위한 규칙이고, 자바스크립트는 이 규칙대로 식별자를 찾는다.

전역 스코프 (Global scope)는 코드 어디에서든지 참조할 수 있다.

전역 변수 (Global variable)는 전역에서 선언된 변수이며 어디에든 참조할 수 있다.

(전역 변수는 전역 스코프를 가진다)

지역 스코프 (Local scope)는 함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있다.

지역 변수 (Local variable)는 지역(함수) 내에서 선언된 변수이며 그 지역과 그 지역의 하부 지역에서만 참조할 수 있다.

(지역 변수는 지역 스코프를 가진다)

함수 레벨 스코프는 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효하고 함수 외부에서는 유효하지 않다는 것이다.

같은 전역변수와 지역변수가 중복 선언되면 전역 영역에서는 전역변수만이 참조 가능하고,

함수 내 지역 영역에서는 전역과 지역 변수 모두 참조 가능하나 지역변수를 우선하여 참조한다.

스코프 체인이란 '식별자의 유효범위'를 안에서부터 바깥으로 차례로 검색해 나가는 것을 말한다.

여러 스코프에서 동일한 식별자를 선언한 경우에는 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근 가능하다.