sw last test

정보처리기사 필기(5) - 정보처리시스템 구축 관리

sw first test5

정보처리기사 필기(4) - 프로그래밍 언어 활용

sw first test4

sw first test3

정보처리기사 필기(2) - 소프트웨어 개발

sw first test2

정보처리기사 필기(1) - 소프트웨어 설계

sw first test1


javascript를 통해 비동기 코드를 처리하는 기본적인 방법으로는 Callback 함수, Promise, async/await 등이 있다. 하지만 다수의 비동기 요청의 실행이 필요한 경우 Promise.all()을 사용해볼 수 있다.

## **Promise.all()이란?**

여러 개의 Promise를 동시에 처리하고, 모든 Promise가 완료되었을 때 그 결과들을 반환하는 javascript의 메서드이다.

Promise.all()은 배열형태의 Promise들을 인자로 받고, 이 Promise들은 병렬적으로 실행된다. Promise.all()은 해당 Promise들의 결과를 배열로 반환한다.

**만약 하나라고 Promise가 거부되면, 첫 번째 거부된 Promise를 반환하고, 나머지 Promise들은 무시된다.**

## **Promise.all()을 사용하는 이유**

Promise.all()을 사용하면 병렬적으로 실행되는 Promise들을 효율적으로 관리하고, 모든 Promise의 결과를 한 번에 처리할 수 있다. 이는 비동기 작업을 동시에 처리하고 작업이 완료되었을 때 결과를 수집해야 하는 상황에서 유용하다.

예를 들어 3초가 소요되는 비동기 요청 a, 2초가 소요되는 비동기 요청 b, 1초가 소요되는 비동기요청 c를 async/await을 통해 순차적으로 처리하게 되는 경우 총 6초가 소요되지만, Promise.all()을 통해 이전 요청이 완료되는 것을 기다리지 않고 비동기적으로 병렬로 실행시킨다면 3초만에 실행을 완료시킬 수 있는 것이다.

```javascript

// acyns/await

cosnt test1 = async () =>{
	await a() // 3000ms
    await b() // 2000ms
    await c() // 1000ms
}
// 약 6초 소요

const test2 = async () =>{
	const [res1, res2, res3] = await Promise.all([
    	a(),
        b(),
        c()
    ])
    return [res1, res2, res3]
}
// 약 3초 소요

```

## **Promise.all() 사용 상황**

아래와 같이 특정 DB의 데이터를 연속적으로 도출하기 위해 async/await과 Promise.all()을 사용해봤다.

```javascript

// 1) async/await
async func1(){
	const community_with_likes = await community.map(async (item) => {
      const like_list = await this.communityLikesRepository.find({
        where: {
          community_id: item.community_id,
        },
      });
      return like_list;
    });
}

// 2) Promise.all()
async func2(){
	const community_with_likes = await Promise.all(
      community.map(async (item) => {
        const like_list = await this.communityLikesRepository.find({
          where: {
            community_id: item.community_id,
          },
        });
        return like_list;
      }),
    );
}

```

### **1. async/await**

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FOMvFZ%2FbtsgB32dgj6%2FbaANEHQzX0hxTVckIjOPiK%2Fimg.png)

async/await을 사용해 결과를 출력하려고 할 때는 위와 같이 원하는 방식대로 데이터가 출력되지 않았다.

### **2. Promise.all()**

하지만 Promise.all()을 사용해 결과를 도출하니 아래와 같이 원하는 결과값을 볼 수 있었다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fo73VZ%2FbtsgCGeohNN%2F42YW4sTfKAiXcl3VeJgP51%2Fimg.png)

비동기 처리를 다루는 방법은 여러가지가 있지만, 내가 적용하고자 하는 작업의 특성에 맞게 알맞는 방법을 골라서 사용하는 것이 좋겠다.

---

참조

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

https://code-masterjung.tistory.com/91


Promise.all()은 언제 쓰고 왜 쓰나요? - 여러 비동기 요청 한 번에 처리하기

javascript how to use promise.all


### Local 환경에서 https 설정이 필요한 이유

로컬 환경에서 내가 원하는대로 기능들이 작동한다고 해도, 배포 환경과 로컬 개발 환경의 차이로 인해 코드의 수정이 필요해질 수 있다. 이러한 이유로 개발 환경을 배포 환경과 최대한 동일하게 만들어주는 것이 좋다. 또한 최근의 배포 환경들은 대부분 https로 이뤄져 있기 때문에 그에 맞춰 설정해줄 필요가 있다.

### 자체 서명 인증서 생성 (openssl 사용)

```bash
# 개인 키 생성
$ openssl genrsa -out private-key.pem 2048

# 개인 키를 사용한 새로운 인증서 요청서 생성
$ openssl req -new -key private-key.pem -out cert-request.csr

# 요청서를 사용한 자체 서명 인증서 생성
$ openssl x509 -req -in cert-request.csr -signkey private-key.pem -out cert.pem
```

인증서 생성 시 입력사항은 모두 건너뛰어도 무관하다.

### HTTPS 구성 설정 - main.ts

```typescript
import * as fs from "fs";
import * as https from "https";

async function bootstrap() {
  const httpsOptions = {
    key: fs.readFileSync("./private-key.pem"),
    cert: fs.readFileSync("./cert.pem"),
  };
  const app = await NestFactory.create(AppModule, {
    httpsOptions,
  });
  // 필요에 따라 cors 설정도 가능
  // app.enableCors({
  //  origin: [url,...],
  //  credentials: true, 쿠키를 사용하는 경우 설정
  // });
  await app.listen(3000);
}
bootstrap();
```

설정이 완료되면 로컬에서 https 환경처럼 적용할 수 있다.

하지만 자체 인증서로 https를 만들어 SSR(ServerSideRendering)이나 API 요청 시 self certifi 에러가 발생할 수 있다. 이런 경우 프론트단 env에 다음과 같이 설정해주면 된다.

```bash
# .env
NODE_TLS_REJECT_UNAUTHORIZED=0
```

그럼에도 오류가 발생하는 경우 아래의 링크를 통해 크롬 환경설정을 해주면 된다.

chrome://flags/#allow-insecure-localhost

유효하지 않은 인증서 허용으로 설정

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F3WChm%2Fbtsdi3DwSL4%2F5cdQ9YFzgaKugT4u9ewDk0%2Fimg.png)


Localhost 환경에서 HTTPS 적용하기

nestjs localhost https


### **[서버에서 브라우저로 쿠키 저장](https://lee-yo-han.github.io/nestjs-server-client-cookie)**

분명 로컬에서는 쿠키가 정상적으로 브라우저에 저장되는 것을 볼 수 있었는데, 배포를 하고 나니 또다시 쿠키가 보이지 않았다. response headers에는 쿠키 값과 함께 다음과 같은 에러 문구를 볼 수 있었다.

> **this attempt to set a cookie via a set cookie header was blocked because its domain attribue was invalid with reqards to the current host url**
>
> > "설정된 쿠키 헤더를 통해 쿠키를 설정하려는 이 시도는 해당 도메인 속성이 현재 호스트 URL에 대해 유효하지 않기 때문에 차단되었습니다."

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcGZzIY%2FbtsdemcKoT1%2FcT16wBLzk5J48gv37fGyPK%2Fimg.png)

쿠키 전송 옵션은 다음과 같다.

```typescript
res.cookie("cookie", "cookie", {
  maxAge: 0,
  sameSite: process.env.COOKIE_PARSE_SAME_SITE as SameSite, // "none"
  secure: true,
  httpOnly: true,
  domain: process.env.COOKIE_PARSE_DOMAIN, // "www.backend.com"
});
```

프론트엔드의 URL이 https://www.frontend.com 이고,

백엔드의 URL이 https://www.backend.com 이라고 했을 때, domain 속성을 백엔드 URL로 설정했을 때 발생한 오류이며, domain을 프론트엔드 URL로 바꾸면 response headers에 쿠키 값 자체가 확인되지 않았다.

cors 설정도 credential: true나 origin 등을 정상적으로 해놓은 상태이기 때문에 쿠키 외 다른 데이터는 정상적으로 받아오는걸 확인할 수 있었다.

다른 자료를 찾아보니, secure 속성을 적용하면 쿠키가 정상적으로 저장된다고는 하지만 본인은 이런 문제가 해결되지 않았다.

결국 도메인을 구매해서 사용하게 되었다.

예를 들어 프론트엔드의 URL은 https://www.product.com 로,

백엔드의 URL은 https://api.product.com 으로 연동시켜주고, 쿠키 옵션은 아래처럼 바꿨다.

```typescript
res.cookie("cookie", "cookie", {
  maxAge: 0,
  sameSite: process.env.COOKIE_PARSE_SAME_SITE as SameSite, // "lax"
  secure: true,
  httpOnly: true,
  domain: process.env.COOKIE_PARSE_DOMAIN, // ".product.com"
});
```

같은 도메인을 사용하고 나서야 쿠키가 정상적으로 브라우저로 접속하는 것을 확인할 수 있었다.


NestJS에서 클라이언트로 쿠키 보내기 (왜 내 쿠키는 안받아줘요?) - 배포환경

nestjs server client cookie2


NextJS는 pages/api 디렉토리를 통해 백엔드에 대한 처리를 수행할 수 있다.

하지만 정적으로 배포된 사이트(ex. 블로그 등)에서는 pages/api 등과 같은 동적 로직은 지원되지 않기 때문에 api 디렉토리를 사용할 수 없다.

정적 배포 방법

```javascript
// package.json
// NextJS 13.3 이전 버전
"scripts": {
    "dev": "next dev",
    "start": "next start",
    "lint": "next lint",
    "build": "next build && next export", // ## 정적 배포
    "predeploy": "npm run build",
    "deploy": "touch out/.nojekyll && gh-pages -d out --dotfiles"
  },


// next.config.js
// NextJS v13.3 ~
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
}

module.exports = nextConfig
```

---

참조

https://nextjs.org/docs/advanced-features/static-html-export


NextJS에서 API 디렉토리가 사용되지 않는 이유

nextjs pages api dir unsupported


## prop 'classname' did not match. with styled-components 에러 해결 방법

NextJS의 next.config를 수정해준다.

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  compiler: {
    styledComponents: true, // 컴파일러 옵션 추가
  },
};

module.exports = nextConfig;
```


prop `classname` did not match. with styled-components

nextjs prop classname did not match


![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FpD9qr%2Fbtr9Oa0APIT%2FFuzZyjjney7aKkIXy6BAfK%2Fimg.png)

## 쿠키(Cookie)란?

쿠키는 서버에서 클라이언트에게 보내는 작은 데이터 조각이다. 일반적으로 브라우저에서 웹 사이트를 방문할 때 쿠키를 사용하여 사용자의 활동을 기록하고, 이후에 그 사용자가 같은 웹 사이트를 방문할 때 이 정보를 사용해 그에 맞게 동작하게 해준다. 하지만 쿠키는 당사자뿐만 아닌 제 3자가 조회하는 것도 가능하기 때문에 개인 정보를 담는 등 보안상 민감한 정보를 저장하는 데에는 적합하지 않기 때문에 탈취되거나 사용자에 의해 조작되어도 크게 문제 되지 않을 정보를 주로 저장한다. (ex. 다크 모드, 장바구니 목록 등)

## 서버에서 클라이언트로 Cookie 전송 예제

### 모듈 설치

```bash
yarn add cookie-parser @types/cookie-parser # 쿠키 관리 모듈
```

### 모듈 적용

```typescript
// main.ts

import { NestFactory } from "@nestjs/core";
import { AppModule } from "./app.module";
import * as cookieParser from "cookie-parser";

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({
    // cors 설정
    origin: "http://localhost:3000",
    credentials: true, // 쿠키를 사용할 수 있게 해당 값을 true로 설정
  });
  app.use(cookieParser()); // 쿠키의 편리한 이용을 위해 cookieParser 적용
  await app.listen(3001);
}
bootstrap();
```

### 쿠키 사용 로직

```typescript
// controller.ts

import { Response } from "express";
import { Controller, Get, Res } from "@nestjs/common";

@Controller("myController")
export class MyController {
  @Get()
  getCookie(@Res() res: Response) {
    // express의 Response 객체를 불러와 사용해준다.
    // 쿠키 설정
    res.cookie("cookieName", "cookieValue", { maxAge: 900000, httpOnly: true });
    // maxAge : 유효기간을 밀리초 단위로 설정
    // httpOnly : 클라이언트에서 쿠키에 접근할 수 없도록 설정

    // HTTP 응답 반환
    return res.send("쿠키가 설정되었습니다.");
  }
}
```

쿠키를 요청하는 클라이언트에서도 withCredentials 값을 true로 설정해준다.

```typescript
axios.get(BASE_URL, {
  withCredentials: true,
  headers: {
    "Content-Type": "application/json",
  },
});
```

## 문제상황

보통 예제는 위와 같지만 나는 쿠키가 브라우저에 저장되지 않았다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fd0P7QS%2Fbtr9SjoI9ke%2FIW9CJf8K5mS7kDuau67KDK%2Fimg.png)

로직이 잘못된 것처럼 보이지도 않았고 별도의 에러 메시지도 없어서 문제 파악이 어려웠다.

네트워크 탭을 통해 확인해 보니 response 헤더에 쿠키도 정상적으로 들어가 있었다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FDRJgW%2Fbtr9NnsBfTs%2FlGo4A2uw6n2UXPJJQVwbb1%2Fimg.png)

그런데 노란 경고판이 눈에 띄었다.

경고 문구는 다음과 같다.

> **this set-cookie header didn't specify a samesite attribute, was defaulted to sameSite=Lax, and was blocked because it came from a cross-site reponse which was not the response to a top-level navigation. this response is considered cross-site because the URL has a different scheme than the current site**

요청 URL과 서버 URL의 체계가 달라서 차단됐다고 한다. 내 클라이언트는 http://localhost인데 서버가 https://localhost라서 그런 것 같았다.

sameSite를 none으로 설정해주고 난 후에는 다음과 같은 경고 문구가 생겼다.

> **this attempt to set a cookie via a set-cookie header was blocked because it had the "SameSite=None" attribute but did not have the "Secure" attibute, which is required in order to user "sameSite=None"**

sameSite=none을 적용하기 위해 필요한 Secure 속성이 없기 때문에 쿠키 설정이 차단되었단다.

쿠키 생성 옵션을 마저 추가해 줬다.

```typescript
res.cookie("cookieName", "cookieValue", {
  maxAge: 300000,
  // none, lax, strict 중 none은 쿠키가 항상 전송되도록 허용.
  sameSite: "none", // HTTPS 프로토콜을 사용하고 secure 옵션이 설정된 경우에만 사용 가능
  secure: true, // 쿠키가 HTTPS 프로토콜을 사용하는 경우에만 전송되도록 제한
  httpOnly: true, // 쿠키에 접근할 수 있는 영역을 HTTP(S) 프로토콜로 제한하여,
  // 브라우저의 자바스크립트 코드로부터 쿠키에 접근할 수 없게 함
});
```

secure 속성을 사용하기 위한 https 설정은 아래를 참고할 수 있다.

### [Localhost 환경에서 https 적용하기](https://lee-yo-han.github.io/nestjs-localhost-https)

그 결과 쿠키를 브라우저에서 잘 받는 것을 볼 수 있었다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FJwJs6%2Fbtr9SkupB08%2FbXf0Hf9swCaY3uL8cxMh7K%2Fimg.png)

마지막으로 서버에서 쿠키를 받아 사용하는 방법이다.

```typescript
import { Response, Request } from "express";
import { Controller, Get, Post, Res, Req } from "@nestjs/common";

@Controller("myController")
export class MyController {
  @Get()
  getCookie(@Res() res: Response) {
    // express의 Response 객체를 불러와 사용해준다.
    // 쿠키 설정
    res.cookie("cookieName", "cookieValue", { maxAge: 900000, httpOnly: true });
    // maxAge : 유효기간을 밀리초 단위로 설정
    // httpOnly : 클라이언트에서 쿠키에 접근할 수 없도록 설정

    // HTTP 응답 반환
    return res.send("쿠키가 설정되었습니다.");
  }

  @Get()
  postCookie(@Req() req: Request) {
    // express의 Request 객체를 불러와 사용해준다.
    // request 객체의 cookies를 통해 생성했던 쿠키의 이름을 통해 값을 가져온다.
    req.cookies["cookieName"];
  }
}
```

클라이언트 단에서는 withCredentials:true 옵션 설정 외에는 특별히 해줄 것이 없다.

---

참조 : https://docs.nestjs.com/techniques/cookies


NestJS에서 클라이언트로 쿠키 보내기 (왜 내 쿠키는 안받아줘요?)

nestjs server client cookie


## bycrypt란?

비밀번호 등을 안전하게 암호화하여 저장하고 검증할 수 있도록 도와주는 라이브러리로, 랜덤한 salt를 생성하고 이를 비밀번호와 함께 암호화하여 저장한다. 이후 비밀번호 검증 시에도 같은 salt를 사용하여 입력받은 비밀번호를 암호화한 후, 저장된 암호화된 비밀번호와 비교하여 일치하는지 검증한다.

bcrypt는 암호화 강도를 선택할 수 있는 기능을 제공한다. 기본값은 10으로, 숫자가 클수록 강도가 높아지며 암호화에 소요되는 시간도 늘어난다. 보안을 위해 기본값 이상의 값을 권장한다.

## 사용법

```bash
yarn add bcrypt @types/bcrypt # nestjs는 타입스크립트가 기본이기 때문에 타입으로 설치
```

따로 module이나 main에 등록할 필요 없이 사용하고자 하는 파일에 불러오면 된다.

```typescript
import * as bcrypt from 'bcrypt';

// 암호화 후 저장
const someFN = async (userData:UserData) => {
	const hashPassword = await bcrypt.hash(userData.password,10)
	const saveData = {
    	email:userData.email,
        password: hashPassword,
    }
    // 정보 저장 로직
}

// 저장된 데이터를 통해 비밀번호 확인
const checkFN = async (userData:UserData) =>{
	const hashedPassword = // 저장된 정보 불러오는 로직

    // true or false
    const match = await bcrypt.compare(userData.password,hashedPassword)
    if(match) // 인증 후 로직
}
```

---

참조 : https://github.com/kelektiv/node.bcrypt.js#readme


nestjs use bcrypt


## 공통 컴포넌트 제작의 필요성

> 하나의 사이트를 제작할때 비슷한 input이나 button을 사용해야 하는 상황이 자주 있는데, 공통된 컴포넌트를 만들어 놓으면 코드 중복을 줄이면서 상황에 맞춰 적절하게 사용할 수 있게 된다.

## 컴포넌트 제작

### Input

```typescript
import React from "react"; // element 속성을 가져오기 위해 import
import styled from "styled-components"; // CSS 적용

// 컴포넌트의 props 타입을 InputElement의 속성과 내가 설정하고자 하는 타입을 포함한다.
type Props = React.HTMLAttributes<HTMLInputElement> & InputProps;

interface InputProps {
  type?: string | undefined; // type?: 의 ?는 있어도 되고 없어도 된다는 의미
  name?: string | undefined;
  autoComplete?: string | undefined;
  width: string;
  height: string;
  border?: string | undefined;
}

// width와 height는 number로 지정해도 무관하나,
// 상황에 따라 뷰포트에 맞춰 쓸지, px에 맞춰 쓸지 달라질 수 있기 때문에 string으로 설정한 경우

export const MainInput = ({
  type,
  name,
  autoComplete,
  width,
  height,
  border,
  ...props
}: Props) => {
  return (
    <Main
      // input이 갖고 있는 속성을 사용할 수 있도록 도와준다. (placeholder, onChange 등 속성과 이벤트들)
      {...props}
      name={name}
      autoComplete={autoComplete || "on"}
      type={type || "text"}
      style={{
        width: `${width}`,
        height: `${height}`,
        border: `${border && border !== "" ? `1px solid ${border}` : ""}`,
      }}
    />
  );
};

const Main = styled.input`
  padding: 5px;
  border: none;
  border: 1px solid ${props => props.theme.inputBorderColor};
  border-radius: 5px;
  font-size: 1.2rem;
  &:hover {
    background: ${props => props.theme.inputBorderColor};
  }
  &:focus {
    outline: none;
    border-color: ${props => props.theme.hoverBorderColor};
    box-shadow: 0 0 1px ${props => props.theme.hoverBorderColor};
  }
`;
```

### TextArea

```typescript
type TaProps = React.HTMLAttributes<HTMLTextAreaElement> & TextAreaProps;
interface TextAreaProps {
  name?: string | undefined;
  width: string;
  height: string;
  border?: string | undefined;
}

export const MainTextArea = ({
  name,
  width,
  height,
  border,
  ...props
}: TaProps) => {
  return (
    <TextArea
      {...props}
      name={name}
      autoComplete="off"
      style={{
        width: `${width}`,
        height: `${height}`,
        border: `${border && border !== "" ? `1px solid ${border}` : ""}`,
      }}
    />
  );
};

const TextArea = styled.textarea`
  padding: 5px;
  border: none;
  border: 1px solid ${props => props.theme.inputBorderColor};
  border-radius: 5px;
  font-size: 1.2rem;
  resize: none;
  white-space: pre;
  &:hover {
    background: ${props => props.theme.inputBorderColor};
  }
  &:focus {
    outline: none;
    border-color: ${props => props.theme.hoverBorderColor};
    box-shadow: 0 0 1px ${props => props.theme.hoverBorderColor};
  }
`;
```

## Button

```typescript
type Props = React.HTMLAttributes<HTMLButtonElement> & ButtonProps;

interface ButtonProps {
  type?: "button" | "submit" | "reset" | undefined; // 버튼 타입은 이와 같이 설정해준다.
  content: string;
  width: string;
  height: string;
}

export const MainButton = ({
  type,
  content,
  width,
  height,
  ...props
}: Props) => {
  return (
    <Main
      {...props}
      type={type || "button"}
      style={{ width: `${width}`, height: `${height}` }}
    >
      {content}
    </Main>
  );
};

const Main = styled.button`
  border: none;
  border-radius: 5px;
  background: none;
  background-color: ${props => props.theme.mainButton};
  color: ${props => props.theme.mainFontColor};
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  &:hover {
    background-color: ${props => props.theme.mainButtonHover};
  }
`;
```


React 공통 컴포넌트 제작 (input, button)

react common components


## Form Event Type

우리는 로그인이나 포스팅 등의 화면을 만들어줄 때 클라이언트가 입력하는 데이터를 입력받는 방법 중 하나로 onChange 등의 FormEvent를 이용해 원하는 값을 추출할 수 있다. 이때 이벤트 타입은 아래와 같이 사용될 수 있다.

```typescript
import { FormEvent } from "react";

export type FormEvents = FormEvent<HTMLFormElement>;
export type InputEvent = FormEvent<HTMLInputElement>;
export type LabelEvent = FormEvent<HTMLLabelElement>;
```

react에서 FormEvent 타입을 받아오고, 해당되는 element를 제네릭 타입으로 넣어주면 된다.

## onChangeHandler

```typescript
const [formData, setFormData] = useState(formDataInit);
const formChangeHandler = (e: FormEvent<HTMLFormElement>) => {
  const target = e.target;
  const name = target.name;
  const value = target.value;
  setFormData(prev => ({ ...prev, [name]: value }));
};
```

원하는 데이터를 받을 수는 있지만, name과 value의 타입 에러가 발생한다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F80Q0s%2Fbtr9SOPHzuW%2F7t6EmYi1k5gMiyeurxmCP0%2Fimg.png)

target의 타입을 정해줘도 타입 에러가 발생하는 것을 볼 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbsb5ww%2Fbtr9N2aq2VJ%2FsFJkJduLoSt1bhyae9SFdK%2Fimg.png)

하지만 우리는 form의 input이 변할때마다 대상의 값을 받아오는 것을 알고 있다.

이때 필요한 것이 타입 단언(as)이다.

## 타입 단언 사용 예시

```typescript
const formChangeHandler = (e: FormEvents) => {
  const target = e.target as InputTarget; // InputTarget === HTMLInputElement
  const name = target.name;
  const value = target.value;
  setFormData(prev => ({ ...prev, [name]: value }));
};
```

### 주의사항

타입 단언을 사용하면 타입 체크를 할 수 없다. 사실상 강제로 타입을 지정하는 행위이기 때문에 타입 체커에게 해당 타입 에러를 무시하라는 명령이나 다름없다. as를 남발하거나 내려받는 데이터가 확실하지 않는 경우에는 오류 탐색에 지장이 있을 수 있으니, 로직에 따라 조건문 등을 사용해 타입 에러를 피해 주는 것이 좋을 수 있다.

```typescript
// ex)
const someFN = (someData) =>{
	const someMutation = someData..logic
    if(someMutation){
    	// ... nest logic
    }
}
```


React Form event type (feat. 타입 단언 as)

react type assertion


> 기본적으로 CSS에서 제공하는 폰트가 마음에 들지 않거나 내 프로젝트에 어울리지 않는 경우 간단하게 다운로드한 폰트를 프로젝트에 적용해볼 수 있다.

## 1. 폰트 다운로드

우선 마음에 드는 폰트를 다운받는다.

카페24무료폰트: https://fonts.cafe24.com/

무료 폰트 사이트는 찾아보면 사용할 수 있는게 많다.

## 2. 프로젝트에 파일 복사

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbHA9Qr%2Fbtr60vtCf7O%2FMaaAsK1Lg4t5QDXd3bC1Uk%2Fimg.png)

위와 같이 다운로드한 폰트를 작업중인 프로젝트에 넣어준다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FA7Inw%2Fbtr61haATVa%2F9mFQHIOUCbjYI7SnPm8wI0%2Fimg.png)

필자는 styles/fonts/\*\*.ttf 와 같이 저장해줬다.

## 3. CSS 설정

@font -face{}를 이용해 불러올 폰트를 설정해준다.

```css
/* global.css */

@font-face {
  font-family: maplestory;
  src: url("./fonts/Maplestory\ Light.ttf");
}
@font-face {
  font-family: maplestoryBold;
  src: url("./fonts/Maplestory\ Bold.ttf");
}
```

## 4. CSS 사용

평소에 폰트를 적용하는 것처럼 CSS를 적용해주면 된다.

```css
body {
  font-family: maplestory;
}
```


CSS - 배포 사이트에 다운로드 폰트 적용하기

css use download font


## 1. headers

\# 으로 시작하는 텍스트로 1-6개 가능 (h1 ~ h6)

```
# h1
## h2
### h3
#### h4
##### h5
###### h6
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FIOzmy%2Fbtr7d8qRKov%2FiXZSIKWKSOiAtliDzN63vK%2Fimg.png)

## 2. 구분선

"---"이나 "\*\*\*"를 통해 구분선 생성 가능

```
***
---
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbgcFby%2Fbtr7dx5ZjTh%2FlEqZkNRdg7rLooCPmMFZW0%2Fimg.png)

## 3. 줄바꿈

"<br>"

```
줄을<br>바꿈
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc8z1Q4%2Fbtr7fs3s9fI%2FhLPfWRYRfKMIC2tUvU8531%2Fimg.png)

## 4. 강조

기울여쓰기(italic) : \* 또는 \_로 감싼 텍스트.

두껍게 쓰기(bold) : \*\* 또는 \_\_로 감싼 텍스트.

취소선 : ~~로 감싼 텍스트

```
_기울여쓰기 1_
*기울여쓰기 2*
**두껍게 1**
__두껍게 2__
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbu2sXJ%2Fbtr7dNgeNxn%2FcCfQQ9PumZ7OzrH2KeXq5K%2Fimg.png)

## 5. 인용

\>로 시작하는 텍스트로 >>>와 같이 3개까지 사용 가능

```
> 인용문
> > 3개까지
> > > 사용 가능
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbGU0Me%2Fbtr7ghUUjee%2FqgoUnVkdOOkK7Kb5Gq1oPK%2Fimg.png)

## 6. 리스트

리스트는 Tab을 통해 목록 안의 목록 생성 가능

### 순서가 없는 목록

\*, +, -를 통해 순서가 없는 목록 생성 가능

```
- 순서가 없는 목록1
- 순서가 없는 목록1
- 순서가 없는 목록1

* 순서가 없는 목록2
  - 탭을 이용한 목록 안의 목록
    - 탭을 이용한 목록 안의 목록 안의 목록

1. 순서가 있는 목록1
2. 순서가 있는 목록1
3. 순서가 있는 목록1
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdQp7i8%2Fbtr7e1ygv06%2FvMIjB3OsI8Q5fAteCTJbF1%2Fimg.png)

### 순서가 있는 목록

숫자를 기입하면 순서가 있는 목록이 됨

들여쓰기를 하면 모양이 바뀜

숫자를 무엇을 쓰든 순서대로 알아서 숫자를 매김

리스트 안에 하위 리스트를 만들기 위해서는 tab과 함께 숫자 1번부터 나열하면 적용 가능

```
1. 순서가 있는 목록2
2. 순서가 있는 목록2
   1. 탭을 이용한 순서가 있는 목록 안의 목록
      1. 탭을 이용한 순서가 있는 목록 안의 목록 안의 목록
   2. 탭을 이용한 순서가 있는 목록 안의 목록
5. 순서가 있는 목록2
```

혼합 리스트도 적용 가능

```
1. 순서가 있는 목록2
2. 순서가 있는 목록2
   1. 탭을 이용한 순서가 있는 목록 안의 목록
      * 탭을 이용한 순서가 있는 목록 안의 목록 안의 순서가 없는 목록
   2. 탭을 이용한 순서가 있는 목록 안의 목록
5. 순서가 있는 목록2
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlhYHi%2Fbtr7dPd52Gh%2FY87O8eblzYL1LiuEiIdMik%2Fimg.png)

## 7. 이미지

링크와 비슷하나 앞에 느낌표가 붙음

인라인 이미지 : ![텍스트](이미지파일 경로)

![image]("./../../../../public/images/cards/GITHUB.png)

링크 이미지 : ![텍스트] (이미지파일URL)

![image](https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F5148697%2Fattach%2Fc60c2213f3984f0b9da48413e3fa277e)

이미지 파일에 마우스를 올렸을 때 커서 앞에 나오는 텍스트 설정

![텍스트] (이미지경로/URL "이미지이름")

![image](https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F5148697%2Fattach%2Fc60c2213f3984f0b9da48413e3fa277e "이미지지롱")

링크와 이미지를 합친 문법 (이미지를 링크로 사용)

[![텍스트] (이미지URL)] (링크URL)

[![image](https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F5148697%2Fattach%2Fc60c2213f3984f0b9da48413e3fa277e)](https://lee-yo-han.github.io/github-token-expired)

## 8. Link (Anchor)

글자로 된 하이퍼링크

```
[구글] (링크)
```

[구글](https://www.google.com/)

내부(해시) 링크

[보여지는 내용] (#이동할 헤드(제목))

괄호 안 링크의 띄어쓰기는 -로 연결, 영어는 모두 소문자로 작성

```
[어디로든문](#1-headers)
```

[어디로든문](#1-headers)

## 9. 코드 블럭

백틱(`) 3개씩으로 감싸서 사용

```
'''javascript
some code ...
'''
```

## 10. 테이블

헤더와 셀 구분 시 3개 이상의 하이픈(-) 필요
헤더 셀을 구분하면서 콜론(:)으로 정렬 가능
가장 좌측과 가장 우측에 있는 vertical bar( | ) 기호 생략 가능

```
| 헤더1 | 헤더2    |   헤더3    |    헤더4 |
| ----- | :------- | :--------: | -------: |
| 셀1   | 셀2      |    셀3     |      셀4 |
| 기본  | 좌로정렬 | 가운데정렬 | 우로정렬 |
| 셀9   | 셀10     |    셀11    |     셀12 |
```

| 헤더1 | 헤더2    |   헤더3    |    헤더4 |
| ----- | :------- | :--------: | -------: |
| 셀1   | 셀2      |    셀3     |      셀4 |
| 기본  | 좌로정렬 | 가운데정렬 | 우로정렬 |
| 셀9   | 셀10     |    셀11    |     셀12 |

---

참조 https://inpa.tistory.com/entry/MarkDown-%F0%9F%93%9A-%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4-%EB%AC%B8%EB%B2%95-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC


github markdown syntex


### **본 포스팅은 NextJS 13 환경에서 진행한 내용을 바탕으로 한다. GithubAPI 사용법은 공식 문서에 상세히 나와있기 때문에 사용법보다 토큰 만료 문제를 주로 다룬다.**

## GithubAPI란?

> Github의 기능을 REST API 형식으로 사용할 수 있도록 도와주는 기능이다.

**[GithubAPI docs](https://docs.github.com/en/rest?apiVersion=2022-11-28)**

아래와 같이 사용할 수 있는 기능이 많다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F6rpoI%2Fbtr65pd5Q0W%2F7NUKUqiXklINKYLwJWPow1%2Fimg.png)

## 1. 토큰 발급

간단한 조회 정도는 토큰이 필요하지 않지만, 요청의 종류에 따라 토큰이 필요한 경우가 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbS8fhz%2Fbtr60iAL28F%2FxJ66qxT7PKF4U6JjLkCA91%2Fimg.png)

우선 우측 상단의 Settings로 들어가서

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdU186G%2Fbtr61k5X0vE%2FdrgRV6uJMfho9JCIhoUghk%2Fimg.png)

Settings의 좌측 하단 Developer settings에 들어간다.

그 안에 Pat(personal access tokens)를 발급받을 수 있는 창을 볼 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FE3TPa%2Fbtr60DxUYrw%2FtWMeaxCI78Cyx9838COCVK%2Fimg.png)

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FnE2jt%2Fbtr60gbWaov%2FQ897sC2Gk2RxKlsBVZ5jLK%2Fimg.png)

Generate new token을 통해 원하는 종류의 토큰을 받을 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FHPjvr%2Fbtr61gW4V3n%2Fvqk7jPvdQAcdlAfXomGiQ0%2Fimg.png)

토큰명, 유효기간, access할 repo를 설정하고

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbX6MQh%2Fbtr61lcFYwt%2F1fkFl327Q0I91UIwAgfCfK%2Fimg.png)

원하는 기능에 대한 권한을 설정해준다.

이번엔 간단하게 issue에 대한 작업만 진행해본다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FVESxa%2Fbtr63YA3qrw%2FCedCRRISe4SG6PLHK4H0dK%2Fimg.png)

생성된 토큰은 잘 복사해 안전한 공간에 저장해준다.

## 2. Token 사용

기본적인 사용법은 아래와 같다.

https://docs.github.com/en/rest/guides/getting-started-with-the-rest-api?apiVersion=2022-11-28

```typescript
// issues 등록하기
import { Octokit } from "octokit";

const octokit = new Octokit({
  auth: `api token`,
});

const issueUpdate = async (name: string, feed: string) => {
  await octokit.request(
    "POST /repos/{owner}/{repository name}/issues/1/comments",
    {
      owner: "user name",
      repo: "repository name",
      title: `title`,
      body: `body`,
      // headers: {
      //   "X-GitHub-Api-Version": "2022-11-28",
      // },
    },
  );
};
```

위 요청을 실행하면 정상적으로 issue 등록이 되는 것을 볼 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbjcLkP%2Fbtr65o7kXPZ%2Fh739Lzn25eBdRhDzcPPU8K%2Fimg.png)

## 유의할 점

### 1. headers 설정

우선 headers를 주석처리한 이유는 공식 문서에서는 github API version을 headers에 담으라고 돼있지만, 버전과 함께 요청을 실행하면 cors에러가 발생하는 것을 볼 수 있다.

**[Github CORS ISSUE](https://github.com/orgs/community/discussions/40619)**

headers는 별도로 추가하지 말고 auth만 설정해준 후 사용해 주도록 한다.

### 2. auth Token 설정

API key와 같은 토큰은 대부분 .env를 통해 변수를 설정해 사용해줘야 한다.

하지만 .env에 토큰을 설정하고 commit을 하게되면 gitignore를 설정해줘도 github가 자동으로 감지해 토큰을 만료시키기 때문에 .env.local서 테스트하고 .env의 토큰은 지운 뒤에 사용해주자.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FuJQsS%2Fbtr62Xh6jLO%2FHkR7hA4k0cMffBKY55DHu1%2Fimg.png)

---

참조 : https://docs.github.com/en


Github Token을 이용한 GithubAPI 사용

github token expired


# **부드러운 스크롤 이동 적용 방법**

> behavior:"smooth" 속성을 scroll 이벤트와 scroll 메서드와 같이 사용하며 부드러운 스크롤 이동을 적용해볼 수 있다.

본 보스팅은 Nextjs 13 환경에서 작성되었다.

## **scroll() 메서드**

### **scroll() , scrollTo()**

scroll(x,y) || scroll(options), scrollTo(x,y) || scrollTo(options) 와 같이 사용할 수 있다.

사실상 두 메서드는 동일하게 작동한다.

xy 좌표를 통해서도 사용 가능하며 options를 적용한다면 아래와 같이 사용할 수 있다.

```javascript
window.scroll({
  top: 0,
  left: 0,
  behavior: "smooth", // smooth: 부드럽게 전환 , auto: 즉시 이동
});

window.scrollTo({
  top: 0,
  left: 0,
  behavior: "smooth", // smooth: 부드럽게 전환 , auto: 즉시 이동
});
```

### **scrollBy()**

**scrollBy(x,y) || scrollBy(options)**

scroll()과 scrollTo()가 특정 좌표로 이동한다면, scrollBy는 길이만큼 스크롤을 이동시킨다.

옵션과 예제는 아래와 같다.

```javascript
// 기본 사용
window.scrollBy(x, y);

// 한 페이지 아래
window.scrollBy(0, window.innerHeight);

// 한 페이지 위
window.scrollBy(0, -window.innerHeight);

// 옵션
window.scrollBy({
  top: 0,
  left: 0,
  behavior: "smooth", // smooth: 부드럽게 전환 , auto: 즉시 이동
});
```

scroll 메서드가 적용된 화면과 예제코드

![image](https://blog.kakaocdn.net/dn/bV3l2O/btr5OcgXBcx/ickRekJIOy3VMmRLtzt2pK/img.gif)

```javascript
// 최상단으로 이동
const moveScroll = () => {
  scroll({ top: 0, behavior: "smooth" });
};

// 한 페이지 위로 이동
const moveScrollByUp = () => {
  scrollBy({ top: -window.innerHeight, behavior: "smooth" });
};

// 한 페이지 아래로 이동
const moveScrollByDown = () => {
  scrollBy({ top: window.innerHeight, behavior: "smooth" });
};

// top 500 위치로 이동
const moveScrollTo = () => {
  scrollTo({
    top: 500,
    behavior: "smooth",
  });
};

// jsx
<Container>
  <NavBtn>
    <button onClick={moveScroll}>Scroll최상단</button>
    <button onClick={moveScrollByUp}>moveScrollByUp</button>
    <button onClick={moveScrollByDown}>moveScrollByDown</button>
    <button onClick={moveScrollTo}>moveScrollTo</button>
  </NavBtn>
  <TestContainer1 id="box1" />
  <TestContainer2 id="box2" />
  <TestContainer3 id="box3" />
  <TestContainer4 id="box4" />
  <TestContainer5 id="box5" />
  <TestContainer6 id="box6" />
</Container>;
```

## **Chrome 브라우저에서 behavior:"smooth" 속성이 적용되지 않을 때**

아래와 같이 크롬 버전은 최신이지만, smooth 속성이 적용되지 않는 현상이 나타났다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fx3Fal%2Fbtr5ORwXdp3%2FAHsT7DB2D5i76OjhYqcN9k%2Fimg.png)

![image](https://blog.kakaocdn.net/dn/bourLn/btr5NyrsLbU/nkulo83V1NSn2kEMQb2xYK/img.gif)

호환성에도 문제가 없지만 MDN의 예제를 실행해 봐도 크롬에선 smooth 속성이 사용되지 않았다.

MDN 스크롤 예제 : https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FmJ1Dl%2Fbtr5Nv2OZvD%2Fmk5c6Hks8ai7J4UKhL6wR1%2Fimg.png)

크롬 브라우저 설정을 따로 해주면 해결된다고는 하지만, 내 PC에서만 작동하는 건 근본적인 해결방법이 아니기 때문에 배제했다.

참조 : http://www.devdic.com/css/refer/properties/property:1195/scroll-behavior

### **smoothscroll-polyfill - 적용 실패**

사용법 : https://www.npmjs.com/package/smoothscroll-polyfill?activeTab=readme

```typescript
// 패키지 설치
// yarn add smoothscroll-polyfill

// 최상단 파일

import smoothscroll from "smoothscroll-polyfill";

if (typeof window !== "undefined") {
  smoothscroll.polyfill();
}
```

브라우저 호환성 적용을 위한 패키지라고 하는데, 본인에겐 효과가 없었다.

## **scroll 이벤트를 통한 스크롤 이동 적용**

스크롤만 이용해서 기능을 적용할 생각이었기에 직접 만들기로 했다.

addEventListener를 통해 스크롤 이벤트를 감지해 주는 hook을 만들어줬다.

```typescript
// 스크롤 위 아래 여부 확인
import { useState, useEffect, useRef } from "react";

interface MutableRefObject<T> {
  current: T;
}

export const useScroll = () => {
  const [scrollCheck, setScrollCheck] = useState("");
  const prevScrollPos: MutableRefObject<number> = useRef(0);

  useEffect(() => {
    const handleScroll = () => {
      const currentScrollPos = window.pageYOffset; // window객체의 pageYOffset 를 통해 현재 스크롤 위치 저장
      if (currentScrollPos > prevScrollPos.current) {
        // 스크롤 위치에 따른 스크롤 진행 방향 검증
        setScrollCheck("DOWN");
      } else {
        setScrollCheck("UP");
      }
      prevScrollPos.current = currentScrollPos; // 사용된 현재 스크롤 위치를 다음 이벤트 비교대상으로 저장
    };

    window.addEventListener("scroll", handleScroll); // event 등록
    return () => {
      window.removeEventListener("scroll", handleScroll); // event clear
    };
  }, [prevScrollPos]);
  return {
    scrollCheck, // up/down 여부 return
  };
};

// hook 사용 컴포넌트
import { useScroll } from "@/hooks/useScroll";
const { scrollCheck } = useScroll();
useEffect(() => {
  if (scrollCheck === "UP") {
    console.log("scroll UP");
  }
  if (scrollCheck === "DOWN") {
    console.log("scroll DOWN");
  }
}, [scrollCheck]);
```

원하는 값이 잘 나오는 것을 볼 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FF7CNJ%2Fbtr5QzP3p9N%2FErlbv8julxnc1PKZSGRC71%2Fimg.png)

> 스크롤 이벤트 특성상 한 번 휠을 돌릴 때마다 많은 호출이 일어나기 때문에 필요한 경우에만 사용될 수 있도록 setTimeout 등을 통해 적용하고자 하는 코드에 맞게 함수 실행을 조절해줘야 한다.

```typescript
import { useState, useEffect, useRef } from "react";
import { scrollToSmoothly } from "@/components/profile/SmoothScroll";
import { useScroll } from "@/hooks/useScroll";
const { scrollCheck } = useScroll();
const scrollRef = useRef({
  // window.innerHeight 값 저장
  height: 0,
});

const smoothScrollHandler = () => {
  let maxHeight = window.innerHeight * 6; // 최대 스크롤 길이
  let currentHeight = scrollRef.current.height; // 현재 스크롤 저장
  if (scrollCheck === "UP" && currentHeight !== 0) {
    // scroll up이고 맨 위가 아닐 때
    scrollRef.current.height -= window.innerHeight; // useRef에 이동할 height 조정
    scrollToSmoothly(scrollRef.current.height, 500); // 이동할 height까지 500ms동안 이동시킬 함수 (requestAnimationFrame 사용)
  } else if (scrollCheck === "DOWN" && currentHeight !== maxHeight) {
    // scroll이 down이고 맨 아래가 아닐 때
    scrollRef.current.height += window.innerHeight; // 상기 동일
    scrollToSmoothly(scrollRef.current.height, 500);
  }
};

useEffect(() => {
  smoothScrollHandler();
}, [scrollCheck]); // useScroll()을 통해 구분한 UP/Down이 변경될 때마다 실행
```

위의 함수를 실행하면 아래와 같이 그나마 정상 작동하는 모습을 볼 수 있다.

![image](https://blog.kakaocdn.net/dn/cpwxY9/btr5NJNGHOP/34qTHrvGprHknp2jmkpkpK/img.gif)

## **a 태그를 통한 스크롤 이동**

a 태그의 href 속성을 이용해 간단하게 스크롤을 이동시키는 방법도 있다.

```javascript
<ProfileContainer>
  <NavBtn>
    <Link href="#box1">1번박스로 이동</Link> // nextjs에서 Link는 a태그의 역할을
    한다.
    <Link href="#box2">2번박스로 이동</Link> // href에 스크롤을 이동시킬 'ID'를 입력하고
    클릭하면
    <Link href="#box3">3번박스로 이동</Link> // 해당 ID요소로 스크롤을
    이동시킨다.
    <Link href="#box4">4번박스로 이동</Link>
    <Link href="#box5">5번박스로 이동</Link>
    <Link href="#box6">6번박스로 이동</Link>
  </NavBtn>
  <TestContainer1 id="box1" />
  <TestContainer2 id="box2" />
  <TestContainer3 id="box3" />
  <TestContainer4 id="box4" />
  <TestContainer5 id="box5" />
  <TestContainer6 id="box6" />
</ProfileContainer>
```

---

**참조**

**scroll 메서드**

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

**requestAnimationFrame**

https://developer.mozilla.org/ko/docs/Web/API/window/requestAnimationFrame

https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp


React/Javascript 부드러운 스크롤 이동 적용

react smooth scroll


# **React state와 LifeCycle**

> 함수형 컴포넌트와 class형 컴포넌트의 LifeCycle이 어떻게 되는지 간단하게 비교해 보는 글이다.

## 클래스형 컴포넌트와 생명주기 메서드

### 1. Mount(컴포넌트가 처음 실행될 때)

- state, context, defalutProps 저장
- componentWillMount - 안전하지 않은 접근
- render
- componentDidMount - DOM 접근 가능

### 2. Props Update(프롭스가 업데이트될때)

- componentWillReceiveProps - 사용 종료
- shouldComponentUpdate
- componentWillUpdate - 사용 종료
- render
- componentDidUpdate - DOM 접근 가능

### 3. State Update (스테이트가 업데이트됐을 때)

- shouldComponentUpdate
- componentWillUpdate - 사용 종료
- render
- componentDidUpdate - DOM 접근 가능

**사실상 componentWillReceiveProps와 componentWillUpdate의 사용 종료로 state와 props가 업데이트될 때 동일하게 작동한다.**

### 4. Unmount (컴포넌트가 제거되는 것)

- componentWillUnmount

사용 종료의 기준은 아래와 같다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb0qQTJ%2Fbtr5h96VtyB%2FqLpFZAk7aybC21CEWPD9H1%2Fimg.png)

## 함수형 컴포넌트와 useEffect 훅

### 컴포넌트의 실행

- 함수형 컴포넌트 호출

- 함수형 컴포넌트의 내부에서 실행

- return()으로 화면에 렌더링

- 생명주기 메서드 대신 useEffect를 통한 비슷한 처리 가능

### dependency에 따른 useEffect의 실행

- deps 값이 없는 경우 : 화면이 렌더링 된 이후 수행이 되며, 리렌더링이 발생할 때마다 다시 실행

- deps 값이 빈 배열인 경우 : 첫 렌더링 완료 후 1회만 실행

- deps 값이 존재하는 경우 : 첫 렌더링 완료 후 1회 실행 && deps 값이 변경되었을 경우마다 실행

```javascript
// dep X
useEffect(() => {
  // effect
  return () => {
    // cleanup
  };
});

// dep []
useEffect(() => {
  return () => {};
}, []);

// dep [some dep...]
useEffect(() => {
  return () => {};
}, [dep]);
```

**[Mounting]** useEffect() - 컴포넌트 렌더링 이후 실행

- dep 설정에 따라 실행됨

**[Updating]** useEffect() - 컴포넌트 내에서 변화가 발생했을 경우 실행

- 부모 컴포넌트의 리렌더링, 부모로부터의 props값 변화, 해당 컴포넌트 내에서 state 변경 등

**[Unmounting]** useEffect() - 컴포넌트 내에서 DOM을 제거할 때 실행되는 메서드

- 컴포넌트의 DOM이 제거될 때 수행되며 useEffect 내부의 return 값이 사용됨

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbryvuq%2Fbtr5pFcEsKC%2FIUUp45qfkl3kWGMGsXLoF0%2Fimg.png)

**위와 같이 컴포넌트를 여닫는 페이지가 있다고 가정했을 때, console을 통해 대략적인 흐름을 확인해 볼 수 있다.**

### **Class형 컴포넌트**

**컴포넌트가 처음 실행될 때**

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FOvMHN%2Fbtr5nGi34Pf%2Fr7cGOBhis0thuYoKgE5Y81%2Fimg.png)

**state가 변경될 때 (props가 변경될 때와 동일)**

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FD45Ra%2Fbtr5gtxPbHC%2FBcyreT9Rmknfdukr6PuUMK%2Fimg.png)

**컴포넌트가 제거될 때**

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F6mDAw%2Fbtr5qsKSrcJ%2FSzo6Rjkm0liLDy3wCZZ27k%2Fimg.png)

### **함수형 컴포넌트**

**컴포넌트가 처음 실행될 때**

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F3fXKy%2Fbtr5paDZhii%2FxGLf5vByXzPMT1jphHzBkK%2Fimg.png)

**컴포넌트가 업데이트될 때**

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F7vKwD%2Fbtr5paYhomj%2F5iPCpcpuRTIKbpr0dFNNO1%2Fimg.png)

> 콘솔에 출력된 것과 같이, useEffect의 return 이후 부분은 componentWillUnmount와 비슷하지만, 컴포넌트가 다시 렌더링 되기 전마다 다시 실행된다.

**컴포넌트가 제거될 때**

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb5feUj%2Fbtr5sdzGrHx%2F1FTXMaZBnR6FmKQmslJRK1%2Fimg.png)

컴포넌트가 제거될 때는 componentWillUnmount처럼 useEffect의 return 부분이 실행되는 것을 볼 수 있다.

사용된 코드

```javascript
// Lifecycle.jsx

import { useState } from "react";
import { FunctionComponent } from "./FunctionComponent";
import { ClassComponent } from "./ClassComponent";

export const Lifecycle = () => {
  const [fnOpen, setFnOpen] = useState(false);
  const [classOpen, setClassOpen] = useState(false);
  const effectComponentHandler = num => {
    if (num) {
      setFnOpen(!fnOpen);
    } else {
      setClassOpen(!classOpen);
    }
  };

  return (
    <div>
      <p>Fn component / Class component</p>
      <button onClick={() => effectComponentHandler(1)}>함수 open/close</button>
      <button onClick={() => effectComponentHandler("")}>
        클래스 open/close
      </button>
      {fnOpen ? <FunctionComponent some1={1} some2={2} some3={3} /> : null}
      {classOpen ? <ClassComponent some1={1} some2={2} some3={3} /> : null}
    </div>
  );
};
```

```javascript
// FunctionComponent.jsx

import { useState, useEffect } from "react";

export const FunctionComponent = props => {
  console.log("컴포넌트 렌더링", props);
  const [count, setCount] = useState(0);
  useEffect(() => {
    // effect
    if (count === 0) {
      console.log(`useEffect 첫 등장`);
    } else {
      console.log(`useEffect 다시 등장 count: ${count}`);
    }
    return () => {
      // cleanup
      console.log(
        "useEffect 퇴장 --- componentWillUnmount와 비슷하지만 리렌더링마다 사용됨",
      );
    };
  }, [count]);

  const plus = () => {
    setCount(prev => prev + 1);
  };
  const minus = () => {
    setCount(prev => prev - 1);
  };

  return (
    <div>
      <p>함수형 컴포넌트</p>
      <span>{count}</span>
      <button onClick={plus}>+</button>
      <button onClick={minus}>-</button>
      <p>Props 받기</p>
      <div>props1 = {props.some1}</div>
      <div>props2 = {props.some2}</div>
      <div>props3 = {props.some3}</div>
    </div>
  );
};
```

```javascript
// ClassComponent.jsx

import { Component } from "react";

export class ClassComponent extends Component {
  constructor(props) {
    super(props);
    // Class형 컴포넌트의 state는 무조건 객체 형태여야 한다.
    this.state = {
      counter: 0,
    };
    console.log(
      "Mount - 컴포넌트가 처음 실행될 때 state, context, defalutProps 저장",
      props,
    );
  }
  plus = () => {
    this.setState(state => ({ counter: state.counter + 1 }));
  };
  minus = () => {
    this.setState(state => ({ counter: state.counter - 1 }));
  };

  componentWillMount() {
    console.log("componentWillMount");
  }
  componentDidMount() {
    console.log("componentDidMount - DOM 접근 가능");
  }
  componentDidUpdate() {
    console.log("componentDidUpdate");
  }
  shouldComponentUpdate() {
    console.log("shouldComponentUpdate - state or props 업데이트");
    return true;
  }
  componentWillUnmount() {
    console.log("componentWillUnmount");
  }

  render() {
    return (
      <div>
        <p>Class형 컴포넌트</p>
        <span>{this.state.counter}</span>
        <button onClick={this.plus}>+</button>
        <button onClick={this.minus}>-</button>
        <p>Props 받기</p>
        <div>props1 = {this.props.some1}</div>
        <div>props2 = {this.props.some2}</div>
        <div>props3 = {this.props.some3}</div>
      </div>
    );
  }
}
```

---

참조

https://ko.reactjs.org/docs/state-and-lifecycle.html

https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html


React 함수형 컴포넌트와 Class형 컴포넌트 생명주기

react component lifecycle


# Dynamic import란?

> import() 표현식으로 사용하며, 표현식은 모듈을 읽고 해당 모듈이 내보내는 것들을 모두 포함하는 객체를 담은 이행된 Promise를 반환한다. 호출은 어디서나 가능하다.

# Dynamic import를 사용하는 이유

- 기존 import문은 정적인 방식으로, 정적으로 가져오는 경우 코드 로드 속도가 느려지고, 가져오는 코드가 필요할 가능성이 적거나 없을 수 있다.
- 정적으로 가져올 때 프로그램의 메모리 사용량이 크게 증가하고 가져오는 코드가 필요할 가능성이 낮다.
- import문에 동적 매개변수를 사용할 수 없다.

> 즉, 동적으로 import하는 것은 성능 향상과 필요한 경우에 맞춰 사용하는 것에 용이하다.

## 사용법

필요한 함수들을 정의하고, 필요한 곳에서 import하여 원하는 방식대로 적용해준다.

예시 코드

```javascript
// someFn.js

export const greeting = () => {
  console.log("어서오시고");
};

export const importMe = () => {
  console.log("다이나믹 임포트를 해주세요");
};

export const easy = () => {
  console.log("쉽죠?");
};

export const add = (a, b) => console.log(a + b);
```

```javascript
// use import()
export const DynamicImport = () => {
  // async / await 방식
  const loadGreeting = async () => {
    const DI = await import("./someFn.js");
    DI.greeting();
  };
  const loadImportMe = async () => {
    const DI = await import("./someFn.js");

    DI.importMe();
  };
  const loadEasy = async () => {
    const DI = await import("./someFn.js");
    DI.easy();
  };

  const loadAddAwait = async (a, b) => {
    const DI = await import("./someFn.js");
    return DI.add(a, b);
  };
  // 기본 방식
  const loadAdd = (a, b) => {
    const DI = import("./someFn.js")
      .then(module => {
        module.add(a, b);
      })
      .catch(err => err);
    return DI;
  };

  return (
    <div>
      <p>DynamicImport component</p>
      <button onClick={loadGreeting}>loadGreeting</button>
      <button onClick={loadImportMe}>loadImportMe</button>
      <button onClick={loadEasy}>loadEasy</button>
      <button onClick={() => loadAdd(1, 2)}>loadAdd</button>
      <button onClick={() => loadAddAwait(5, 5)}>loadAddAwait</button>
    </div>
  );
};
```

## Promise를 반환하기 때문에 async/await을 통한 사용도 가능하다.

위 코드를 통해 생성한 버튼들을 모두 한 번씩 클릭해주면 아래와 같이 사용되는 것을 볼 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FyOVoT%2Fbtr4v801voG%2FmX38iUM5zpLCGKZ5nkyWYK%2Fimg.png)

> 참고사항 : Dynamic import는 일반 스크립트에서도 동작하기 때문에 script type="module"이 없어도 된다.

### 주의사항 : import()는 함수 호출과 문법이 유사해 보이지만 함수 호출이 아니다. super()처럼 괄호를 사용하는 특별한 문법 중 하나이다. 따라서 import를 변수에 복사하거나 call/apply 등의 사용은 불가능하다.

---

참조

MDN : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import

Modern js : https://ko.javascript.info/modules-dynamic-imports


Dynamic import를 사용해 동적으로 모듈 가져오기

javascript dynamic import


# jest란?

> 단순성에 중점을 둔 javascript 테스트 프레임워크로, babel, Typescript, node, React, Angular, Vue 등을 사용하는 프로젝트에서 작동한다.

본 포스팅은 React 환경을 기준으로 작성되었다.

## 1. jest 설치

```bash
npm install --save-dev jest @babel/preset-env
# or
yarn add --dev jest @babel/preset-env
```

node.js 환경에서 import 등의 ES6 문법을 사용하기 위해 @babel/preset-env도 함께 설치해준다.

## 2. 루트 경로에 babel.config.js 파일 생성

```javascript
module.exports = {
  presets: [
    "@babel/preset-env",
    // typescript를 사용하는 경우 yarn add --dev @babel/preset-typescript 설치 후
    // 아래와 같이 preset을 추가해준다.
    // "@babel/preset-typescript"
  ],
};
```

babel config 파일까지 생성이 완료됐다면 test 파일을 사용할 준비가 다 된 것이다.

## 3. jest가 인식하는 test file 이름

- {filename}.test.js
- {filename}.spec.js

## 4. 테스트 실행

jest 커맨드만으로도 테스트 코드를 진행할 수 있지만, 다른 플래그와 함께 사용할 수 있다.

```bash
--coverage # 프로젝트의 테스트 커버리지를 함께 나타내준다.
--watch # 대상 코드나 테스트 코드에 변경이 생기면 테스트를 다시 실행한다.

# ex) yarn jest --watch --coverage
```

jest만 실행한 터미널

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbmEHBz%2Fbtr4t9fB6IJ%2Fl1JqzgbkjoBxDREUdoSgzK%2Fimg.png)

--coverage와 함께 실행한 터미널

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FPTj6f%2Fbtr4vjvmeEt%2Ft5NIYNk6kzRJ4PQ1IQA48k%2Fimg.png)

> 참고 : jest는 테스트 코드 내에서 오류가 발생할 때만 테스트를 fail시키기 때문에 test("",()=>{})와 같이 테스트 코드가 비어있더라도 테스트를 통과할 수 있다.

## 5. 테스트 코드 패턴

### AAA 패턴 (Arrange - Act - Assert)

- A 조건에서 B를 실행했을때 예상한 결과가 C가 나오는가? 라는 흐름의 패턴이다.

예제

```javascript
// 기존 함수
export const add = (a, b) => {
  return a + b;
};

// somefn.spec.js - 테스트코드 함수

import { add } from "./someFn";

test("add 함수 테스트: result = a+b", () => {
  // 조건
  const a = 2;
  const b = 3;
  const result = 5;

  // 실행
  const actResult = add(a, b);

  // 평가
  expect(actResult).toBe(result);
});
```

평가 부분의 코드는 .toBe()라는 matcher 함수를 통해 actResult를 실행했을 때 result가 나올 것이라는 기대를 갖고 코드를 평가하게 된다.

아래와 같이 여러 함수를 한 테스트 코드 안에 넣을 수도 있지만, 리팩토링 시 불편한 경험을 할 수 있기 때문에 상황에 맞게 사용해주는 것이 좋을 것 같다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FckHjWD%2Fbtr4t5Eptqn%2FccX4fWxWW6GZ9edDMtjdAK%2Fimg.png)

주요 matcher 함수

- toBe() : 원시형 데이터 비교
- toEqual() : 참조형 데이터를 깊은 비교를 통해 비교
- toBeTruthy() : 값이 참인지 검사
- toContain() : 특정 요소가 배열 안에 존재하는지 검사
- not : 다른 matcher 함수 앞에 체이닝해 사용하며, 해당 값의 반대값이 참인지 검사 (not은 함수가 아닌 property)

공식 문서에서 더 자세하게 확인해볼 수 있다. (https://jestjs.io/docs/using-matchers)

## 6. 테스트 코드를 통해 할 수 있는 것

- 내가 작성한 함수들이 내가 원하는대로 작동하는지 확인할 수 있다.
- 테스트 코드 작성을 통해 TDD 방식의 개발 방법론을 적용할 수 있다.

## TDD란?

> TDD는 테스트 주도 개발(Test Driven Development)을 뜻하며, 테스트 케이스를 우선적으로 설계해 개발을 진행하는 방법론이다.

### 1. 테스트 케이스를 우선적으로 설계하고,

### 2. 함수를 테스트 케이스에 맞춰 제작하며,

### 3. 로직을 개선하며 1~3을 반복한다.

즉, 실패-성공-리팩토링의 반복으로 볼 수 있다.

TDD의 예시

https://velog.io/@velopert/TDD%EC%9D%98-%EC%86%8C%EA%B0%9C

---

참조 : https://jestjs.io/


javascript jest test code


# Link / useRouter 사용법

```javascript
// Link
import Link from "next/link";

export const compo1 = () => {
  return (
    <Link href="url">
      <div>some element</div>
    </Link>
  );
};

// useRouter
import { useRouter } from "next/router";

export const compo2 = () => {
  const router = useRouter();

  const routeHandler = () => {
    router.push(url);
  };

  return (
    <div onClick={routeHandler}>
      <span>some element</span>
    </div>
  );
};
```

### Nextjs에서 페이지를 전환하기 위해 사용하는 방법으로, Link를 이용하거나 useRouter를 이용해 router.push()와 같이 사용하여 전환해줄 수 있는데, 비슷해 보이는 두 가지 방법의 차이를 간단히 정리해본다.

## Link의 특징

- Link는 Client-side navigation으로, javascript로 페이지 전환이 이뤄진다.
- 기본 navigation보다 빠르며 SPA(Single Page Application)의 특성을 유지한다.

## useRouter의 특징

- react-router-dom의 history.push()와 유사하다.
- 크롤러가 링크를 감지하지 못해 SEO가 좋지 않을 수 있다.
- 외부 URL을 사용할 경우 window.location 혹은 a 태그를 사용해야 한다.

또한 Link는 클릭 시 바로 페이지가 전환되지만, useRouter는 로직을 처리한 후 원하는 시점에 전환이 가능하다.

## 결론

> router.push()는 onClick에 사용되는 행동(action)이기 때문에 Link 태그보다 검색에 불리하지만, 로직의 처리에 따라 활용도가 높다.

> Nextjs의 장점인 SEO(Search Engine Optimization - 검색 엔진 최적화)를 원한다면 Link를 사용하는 것이 더 유리하다.

---

참조

https://stackoverflow.com/questions/65086108/next-js-link-vs-router-push-vs-a-tag

https://nextjs.org/docs/api-reference/next/link

https://nextjs.org/docs/api-reference/next/router


nextjs link userouter


# 에러 해결 방법

나의 경우 SSR 데이터를 contextAPI를 통해 패치하려 했으나, 정상적으로 받아오지 못할때 발생한 오류였다.

로컬 실행 종료 후 재실행하니 정상적으로 데이터를 받아올 수 있었다.

다소 허탈한 해결방안이었지만, SSR을 다루는 페이지의 데이터가 정상적으로 받아와지지 않는 경우, 코드 작성 후 프로그램을 다시 실행해보자.

---

참조 : https://github.com/vercel/next.js/issues/18090


WEBPACK_IMPORTED_MODULE_7_default is not a function 에러 해결

nextjs marked webpack imported module 7 default


> 유저에게 UI를 빠르게 제공하기 위해서는 컴포넌트의 렌더링을 최소화해 성능을 향상시킬 필요가 있다. 이를 위해 React.memo()에 대한 간단한 사용법을 기록해본다.

# 1. React.memo()

컴포넌트가 React.memo()로 래핑될 때, React는 컴포넌트를 렌더링하고 결과를 Memoizing한다.

그리고 다음 렌더링이 일어날 때 props가 값다면, React는 Memoizing된 내용을 재사용한다.

## 사용법

```javascript
import React from "react";

export const MemoTest = ({ someProps }) => {
  console.log("Memo test, props 바뀔때만 콘솔 작동");
  return (
    <div style={{ border: "1px solid black" }}>
      <p>MemoTest 컴포넌트</p>
      <p>props가 바뀔때만 렌더링</p>
      <span>count와 연동된 props: {someProps}</span>
    </div>
  );
};

// 다른 컴포넌트에서 불러올 때, 해당 컴포넌트를 import 해주면 된다.
export const MemoTestComponent = React.memo(MemoTest);
```

## 사용 예시

```javascript
export const TestApp = () => {
  const values = useContextValue();
  const update = useContextUpdate();
  const [count, setCount] = useState(0);
  console.log("최상위 컴포넌트 : 렌더링 될때마다 콘솔 작동");

  const contextHandler = () => {
    values === "someData" ? update("dataSome") : update("someData");
  };

  return (
    <div style={{ border: "1px solid black" }}>
      <NormalComponent />
      <MemoTestComponent someProps={count} />
      <button
        onClick={() => {
          setCount(pre => pre + 1);
        }}
      >
        +count버튼
      </button>
      <button
        onClick={() => {
          setCount(pre => pre - 1);
        }}
      >
        -count버튼
      </button>
      <div>
        <p>context value</p>
        <span>value : {values}</span>
        <button onClick={contextHandler}>context 변경 버튼</button>
      </div>
    </div>
  );
};
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FVQkSV%2Fbtr37vCBXzm%2FVXiqfYdD4H2FTcw3tGVFzk%2Fimg.png)

위 이미지는 TestApp 코드의 초기 화면이다.

모든 컴포넌트가 첫 렌더링을 거쳐 각각 콘솔을 찍어내고 있다.

### TestApp의 count state는 MemoTest 컴포넌트에 props로 전달해주고 있기 때문에 React.memo()의 효과는 사용되지 않고, 일반 컴포넌트와 마찬가지로 TestApp count state가 변경될 때마다 렌더링되는 것을 볼 수 있다.

![image](https://blog.kakaocdn.net/dn/Hl6oT/btr4gSJ05tT/kipvw3VkehYfnxf2Pbq780/img.gif)

### 하지만 contextAPI처럼 MemoTest의 props와 연관되지 않은 다른 방식을 통해 통해 리렌더링을 발생시키는 경우라면, memoTest 컴포넌트의 props가 변경되지 않기 때문에 MemoTest는 렌더링을 발생시키지 않는다.

![image](https://blog.kakaocdn.net/dn/cmaheq/btr36GRW8J1/uhzNP5d6ymqDxVDGFK4Ay1/img.gif)

> contextAPI의 기본 사용법 : https://lee-yo-han.github.io/react/react-context-api

---

## 1-1 - props 동등 비교 커스터마이징

React.memo()는 props 혹은 props의 객체를 비교할 때 얕은 비교를 하기 때문에, 비교 방식을 수정하고 싶다면 React.memo() 두 번째 매개변수로 비교함수를 만들어 수동으로 연산 후 넘겨주면 된다.

```javascript
import React from "react";

export const MemoTest = ({ someProps }) => {
  console.log("Memo test, props 바뀔때만 콘솔 작동");
  return (
    <div style={{ border: "1px solid black" }}>
      <p>MemoTest 컴포넌트</p>
      <p>props가 바뀔때만 렌더링</p>
      <span>count와 연동된 props: {someProps}</span>
    </div>
  );
};

const propsAreEqual = (prev, next) => {
  return (
    prev.someProps === next.someProps
    // 다른 props들이 있는 경우 &&을 통해 연산 추가
  );
};

export const MemoTestComponent = React.memo(MemoTest, propsAreEqual);
```

# 2. React.memo()는 언제 사용해야 하는가?

### - 함수형 컴포넌트가 같은 props로 자주 렌더링 될거라 예상될 경우

props가 변경되지 않는 경우에도 상위 컴포넌트의 지속적인 렌더링에 의해 하위 컴포넌트의 불필요한 렌더링이 예상되는 경우라면 React.memo()를 통해 오직 props의 변화에만 반응시켜주는 것이 효율적이다.

### - 무겁고 비용이 큰 연산이 있는 경우

한 번 렌더링 될 때 큰 연산이 발생한다고 했을때 불필요한 렌더링이 일어난 경우 연산에 사용되는 비용이 낭비될 수 있기 때문에 이러한 경우 또한 React.memo()를 통한 memoization이 적절하다고 볼 수 있다.

# 3. React.memo()를 언제 사용하지 말아야 하는가?

### - 위에 언급한 상황과 맞지 않는 경우 React.memo()를 사용할 필요가 없을 가능성이 높다.

경험적으로 ㅅ어능적인 이점을 얻지 못한다면 memoization을 사용하지 않는 것이 좋다. 성능 관련 변경이 잘못 적용된다면 성능이 오히려 악화될 수 있다.

### - 기술적으로는 가능하지만 클래스 기반의 컴포넌트를 React.memo()로 래핑하는 것은 적절하지 않다.

클래스 기반의 컴포넌트에서 memoization이 필요하다면, pureComponent를 확장하여 사용하거나, shouldComponentUpdate() 메서드를 구현하는 것이 적절하다.

### - props가 자주 바뀌는 경우

props가 자주 바뀌는 경우도 React.memo()로 래핑하더라도 이전 props와 다음 props를 비교 함수를 통해 비교할때 거의 false를 반환할 것이기 때문에 props가 자주 바뀌는 경우도 React.memo()의 사용이 적절하지 않다.

## 결론

> React.memo는 memoization의 장점을 얻게 해주는 좋은 도구이지만, 렌더링 방지를 위해 memoization에만 의존하면 안된다.

---

## 참조

https://dmitripavlutin.com/use-react-memo-wisely/

https://ui.toast.com/weekly-pick/ko_20190731


React.memo() 를 통한 컴포넌트 최적화

react memo


# useCallback이란?

> 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용하는 함수 메모이제이션용 React hook이다.

```javascript
const memoFn = useCallback(() => {}, [dep]);
```

첫번째 인자의 함수를 두번째 인자의 종속성 배열 내의 값이 변경될 때까지 저장하여 재사용할 수 있도록 해준다.

javascript에서 함수(function () {} or () => {})는 객체 리터럴( {...} )이 항상 새 객체를 생성하는 것과 유사하게 항상 다른 함수를 생성한다. 그렇다면 함수를 props 로 내려준다고 하면 하위 컴포넌트는 props가 변경되었다고 인식하게 된다.

그렇게되면 React.memo를 이용한 최적화가 원하는대로 작동하지 않을 수 있기 때문에 이러한 점을 useCallback이 메꿔줄 수 있게 된다.

> 종속성 배열이 없는 경우 매번 새 함수를 반환하기 때문에 항상 dependencises 배열을 포함해줘야 한다. (특정 상황에서 빈 배열 [] 은 있을 수 있지만, 배열 자체가 없으면 의미가 없어진다.)

## 사용예

```javascript
const add = useCallback(() => x + y, [x, y]);
```

# useCallback과 React.memo를 통한 최적화

```javascript
// 최상단 (1번) 컴포넌트
import { useState } from "react";
import { UseCallbackChildren } from "./UseCallbackChildren";

export const UseCallbackTest = () => {
  const [isDark, setIsDark] = useState(false);
  return (
    <>
      <label>
        <input
          type="checkbox"
          checked={isDark}
          onChange={e => setIsDark(e.target.checked)}
        />
        Dark mode
      </label>
      <hr />
      <UseCallbackChildren
        productId={123}
        referrer="wizard_of_oz"
        theme={isDark ? "dark" : "light"}
      />
    </>
  );
};

// 중간 (2번) 컴포넌트
import React, { useCallback } from "react";
import { CallbackForm } from "./UseCallbackForn";

export const UseCallbackChildren = ({ referrer, productId, theme }) => {
  const post = (url, data) => {
    console.log("POST /" + url);
    console.log(data);
  };

  const handleSubmit = useCallback(
    orderDetails => {
      post("/product/" + productId + "/buy", {
        referrer,
        orderDetails,
      });
    },
    [productId, referrer],
  );

  return (
    <div
      style={
        theme === "dark" ? { backgroundColor: "black", color: "white" } : {}
      }
    >
      <CallbackForm onSubmit={handleSubmit} />
    </div>
  );
};

// 하위 (3번) 컴포넌트
import React, { useState } from "react";

export const UseCallbackForm = ({ onSubmit }) => {
  const [count, setCount] = useState(1);

  console.log("강제로 느리게");
  let startTime = performance.now();
  while (performance.now() - startTime < 500) {
    // Do nothing for 500 ms to emulate extremely slow code
  }

  const handleSubmit = e => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const orderDetails = {
      ...Object.fromEntries(formData),
      count,
    };
    onSubmit(orderDetails);
  };

  return (
    <form
      onSubmit={handleSubmit}
      style={{ display: "flex", flexDirection: "column", width: "200px" }}
    >
      <p>
        <b>
          Note: <code>ShippingForm</code> is artificially slowed down!
        </b>
      </p>
      <label>
        Number of items:
        <button type="button" onClick={() => setCount(count - 1)}>
          -
        </button>
        {count}
        <button type="button" onClick={() => setCount(count + 1)}>
          +
        </button>
      </label>
      <label>
        Street:
        <input name="street" />
      </label>
      <label>
        City:
        <input name="city" />
      </label>
      <label>
        Postal code:
        <input name="zipCode" />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export const CallbackForm = React.memo(UseCallbackForm);
```

위 코드를 보면, 최상단(1)에 있는 다크모드는 중간(2) 컴포넌트까지만 전달해주고, 중간(2) 컴포넌트는 하위(3) 컴포넌트에 useCallback 함수만 전달해주고 있다.

useCallback은 함수를 캐시해 재사용할 수 있도록 도와주기 때문에 종속성이 변하지 않으면 계속 재사용할 수 있다. 즉, 동일한 props로써 함수를 하위(3) 컴포넌트에 내려주고 있기 때문에 하위 컴포넌트의 렌더링에 영향이 없다.

이 상태로 코드를 작동시키면 하위(3) 컴포넌트에 있는 count를 동작할때마다 느려지겠지만, 다크모드와 submit 이벤트에는 영향을 주지 않는다.

![image](https://blog.kakaocdn.net/dn/bEYsKw/btr4gSLc8BG/hJKpnBKbFziku3fjI6hphK/img.gif)

만약 하위(3) 컴포넌트의 React.memo()를 없애게 되면 submit 이벤트에는 영향이 없지만, 최상위(1) 컴포넌트의 다크모드 state 변경에 의해 하위(3) 컴포넌트의 렌더링이 일어나게 되어 다크모드와 count의 동작이 느려지는걸 볼 수 있다.

![image](https://blog.kakaocdn.net/dn/mfxA0/btr4iTijPZD/XNzKmFrScoUZ6qSyiCMV2K/img.gif)

자세히 보면 콘솔이 먼저 찍히고 0.5초정도 뒤에 동작하는 것을 볼 수 있다.

# useMemo와의 차이점

> useMemo는 함수의 호출 결과를 캐시하고, useCallback은 함수 자체는 캐시한다. 그러므로 useCallback은 useMemo와 달리 제공한 함수를 호출하지 않는다. 대신 사용자가 제공한 함수를 캐시하기 때문에 불필요한 렌더링 없이 함수를 전달할 수 있다.

## useMemo와 useCallback의 동시 사용

```javascript
function useCallback(fn, dependencies) {
  return useMemo(() => fn, dependencies);
}
```

## useCallback이 유용한 경우

- useCallback을 통해 props로 하위 컴포넌트에 넘겨줄때
- useEffect 등 다른 hook의 종속성으로 이용할때
- 종속성 변화가 적고 재사용이 용이할때

## useCallback 남용 시 문제점

> 모든 함수를 useCallback으로 감싸게 되면 컴포넌트가 리렌더 될 때마다 모든 함수가 다시 재생성될 필요가 있는지 검사하는 연산이 수행된다. 따라서 보통은 특정 함수가 props로 전달되어 불필요한 컴포넌트 리렌더를 유발할 때에만 적용하는 것이 좋다.

### memo, useMemo, useCallback 등 어떤 Memoization이나 부적절하게 사용할 경우 오히려 성능이 떨어질 수 있기 때문에 상황에 맞게 적절하게 사용하는 것이 좋은 것 같다.

---

참조: https://beta.reactjs.org/reference/react/useCallback


useCallback을 이용한 컴포넌트 최적화하기

react usecallback


# useMemo란?

> useMemo는 React.memo(), useCallback과 같이 컴포넌트를 최적화하기 위한 훅 중 하나이다.

# useMemo를 사용하는 이유

React의 컴포넌트는 부모 컴포넌트가 렌더링되거나, 자신의 state변경, 상위 컴포넌트에서 내려받는 props가 변경될 때마다 다시 렌더링된다. 그런데 내려받는 props나 state가 여러 가지일때 한 개 props의 변경으로 모든 값이 다시 계산되는 경우 불필요한 비용이 누적되게 된다.

useMemo는 이러한 현상을 효율적으로 전환하기 위한 hook이다.

## useMemo를 적용하기 전

```javascript
// 상위 컴포넌트
import { useState } from "react";
import { UseMemoChildren } from "./UseMemoChildren";

export const UseMemoTest = () => {
  const [number, setNumber] = useState(0);
  const [text, setText] = useState("");

  const changeNumber = e => {
    setNumber(e.target.value);
  };
  const changeText = e => {
    setText(e.target.value);
  };

  return (
    <div>
      <p>UseMemoText</p>
      <div>
        <p>number</p>
        <input type="number" onChange={changeNumber} value={number} />
      </div>
      <div>
        <p>text</p>
        <input type="text" onChange={changeText} value={text} />
      </div>
      <UseMemoChildren number={number} text={text} />
    </div>
  );
};

// 하위 컴포넌트
export const UseMemoChildren = ({ number, text }) => {
  const getNumber = number => {
    console.log("숫자 변경");
    return number;
  };

  const getText = text => {
    console.log("글자 변경");
    return text;
  };

  const showNumber = getNumber(number);

  const showText = getText(text);

  return (
    <div>
      <p>Memo Child Component</p>
      <p>number: {showNumber}</p>
      <p>text: {showText}</p>
    </div>
  );
};
```

상위 컴포넌트는 각 input 값이 변경될 때마다 그 값을 저장해 하위 컴포넌트로 내려준다.

하위 컴포넌트는 내려받은 props를 통해 화면에 노출시켜줄 값을 return해주는 역할을 한다.

![image](https://blog.kakaocdn.net/dn/9hqzj/btr4hQeyTmU/PzYhcCiwuZq08zOkhBqeWk/img.gif)

이 상태에서 input을 업데이트하면 숫자를 바꾸든 텍스트를 바꾸든 getNumber 함수와 getText 함수 둘 다 다시 연산되는 것을 볼 수 있다.

이런 경우 변경된 props에 대해서만 다시 연산될 수 있도록 useMemo를 적용해볼 수 있다.

## useMemo 사용법

```javascript
const cachedValue = useMemo(calculateValue, dependencies);
```

### 적용 예시

```javascript
// 하위 컴포넌트

import { useMemo } from "react";

export const UseMemoChildren = ({ number, text }) => {
  //   console.log("useMemoChildren start");
  const getNumber = number => {
    console.log("숫자 변경");
    return number;
  };

  const getText = text => {
    console.log("글자 변경");
    return text;
  };

  const showNumber = useMemo(() => {
    return getNumber(number);
  }, [number]);

  const showText = useMemo(() => {
    return getText(text);
  }, [text]);

  return (
    <div>
      <p>Memo Child Component</p>
      <p>number: {showNumber}</p>
      <p>text: {showText}</p>
    </div>
  );
};
```

위와 같이 useMemo를 적용하고 나면 다음과 같이 useMemo 적용 이후 변경된 props에 대한 연산만 처리해주는 것을 볼 수 있다.

![image](https://blog.kakaocdn.net/dn/4Vcyh/btr4hPz1xwm/0zNRNCdyJKwpsWk2LU73KK/img.gif)

> useMemo 마지막의 dependencies [ ] 배열은 필수적으로 어떤 값을 변경에 반응할 것인지 포함시켜줘야 한다.

# 연산 비용이 비싸다는 기준은?

React 공식 사이트에서 권장하는 useMemo 적용 기준은 연산에 소요된 시간이 1ms 이상일 경우로 안내하고 있다.

console.time/timeEnd 등을 통해 useMemo를 적용하고자 하는 함수의 총 연산시간을 도출해볼 수 있다.

```javascript
const getText = text => {
  console.time("memo");
  console.log("글자 변경");
  console.timeEnd("memo");
  return text;
};
```

위와 같이 코드 작성 후 text를 변경해보면 다음과 같은 콘솔을 볼 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F8mGtS%2Fbtr4iU19jHE%2FH0huW2SytbAtalR3urepr0%2Fimg.png)

> 입력하는 계산이 눈에 띄게 느리고, 종속성이 거의 변경되지 않는 경우에는 useMemo를 이용한 최적화가 적합하지만, 컴포넌트 구조 변경과 상태 관리의 최소화, state를 업데이트하는 Effect의 불필요한 종속성을 제거하거나 특정 함수들을 별도로 관리하는 방법이 useMemo보다 적합할 수 있다.

> 실제로 React의 성능 문제 대부분은 Effect에서 발생하는 업데이트 체인으로 인해 발생한다고 한다.

---

참조 : https://beta.reactjs.org/reference/react/useMemo


useMemo를 이용한 컴포넌트 최적화하기

react usememo


# ContextAPI

> 간단한 데이터의 변화를 props drilling 없이 전역적으로 관리해주기 위해 ContextAPI를 사용해볼 수 있다.

## 사용법

## 1. context component 생성

```javascript
// context.jsx
import { createContext, useContext, useState } from "react";

// context 생성
const AnyContextValue = createContext();
const AnyContextUpdate = createContext();

// useContext 생성
export const useContextValue = () => {
  const context = useContext(AnyContextValue);
  return context;
};
export const useContextUpdate = () => {
  const update = useContext(AnyContextUpdate);
  return update;
};

// context Component 생성
// children props를 Contextname.provider로 감싸준다.
export const SomeContext = ({ children }) => {
  const [someData, setSomeData] = useState("someData");
  return (
    <AnyContextValue.Provider value={someData}>
      <AnyContextUpdate.Provider value={setSomeData}>
        {children}
      </AnyContextUpdate.Provider>
    </AnyContextValue.Provider>
  );
};
```

## 2. context import

```javascript
import { TestApp } from "./components/blogtest/TestApp";
import { SomeContext } from "./components/context/RenderingContext";

// import된 Context를 적용하고자 하는 컴포넌트들의 최상위에 감싸준다.
function App() {
  return (
    <SomeContext>
      <ChildrenComponent />
    </SomeContext>
  );
}

export default App;
```

## 3. context 사용

```javascript
import { useState } from "react";
// 생성한 useContext import
import { useContextUpdate, useContextValue } from "../context/RenderingContext";

export const ChildrenComponent = () => {
  const values = useContextValue();
  const update = useContextUpdate();

  const contextHandler = () => {
    values === "someData" ? update("dataSome") : update("someData");
  };

  return (
    <div>
      <p>context value</p>
      <span>value : {values}</span>
      <button onClick={contextHandler}>context 변경 버튼</button>
    </div>
  );
};
```

위와 같이 설정이 완료된 후 정상적으로 contextAPI를 사용할 수 있다.

![image](https://blog.kakaocdn.net/dn/d0hnZa/btr35w9FvGX/zDcTOjtXxg23vMKk6LxaM0/img.gif)

> contextAPI는 간단하게 상태를 관리해줄 수 있지만, provider를 전역으로 감쌌을 때 컴포넌트들이 전반적으로 렌더링이 일어날 수 있기 때문에 상황과 구조에 맞게 적절하게 사용해주는 것이 좋다.

---

## 참고 : typescript에서의 contextAPI 사용

### TypeScript에서는 context 초기값 등의 설정이 필요하다.

```typescript
// context component

import { createContext, useContext, useState } from "react";
import { PostType } from "@/types/pages";
import { ProviderProps, ContextType } from ".";

// context 초기화
const initialContext = {
  posts: [],
  setPosts: () => {},
};

// context 생성
const PostContextValue = createContext<PostType[]>(initialContext.posts);
const PostContextUpdate = createContext<ContextType>(initialContext.setPosts);

// useContext 생성
export const useMdContextValue = () => {
  const context = useContext(PostContextValue);
  return context;
};
export const useMdContextUpdate = () => {
  const update = useContext(PostContextUpdate);
  return update;
};

// context component 생성
export const MdContext = ({ children }: ProviderProps) => {
  const [posts, setPosts] = useState<PostType[]>([]);

  return (
    <PostContextValue.Provider value={posts}>
      <PostContextUpdate.Provider value={setPosts}>
        {children}
      </PostContextUpdate.Provider>
    </PostContextValue.Provider>
  );
};

// 다른 컴포넌트에서의 사용
import { useEffect } from "react";
import { useMdContextUpdate } from "@/context/mdContext";

export default function Home({ posts }: { posts: PostType[] }) {
  const update = useMdContextUpdate();

  useEffect(() => {
    if (posts) {
      update(posts);
    }
  }, [posts, update]);
```


react context api


# utterances란?

> Github repository의 이슈 기능을 활용해 내 웹사이트에 댓글 기능을 추가할 수 있는 도구로, 별도의 백엔드 구성을 하지 않고 댓글들을 관리할 수 있다는 장점이 있다.

많이 비교되는 disqus라는 툴도 있다. 하지만, disqus는 댓글 작성을 누구나 할 수 있다는 장점이 있는 반면에 광고가 많다는 단점이 있다.
그에 비해 utterances는 Github 계정 소유자만 댓글을 작성할 수 있지만, 별도의 광고도 없고 댓글 작성 시 Markdown을 지원한다는 특징이 있다.

나는 utterances를 Github blog에 사용할 생각이기에 굳이 utterances의 장점을 버리고 disqus를 사용할 이유가 없었다.

# 사용방법

## 1. repository 생성

public으로 설정된 새 레포가 필요하다.

Github blog repo에 연동해도 상관은 없지만 댓글만을 위한 저장소를 만들어 놓는게 관리가 훨씬 쉬울 것 같아 새 repo를 생성해줬다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbq4F8z%2Fbtr34VuvScp%2FwmTQX2iIjKtMjlowowHw80%2Fimg.png)

저장소 이름은 상관 없다.

## 2. utterances 설치

Github app에서 설치할 수 있다.

https://github.com/apps/utterances

## 3. utterances access 설정

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FPS87y%2Fbtr35bYlHCH%2FhE9akcKFM7qYE6yAfvKD4k%2Fimg.png)

app이 설치되면 Configure를 통해 어떤 저장소에 연동해줄지 설정할 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F55bSC%2Fbtr37BBZd9Y%2FfSwpH2VCQKwXKpQkXAbO00%2Fimg.png)

나는 선택한 저장소에만 연동되게 설정했다.

## 4. utterances.json 생성

```javascript
{
  "origins": ["https://{my url}"]
}
```

위와 같이 자신이 댓글 기능을 사용할 사이트를 utterances.json에 입력해준다.

## 5. script를 블로그 repo code에 복사

https://utteranc.es/?installation_id=35005881&setup_action=install

해당 사이트에 들어가면 어떤 방식으로 script를 구성할지 설정할 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fo9X4N%2Fbtr34VVyI7q%2F2PbuKqgkmKDtfogCNj7Nx0%2Fimg.png)

> Issue mapping같은 경우, 댓글과 포스팅을 어떻게 연동할지 설정하는 것인데, 통상적으로 pathname이나 URL을 많이 사용하지만 본인 프로젝트의 상황에 맞춰 설정해주는 것이 가장 좋다.

> 또한 한글 파일명을 사용해 URL이나 pathname을 생성하는 경우, 유니코드 인식 문제로 비정상적인 URL이 생성될 수 있기 때문에 설정에 유의해야 한다.

```javascript
// 복사할 스크립트
<script
  src="https://utteranc.es/client.js"
  repo="name/repositoey" // utterances를 연동한 repo 이름
  issue-term="pathname" // issue mapping
  theme="github-light" // 테마 색상
  crossorigin="anonymous"
  async
></script>
```

테마 색상도 다양하기 때문에 utterances 사이트에서 원하는 색상을 골라가며 설정해줘도 괜찮다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FxYtiI%2Fbtr35FEVVmk%2FcS0dxRjlWfFukRPCaL9y61%2Fimg.png)

위에 생성한 script는 통상적으로 댓글 부분에 해당되는 곳에 그대로 복사해 넣지만, 나는 Nextjs를 통해 댓글 컴포넌트를 생성할 것이기 때문에 다른 방식을 사용했다.

```javascript
export const Comment = () => {
  return (
    <section
      ref={elem => {
        if (!elem) {
          return;
        }
        const scriptElem = document.createElement("script");
        scriptElem.src = "https://utteranc.es/client.js";
        scriptElem.async = true;
        scriptElem.setAttribute("repo", "{utterances repo name}");
        scriptElem.setAttribute("issue-term", "pathname");
        scriptElem.setAttribute("theme", "github-dark");
        scriptElem.setAttribute("label", "blog-comment");
        scriptElem.crossOrigin = "anonymous";
        elem.appendChild(scriptElem);
      }}
    />
  );
};
```

해당 컴포넌트에 사용하기 위해 기존의 script와 같은 속성들을 넣어줬다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fckai9y%2Fbtr4aKSLFRA%2F9p3HEGqDCEkfa8sg7Nnd0k%2Fimg.png)

하지만 strict 모드를 false로 해도 종종 댓글찾이 2개가 되어버려 useEffect를 통해 1번만 script를 붙일 수 있도록 코드를 수정했다.

```javascript
import { useEffect } from "react";

export const Comment = () => {
  const makeRef = (el: HTMLElement | null) => {
    if (!el) {
      return;
    } else {
      const scriptElem = document.createElement("script");
      scriptElem.src = "https://utteranc.es/client.js";
      scriptElem.async = true;
      scriptElem.setAttribute("repo", "{utterances repo name}");
      scriptElem.setAttribute("issue-term", "pathname");
      scriptElem.setAttribute("theme", "github-dark");
      scriptElem.setAttribute("label", "blog-comment");
      scriptElem.crossOrigin = "anonymous";
      el.appendChild(scriptElem);
    }
  };

  useEffect(() => {
    const newEl = document.getElementById("comment-box");
    makeRef(newEl);
  }, []);

  return <section id="comment-box" />;
};
```

코드 수정 후 원하는대로 동작하는 모습을 볼 수 있었다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcNZNaQ%2Fbtr38NhUPkk%2FSH2Dgj2Si71gH3Gykm9kYK%2Fimg.png)


utterances를 이용한 Nextjs Github 블로그 댓글 기능 구현

github git blog utterances comment


# Github REST API 설명서

https://docs.github.com/ko/rest?apiVersion=2022-11-28

## GithubAPI 이용 시 토큰이 필요한 경우 아래와 같이 토큰 발급도 가능하다.

- 우측 상단의 프로필을 통해 Settings 접근

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc5d9NT%2Fbtr3XWt2ipS%2FlVrpZru5irR5mDft0cLaO0%2Fimg.png)

- 좌측 하단의 Developer settings 접속

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdnMYAN%2Fbtr37uQgb1j%2Fz3lG0JXTBq5gkIhvk1HEek%2Fimg.png)

- Tokens나 Fine-grained tokens를 통해 원하는 권한들을 설정해 토큰을 생성할 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcKOqYU%2Fbtr3V6YgATa%2Fc3QmI12TDR3vgoNL0ZTZR1%2Fimg.png)

> Github 홈페이지에 여러 api들이 많기 때문에 필요에 따라 사용하면 좋을 것 같다. 이 글에서는 repository 안의 파일들의 정보만을 가져올 것이다.

## 1. requestURL

```javascript
const BASE_URL =
  "https://api.github.com/repos/{유저명을 포함한/레포지토리 이름}/contents/{데이터를 가져올 디렉토리}";
const options = {
  headers: {
    "Content-Type": "application/json",
  },
};
```

예를 들어 src의 posting이라는 디렉토리의 데이터들을 가져오고 싶다면

https://api.github.com/repos/name/some-repo/contents/src/posting

정도가 될 수 있다.

요청이 정상적으로 작동했다면 아래와 같이 데이터를 받을 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FXHDFb%2Fbtr3WcDXFiZ%2FmFW3Q3uyQPHEOBpkOFVKA0%2Fimg.png)

하지만 하나의 파일에 대한 구체적인 정보는 들어있지 않다.

한 단계로 더 들어가 정보를 받아온다면 아래와 같은 base64로 인코딩된 content 데이터를 받아올 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcaVD0e%2Fbtr38M4cfZ6%2FMLUYZ4OarG3pXvjnSCW7VK%2Fimg.png)

## 2. decoding

해당 콘텐츠의 데이터를 정상적으로 받아오기 위해서는 디코딩이 필요하다.

```typescript
const eachMarkdown = async (name: string) => {
    const url = `${BASE_URL}/${categoryName}/${name}`;
    const response = await axios.get(url, options);
    const content = Buffer.from(response.data.content, "base64").toString();

    ...
};
```

content 데이터를 추출하고 콘솔을 확인하면 아래와 같이 string을 받아볼 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Flctvp%2Fbtr38LKZ6o1%2FnwU9EK44kJmKCfanQsdw0K%2Fimg.png)

## 3. 데이터 가공

캡쳐 이미지 아래로 마크다운 파일의 본문들이 함께 있지만, 내가 필요한 부분은 머리말 부분이기 때문에 이 데이터를 추출해야 했다.

```typescript
const eachMarkdown = async (name: string) => {
  const url = `${BASE_URL}/${categoryName}/${name}`;
  const response = await axios.get(url, options);
  const content = Buffer.from(response.data.content, "base64").toString();
  const frontmatter = content.match(/^---\n([\s\S]+?)\n---/);
  if (frontmatter) {
    const matters = JSON.stringify(frontmatter[0]).split("\\n");
    const dateRegex = /\d{4}-\d{2}-\d{2}/;
    const match = matters[4].match(dateRegex);
    if (match) {
      const result = {
        title: matters[1].split("title: ")[1].replaceAll(" ", "-"),
        description: matters[2].split("description: ")[1],
        category: matters[3].split("category: ")[1],
        date: match[0],
      };
    }
  }
};
```

상수 frontmatter는 머리말을 가져오지만 예쁘게 가져오진 않는다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FTC1yi%2Fbtr35bRukP2%2FnWJ0mgeFgu2LlEBk0KyupK%2Fimg.png)

때문에 if(frontmatter){...}와 같이 필요한 데이터를 정규식이나 string메서드를 통해 원하는대로 가공해 사용하여 사용해야 한다.


GithubAPI를 이용한 repository 내 Markdown 파일 정보 불러오기

github github api get repo data


## Markdown을 통해 블로그를 작성하는 이유

- 머리말을 따로 설정해 route 링크를 설정해주거나 제목, 날짜, 카테고리, 등을 설정하여 블로그 탐색을 용이하게 해줄 수 있다.
- Markdown을 repository에 저장함으로써 githubAPI 등을 이용한 데이터 조회를 가능하게 한다.

## 필요한 패키지

```bash
yarn add gray-matter # 문자열이나 파일에서 머리말을 구문 분석, 파일에서 메타데이터와 내용 등 추출 시 사용
yarn add marked
yarn add @types/marked # 타입스크립트의 경우
yarn add react-markdown # <div dangerouslySetInnerHTML={createMarkup()} />과 유사함
yarn add remark-gfm # 마크다운 문법이 다양하게 적용될 수 있도록 도와주는 플러그인
yarn add react-syntax-highlighter
yarn add @types/react-syntax-highlighter # 타입스크립트의 경우
```

참조

https://yarnpkg.com/package/react-markdown

https://yarnpkg.com/package/react-syntax-highlighter

## posting 파일들은 src 파일 안에 있다고 가정

## 1. [slug].tsx 파일 생성

```javascript

import { GetStaticPaths, GetStaticProps } from "next";
import { join } from "path";
import fs from "fs/promises";
import matter from "gray-matter";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm"; // Link, table, checklist 등의 형식을 표현할 수 있게 해줌
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
// import { darcula } from "react-syntax-highlighter/dist/esm/styles/prism"; - 에러 발생
import { dark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import { vsDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import { darcula } from "react-syntax-highlighter/dist/cjs/styles/prism";


interface Props {
  title: string;
  date: string;
  content: string;
}

export default function BlogPost({ title, date, content }: Props) {
  return (
    <div>
      <h1>{title}</h1>
      <p>{date}</p>
      <ReactMarkdown
          className="markdown"
          remarkPlugins={[remarkGfm]}
          components={{
            code({ inline, className, children, ...props }) {
              const match = /language-(\w+)/.exec(className || "");
              return !inline && match ? (
                <SyntaxHighlighter
                  language={match[1]}
                  PreTag="pre"
                  {...props}
                  // style={dark}
                  style={darcula}
                  // style={vsDark}
                >
                  {String(children).replace(/\n$/, "")}
                </SyntaxHighlighter>
              ) : (
                <code className={className} {...props}>
                  {children}
                </code>
              );
            },
          }}
        >
          {content}
        </ReactMarkdown>
    </div>
  );
}

// 파일명을 통해 url 생성
export const getStaticPaths: GetStaticPaths = async () => {
  const postsDirectory = join(process.cwd() + "src" + "/posting", "blog");
  const filenames = await fs.readdir(postsDirectory);
  const paths = filenames.map(filename => ({
    params: { slug: filename.replace(/\.md$/, "") },
  }));
  return { paths, fallback: false };
};

// url에 해당하는 파일명을 찾아 matter로 데이터 추출
export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {
  const slug = params?.slug as string;
  const filePath = join(process.cwd() + "src" + "/posting", "blog", `${slug}.md`);
  const fileContents = await fs.readFile(filePath, "utf8");
  const { data, content } = matter(fileContents);
  return {
    props: {
      title: data.title,
      date: data.date,
      content,
    },
  };
};

```

## 2. SyntaxHighlighter style 설정

SyntaxHighlighter 내부의 코드블록 style을 이용하기 위해서는 그에 맞는 소스를 가져와야 한다.

### 에러가 발생하는 ...dist/esm/styles/prism

import { darcula } from "react-syntax-highlighter/dist/esm/styles/prism";

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FrNEOn%2Fbtr34VAZ3qk%2Fhy9KPHftPMrHNswKxBdBk0%2Fimg.png)

### 정상 작동하는 imports ...dist/cjs/styles/prism

```javascript
import { darcula } from "react-syntax-highlighter/dist/cjs/styles/prism";
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FQTv0s%2Fbtr37t4PDmS%2Fc0Sw6mnao0GUU05pG0mnb0%2Fimg.png)

```javascript
import { dark } from "react-syntax-highlighter/dist/cjs/styles/prism";
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fdjz47g%2Fbtr35dhlOF6%2FmmOkOQB6R1x5TgzkEcQ27K%2Fimg.png)

```javascript
import { vsDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F29uf2%2Fbtr3V6KDHYg%2FeTnSoSaIAgZYqOcK7MTr8K%2Fimg.png)

원하는 스타일을 SyntaxHighlighter style에 넣어주면 된다.

> Markdown content(내용)는 ReactMarkdown 컴포넌트의 className을 통해 수정해줄 수 있다.

## 3. Markdown 파일 생성

```markdown
// 파일명 : first-post.md
--- 머리말
title: First-Post
date: "2023-02-28" <- 숫자만 사용하면 newDate()처럼 생성되어 타입 오류 발생 가능

---

# Deploy and test

test
```

Markdown 파일의 데이터를 불러올때, 머리말을 이용한 metaTag 설정이나 제목 등을 자유롭게 설정할 수 있다.

파일 생성 후 해당 링크 접속 시 정상적으로 접속이 가능해진다.

## ex

localhost:3000/first-post

url은 [slug].tsx 파일이 위치한 경로에 따라 달라질 수 있다. (nextjs 라우팅 방식)


Github pages 블로그 Markdown 불러오기

github git use markdown viewer


# Github pages와 Nextjs를 선택한 이유

### 1. Github pages

> vercel도 Nextjs로 쉽게 배포할 수 있지만, 백엔드는 별도로 만들지 않을 계획이었기에, 추후 댓글 기능이나 추천 글 목록 등을 Github 사이트 하나로 모두 관리하기 위해서 Github pages를 이용하기로 했다.

### 2. Nextjs

> 블로그는 검색엔진에 잘 노출되어야 그 의미가 있다. 또한 React 환경을 이용한 블로그 개발을 원했기에 SSR(Server Side Rendering) 등을 통한 SEO(검색엔진 최적화)에 유리한 React 프레임워크인 Nextjs를 사용하기로 결정했다.

# Github Pages 호스팅 방법

### 1. Repository 생성

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbkBnCf%2Fbtr3TGZh4t7%2F0VD4ycS4u8EvTAeIxvjsP1%2Fimg.png)

Repo 이름은 {username}.github.io 로 저장해준다.

- 생성된 repo의 settings => pages에서 배포를 확인할 수 있다. (배포되는데 5~10분 정도 소요될 수 있다.)

### 2. Repository 클론 후 Nextjs 설치

```bash
# 현재 디렉토리에 설치
yarn create next-app .

# typescript
yarn create next-app . --typescript
```

### 3. gh-pages 설치

Github pages를 이용하기 위해 아래 명령어를 통해 설치해준다.

```bash
yarn add gh-pages --save-dev
```

### 4. package.json 설정

홈페이지 도메인 추가 및 scripts를 수정해준다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbSbOFc%2Fbtr33yMA8BY%2FYBMjkb8aNMMR8jv7bhlrxk%2Fimg.png)

1번째 줄처럼 홈페이지를 입력하고, scripts를 위와 같이 수정해준다.

```javascript
"build": "next build && next export",
"predeploy": "npm run build",
"deploy": "touch out/.nojekyll && gh-pages -d out --dotfiles"
```

- next export : Nextjs를 정적 사이트로 배포하기 위해 설정
- -- touch out/.nojekyll : 본래 guthub pages는 jekyll 기반으로, \_\_{filename}을 특수 리소스로 간주하고 최종 사이트에 복사하지 않기 때문에 jekyll을 사용하지 않는다고 명시해 정상적으로 처리될 수 있도록 설정
- gh-pages -d out --dotfiles : 현재 repo의 임시 복제본 생성 후, gh-pages 브랜치가 없는 경우 브랜치 생성. 기본 경로의 모든 파일 또는 선택적 src 구성의 패턴과 일치하는 파일만 복사하고 모든 변경 사항 커밋 후 푸시. 이미 gh-pages 브랜치가 있는 경우 제공된 파일에서 커밋을 추가하기 전에 원격의 모든 커밋으로 업데이트됨. src 패턴과 일치하는 도트 파일도 포함시킴

참조 : https://github.com/tschaub/gh-pages

명령어 보기

```bash
yarn gh-pages --help
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbJQQKR%2Fbtr34cpsLGR%2FDtpXfGfLf2p8bph05dvvnk%2Fimg.png)

### next.config.js 수정

config는 본인이 적용하려는 방식에 맞게 설정해줘도 괜찮다.

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  images: {
    unoptimized: true, // 이미지 정상적으로 불러올 수 있도록함
  },
  compiler: {
    styledComponents: true, // styled-components 사용 시 컴파일러에 추가
  },
};

module.exports = nextConfig;
```

### 6. 배포

```bash
yarn deploy
```

> cmd(명령 프롬프트)에서 실행 시 tought를 사용할 수 없다는 에러가 발생하기 때문에 git bash로 실행

### 7. 배포 후 설정

```bash
Export successful. Files written to D:\0. CORDING\INDI-PROJECT\github-blog\out
$ gh-pages -d out --dotfiles
Published
```

터미널에 위와 같은 메세지가 뜨면, repository => setting => pages의 branch에 gh-pages가 생성돼있는 것을 볼 수 있음

gh-pages를 배포 브랜치로 설정해준 후 저장

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FXcGvE%2Fbtr35F5rS1r%2FgTSz4ck3EW2y6KOnmS9EiK%2Fimg.png)

설정을 완료하고 상단의 Visit site로 페이지를 접속하면 Nextjs 기본 화면이 잘 나오는 것을 볼 수 있다.


Nextjs를 이용한 Github pages 블로그 만들기

github git custom blog


# a태그 기본 스타일 제거와 스타일 적용

```css
/* 기본 밑줄 제거 */
a {
  text-decoration: none;
}

/* 아직 방문하지 않은 링크의 글자색 정의 */
a:link {
  color: pink;
}

/* 사용자가 방문한 적이 있는(클릭한 이후) 링크의 글자색 
정의 */
a:visited {
  color: black;
}

/* 마우스를 링크에 올려두었을 때, 글자색을 정의 */
a:hover {
  color: red;
}

/* 마우스로 링크를 클릭하고 뗄 때까지의 글자색을 정의 */
a:active {
  color: green;
}
```


a 태그(Link 태그) 기본 스타일 제거하기

CSS로 글자 더블클릭 시 선택자(파란색 마스킹) 없애기

css no selection


# 깃 명령어 모음

## 디렉토리

1. 홈 디렉토리로 이동

```bash
$ cd ~
```

2. 새 디렉토리에 디렉토리명을 생성

```bash
$ mkdir [디렉토리명]
```

3. [디렉토리명]으로 이동

```bash
$ cd [디렉토리명]
```

4. 부모 디렉토리로 이동

```bash
$ cd ..
```

5. 현재 경로를 출력 // print working directory

```bash
$ pwd
```

6. 디렉토리의 내용을 출력

```bash
$ ls
```

7. 디렉토리의 폴더 상세 정보까지 출력

```bash
$ ls -l
```

8. 디렉토리의 숨김 파일과 디렉토리까지 출력

```bash
$ ls -a
```

tip: 옵션은 합쳐서 ls -al 처럼 사용이 가능하다.

9. 파일이 있는 디렉토리를 내용물과 함께 삭제

```bash
$ rm -r [디렉토리명]
```

10. vi 편집기로 [파일명.확장자명] 파일을 작성

```bash
$ vim [파일명.확장자명]
```

11. 터미널 창의 내용을 삭제

```bash
$ clear
```

12. 터미널 창을 종료

```bash
$ exit
```

## git 유저 / 업로드

1. 현재 위치에서 지역 저장소를 생성

```bash
$ git init
```

2. 깃 환경에서 사용자 이름을 [사용자명]으로 지정

```bash
$ git config --global user.name "[사용자명]"
```

3. 깃 환경에서 사용자 이메일을 [사용자이메일명]으로 지정

```bash
$ git config --global user.email "[사용자이메일명]"
```

4. 깃의 상태를 확인

```bash
$ git status
```

## commit 명령어

1. [파일명.확장자명]을 스테이지에 올림

```bash
$ git add [파일명.확장자명]
```

2. 커밋 메시지 [메시지명]을 붙여 커밋

```bash
$ git commit -m "[메시지명]"
```

3. 메시지 [메시지명]을 붙여서 스테이징과 커밋을 동시에 진행

```bash
$ git commit -a -m "[메시지명]"
```

4. 커밋 내역 확인

```bash
$ git log
$ git log --pretty=oneline   # 한줄로 표기하기
```

5. 특정 커밋 내역 확인

```bash
$ git show [커밋 id]
```

6. 최근 버전과 작업 폴더의 수정 파일 사이의 차이를 출력

```bash
$ git diff
$ git diff [이전커밋 id] [이후커밋 id]
```

7. 지정한 커밋 해시로 이동

```bash
$ git checkout [커밋 해시]
```

8. 가장 최근 커밋을 취소

```bash
$ git reset HEAD^ # 현재 HEAD의 이전 커밋으로 되돌리기
$ git reset HEAD~n # 현재로 부터 n 번째 이전 커밋으로 되돌리기
```

9. 지정한 커밋 해시로 이동하고 커밋을 취소

```bash
$ git reset [커밋 해시]

# reset의 3가지 옵션
$ git reset --soft [커밋ID]  # head 만 바뀜
$ git reset --mixed [커밋ID] # staging 도 그 때로 바뀜
$ git reset --hard [커밋ID] # working디렉토리/staging 모두 그 때로 바꿈
```

10. 지정한 커밋 해시의 변경 이력을 취소

```bash
$ git revert [커밋 해시]
```

11. 커밋 수정하는 법

```bash
# 파일 수정 한 뒤
$ git add .
$ git commit --amend  : 최신 커밋 수정
```

## 브랜치 명령어

1. 새로운 브랜치 [브랜치명]을 생성

```bash
$ git branch [브랜치명]
# 브랜치 조회하기
$ git branch
```

2. [브랜치명]으로 체크아웃(이동)

```bash
$ git checkout [브랜치명]
$ git checkout -b [브랜치명]  # 브랜치만들고 바로 이동
# 브랜치 삭제
$ git branch -d 브랜치명
```

3. 커밋 로그에서 한 줄에 한 커밋씩 출력

```bash
$ git log --oneline
```

4. 수정한 전체 파일을 스페이지에 올린다.

```bash
$ git add .
```

5. 커밋 로그에 각 브랜치의 커밋을 그래프로 표시

```bash
$ git log --branches --graph
```

6. [브랜치명]을 master 브랜치와 병합

```bash
$ git merge [브랜치명]
$ git merge [브랜치명] --edit # 병합 후 바로 vi  편집기가 나오면서 커밋 메시지 수정 가능
$ git merge [브랜치명] --no-edit # 커밋 메시지 수정없이 바로 병합
```

7. merge 취소하기

```bash
$ git merge --abort
```

## git hub 원격 저장소

1. 원격 저장소에 연결

```bash
$ git remote add origin [github 레포지 주소]
$ git remote add origin [branch 이름]   #없으면 생성됨
```

2. 원격 저장소에 연결됐는지 확인

```bash
$ git remote -v
```

3. 지역 저장소의 커밋을 맨 처음 원격 저장소에 올리는 경우

```bash
$ git push -u origin master
```

4. 3번을 한 후에 지역 저장소의 커밋을 원격 저장소에 올리는 경우(업로드)

```bash
$ git push
$ git push origin master
```

5. 원격 저장소의 커밋을 지역 저장소로 가져옴

```bash
$ git pull
$ git pull origin master
```

6. SSH 키를 생성함

```bash
$ ssh-keygen
```

7. 원격 저장소 복제하기

```bash
# 첫번째 커밋이 아니라면 풀 먼저하기
$ git remote remove origin

#원격 저장소를 [지역저장소명]에 복제하기
$ git clone [원격 저장소 주소]
```

8. 원격 저장소의 커밋을 가져오기만 하고 merge하지 않는다
   가져온 branch 내용은 origin/[브랜치] 로 저장됨

```bash
$ git fetch
# 이후엔 diff 로 비교
$ git diff test origin/test # 브랜치 이름이 test일 경우 예시
```

9. 패치로 가져온 정보가 있는 브랜치\[FETCH_HEAD\]로 이동

```bash
$ git checkout FETCH_HEAD
```

10. 패치로 가져온 정보가 있는 브랜치[FETCH_HEAD]를 master 브랜치에 병합한다

```bash
$ git merge FETCH_HEAD
```

11. [브랜치명]을 만드는 것과 동시에 체크아웃한다

```bash
$ git checkout -b [브랜치명]
```

12. 원격 저장소에 [브랜치명]의 브랜치의 커밋을 올린다

```bash
$ git push origin [브랜치명]
```

13. 원격저장소 삭제

```bash
$ git remote remove origin
```

## 파일/보관 명령어(stash)

1. 파일 내용 출력

```bash
$ cat [파일명.확장자명]
```

2. 디렉토리를 만드는 동시에 지역저장소 생성

```bash
$ cd init [디렉토리명]
```

3. 현재 커밋을 다른 브랜치에 있는 [커밋메시지] 커밋으로 되돌림

```bash
$ git reset [커밋메시지] [커밋해시]
```

4. 병합이 끝난 [브랜치명]을 삭제

```bash
$ git branch [브랜치명] -d
```

5. 작업 트리의 수정 내용 stash에 따로 보관하기

```bash
$ git stash
$ git stash save
```

6. 보관한 내용을 목록을 출력

```bash
$ git stash list
```

7. 보관한 내용을 적용

```bash
$ git stash apply
$ git stash apply stash@{1}
```

8. 보관한 내용 중 가장 최근 항목을 삭제

```bash
$ git stash drop
$ git stash drop stash@{1}
```

9. stash를 apply하고 제거(drop) 하기

```bash
$ git stash pop
```

## 기타 명령어

1. 긴 명령어 짧게 이름 붙여 사용하기

```bash
# ex) git log --pretty=oneline을
# ->git history 라는 별명으로 바꾸기.

git config alias.[별명] '원하는 명령어'
git config alias.history 'log --pretty=oneline'
```

2. tag 설정 하기

```bash
$ git tag [태그이름][커밋 ID]
$ git tag Version_2 86a99 # tag 달기
$ git tag    #tag 조회하기
$ git show Version_2
```


github git cmd

# 메타태그

### 메타태그란 쉽게 말해서 눈에 보이지 않는 문서가 가지고 있는 정보들을 담을 수 있는 태그를 말한다.

## 1. 주로 사용해볼 수 있는 요소

검색 엔진에 검색되는 단어 지정

```html
<meta name="keywords" content="" />
```

홈페이지 주제 지정

```html
<meta http-equiv="Subject" content="" />
```

제목 지정

```html
<meta http-equiv="title" content="" />
```

검색 결과에 표시되는 문자 지정

```html
<meta name="description" content="" />
```

검색 로봇 제어

```html
<meta name="robots" content="" />
```

날짜(제작일)

```html
<meta name="date" content="2016-02-15T07:45:37+09:00" />
```

제작자명 지정

```html
<meta http-equiv="author" content="" />
```

og: 태그

```html

<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="이미지URL" />
```

## 2. 사용 빈도 낮아보이는 요소

제작사 지정

```html
<meta http-equiv="publisher" content="" />
```

웹 책임자 지정

```html
<meta http-equiv="other agent" content="" />
```

제작 도구 지정

```html
<meta http-equiv="generator" content="" />
```

메일 주소 지정

```html
<meta http-equiv="Reply-To" content="naver@naver.com" />
```

```html
<meta http-equiv="email" content="naver@naver.com" />
```

파일 이름 지정

```html
<meta http-equiv="filename" content="index.html" />
```

위치 지정

```html
<meta http-equiv="Location" content="" />
```

배포자 지정

```html
<meta http-equiv="distribution" content="" />
```

저작권 지정

```html
<meta http-equiv="copyright" content="copyright@~~" />
```

제작 년/월/일 지정

```html
<meta http-equiv="build" content="date" />
```

최종 수정일 정의

```html
<meta
  http-equiv="Last-Modified"
  content="Mon,20 Jul 2016 
19:30:30"
/>
```

## 3. 사용 빈도가 많이 낮아보이는 요소

그림 위에 마우스 오버시 이미지 관련 툴바 생성하지 않음

```html
<meta http-equiv="imagetoolbar" content="no" />
```

캐시 금지

```html
<meta http-equiv="Cache-Control" content="no-cache" />
```

```html
<meta http-equiv="Pragma" content="no-cache" />
```

캐시 만료일 정의

```html
<meta http-equiv="expires" content="Mon, 08 Sep 2016 10:10:10 GMT" />
```

60초마다 새로고침

```html
<meta http-equiv="refresh" content="60" />
```

입력한 주소로 5초후 이동하는 것을 정의

```html
<meta http-equiv="refresh" content="5;url=주소" />
```

브라우저 호환성 지정

```html
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
```

웹 페이지에 쓰인 언어 지정

````html
<meta http-equiv="Content-Script-Type" content="text/```javascript" />
```html
<meta http-equiv="Content-Style-Type" content="text/css" />
````

## 4. 써볼만한 태그

페이지 인입 시 장면 전환 효과

```html
<meta http-equiv="Page-Enter" content="revealtrans(Duration=1,Transition=12)" />
```

- Box out : 네모난 박스가 안쪽에서 바깥쪽으로
- Circle in : 원이 바깥에서 안쪽으로
- Circle out : 원이 안쪽에서 바깥쪽으로
- Wipe up : 이미지의 아래에서 위쪽으로 수직 이동
- Wipe down : 이미지의 위에서 아래쪽으로 수직 이동
- Wipe right : 이미지의 왼쪽에서 오른쪽으로 수평 이동
- Wipe left : 이미지의 오른쪽에서 왼쪽으로 수평 이동
- Vertical blinds : 수직 블라인드가 쳐지는 형태로 변환
- Horizontal blinds : 수평 블라인드가 쳐지는 형태로 변환
- Checkerboard across : 바둑판 형태의 격자가 왼쪽에서 오른쪽으로 - 생성
- Checkerboard down : 바둑판 형태의 격자가 위에서 아래로 생성
- Random dissove : 안개와 비슷한 형태로 전환
- Split vertical in : 왼쪽과 오른쪽 끝에서 중앙으로 수직 이동
- Split vertical out : 중앙에서 양쪽 끝으로 수직 이동
- Split Horizontal in : 양쪽에서 중앙으로 수평 이동
- Split Horizontal out : 중앙에서 양쪽끝으로 수직이동
- Strips left down : 대각선 형태로 오른쪽 상단에서 왼쪽 하단으로 - 이동
- Strips left up : 대각선 형태로 오른쪽 하단에서 왼쪽 상단으로 이동
- Strips right down : 대각선 형태로 왼쪽 상단에서 오른쪽 하단으로 - 이동
- Strips right up : 대각선 형태로 왼쪽 하단에서 오른쪽 상단으로 이동
- Random bars horizontal : 수평선이 무작위로 생성
- Random bars vertical : 수직선이 무작위로 생성
- Random : 임의로 생성

SEO(검색엔진 최적화)를 위한 HTML의 meta tag 간단 정리

html meta tag


# 1. 숫자열을 문자열로 바꾸기

```javascript

// 숫자는 숫자+""만 해줘도 (혹은 다른 문자를 더해줘도) 문자열로 바뀐다.

let a = 1234
console.log(a) // a는 숫자 1234
let b = a+""
console.log(b) // b는 문자 '1234'
let c = 1234.toString()
console.log(c) // c는 문자 '1234

```

# 2. 문자열을 숫자열로 바꾸기

```javascript

//s는 String
Number(s)로 문자열을 숫자로 변환 - 인자를 바꿀 수 없으면(ex. 123입니다) NaN을 리턴한다.
parseInt(s)로 문자열을 숫자로 변환 - 정수나 NaN을 리턴한다.
parseFloat(s)로 문자열을 숫자로 변환 - 부동 소수점 숫자를 반환한다.

// parseFloat 예제

function circumference(r) {
  return parseFloat(r) * 2.0 * Math.PI;
}

console.log(circumference(4.567));
// 28.695307297889173

console.log(circumference('4.567abcdefgh'));
// 28.695307297889173

console.log(circumference('abcdefgh'));
// NaN


```

# 3. 문자열 다루기

```javascript

String.trim() - 문자열의 공백을 제거
      .trimStart() - 문자열 왼쪽 공백 제거
      .trimEnd() - 오른쪽 공백 제거
      .slice(0,-1) - 문자열에서 텍스트를 추출하고 새 문자열을 반환
      .split('') - 문자열 String을 ()안 인자(''등)로 나눠 각 글자별로 배열 생성
       		// ex) let name=hanbbi; name.split('') // [ 'h', 'a', 'n', 'b', 'b', 'i' ]
      .join('') 배열 내 요소들을 인자를 통해 이어준다.
      .replace("인자1","인자2") - 문자 내 맨 처음 발견된 인자1을 찾아 인자2로 바꿔준다.
      .replace("인자1","인자2") - 문자 내 모든 인자1을 찾아 인자2로 바꿔준다.
      .repeat() - 해당 문자를 ()번 반복
      .includes() - 문자열이 특정 문자열을 포함하는지 확인
      .charAt(0) - 스트링의 0번째 글자 가져오기(result = string)
      .substring(0,5) - 스트링의 0~4번째 글자 가져오기

```


javascript basic 1 num str


# Javascript 날짜 다루기

## 날짜 계산

```javascript
// 날짜 예제
// Sunday - Saturday : 0 - 6
const someday = new Date("2022-01-23");
// 날짜 형식은 자유로움 ('january 23 ,2022') 처럼 사용 가능

const day1 = someday.getDay();
console.log(day1); //  22.01.23은 일요일이므로, 0 반환

// 날짜 추출
let today = new Date(); // 인자가 비어있는 경우 현재 날짜/시간 반환

let year = today?.getFullYear();
console.log(year); // 123 - 2023년 반환값 (2022년 반환값 = 122)

let month = today?.getMonth() + 1; // javascript에서는 1월을 0부터 계산해주기 떄문에 + 1을 해준다.
console.log(month); // 3

let day = today?.getDate();
console.log(day); // 6

let hour = today?.getHour();
console.log(hour); // 현재 시간 추출

let minutes = today?.getMinutes();
console.log(minutes); // 현재 분 추출

let seconds = today?.getSeconds();
console.log(seconds); // 현재 초 추출
```


javascript basic 2 date


# Javascript Math 메서드

## 1. 소수점 표현

```javascript
// n = Number
Math.ceil(n); // 올림
Math.floor(n); // 내림
Math.round(n); // 반올림
Math.toFixed(n); // 소수점 n의 자릿수까지 표현 / 매개변수가 없으면 1의자릿수 반환

// .toFixed 예제
let num = 10.987654321;

num.toFixed(); // 11
num.toFixed(1); // 11.0
num.toFixed(2); // 10.99
num.toFixed(3); // 10.988
num.toFixed(4); // 10.9877
num.toFixed(5); // 10.98765
num.toFixed(10); // 10.9876543210
num.toFixed(14); // 10.98765432100000
```

## 2. 계산/정수 처리

```javascript
Math.abs(); // 절대값 반환
Math.max(); // 인자 중 가장 큰 값 반환 ex. Math.max(1,2,3) - 3 , Math.max([4,5,6]) - 6
Math.min(); // 인자 중 가장 작은 값 반환 - Math.max 반대
Math.pow(x, y); // 인자간 거듭제곱 값 반환 === x**y와 동일
Math.random(); // 0이상 1미만 랜덤값 반환
Math.sqrt(); // 제곱근 반환
```


javascript basic 3 math


# JavaScript 배열 다뤄보기

## 1. 배열 수정

```javascript
let Arr = [1, 2, 3, 4, 5];

// Arr배열의 0번째를 123으로 수정
Arr[0] = 123; // Arr = [123,2,3,4,5]
```

## 2. 배열 정렬 (Array.sort())

array.sort()는 매개변수가 입력되지 않으면 유니코드 순서에 따라 정렬된다.

또한 sort()는 원본 array를 참조하기 때문에 sort()를 통한 정렬은 원본 array도 동일하게 변경된다.

### 숫자 배열 정렬

```javascript
let arr = [1, 3, 2, 4];

arr.sort(); // [1,2,3,4]
arr.sort((a, b) => a - b); // [1,2,3,4]
arr.sort((a, b) => b - a); // [4,3,2,1]
```

### 문자 배열 정렬 (대소문자 구분x)

```javascript
let arr3 = ["jon", "awre", "gwgw", "zgfzg"];

// 오름차순
arr.sort(function (a, b) {
  const upperCaseA = a.toUpperCase();
  const upperCaseB = b.toUpperCase();

  if (upperCaseA > upperCaseB) return 1;
  if (upperCaseA < upperCaseB) return -1;
  if (upperCaseA === upperCaseB) return 0;
}); // ['awre', 'gwgw', 'jon', 'zgfzg']

// 내림차순
arr.sort(function (a, b) {
  const upperCaseA = a.toUpperCase();
  const upperCaseB = b.toUpperCase();

  if (upperCaseA < upperCaseB) return 1;
  if (upperCaseA > upperCaseB) return -1;
  if (upperCaseA === upperCaseB) return 0;
}); // ['zgfzg', 'jon', 'gwgw', 'awre']
```

### 영어가 아닌 한글 등의 문자 정렬

```javascript
let arr = ["가", "나", "바", "다"];

arr1.sort((a, b) => a.localeCompare(b)); // ['가', '나', '다', '바']
arr1.sort((a, b) => b.localeCompare(a)); // ['바', '다', '나', '가']
```

## 3. 배열 메서드

```javascript

let Arr = [1,2,3,4,5]

    // 배열의 마지막에 새로운 요소를 추가 / 변경된 배열의 길이를 반환
Arr.push(12) // Arr = [1,2,3,4,5,12] / 6

	// 배열의 마지막 요소를 제거 / 한 후, 제거한 요소를 반환
   .pop() // Arr = [1,2,3,4] / 5

   // 배열의 첫 번째 자리에 새로운 요소를 추가/ 변경된 배열의 길이를 반환
   .unshift(12) // Arr = [12,1,2,3,4,5] / 6

   // 배열의 첫 번째 요소를 제거 /  제거한 요소를 반환
   .shift() // Arr = [2,3,4,5] / 1

   // 배열의 1번째 index부터 2개 원소 제거
   .splice(1, 2) // Arr = [1, 4, 5] / [2, 3] 제거됨

   // 배열 반전
   .reverse() 배열 반전 // [5,4,3,2,1]

   // 배열 계산
   //Arr.reduce((이전결과, 현재요소)=>이전결과+현재요소, 초기값)
   // 초기값이 없는 경우 acc = Arr[0] , cur = Arr[1] 이 된다.
   .reduce((acc,cur)=>acc+cur) 배열 계산 // 15

    // 배열 추출
    // .slice(x, y) x이상 y미만 index에 해당하는 배열 추출
    // 매개변수가 x밖에 없다면 x 이상 index에 해당하는 배열 추출
    // 매개변수가 음수인 경우 ex. (-2) 라면, 배열 끝에서 2번째 index 이상의 배열 추출
    .slice(0, 2) // [1,2]

```


javascript basic 4 array 1


# 고차함수와 메서드를 통해 JavaScript 배열 다뤄보기

## 고차함수란?

> 함수를 인자로 받거나, 함수를 반환함으로써 작동하는 함수로, .map() , .filter() , .forEach() , .reduce() 등이 있다.

### 참고

아래의 메서드들은 모두 원본 배열에 영향을 주지 않는다.

또한 함수 안의 화살표 함수 arr.filter/map/...((element)=>(element>2)) 와 같이 괄호()를 이용하면 return을 해줄 필요가 없지만, arr.filter/map/...((element)=>{return element > 2}) 처럼 중괄호를 사용하면 return을 꼭 해줘야 한다.

### Array.filter()

특정 조건을 부합하는 값만 모아서 새로운 배열을 만들어준다.

```javascript
// ex
const arr = ["a", "b", "b", "c"];
const filtered = arr.filter(element => element != "b"); // arr의 원소는 b가 아닌 값으로 거른다.
console.log(arr); // ['a', 'b', 'b', 'c']
console.log(filtered); // ['a', 'c']

const arr_num = [0, 1, 2, 3, 4, 5];
const new_array = arr_num.filter(element => element > 3); // arr_num의 원소는 3을 초과한다
console.log(new_array); // [ 4, 5 ]
```

### Array.map()

반복문처럼 사용 가능. 원본 배열을 흐트러뜨리지 않고, 새로운 배열을 반환한다.

단, key 값 같은 경우에는 값이 재할당되기 때문에 원본과 비교하는 의미가 없다. (ex. 리액트 사용 시)

```javascript
const array_num = [0, 1, 2, 3, 4, 5]; // arr_n은 상수이지만
const new_arr_num = array_num.map(
  element => element * 10, // 요렇게 map으로 *10을 돌려주면
);
console.log(new_arr_num); // [ 0, 10, 20, 30, 40, 50 ] // 원본 배열 변경 없이 새 배열이 잘 만들어진다.
```

### Array.concat()

두 배열을 합친다. 단, 중복 제거는 하지 않는다.

```javascript
const array_num = [0, 1, 2, 3, 4, 5];
const new_array = [4, 5];
const merge = array_num.concat(new_array);
console.log(merge); // [0, 1, 2, 3, 4, 5, 4, 5]
```

### Array.from()

배열로 만들어준다.

```javascript
const my_name = "vihan9";
const my_name_array = Array.from(my_name);
console.log(my_name_array); // [ 'v', 'i', 'h', 'a', 'n', '9' ]

// 조건을 넣어 배열을 만들고 싶다면? ex
const my_name_array = Array.from({ length: 4 }, (item, index) => index);
console.log(my_name_array); // [ 0, 1, 2, 3 ] // length가 4인 배열을 만들어준다.

// 어떤 배열을 index 값 배열로 바꾸고 싶다면? ex
const my_name = "vihan9";
const num_array = Array.from(my_name, (item, index) => index);
console.log(num_array); // [ 0, 1, 2, 3, 4, 5 ]
```

### Array.find()

숫자열 배열의 특정 값을 찾아주며, 조건에 맞는 첫 번째 값을 호출해준다.

```javascript
const arr_num = [0, 1, 2, 3, 4, 5];
const find_num = arr_num.find(v => v > 3);
console.log(find_num); // 4 // 3을 초과하는 첫 값인 4를 출력한다.
```

### indexOf()

배열에서 지정된 요소를 찾을 수 있는 첫 번째 반환하고, 존재하지 않으면 -1을 반환한다.

```javascript
const comment = "오늘도 오류 없는 하루가 되게 해주세요";
const searchStr = "오류";
const searchStr2 = "해주세요";

const indexOfFirst = comment.indexOf(searchStr);
const indexOfFirst2 = comment.indexOf(searchStr2);

console.log(indexOfFirst); // 4 // 오류는 4번째 인덱스부터 시작한다.
console.log(indexOfFirst2); // 17 // 해주세요는 17번째 인덱스부터 시작한다.
```


javascript basic 4 array 2


# for문 사용법

## for문

```javascript

const arr = [1,2,3,4,5,6,7,8,9,10];

const newArr = []
 (초기값(i=0) ; 조건(i가 10 미만까지 반복) ; 증감문(i는 1씩 증가한다.))
for(let i = 0;i<arr.length;i++){
    newArr.push(arr[i])
}
// console.log
[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]

// 원한다면 조건문을 통해 반복 중단 가능
for(~~){
	if(a===b){
    	braek
    }
}

// for문은 i를 통해 반복할 횟수를 설정하여 원하는 반복작업을 // 실행하게 해준다.

```

## for ~ of

```javascript
let test1 = [1, 2, 3, 4, 5];

let test2 = [4, 5, 6, 7, 8];

// test1 배열 안의 모든 요소를 순회
for (const items of test1) {
  test2.push(items);
}
console.log(test2); // [4, 5, 6, 7, 8, 1, 2, 3, 4, 5]
```

## for ~~ in

```javascript
const obj = { a: 1, b: 2, c: 3 };

// 오브젝트 안의 모든 객체 순회
for (const property in obj) {
  console.log(`${property}: ${obj[property]}`);
}

// "a: 1"
// "b: 2"
// "c: 3"
```

## while

while문의 첫 괄호() 안의 값이 true인 경우 반복해서 실행된다.

```javascript
let n = 0;

// n이 3 미만인 경우는 반복하여 실행
while (n < 3) {
  n++;
}

console.log(n); // 3
```

# 배열 메서드 반복문처럼 사용하기

## Array.forEach()

forEach 메서드는 주어진 함수를 배열 요소 각각에 대해 실행한다.

```javascript

const arr = [1,2,3,4,5,6,7,8,9,10];

// element라는 이름은 중요하지 않다. 상황에 맞는 이름을 사용하는 것이 중요하다.
arr.forEach((element)=>console.log(element));

// console.log
1 2 3 4 5 6 7 8 9 10

// 간단 예제

arr.forEach((element)=>console.log(element*10)); // 10 20 30 40 --- 80 90 100

// for문처럼 화살표 함수 오른쪽 부분에 push 등과 같은 메서드를 통해 새 배열을 만들어줄 수도 있다.
const newArr = [];
arr.forEach((item)=>{newArr.push(item)});
// newArr =
[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]

```

## .map()

forEach와 유사하게 배열 안의 각 요소들에게 콜백 함수를 적용시킨다.

```javascript
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let ex = arr.map(item => item * 10)[
  //console.log(ex)
  (10, 20, 30, 40, 50, 60, 70, 80, 90, 100)
];

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let ex = arr.map((item, index) => item * 10 + `(${index}번째)`)[
  //console.log(ex)
  ("10(0번째)",
  "20(1번째)",
  "30(2번째)",
  "40(3번째)",
  "50(4번째)",
  "60(5번째)",
  "70(6번째)",
  "80(7번째)",
  "90(8번째)",
  "100(9번째)")
];
```


javascript basic 5 loop


## 포스팅 시점 nestjs 버전 : 9.x.x

새로운 토이 프로젝트를 만들면서 백엔드를 구축할 프레임워크로 nestjs를 이용하기로 마음먹었다.

원래 사용하고 있던 javascript/typescript와 동일한 언어를 사용하기 때문에 백엔드 구축에 비교적 진입장벽이 낮다고 생각했기 때문에다.

# nest 작동순서

request -> controller -> service -> controller -> response 순으로 작동하나, DB와 관련된 일을 시키기 위해서는 repository를 생성해야한다고 한다. 즉,

request -> controller -> service -> repo\* -> service -> controller -> response
로 한 단계가 추가된다. (Repostitory pattern)

@EntityRepository를 통해 레포지토리를 설정해주는 방식이 많이 보였지만

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlkldE%2FbtrUQbTjKZA%2FA6hFzyRy8SsueBbUk8cTA1%2Fimg.png)

현재 버전에서는 사용할 수 없어 다른 방법을 알아봤다.

## 기본 설정

config 설정

```typescript
// src/configs/typeorm.configs.ts

export const typeORMConfig: TypeOrmModuleOptions = {
  // Database Type
  type: "postgres", // 본인은 pg를 사용
  host: "localhost",
  port: 5432,
  username: "postgres",
  password: "password",
  database: "database",
  entities: [__dirname + "/../**/*.entity.{js,ts}"], // 해당 경로 + 엔티티이름.entity.{js.ts}로 된 엔티티를 이용
  // autoLoadEntities: true, // 위와 다르게 entity들 알아서 찾아줌
  synchronize: true, // @@@@@@@@ 배포할때 true 사용 시 데이터 삭제될 수 있음. production 단계에서는 필히 false로 해줄 것 권장 @@@@@@
};
```

config 설정 후 root 모듈에 import

```typescript
// app.module.ts

import { Module } from "@nestjs/common";
import { AppController } from "./app.controller";
import { PostlistModule } from "./postlist/postlist.module";
import { typeORMConfig } from "./configs/typeorm.configs";
import { TypeOrmModule } from "@nestjs/typeorm/dist";

@Module({
  imports: [TypeOrmModule.forRoot(typeORMConfig), PostlistModule],
  controllers: [AppController],
  providers: [],
})
export class AppModule {}
```

entity 생성

```typescript
// src/postlist/entities/postlist.entity.ts

import { BaseEntity, Column, PrimaryGeneratedColumn, Entity } from "typeorm";

@Entity()
export class Postlist extends BaseEntity {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  title: string;

  @Column()
  content: string;

  @Column()
  nickname: string;

  @Column()
  imageUrl?: string;
}
```

> config 설정 시 entities에 이름을 ~~.entity.{js.ts} 로 설정해놓고, 정작 entity 파일 이름을 설정한 형식과 다르게 작성하면 [EntityMetadataNotFound] 에러를 띄우게 되기 때문에 설정한대로 이름을 지어줘야 한다.

참조 : https://github.com/typeorm/typeorm/issues/1327

## custumRepository 만들기

본인은 src에 database 디렉토리를 만들어, 데코레이터와 모듈을 그 안에 넣어줬다.

```typescript
// src/database/typeorm-ex.decorator.ts

import { SetMetadata } from "@nestjs/common";

export const TYPEORM_EX_CUSTOM_REPOSITORY = "TYPEORM_EX_CUSTOM_REPOSITORY";

export function CustomRepository(entity: Function): ClassDecorator {
  return SetMetadata(TYPEORM_EX_CUSTOM_REPOSITORY, entity);
}

// typeorm-ex.module.ts

import { DynamicModule, Provider } from "@nestjs/common";
import { getDataSourceToken } from "@nestjs/typeorm";
import { DataSource } from "typeorm";
import { TYPEORM_EX_CUSTOM_REPOSITORY } from "./typeorm-ex.decorator";

export class TypeOrmExModule {
  public static forCustomRepository<T extends new (...args: any[]) => any>(
    repositories: T[],
  ): DynamicModule {
    const providers: Provider[] = [];

    for (const repository of repositories) {
      const entity = Reflect.getMetadata(
        TYPEORM_EX_CUSTOM_REPOSITORY,
        repository,
      );

      if (!entity) {
        continue;
      }

      providers.push({
        inject: [getDataSourceToken()],
        provide: repository,
        useFactory: (dataSource: DataSource): typeof repository => {
          const baseRepository = dataSource.getRepository<any>(entity);
          return new repository(
            baseRepository.target,
            baseRepository.manager,
            baseRepository.queryRunner,
          );
        },
      });
    }

    return {
      exports: providers,
      module: TypeOrmExModule,
      providers,
    };
  }
}
```

## 사용할 repository 생성

```typescript
// src/postlist/repository/postlist.repository.ts

import { CustomRepository } from "src/database/typeorm-ex.decorator";
import { Repository } from "typeorm";
import { Postlist } from "../entities/postlist.entity";

@CustomRepository(Postlist)
export class PostlistRepository extends Repository<Postlist> {}
```

## module에 생성한 repository import

```typescript
// src/postlist/postlist.module.ts

import { Module } from "@nestjs/common";
import { PostlistController } from "./postlist.controller";
import { PostlistService } from "./postlist.service";
import { PostlistRepository } from "./repository/postlist.repository";
import { TypeOrmExModule } from "src/database/typeorm-ex.module";

@Module({
  imports: [TypeOrmExModule.forCustomRepository([PostlistRepository])],
  controllers: [PostlistController],
  providers: [PostlistService],
})
export class PostlistModule {}
```

### Module에 import 후 service 비즈니스 로직에만 repository를 넣어주면 된다.

```typescript
// src/postlist/postlist.service.ts

import { Injectable, NotFoundException } from "@nestjs/common";
import { UpdatePostDto } from "./dto/update-postlist.dto";

import { PostlistRepository } from "./repository/postlist.repository";
import { Postlist } from "./entities/postlist.entity";
import { CreatePostDto } from "./dto/create-postlist.dto";

@Injectable()
export class PostlistService {
  constructor(private readonly postlistRepository: PostlistRepository) {}

  async getAllPost(): Promise<Postlist[]> {
    const found = await this.postlistRepository.find();
    return found;
  }

  async getPostById(id: number): Promise<Postlist> {
    const found = await this.postlistRepository.findOne({ where: { id: id } });
    if (!found) {
      throw new NotFoundException(`Cannot find post with id ${id}`);
    }
    return found;
  }
}

// src/postlist/postlist.controller.ts

import { Body, Controller, Get, Param, Patch, Post } from "@nestjs/common";
import { CreatePostDto } from "./dto/create-postlist.dto";
import { PostlistService } from "./postlist.service";
import { UpdatePostDto } from "./dto/update-postlist.dto";
import { Delete } from "@nestjs/common/decorators";
import { Postlist } from "./entities/postlist.entity";

@Controller("postlist")
export class PostlistController {
  constructor(readonly postlistService: PostlistService) {}

  @Post()
  createOne(@Body() createPostDto: CreatePostDto): Promise<Postlist> {
    return this.postlistService.createPost(createPostDto);
  }

  @Get()
  getAll(): Promise<Postlist[]> {
    return this.postlistService.getAllPost();
  }

  @Get(":id")
  getOne(@Param("id") id: number): Promise<Postlist> {
    return this.postlistService.getPostById(id);
  }

  @Patch(":id")
  updateOne(
    @Param("id") id: number,
    @Body() updateData: UpdatePostDto,
  ): Promise<Postlist> {
    return this.postlistService.updatePost(id, updateData);
  }

  @Delete(":id")
  deleteOne(@Param("id") id: number): Promise<void> {
    return this.postlistService.deletePost(id);
  }
}
```

필요한 로직을 설정한 후 postman을 작동시켜주면 정상적으로 실행되는 것을 볼 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbMxspb%2FbtrUIZG6vWP%2F0dVetFuaUfkfuI9EXCKeN0%2Fimg.png)

nextjs와 동시에 작업하기 위해 nestjs 포트를 3001로 설정했지만, 보통은 nest 설치 시 app에 3000으로 설정된다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcOfHG5%2FbtrUOQBYHjX%2FoGOqOJtiF2KbPiyKu9JCdK%2Fimg.png)

DB는 postgreSQL을 이용했다.
정상적으로 테이블에 있는 데이터가 추출되는 것이 잘 확인된다.

### 참고 :

https://orkhan.gitbook.io/typeorm/readme_ko

https://docs.nestjs.com/techniques/database


Entityrepository()를 대신한 Repository 생성

nestjs custom repository


# Nextjs에서 로딩처리하기

### 모든 페이지를 미리 렌더링하는 NextJS 특성상, 다른 페이지로 라우팅이 진행될때, 사용자는 가만히 멈춰있는 화면을 보게될 수 있다. 때문에 페이지 전환을 정지화면으로 두지 않기 위해 로딩 처리를 구현해볼 수 있다.

## 로딩 스피너 세팅

```typescript
// _app.tsx

// 미리 만들어놓은 로딩 훅과 로딩 스피너
import { useLoading } from "src/hooks/useLoading";
import { LoadingSpinner } from "src/components/videos/video/LoadingSpinner";

<Layout>
  {isLoading ? <LoadingSpinner /> : null}
  <Component {...pageProps} />
</Layout>;
```

로딩스피너는 CSS로 만들어도 좋고, SVG나 GIF, 라이브러리 등 자유롭게 적용해도 좋다.

## 라우팅 시 적용될 이벤트 설정

```typescript
// useLoading.ts

import Router from "next/router";
import { useEffect, useState } from "react";

export const useLoading = () => {
  const [nowLoading, setNowLoading] = useState<boolean>(false);
  useEffect(() => {
    const start = () => {
      setNowLoading(true);
    };
    const end = () => {
      setNowLoading(false);
    };
    Router.events.on("routeChangeStart", start);
    Router.events.on("routeChangeComplete", end);
    Router.events.on("routeChangeError", end);
    return () => {
      Router.events.off("routeChangeStart", start);
      Router.events.off("routeChangeComplete", end);
      Router.events.off("routeChangeError", end);
    };
  }, []);

  return nowLoading ? true : false;
};
```

- routeChangeStart(url, { shallow }) - 라우트가 변경되기 시작할때 트리거됨.

- routeChangeComplete(url, { shallow }) - 라우트가 완전히 변경되었을 때 트리거됨.

- routeChangeError(err, url, { shallow }) - 라우트 변경 중에 에러가 발생했거나, 취소되었을 때 트리거됨.

\_app.tsx(jsx)에 로딩 스피너나 로딩 페이지를 적용해 놓으면,

라우팅으로 인한 페이지 이동이 일어날 때마다 원하는 로딩 창을 호출해줄 수 있다.

## 적용된 페이지

![image](https://blog.kakaocdn.net/dn/cWz72g/btrSmvngm4A/hgKg4FviDpAqQk5U6kGHXK/img.gif)


nextjs loading


### 이번에 새로 만들고 있는 토이 프로젝트를 작업하던 중, 모바일 화면일때만 화면을 보여주고 싶었다. 단, 모든 컴포넌트에 미디어쿼리를 통해 작성해줄 수는 없기에 react-responsive를 적용해 화면이 481px을 넘어가면 고정된 페이지를 보여줄 수 있도록 코드를 작성했다.

## react-responsive 설치

```bash
yarn add react-responsive
```

## hook 설정

```typescript
// hook
// useMideaQuery.tsx
export const Desktop = ({ children }: any) => {
  const isDesktop = useMediaQuery({
    minWidth: 481,
  });
  return isDesktop ? children : null;
};

export const Mobile = ({ children }: any) => {
  const isMobile = useMediaQuery({
    minWidth: 481,
  });
  return Mobile ? children : null;
};
```

## \_app.ts 적용

```typescript
// _app.tsx

// ...
import { Mobile } from "src/hooks/useMideaQuery";
import { CannotDesktop } from "src/desktop/CannotDesktop";

<>
  <Mobile>
    <Layout>
      {isLoading ? <LoadingSpinner /> : null}
      <Component {...pageProps} />
    </Layout>
  </Mobile>
  <Desktop>
    <CannotDesktop />
  </Desktop>
</>;
```

똑같은 코드로 리액트 코드에 적용할 때는 문제가 없었지만, Nextjs를 이용한 이번 상황의 경우 Hydration 에러가 발생했다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbjYUXg%2FbtrTRCeaovE%2FwQr4OZdJectnkkG06XmTEk%2Fimg.png)

vercel로 배포할 때는 정상적으로 빌드되기는 했지만

로컬에서 작업할때 지속적으로 발생하는 오류 메세지 창이 불편하기도 하여 바로 처리해봤다.

> Hydration failed because the initial UI does not match what was rendered on the server

초기 UI가 서버에서 렌더링된 것과 일치하지 않는다고 한다.

https://nextjs.org/docs/messages/react-hydration-error

공식 페이지를 보면 "애플리케이션을 렌더링하는 동안 미리 렌더링된 React 트리(SSR/SSG)와 브라우저에서 첫 번째 렌더링 중에 렌더링된 React 트리 간에 차이가 있었기 때문에 발생한 오류"라고 한다.

일반적으로 이 문제는 사전 렌더링과 브라우저 간에 다를 수 있는 항목에 의존하는 특정 라리브러리 또는 애플리케이션 코드를 사용하여 발생한다고 하는데,

나의 경우, react-responsive에 의한 경우였다.

## 코드 수정

```typescript
// useMideaQuery.tsx

import { useEffect, useState } from "react";
import { useMediaQuery } from "react-responsive";

export const Mobile = () => {
  const [mobile, setMobile] = useState<boolean>(false);
  const isMobile = useMediaQuery({ maxWidth: 480 });

  const checkResize = () => {
    if (isMobile) {
      setMobile(true);
    } else {
      setMobile(false);
    }
  };

  useEffect(() => {
    checkResize();
  }, [isMobile]);

  return mobile;
};
//_app.tsx

<RecoilRoot>
  {isMobile ? (
    <Layout>
      {isLoading ? <LoadingSpinner /> : null}
      <Component {...pageProps} />
    </Layout>
  ) : (
    <CannotDesktop />
  )}
</RecoilRoot>;
```

useMideaQuery가 window 화면을 기준으로 동작하기 때문에,

공식문서의 예제와 비슷하게 useState를 통한 boolean 값으로 화면을 노출시켜줬다.

위의 방식을 적용하니 hydration 에러 없이 잘 작동하는 모습을 볼 수 있었다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdH0CZg%2FbtrTRp0izJZ%2FiolwpQXLvGOommEBhpCkaK%2Fimg.png)


nextjs react responsive


### React를 사용하면서 서버와 연결 전, Post Man을 통해 임시로 서버를 연결해 React와 소통하는 데이터와 view가 어떻게 처리되는지 확인하고 싶을때 사용해볼 수 있다.

postman 링크 : https://www.postman.com/

## json-server 설치

```bash
yarn add json-server
```

위 명령어 입력 시 db.json 파일이 자동으로 생성된다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fle0HO%2FbtrMjcfRkOG%2FPMsBpdgzHf6545oXRlN8BK%2Fimg.png)

설치가 완료된 후 아래의 명령어를 입력하면 json server가 실행된다.

## json-server 실행

```bash
yarn json-server --watch db.json --port 3001
```

> json-server를 설치해줄때 생성된 db.json 파일을 실행하는데, 3001번 포트를 사용한다는 의미이다. 포트를 설정해주지 않으면 기본값은 3000이다.

> 보통 React를 로컬로 실행시킬때의 포트도 3000이기 때문에 3001번으로 열어줬다. 포트번호는 3001이든 4000이든 5000이든 사용하고 있는 포트번호만 아니면 된다.

## postman 사용

이제 임시 DB를 사용하고 있기 때문에 Post Man을 설치하거나, 웹에 로그인을 한 후, json-server가 실행된 상태로 post man에 적용하고자 하는 url을 입력해주면 GET, POST, PUT, DELETE 등 다양한 요청을 처리할 수 있게 된다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fl4yDj%2FbtrMkdzirLp%2FweLBKktEnHFX5QcT4NHTK1%2Fimg.png)

사용되는 url은 db.json에 있는 목록명을 기준으로 적용된다.

```javascript

// ex

{
  "comments": [
    {
      "id": 1,
      "profile_url": "https://picsum.photos/id/1/50/50",
      "author": "abc_1",
      "content": "UI 테스트는 어떻게 진행하나요",
      "createdAt": "2022-03-01"
    },
    {
      "id": 2,
      "profile_url": "https://picsum.photos/id/2/50/50",
      "author": "abc_2",
      "content": "막히면 대답은 빨리 해주나요",
      "createdAt": "2022-03-02"
    },
  ],
  "post": [
    {
      "id": 1,
      "author": "abc_1",
      "content": "UI 테스트는 어떻게 진행하나요",
      "createdAt": "2022-03-01"
    }
    {
      "id": 2,
      "author": "abc_2",
      "content": "막히면 대답은 빨리 해주나요",
      "createdAt": "2022-03-01"
    }
  ]
}

```

예를 들어 db.json이 위와 같이 돼있는 상태라면

### http://localhost:3001/post - post 데이터

1. GET : http://localhost:3001/post - 전체 post 목록 불러오기
2. GET : http://localhost:3001/post/1 - id가 1인 post 불러오기
3. POST : http://localhost:3001/post - 새 post 생성(저장)
4. PUT : http://localhost:3001/post/1 - id가 1인 post 수정하기
5. DELETE : http://localhost:3001/post/1 - id가 1인 post 삭제하기

### http://localhost:3001/comments - comments 데이터

1. GET : http://localhost:3001/comments - 전체 comments 목록 불러오기
2. GET : http://localhost:3001/comments/1 - id가 1인 comments 불러오기
3. POST : http://localhost:3001/comments - 새 comments 생성(저장)
4. PUT : http://localhost:3001/comments/1 - id가 1인 comments 수정하기
5. DELETE : http://localhost:3001/comments/1 - id가 1인 comments 삭제하기

위와 같은 방식으로 기본적인 동작을 사용해볼 수 있고, header 값이나 body 값 설정 등 다양한 작업을 진행해볼 수 있다.

Redux를 사용할때, 해당 데이터들을 추출하여 전역 상태로 관리해보는 등의 작업을 실행할 수 있다.


postman을 이용해 redux Mock server(json-server) 사용해보기

redux mock server


# ReduxToolkit

리덕스 툴킷은 일반적인 리덕스보다 store 설정을 용이하게 해주고, 추가적인 패키지 설치가 필요하지 않게 설계되었으며, 보일러플레이트(여러 군데에서 반복되는 코드)를 최소화하기 위해 만들어졌다.

더 사용하기 쉽다는 의미이다. 이번 글에서는 미들웨어인 AsyncThunk와 함께 사용하는 방법을 확인할 수 있다.

## 1. 설치

```bash
yarn add @reduxjs/toolkit react-redux
```

## 2. store 생성

```javascript
// src/redux/store.js

import { configureStore } from "@reduxjs/toolkit";
import posts from "./modules/postSlice"; // 만들어줄 Slice

const store = configureStore({
  reducer: {
    posts,
  },
});
export default store;
```

## 3. 최상위 파일(index.js, App.js 등)에 Provider import해오기

```javascript
// import -- 기존 코드들 --
import { Provider } from "react-redux";
import store from "./redux/store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>,
);
```

## 4. 슬라이스 생성

2번의 store에 import 해줄 파일이다.

```javascript
// postSlice.js

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import axios from "axios";

const BASE_URL = "http://localhost:3001";

const initialState = {
  // data, isLoading, error로 상태관리
  posts: [],
  isLoading: false,
  error: null,
};

export const getPosts = createAsyncThunk(
  "GET_ALL_Posts",
  async (payload, thunkAPI) => {
    try {
      const { data } = await axios.get(`${BASE_URL}/posts`);
      return thunkAPI.fulfillWithValue(data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  },
);

export const addPosts = createAsyncThunk(
  "POST_Posts",
  async (payload, thunkAPI) => {
    try {
      const { data } = await axios.post(`${BASE_URL}/posts`, payload);
      console.log("data", data);
      return thunkAPI.fulfillWithValue(data);
    } catch (errer) {
      return thunkAPI.rejectWithValue(errer);
    }
  },
);

export const updatePosts = createAsyncThunk(
  "UPDATAE_Posts",
  async (payload, thunkAPI) => {
    try {
      console.log(payload);
      const { data } = await axios.put(
        `${BASE_URL}/posts/${payload.id}`,
        payload,
      );
      console.log("data", DataTransfer);
      return thunkAPI.fulfillWithValue(data.data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  },
);

export const deletePosts = createAsyncThunk(
  "DELETE_posts",
  async (payload, thunkAPI) => {
    try {
      await axios.delete(`${BASE_URL}/posts/${payload}`);
      return thunkAPI.fulfillWithValue(payload);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  },
);

export const postsSlice = createSlice({
  name: "posts",
  initialState,
  reducers: {},
  extraReducers: {
    /* Pending */
    [getPosts.pending]: (state, action) => {
      state.isLoading = true;
    },
    [addPosts.pending]: (state, action) => {
      state.isLoading = true;
    },
    [deletePosts.pending]: (state, action) => {
      state.isLoading = true;
    },
    /* Fulfilled */
    [getPosts.fulfilled]: (state, action) => {
      state.isLoading = false;
      console.log(action);
      state.posts = [...action.payload];
    },
    [addPosts.fulfilled]: (state, action) => {
      state.isLoading = false;
      state.posts.push(action.payload);
    },
    [updatePosts.fulfilled]: (state, action) => {
      state.isLoading = false;
      console.log(action);
      const newState = state.posts.map(item =>
        action.meta.arg.id === item.id
          ? { ...item, content: action.meta.arg.content }
          : item,
      );
      state.posts = newState;
      return state;
    },
    [deletePosts.fulfilled]: (state, action) => {
      state.isLoading = false;
      const newState = state.posts.filter(item => item.id !== action.meta.arg);
      state.posts = newState;
      return state;
    },
    /* Rejected */
    [getPosts.rejected]: (state, action) => {
      state.isLoading = false;
      state.error = action.payload;
    },
  },
});

export default postsSlice.reducer;
```

이 상태에서 Postman을 통해 json 서버를 이용하기 때문에 BASE_URL은 로컬 경로로 설정해줬다.

extraReducers 의 pending, fulfilled, rejected는 각각 대기중/성공/실패 정도로 생각하면 된다.

아래와 같이 PostMan을 통해 db.json에 데이터가 정상적으로 확인되면

포스트맨 사용법 : https://lee-yo-han.github.io/redux/redux와-mock-server-사용하기

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fri6Yi%2FbtrMjiBl1Va%2FlCNsQyz5vPTIhIfBFfpC41%2Fimg.png)

아래와 같이 Redux hook을 통해 데이터를 자유롭게 사용할 수 있다.

```javascript
import { getPosts } from "../redux/modules/postSlice";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux"; // Redux hooks

export default function Home() {
  const data = useSelector(state => state.posts.posts); // postSlice에 있는 전역 State 가져오기
  const dispatch = useDispatch(); //dispatch 사용 준비

  useEffect(() => {
    dispatch(getPosts()); // dispatch 사용 dispatch(액션함수())
  }, []);

  console.log(data);

  return (
    <div>
      <p>redux랑 포스팅CRUD</p>
      <p>데이터를 주세욥</p>
      <ul>
        {data.map(item => (
          <li>
            <span>{item.id}</span>
            <span>{item.nickname}</span>
            <span>{item.content}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}
```

위의 코드에서는 액션 함수의 인자(괄호())가 비어있지만, Slice에 원하는 액션 함수들을 작성한 후 dispatch를 해줄때 데이터가 필요한 경우는 아래의 순서로 데이터가 처리된다고 생각하면 좋다.

### 데이터 처리 순서

```javascript

// jsx component
dispath(액션함수(id등의 데이터))

// => postSlice 파일 내의 액션 함수
export const addPosts = createAsyncThunk(
    "POST_Posts",
    async (payload, thunkAPI) => { // payload를 통해 데이터를 받고 아래 코드에서 처리할 수 있도록 함
      try {
        const { data } = await axios.post(`${BASE_URL}/posts`, payload);
        console.log("data", data);
        return thunkAPI.fulfillWithValue(data); // 요청 성공 부분
      } catch (errer) {
        return thunkAPI.rejectWithValue(errer);
      }
    }
  );

// => extraReducers
export const postsSlice = createSlice({
  name: "posts",
  initialState,
  reducers: {},
  extraReducers: {
    // ---- 생략 ----
    /* Fulfilled */
    [addPosts.fulfilled]: (state, action) => { // 요청 성공 시, action 인자를 통해 state(전역 상태)를 관리해줄 수 있음 (ex action.payload .---)
      state.isLoading = false;
      state.posts.push(action.payload);
    },
    // ---- 생략 ----
```

데이터가 정상적으로 화면으로 출력되는 것을 볼 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FKVbGZ%2FbtrMljZJHmV%2F3XHhLVMqFgXEAjz2HqKky0%2Fimg.png)

단, useSelector를 사용할 때, (state)=>state... 부분은 데이터에 따라 값의 구조가 다를 수 있기 때문에, console.log()를 통해 데이터를 어떻게 받아오는지 확인하며 코드를 작성해주자.

## 간단한 CRUD 적용 예시

![image](https://blog.kakaocdn.net/dn/bDrG2e/btrMjWLhmxB/gsemxzlV7oyCzREe8oHOM1/img.gif)

## AsyncThunk를 사용한다는 것은

공식문서 : https://redux-toolkit.js.org/api/createAsyncThunk

공식 문서에 반환된 Promise를 기반으로 LifeCycle 작업을 전달하는 Thunk 작업 생성자를 반환해 비동기 요청 LifeCycle을 처리하기 위한 표준 권장 접근 방식을 추상화한다는 내용이 있다

이것은 위의 데이터 처리 순서로 설명한 것과 유사하다.

```javascript

export const addPosts = createAsyncThunk(
    "POST_Posts",
    async (payload, thunkAPI) => {
      try {
        const { data } = await axios.post(`${BASE_URL}/posts`, payload);
        console.log("data", data);
        return thunkAPI.fulfillWithValue(data);
      } catch (errer) {
        return thunkAPI.rejectWithValue(errer);
      }
    }
  );

  ↑↑↑ 이 부분에서 Promise를 반환해주고




 ↓↓↓↓ 이 부분에서 대기/성공/실패 로 구분해 데이터를 처리해준다

 //Panding
 //Fulfilled
 ...

 [addPosts.fulfilled]: (state, action) => {
      state.isLoading = false;
      state.posts.push(action.payload); // 게시글을 추가했을때 처리해주는 방식
    },

 ...
 //Rejected

```

# 전체 예제코드

```javascript
// Home.jsx

import {
  deletePosts,
  getPosts,
  updatePosts,
  addPosts,
} from "../redux/modules/postSlice";

import { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

export default function Home() {
  const [inputValue, setInputValue] = useState();

  const data = useSelector(state => state.posts.posts);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getPosts());
  }, []);
  console.log(data);

  const addButton = () => {
    let addData = {
      nickname: "한삐",
      content: inputValue,
    };
    dispatch(addPosts(addData));
  };

  const deletButton = props => {
    dispatch(deletePosts(props));
  };

  const editButton = props => {
    let updateData = {
      id: props,
      nickname: "한삐",
      content: "냠냠1231241214",
    };
    dispatch(updatePosts(updateData));
  };

  return (
    <div>
      <p>redux랑 포스팅CRUD</p>
      <p>데이터를 주세욥</p>
      <input onChange={e => setInputValue(e.target.value)} type="text" />
      <button onClick={addButton}>글쓰기</button>
      <ul>
        {data.map(item => (
          <li key={item.id}>
            <div>
              <span>{item.id}</span>
              <br />
              <span>{item.nickname}</span>
              <br />
              <span>{item.content}</span>
              <br />
            </div>
            <div>
              <button onClick={() => editButton(item.id)}>수정</button>
              <button onClick={() => deletButton(item.id)}>삭제</button>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}
```

```javascript
// store.js
import { configureStore } from "@reduxjs/toolkit";
import posts from "./modules/postSlice";

const store = configureStore({
  reducer: {
    posts,
  },
});

export default store;
```

```javascript
// postSlice.js

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { current } from "@reduxjs/toolkit";
import axios from "axios";

const BASE_URL = "http://localhost:3001";

const initialState = {
  // data, isLoading, error로 상태관리
  posts: [],
  isLoading: false,
  error: null,
};

export const getPosts = createAsyncThunk(
  "GET_ALL_Posts",
  async (payload, thunkAPI) => {
    try {
      const { data } = await axios.get(`${BASE_URL}/posts`);
      return thunkAPI.fulfillWithValue(data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  },
);

export const addPosts = createAsyncThunk(
  "POST_Posts",
  async (payload, thunkAPI) => {
    try {
      const { data } = await axios.post(`${BASE_URL}/posts`, payload);
      console.log("data", data);
      return thunkAPI.fulfillWithValue(data);
    } catch (errer) {
      return thunkAPI.rejectWithValue(errer);
    }
  },
);

export const updatePosts = createAsyncThunk(
  "UPDATAE_Posts",
  async (payload, thunkAPI) => {
    try {
      console.log(payload);
      const { data } = await axios.put(
        `${BASE_URL}/posts/${payload.id}`,
        payload,
      );
      console.log("data", DataTransfer);
      return thunkAPI.fulfillWithValue(data.data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  },
);

export const deletePosts = createAsyncThunk(
  "DELETE_posts",
  async (payload, thunkAPI) => {
    try {
      await axios.delete(`${BASE_URL}/posts/${payload}`);
      return thunkAPI.fulfillWithValue(payload);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  },
);

export const postsSlice = createSlice({
  name: "posts",
  initialState,
  reducers: {},
  extraReducers: {
    /* Pending */
    [getPosts.pending]: (state, action) => {
      state.isLoading = true;
    },
    [addPosts.pending]: (state, action) => {
      state.isLoading = true;
    },
    [deletePosts.pending]: (state, action) => {
      state.isLoading = true;
    },
    /* Fulfilled */
    [getPosts.fulfilled]: (state, action) => {
      state.isLoading = false;
      console.log(action);
      state.posts = [...action.payload];
    },
    [addPosts.fulfilled]: (state, action) => {
      state.isLoading = false;
      state.posts.push(action.payload);
    },
    [updatePosts.fulfilled]: (state, action) => {
      state.isLoading = false;
      console.log(action);
      const newState = state.posts.map(item =>
        action.meta.arg.id === item.id
          ? { ...item, content: action.meta.arg.content }
          : item,
      );
      state.posts = newState;
      return state;
    },
    [deletePosts.fulfilled]: (state, action) => {
      state.isLoading = false;
      const newState = state.posts.filter(item => item.id !== action.meta.arg);
      state.posts = newState;
      return state;
    },
    /* Rejected */
    [getPosts.rejected]: (state, action) => {
      state.isLoading = false;
      state.error = action.payload;
    },
  },
});

export default postsSlice.reducer;
```


React reduxToolkit과 미들웨어 AsyncThunk 사용해보기

redux toolkit async thunk


javascript에서의 ReduxToolkit 사용 예제 : https://lee-yo-han.github.io/redux/redux-toolkit-사용해보기

## 1. 설치

```bash
yarn add @reduxjs/toolkit react-redux
```

## 2. store 설정

state와 dispatch type 생성

```typescript
// store.ts
import { configureStore } from "@reduxjs/toolkit";
import commentSlice from "./commentSlice";

const store = configureStore({
  reducer: {
    commentSlice,
  },
});
export default store;

export type RootState = ReturnType<typeof store.getState>; // 1. state type 가져오기
export type AppDispatch = typeof store.dispatch; // 2. dispatch type 가져오기
```

## 3. Redux hook 설정

dispatch 함수와 useSelector 실행을 위해, Redux hook을 따로 설정해준다.

```typescript
// useRedux.ts

import type { TypedUseSelectorHook } from "react-redux";
import type { RootState, AppDispatch } from "../redux/store"; // store에서 미리 설정해준 state와 dispatch type

export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
```

위의 설정을 마치면 javascript에서 dispatch를 사용하는 것과 같이 사용할 수 있다.

```typescript

// Form.tsx
import { useAppDispatch, useAppSelector } from "../hook/useRedux";
import { FormEvent } from "../type"; // 별도로 지정한 eventType
import { addComments } from "../redux/commentSlice"; // Slice의 action함수

export const Form = () => {
	const dispatch = useAppDispatch();

    const formData = {...}

    const onSubmitHandler = async (e: FormEvent, dispatch: any) => {
        e.preventDefault();
        dispatch(addComments(formData)); // 정상작동
    };

    return ( ...
}

```

참고 : https://redux-toolkit.js.org/usage/usage-with-typescript


Typescript react에서 ReduxToolkit 사용해보기

redux typescript react reduxtoolkit


# React에서 Redux 사용해보기

리덕스 툴킷 x

## Redux 설치

```bash
yarn add redux react-redux
```

1. src 디렉토리 안에 redux 폴더 생성
2. redux 폴더 안에 config, modules 폴더 생성 (생성할 state들의 그룹)
3. modules 폴더 안 store.js 생성
   > 폴더/파일 명은 목적이나 폴더 구조에 맞춰 자유롭게 생성해줘도 괜찮다.

## 스토어 생성

```javascript
// src/configStore.js

import { createStore, combineReducers } from "redux";
import todo from "./modules/todo"; // 모듈에 있는 reducer 불러오기

const rootReducer = combineReducers({});
const store = createStore(rootReducer);

export default store;
```

## 스토어 연동

```javascript
// 디렉토리 최상단 파일 ex/ index.js or app.js

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>,
);
reportWebVitals();
```

## reducer 편집

```javascript
// 예제
// todo.js - ./modules에 있는 파일

// Actions
const CREATE = "my-app/todo/CREATE";
const REMOVE = "my-app/todo/REMOVE";

// Reducer
//action이 없으면 state는 아래 initialState의 초기값, 있으면 action 값
export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case CREATE: {
      const new_todo_list = [...state.todos, action.todo];
      return { todos: new_todo_list };
    }
    case REMOVE: {
      const new_todo_list = action.todo;
      return { todos: new_todo_list };
    }

    // ...etc

    default:
      return state;
  }
}

// Action Creators
export function createTodo(todo) {
  console.log("create 액션 생성");
  return { type: CREATE, todo };
}

const initialState = {
  // createTodo(todo)의 초기값 설정
  todos: [
    {
      id: 1,
      name: "qwert",
    },
    {
      id: 2,
      name: "asdf",
    },
  ],
};

export function removeTodo(todo) {
  console.log("remove 액션 생성");
  return { type: REMOVE, todo };
}
```

## 컴포넌트에서의 사용

reducer를 모두 작성해준 후 컴포넌트에서 사용할 수 있다.

```javascript

// 리덕스 훅
import {useSelector , useDispatch} from "react-redux";


const test = () =>{
	// 해당 상수는 useSelector를 통해 reducer에 있는 state 값을 가져온다.
	const testList = useSelector((state=>state.todo.todos))
    // 액션을 생성하기 위해 준비
    const dispatch = useDispatch()

    const addBtn = () =>{
    	// ---실행하고싶은 코드들---
        // -------------------------
        // dispatch로 액션을 생성했으니, 원하는 처리는 reducer에서 입력하면 된다.
        dispatch(createTodo(reducer에서 처리하고 싶은 값))
    }
    return(
    	<div></div>
    )
}

```

참조 : https://ko.redux.js.org/


redux usage


# React Datepicker 사용하기

공식 문서

https://reactdatepicker.com/

### package 설치

```bash
yarn add react-datepicker
```

패키지 설치 후 아래와 같이 import해 사용할 수 있다.

```javascript
import DatePicker from "react-datepicker"; // 데이트픽커 import
import "react-datepicker/dist/react-datepicker.css"; // 데이트픽커 기본 CSS
import { ko } from "date-fns/esm/locale"; // 한국어 변환

export default function DatePickerTest() {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(null);

  return (
    <>
      <DatePicker local={ko} />
    </>
  );
}
```

달력은 props 설정을 통해 다양한 방식의 달력을 설정해줄 수 있다.

아래는 범위 지정 달력을 만드는 코드이다.

```javascript
export default function DatePickerTest() {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(null);

  const onChange = dates => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  };

  return (
    <DatePicker
      elected={startDate}
      onChange={onChange}
      startDate={startDate}
      endDate={endDate}
      locale={ko}
      selectsRange
      inline
    />
  );
}
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F5DkxI%2FbtrMUTz6YZb%2FpYNfcGfYjpM5GZlENLALTk%2Fimg.png)

위 코드는 selectsRange라는 속성의 달력을 이용한다.
다양한 속성은 상단의 공식 페이지 링크를 참고하면 좋다.

## 스타일 적용

custom header 같은 props 옵션 등을 통해 css 스타일을 줄 수 있지만, 스타일이 원하는대로 입히기 어려운 점도 있었고 전체적인 코드가 보기 불편하다는 생각이 들어 styled component를 통해 css를 적용해줬다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FzDzqF%2FbtrMWeKqb6T%2FkKiJfjfF1fP7vPcnWpyHOK%2Fimg.png)

```javascript

const StyledDatePickerWrapper = styled.section`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 380px;
  border-radius: 20px;
  box-shadow: 0 0 5px 0 rgb(71, 181, 255);

  .react-datepicker {
    background-color: white;
    border-color: rgb(198, 232, 255);
    border-radius: 20px;
  }

  /* ... */

```

코드가 길어지더라도 jsx와 철저하게 분리하고 싶다면 이런 방법도 나쁘지 않은 것 같다.


react datepicker


# react-responsive 사용해보기

공식 사이트 : https://yarnpkg.com/package/react-responsive

CSS의 mediaQuery를 사용해볼 수도 있지만, 간편하게 적용할 수 있는 패키지가 있어서 사용해봤다.

### 패키지 설치

```bash
yarn add react-responsive
```

### useMediaQuery 세팅

```javascript
// useMideaQuery.js

import { useMediaQuery } from "react-responsive";

export const Desktop = ({ children }) => {
  const isDesktop = useMediaQuery({
    minWidth: 481,
  });
  return isDesktop ? children : null;
};

export const Mobile = ({ children }) => {
  const isMobile = useMediaQuery({ maxWidth: 480 });
  return isMobile ? children : null;
};
```

위의 경우 모바일과 PC만 나눴지만 대략적인 분기점은 아래와 같이 설정해도 괜찮다

1. 낮은 해상도의 PC, 태블릿 가로 : ~1024px
2. 태블릿 가로 : 768px ~ 1023px
3. 모바일 가로, 태블릿 : 480px ~ 767px
4. 모바일 : ~480

### useMediaQuery 사용

```javascript
// Responsive.jsx

import { Desktop, Mobile } from "../../hooks/useMideaQuery";

export const Responsive = () => {
  return (
    <>
      <Desktop>
        <div>PC화면</div>
      </Desktop>
      <Mobile>
        <div>모바일화면</div>
      </Mobile>
    </>
  );
};
```

편의상 한 컴포넌트에 다 집어넣을 수도 있지만, 모바일과 데스크탑 환경의 view는 아예 다른 경우가 많기 때문에, 코드 관리를 편하게 하기 위해서는 모바일 컴포넌트를 따로 만드는게 더 나을 것 같다는 생각이 든다.


react media query


# 라이브러리 없이 모달창 만들어보기

모달 버튼이 있는 페이지

```javascript
// ModalTest.jsx

import ModalPage from "./ModalPage";
import { useState } from "react";

export default function ModalTest() {
  // 모달을 보여줄지 말지 상태를 관리하는 state를 만들어준다.
  const [showModal, setShowModal] = useState(false);

  // 모달 버튼을 클릭하면 열리고
  const openModal = () => {
    setShowModal(true);
  };
  // 활성화된 모달창 밖을 클릭하면 닫힌다.
  const closeModal = () => {
    setShowModal(false);
  };

  return (
    <>
      <button onClick={openModal}>모달이에옹</button>
      // 모달상태가 true면 ModalPage를 보여주고, 아니면 null // props로 showModal과
      closeModal을 전달한다.
      {showModal === true ? (
        <ModalPage showModal={showModal} closeModal={closeModal} />
      ) : null}
    </>
  );
}
```

모달 컴포넌트

```javascript
import styled from "styled-components";

export default function ModalPage({ showModal, closeModal }) {
  return (
    // 모달 밖을 클릭하면 모달창을 닫게 만든다.
    <StyledModalBackground onClick={closeModal}>
      // stopPropagation은 부모태그로부터의 이벤트 전파를 중지시킨다. // 이
      친구가 없으면 모달창 안쪽을 클릭해도 closeModal이 실행된다.
      <StyledModalContainer onClick={e => e.stopPropagation()}>
        <StyledModal>열린 모달창이에옹</StyledModal>
      </StyledModalContainer>
    </StyledModalBackground>
  );
}

// 위치를 대략 가운대로 정해주고
const StyledModalContainer = styled.div`
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
`;

// 모달 밖 배경색은 우리에게 익숙한 어두운 색으로 만들어주자
const StyledModalBackground = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 0;
  cursor: auto;
`;

// 모달창 사이즈는 용도에 맞춰 설정해준다.
const StyledModal = styled.div`
  width: 400px;
  height: 400px;
  background-color: white;
`;
```

브라우저 화면

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FOLJGf%2FbtrNjUdVndT%2FvgVskBO2xWeRwi01YQPzkk%2Fimg.png)

스타일은 용도에 맞게 다양하게 변경시킬 수 있다.


라이브러리 없이 React Modal 만들기

react modal non library


# useNavigate를 이용한 props 전달

### useNavigate로 다른 페이지의 화면으로 이동할 때, props처럼 값을 넘기는 방법을 사용해볼 수 있다.

```javascript

// 보내는컴포넌트.jsx

import { useNavigate } from "react-router-dom";

const Component1 = () => {
const navigate = useNavigate()

let someDatas = {
	name:"hihi"
    value:"here"
}

return
<div onClick={() => navigate(`/다른페이지주소`,{ state: someDatas });}>
	다른페이지로 이동
</div>
}



// 받는 컴포넌트.jsx

import { useLocation } from "react-router-dom";

const Component2 = () => {
	const location = useLocation();
	console.log(location);
}

```

위와 같이 작성은 아래와 같이 데이터를 받아오는 것을 보여준다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FedpbW9%2FbtrRGwsRGuz%2FKp5GIecYeABXw1FPbGLdsK%2Fimg.png)

하지만 데이터를 받는 페이지가 직접적으로 접속할 수 있는 페이지라면 그렇게 접속한 페이지는 아무 데이터가 없는 화면으로 노출될 수 있기 때문에, 전역 상태를 관리해줄지, 데이터를 넘겨줄지 상황에 알맞는 방식을 적용하는 것이 중요하다.


react navigate props


# FormData 저장 코드 간소화하기

하나의 폼에서 여러 개의 input 값을 변경하기 위해 함수를 만들어 간단하게 코드를 간소화시킬 수 있다.

```typescript
// form.tsx
<Container onSubmit={e => onSubmitHandler(e, dispatch)}>
  <input
    type="text"
    name="profile_url"
    placeholder="https://picsum.photos/id/1/50/50 - 필수 X"
    value={formData.profile_url}
    onChange={e => onChangeHandler(e)}
  />
  <br />
  <input
    type="text"
    name="author"
    placeholder="작성자"
    value={formData.author}
    onChange={e => onChangeHandler(e)}
    required
  />
  <br />
  <textarea
    name="content"
    placeholder="내용"
    value={formData.content}
    onChange={e => onChangeHandler(e)}
    required
  ></textarea>
  <br />
  <input
    type="text"
    name="createdAt"
    placeholder={`${todayDate()}`}
    disabled
    required
  />
  <br />
  <button type="submit">{isEdit ? "수정하기" : "등록"}</button>
</Container>;

// useForm.tsx
const [formData, setFormData] = useState<FormData>({
  profile_url: "",
  author: "",
  content: "",
  createdAt: todayDate(),
});

const onChangeHandler = (e: InputEvent) => {
  let type = e.target.name;
  let value = e.target.value;
  if (type === "profile_url")
    setFormData(prev => ({ ...prev, profile_url: value }));
  if (type === "author") setFormData(prev => ({ ...prev, author: value }));
  if (type === "content") setFormData(prev => ({ ...prev, content: value }));
  setFormData(prev => ({ ...prev, [type]: value }));
};
```

하지만 위와 같이 if문이 많아져 코드의 성능과 가독성을 떨어뜨릴 수 있기 때문에, 아래와 같이 변경해볼 수 있다.

```typescript
// useForm.tsx

const [formData, setFormData] = useState<FormData>({
  profile_url: "",
  author: "",
  content: "",
  createdAt: todayDate(),
});

const onChangeHandler = (e: InputEvent) => {
  const { name, value } = e.target.name;
  setFormData(prev => ({ ...prev, [name]: value }));
};
```

html input의 name 속성을 이용해 setState 코드를 간소화시킬 수 있는 방법이다.


react simple formdata code


# 리액트 스타일 컴포넌트에 hover 적용하기

```typescript
// &:hover를 넣는다.

const ButtonStyle = styled.button`
  &:hover {
    background-color: skyblue;
    color: blue;
  }
`;
```

비슷한 상황에서 a 태그를 사용할때 자동으로 설정되는 스타일도 수정해줄 수 있다.

```typescript
const LinkTag = styled.a`
  /* 밑줄 제거 */
  text-decoration: none;

  /* 마우스를 링크에 올려뒀을 때의 스타일 */
  &:hover {
  }
  /* 아직 방문하지 않은 링크의 스타일 */
  &:link {
  }
  /* 사용자가 방문한 적이 있는(클릭한 이후) 링크의 스타일 */
  &:visited {
  }
  /* 마우스로 링크를 클릭하고 뗄 때까지의 스타일 */
  &:active {
  }
`;
```


react에 styled-components를 이용해 hover 적용하기

react styled components hover


# react form에서 submit 이벤트 방지하기

### submit 이벤트가 발생하면 페이지가 새로고침이 된다.

단순히 페이지가 리프레시 되는 것도 좋은 사용자 경험이 아닌데, 임시로 저장돼있던 데이터(회원가입 정보 등)가 날아가면 React의 작동 방식을 거스를 뿐 아니라 사용자 경험에도 치명적이다.

떄문에 우리는 sumbit 이벤트를 멈춰줄 필요가 있다.

```javascript
const Header = () => {
  const onSubmit = e => {
    e.preventDefault(); // 해당 코드로 이벤트를 멈춰줄 수 있다.
  };

  return (
    <form>
      <input type="text" />
      // 버튼 타입도 submit으로 꼭 변경해준다.
      <button type="submit" onSubmit={e => onSubmit(e)}>
        입력
      </button>
    </form>
  );
};
```

위와 같이 작성하면 같은 폼 안에 있는 경우에 대해 submit 방지가 잘 되는 것을 확인할 수 있다.


form 태그에서 submit 이벤트 방지하기

react submit prevent default


# z-index 미적용시 해결방법

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F2c0QV%2FbtrXD8G7Ar9%2FpCFQ6eujsGgA0bKCKx1kpk%2Fimg.png)

위와 같이 z-index를 999로 적용해도 원하는대로 작동하지 않는 경우를 볼 수 있다.

### MDN 공식 문서 : https://developer.mozilla.org/ko/docs/Web/CSS/z-index

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F8pPBj%2FbtrXCijsq0h%2FkdCdCRUKvZIGe7dk8KPJf0%2Fimg.png)

해당 사진의 마지막 줄의 "자손의 z-index를 자기 외의 바깥 요소와 비교하지 않습니다." 이 부분으로 인한 문제로 생각됐다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fct1Z18%2FbtrXH8zek29%2Fjwx0ckk9YgnPRLS2sM06k0%2Fimg.png)

부모 요소는 부모 요소끼리, 자식 요소는 자식 요소끼리 경쟁하기 때문에, 기존 코드는 이와 같이 HeaderNav 안에 SideMenu가 있어 HeaderNav 내에서만 z-index를 비교하고 있던 것이었다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbUIap4%2FbtrXCicOSRi%2FzWiWf6wrtlUx9aK2uYKK7K%2Fimg.png)

이처럼 SideMenu를 HeaderNav 밖으로 빼주니, 아래와 같이 정상적으로 작동하는 모습을 볼 수 있었다.

### 정상 적용된 화면

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FwMc3x%2FbtrXFupLVFz%2FWH6kLZ1IbRxHnXK2bqkHa0%2Fimg.png)

## z-index가 제대로 작동하지 않을때 참고할만한 사항

1. 부모 요소는 부모 요소끼리 경쟁되고 있는지 확인한다.
2. Element가 static(position 속성의 default 값)이 아닌 position 속성이 설정되어있는지 확인한다.(relative, absolute, fixed, sticky)
3. opacity나 transform과 같은 css 속성이 설정돼있는지 확인한다. 해당 css요소가 설정돼있다면 1번의 기준에 맞춰 코드를 다시 작성해준다.

이정도면 버그를 수정하는데 충분하지만 더 싶도 깊은 내용은 아래를 참고해보면 좋을 것 같다.

참조 : https://coder-coder.com/z-index-isnt-working/


z-index가 올바르게 적용되지 않을때 적용해볼 수 있는 방법

react z index error


# 기본 TypeScript 타입 선언

```typescript

// 문자열
let str: string = "hello";

// 숫자
let num: number = 100;

// 배열
let arr: Array<number> = [10,20,30];
let arr2: number[] = [10,20,30];
let arr3: Array<string> = ["hello","hellololo" ];
let arr4: [string, number] = ["hello", 182];

// 객체
let obj:object = {name:"hello", age:29};
let person:{name: string, age:number};

// Boolean
let isAvaliable: boolean = true;


// 함수 선언
parameter와 return 값에 대해 타입 선언 가능
const sum = (a:number, b:number):number => {
return a+b;
}

// optional parameter일 경우 ?를 사용

const log = (time: string, result?: string, option?: string) => {
console.log(time, result, option);
}
log("2021-10-04", "success");

```

# 인터페이스 (interface)

### 자주 사용하는 타입들을 object 형태의 묶음으로 정의해 새로운 타입을 만들어 사용하는 기능

```typescript

// interface 선언
interface User {
age: number;
name: string;
}

// 변수 활용
const hanbbi: User = { age: 30, name: "hello"}


// 함수 인자로의 활용
const getUser = (user:User){
console.log(user);
}
getUser({ age:10, name: "hanbbi" })



// 함수 구조 활용
interface Sum {
(a:number, b:number): number;
}

let sumFinc: Sum:
sumFunc = function(a: number, b: number): number {
return a+b;
}



// 배열 활용
interface StringArray {
[index:number]: string;
}

let arr: StringArray = ["a", "b", "c"];


// 객체 활용
interface StringRegexObject {
[key: string]: RegExp;
}

const obj: StringRegexObject {
cssFile: /\.css$/,
   jsFile: /\.js$/
}


// interface 확장 (extends 사용)
interface Person {
name: string;
age:number;
}
interface Developer extends Person {
skill: string;
}

const juniorDeveloper = {
name: "hanbbi",
age:100,
skill: "JS"
}

```

# 타입 별칭(type aliases)

### 타입 키워드는 interface와 다르게 새로운 타입을 생성하는 것이 아닌 별칭을 부여하는 것으로, extends 키워드는 사용할 수 없음

```typescript

// 타입 별칭 선언 및 활용
type MyString = string;
const str: MyString = "Hello dear"

type Todo = {
id: string;
title: string;
done: boolean
}

const getTodo(todo:Todo){
console.log(todo);
}

```

# 연산자 (Operator)

## Uinon Type

### 한 가지 이상의 type을 선언하고자 할 때 사용 가능. | 기호 사용

```typescript
const logMessage = (value: string | number) => {
  if (typeof value === "string") {
    value.toString();
  } else if (typeof value === "number") {
    value.toLocaleString();
  } else {
    throw new TypeError("value must be string or number");
  }
};
logMessage("hello");
logMessage(1000);
```

## intersection Type

### 합집합과 같은 개념으로, 함수 호출의 경우 함수 인자에 명시한 type을 모두 제공해야 한다. & 기호 사용

```typescript

interface Zoo {
name: string;
location: string
price: number;
}

interface Animal {
name: string;
count: number;
}

const askZookeeper = ( value : Zoo & Animal ) => {
    // value 는
    { name:"어린이대공원", location: "서울시 광진구", price: 10000, count: 10000}
    // 와 같이 Zoo와 Animal이 모두 포함되는 인자를 줘야한다.
}

```

# Enum

### enum 키워드를 사용하면 일종의 default 값을 선언할 수 있다.

```typescript

// 숫자형 enum
// 자동으로 0에서 1씩 증가하는 값을 부여

enum Shoes {
Nike, // 0
Adidas, // 1
NewBalance //2
}
const myShoes = Shoes.Nike; // 0

문자형 enum
enum Food {
cake = "케익",
cookie = "쿠키"
}
const player = Food.cookie; // 쿠키

```

# 제네릭

### 제네릭을 활용하면 인자를 넘겨 호출하는 시점에 타입을 결정할 수 있다. 제네릭 활용 시 동일한 기능을 하는 함수를 일일이 만들 필요가 없으며, 타입 추론에 있어 강점을 가진다.

제네릭 선언
<T>와 같이 타입을 선언한다. 알파벳은 통상 T로 정해져 있다.

```typescript

const logText<T> = (text: T):T => {
console.log(text);
return text;
}
logText<string>("Hello hanbbi");


// interface에 제네릭 선언

interface Dropdown<T> {
value: T;
selected: boolean;
}
cosnt obj: Dropdown<string> = { value: "hamburger" , selected: true};

```

# 제네릭 타입 제한

## 1. 배열 힌트

```typescript

const logTextLength<T> = (text: T[]): T[] =>{
console.log(text.length);
text.forEach(text =>{
console.log(text):
});
}
logTextLength<string>(["hi", "hello"]);


```

## 2. 정의된 타입 이용(extends)과 keyof

```typescript

interface ShoppingItem {
name: string;
price: number;
stock: number;
}

const getShoppingItemOption<T extends keyof ShoppinggItem>(itemOption: T): T {
return itemOption;
}

// "name", "price", "stock"만 인자로 가능
getShoppingItemOption("price");

```

# 타입 추론 (Type inference)

## 1. 기본 변수 타입 추론

```typescript

// string으로 추론
let a = "abc";

// a: number로 추론
// b: string으로 추론
// return value는 string으로 추론
const getValue(a = 10) {
let b = "hello";
return a + b;
}


```

## 2. interface추론

```typescript

// interface 1개
interface Dropdown<T> {
value: T;
title: string;
}
const shoppingItem:Dropdown<number> ={
value: 10000;
title: "shoe"
}
// interface 2개
interface Dropdown2<T> {
value: T;
title: string;
}
interface DetailedDropdown<K> extends Dropdown2<K>{
tag: K;
desc: string;
}
const detailed: DetailedDropdown<string>{
value: "10000";
title: "shoe",
tag: "10000",
desc: "description"
}

```

# 타입 단언 (Type assertion)

### as 키워드를 사용해 타입을 정함으로써 typescript에게 타입을 알려줄 수 있다. 주로 DOM API를 조작할 떄 사용한다.

```typescript
// div가 있는지 장담할 수 없음, HTMLDivElement | null
// 따라서 typescript에게 타입을 단언해 타입을 알려줄 수 있음.
const div = document.querySelector("div") as HTMLDivElement;
div.innerText = "test";
```

# 타입 가드 (Type guard)

### union type을 사용하는 경우 공통된 속성만 접근 가능하며, 로직상 공통되지 않은 속성에 접근하고자 할 때 불편함을 해소하기 위해 타입 단언으로 공통되지 않은 속성에 접근하고자 하는 방법이 있지만, 코드 가독성을 위해 타입 가드 방법을 주로 사용한다.

```typescript
const isDeveloper = (target: Developer | Humanoid): target is Developer => {
  return (target as Developer).skill !== undefined;
};
if (isDeveloper(tom)) {
  console.log(tom.name);
  console.log(tom.skill);
} else {
  console.log(tom.name);
  console.log(tom.age);
}
```

# 타입 호환 (Type compatibility)

### TypeScript에서 더 큰 타입 구조를 갖는 변수에 작은 타입 구조를 갖는 변수를 할당 가능

```typescript
let add = function (a: number) {
  // ...
};
let sum = function (a: number, b: number) {
  // ...
};
// 아래는 에러가
// add = sum;

// 에러가 나지 않는 방식. sum의 구조가 더 크다고 볼 수 있음
sum = add;
```

참조 : https://yeomkyeorae.github.io/typesciprt/basic_typescript/


Typescript 사용을 위한 기본적인 문법 정리

typescript syntax


# Input element 사용하기

## 타입

- type="text" 일반 텍스트
- type="password" 패스워드 형식(마스킹 처리)
- type="eamil" 이메일 형식
- type="radio" 설문 등 여러 선택지 중 하나의 값을 선택하는 형식
- type="checkbox" 설문 등 여러 선택지 중 여러 값을 선택하는 형식
- type="number" 숫자
- type="file" 파일 업로드
- type="date" 달력
- type="range" 볼륨 조절 위젯같이 값이 가려진 숫자를 입력하는 조작 가능

## 속성

- accept="업로드할 파일의 기댓값 암시"
- placeholder="input 안 힌트 텍스트"
- autofocus "페이지 전환 시 자동으로 맨 처음 포커싱"
- required "필수값"
- maxlength="최댓값"
- disabled "비활성화"
- autocomplete="off" "브라우저의 자동완성 제거"
- checked "radio나 checkbox 등의 체크 여부"
- name input의 이름으로 radio나 checkbox의 카테고리 묶음이나 javascript 이벤트 등을 유연하게 적용할 수 있음
