OMS의 front-end에 대한 내용 공유 페이지입니다.

## MPA (SSR)

MPA(Multiple Page Application)은 HTML, CSS, Javascript로 만들어지던 초기의 웹 형태입니다. 
과거에는 MPA라는 단어나 개념이 존재하지 않았지만 SPA의 개념이 등장하면서 만들어진 단어입니다. 
각 페이지를 서로 다른 html 파일로 이루어져 있어서 메뉴 이동과 같은 페이지를 접근할 때 새로운 html파일을 받아오는 형식입니다. 
이 방식은 새로운 html파일을 받아오는 동안 로딩 시간을 필요로 했는데, 그 로딩시간동안 페이지가 깜빡 거리게 됩니다.

## SPA의 탄생 (CSR)

MPA방식에서는 모바일 어플리케이션처럼 부드럽지도 않고, 모든 페이지에서 공통되는 부분(헤더, 푸터, 등…)도 계속해서 새로이 불러들어야만 했습니다. 
따라서 기존의 방식에서 특정 부분만 변하고 새로 그리는 방식인 SPA가 탄생하게 되었습니다. 
SPA(Single Page Application)는 MPA와는 달리 단 하나의 페이지로만 웹 어플리케이션을 만듭니다. 
이 구현방식을 CSR(Client Side Rendering)이라 하는데 메뉴 이동을 할 때 모바일 앱처럼 자연스럽게 이동하여 사용자들에게도 친숙하였습니다. 
개발자들에게도 React, Angular, Vue와 같은 기술들이 생겨나면서 기존의 JQuery를 통한 MPA방식보다 코드 관리도 수월해지고(컴포넌트 단위 개발) 구현하기도 쉬워졌습니다. 
또한 Front-End와 Back-End의 관심사를 완전히 분리시켜 REST API방식을 채용하고 개발 속도가 향상되었습니다. 
하지만 이 CSR에도 문제점이 존재합니다. 
페이지 하나만을 이용해 어플리케이션을 구성하기에, 어플리케이션의 크기가 커질수록 초기 로딩시간이 오래걸리게 됩니다. 
또한 javascript를 통해 동적으로 페이지를 변환시키기에 검색엔진은 이 사이트의 내용을 인식하지 못합니다. 
이에 아예 불가능하진 않아도 SEO(Search Engine Optimization)을 적용하기 힘들고, 또한 적용하더라도 불리해서 구글이나 네이버와 같은 검색엔전에서 노출되기 어려웠습니다.

## 다시 MPA (SSR)

SPA의 치명적인 단점들을 해결하면서, 동시에 초기 MPA에서 가졌던 단점들을 해결하는 방식으로 Next.js와 같은 프레임워크들이 등장하기 시작했습니다. 
SPA 방식에서 사용하던 컴포넌트 단위의 개발을 지원하고, 페이지 깜빡임을 pre-rendering기법과 특별한 기술들(nextjs의 Link태그)을 활용해 SPA처럼 부드럽게 구현하였습니다. 
해당 기술들은 Next js 관련 포스팅을 통해 다음번에 다루겠습니다.

렌더링의 간단한 역사와 종류에 대한 설명입니다.

렌더링 종류(CSR, SSR)

[공식문서](https://ko.reactjs.org/docs/conditional-rendering.html) 
React의 jsx 문법에서는 중괄호 `{}` 내에는 자바스크립트의 표현식(Expression)이 들어갈 수 있습니다.

```tsx
const Plus = () => {
	const num1 = 1;
	const num2 = 2;

	return (
		<div>
			{num1} + {num2} = {num1 + num2}
		</div>
	);
};
```

하지만 문장(Statement)이 아닌 표현식이다 보니, if문이나 if-else문, switch문 등이 들어갈 수 없고, 또한 배열이 필요할 때 for문 또한 들어갈 수 없습니다. 
따라서 jsx에서 어떠한 방법으로 조건식을 만들고 그걸로 렌더링을 표현하는지에 대해 알아보도록 하겠습니다.

## 함수 이용

복잡한 렌더링 규칙을 가질 때 사용하는 방법입니다. 
if문 if-else문 등등.. 자유롭게 함수를 작성하고 해당 함수를 불러들이는 방법으로 구현이 가능합니다.

```tsx
interface OwnProps {
	num1: number;
	num2: number;
	condition: '+' | '-' | '*' | '/';
}

const Calculator = ({ num1, num2, condition }: OwnProps) => {

	const Result = () => {
		if(condition = '+') {
			return {num1 + num2};
		} else if(condition = '-') {
			return {num1 - num2};
		} else if(condition = '-') {
			return {num1 * num2};
		} else {
			return {num1 / num2};
		}
	}

	return (
		<div>
			{num1}
			{condition}
			{num2}
			=
			<Result />
			{/*혹은 {Result() } 로 표현하여도 같습니다.*/}
		</div>
	);
};
```

해당 방법의 장점은 복잡한 연산이나 규칙이 필요할 때 함수로 관리를 함으로서 코드 관리가 용이해지고 구현하기도 쉬워집니다. 
하지만 간단한 조건부 렌더링도 전부다 함수를 이용하면 코드가 길어지고 한눈에 보기 어려워 질 수 있습니다.

## if문

간단한 if문에는 논리연산자 `&&` 를 사용합니다. 
`&&`은 논리곱으로 양쪽이 둘다 `true` 일 경우에만 true가 됩니다. 
JavaScript에서 논리곱의 결과는 true && expression === true 가 되고, false && expression === false 가 됩니다. 
예를들면 false && 'banana' === false 이고, true && 'banana' === 'banana'가 됩니다. 
이러한 성질을 이용하여 if문 처럼 사용하여 렌더링을 수행할 수 있습니다.

```tsx
interface OwnProps {
	admin: boolean;
}

const Main = ({ admin }: OwnProps) => {
 return (
 <div>
 <Content />
 {admin && <Admin />}
 </div>
 )
}
```

위의 컴포넌트에서는 만약 admin값이 true이면 Admin컴포넌트가 렌더링 될 것 이고, 
그 반대로 false라면 Admin컴포넌트는 렌더링 되지 않을 것입니다.

## if-else문

if-else문에는 삼항연산자를 사용하여서 나타내줍니다. 
로그인이 되어있을 땐 로그아웃 버튼을, 반대의 경우에는 로그인 버튼을 렌더링 할 수 있습니다.

```tsx
interface OwnProps {
	login: boolean;
}

const LoginMenu = ({ login }: OwnProps) => {
	return <div>{login ? <LogoutButton /> : <LoginButton />}</div>;
};
```

## for문

for문은 javascript의 [Array.map()](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 메서드를 활용하여 구현해줍니다. 
배열 내의 요소 각각에 대해 새로운 결과 배열을 반환하는 메서드입니다. 
`Array.forEach()`와는 return값이 있나 없나 차이만 존재합니다. 
`arr.map(callback(currentValue[, index[, array]])[, thisArg])` callback함수의 인자로 currentValue와 index 그리고 array가 포함됩니다.

```ts
const fruits = [
	apple: {
		kor: '사과',
		en: 'apple',
	},
	banana: {
		kor: '바나나',
		en: 'banana',
	},
];

const korNames = fruits,map((fruit, index) => fruit.kor);

console.log(korNames); // ['사과', '바나나']
```

위의 예시처럼 기존의 배열로 새로운 배열을 만들 수 있습니다. 
JSX에서도 마찬가진데 배열을 이용해 React.ReactNode배열 결과를 만들어 냅니다.

```tsx
const nameList = ['철수','영희','길동'];

const NameCard = () => {
	return (
 <div>
 {nameList.map((name, index) => (
 {name}
 ))}
 </div>
 );
}
```

### Key

[공식문서](https://ko.reactjs.org/docs/lists-and-keys.html) 
표현식으로 배열 컴포넌트를 생성할 때 각종 IDE나 혹은 eslint에서 key를 넣어주지 않으면 경고문이 나옵니다. 
key에는 문자열이 들어갈 수 있습니다. 
key는 리스트 컴포넌트가 생성될 때 React에서 리스트이 요소들을 식별하기 위한 요소입니다. 
다른 기능은 존재하지 않으며 오로지 리렌더가 일어날 때 해당 key의 컴포넌트들을 비교하며 효율적인 리렌더링을 수행합니다. 
key를 사용할 때에는 조심해야할 점이 2가지 있습니다.

-	key는 형제끼리 같은 값을 가지면 안됩니다.

```tsx
const Example = () => {
	const [list1, setList1] = useState([1,2,3,4,5]);
	const [list2, setList2] = useState([5,6,7,8,9]);

	return (
		<div>
			{list1.map((item) => (
				
					{item}
				
			))}
			{list2.map((item) => (
				{item}
			))}
			}
		</div>
	);

	const onClickList1 = (event) => {
		// 클릭된 요소를 삭제합니다.
		setList1((prev) => prev.filter((element) => element !== event.target.innerText);
	};
}
```

만약 위와 같은 컴포넌트가 있을 때, 총 10개의 엘리먼트들이 생깁니다. 
여기서 key값을 배열의 값으로 주었더니 `5` 라는 key값이 겹치게 됩니다. 
React는 setState를 진행하고 리렌더가 일어날 때 key가 5인 엘리먼트가 사라져야 한다는걸 압니다. 
하지만 key가 5인 엘리먼트는 2개가 있고, 그 결과로 어떻게 동작할지 예상할 수 없게 되버립니다. 
**주의 같은 렌더 함수 내에서 두개 이상의 리스트 엘리먼트가 존재할 때 반드시 서로 다른 고유한 key값을 주어야 합니다.**

-	index 사용을 지양해야 합니다.

리스트 엘리먼트가 한번 렌더된 후 변경사항이 아예 없다면 index를 key로 주어도 무방합니다. 

```tsx
list.map((item, index) => <Item {...item} key={index} />);
```

하지만 위처럼 key에 index로 값을 부여하고 해당 리스트가 추가되거나 삭제되거나 순서가 바뀔 가능성이 있을 때 마찬가지로 사람이 예측하지 못한 동작이 일어날 수 있습니다. 
그 이유는 React는 key값에 따라 컴포넌트의 변화점을 찾기 때문입니다.

### 배열이 존재할 때

Post라는 컴포넌트가 있을 때, 해당 컴포넌트는 댓글을 배열로 받게 될겁니다. 
이럴 경우 댓글을 for문으로 렌더링 시켜줘야 합니다. 
key값으로는 엘리먼트가 가진 고유한 id값을 주면 좋습니다.

```tsx
interface OwnProps {
	title: string;
	content: string;
	comments: Comment[];
}

const Post = ({ title, content, comments }) => {
	return (
		<div>
			<h2>{title}</h2>
			<Content>{content}</Content>
			{comments.map((comment, index) => (
				<Comment index={index} key={comment.id}>
					{comment}
				</Comment>
			))}
		</div>
	);
};
```

### 배열이 존재하지 않을 때

배열이 존재하지 않는 경우에는 `Array(배열 숫자).fill(null).map((item) => … )` 이와 같은 형태로 배열을 생성해서 사용할 수 있습니다. 
`fill(value)` 메서드는 배열의 값들을 value로 채워주는 역할을 합니다. 
fill 메서드를 사용하지 않으면 배열의 값은 undefined 으로 되어있고, undefined는 map의 대상이 되지 않습니다. 
따라서 메모리를 가지지 않는 `null`로 초기화 해주는게 좋습니다.

```tsx
interface OwnProps {
	num: number;
}

const MultipleTable = ({ num }: OwnProps) => {
	return (
		<div>
			{Array(9)
				.fill(null)
				.map((item, index) => (
					{num * (index + 1)}
				))}
		</div>
	);
}
```

하지만 위의 방법에는 key로 고유한 데이터를 줄 수 없습니다. 
배열의 변화 가능성이 있을 경우에는 이 방법은 좋지 않은 방법입니다. 
배열을 새로이 만들어서 코드를 작성하는 것이 좋습니다. 
커뮤니티에서는 일부는 uuid와 같은 난수를 사용해 key를 부여하는 방법도 좋다고 합니다. 
하지만 개인적인 생각으로는 리렌더 될 때마다 새로운 uuid값을 제공해야 하고, 새로운 JSX element들을 만들어줘야 하니 비효율적 이라고 생각합니다.

React JSX 문법에서 if문, else문, for문의 사용법입니다.

리엑트 JSX 조건문 렌더링

요즘에는 많은 웹 서비스들이 SPA를 구현하면서 프론트엔드와 백엔드 사이의 역할이 확연하게 나뉘고, 
동시에 세션을 사용하기 힘들어지면서 token을 이용한 인증이 많이 구현됩니다. 
그러면서 가장 많이 사용하는 인증 방식이 JWT를 통한 인증 방식입니다.

## JWT

[공식문서](https://jwt.io/introduction)
JWT는 Json Web Token의 약자로 Json을 이용해 정보를 안전하게 다루기 위한 개방형 표준 (RFC 7519) 방법입니다. 
내용들은 Claim들로 이루어 지는데, 각 Claim들은 Json처럼 이름과 값의 쌍으로 이루어져 있습니다. 
예를 들면 Claim의 이름이 name이면 값은 유영진이 될 수 있습니다. 
이 Claim들을 이용해서 필요한 데이터들을 Json 형태로 담아 토큰으로 변경합니다.

## Base64Url

Base64 인코딩은 `+`, `/`, `=`이 포함됩니다. 
Base64는 2진 데이터를 6bit 단위로 쪼개고 해당 문자열을 ASCII 값으로 치환해주는데 `+`는 62, `/`는 63에 해당합니다. 
또한 Base64는 3byte씩 쪼개서 인코딩을 하는데 이 때 3byte가 안되는 경우에는 padding 문자열로 빈 공간을 채우게 됩니다. 
여기서 Base64는 `=`을 padding문자열로 사용합니다. 
따라서 URI의 파라미터로 사용할 수 없게 되는데, JWT는 토큰값을 URI 파라미터로 사용할 수 있도록 Base64Url 인코딩을 사용합니다. 
Base64Url에서는 `-`(minus)는 62, `_`(underline)은 63에 해당합니다. 
하지만 padding문자열은 그대로 `=`을 사용합니다. 
그 이유는 패딩 문자열은 문자열 맨 마지막에 존재하게 되니 브라우저가 제어문자로 인식하지 않고 그냥 문자로 인식하기 때문입니다.

## 구조

JWT의 구조는 3개의 파트로 나뉘고, 각 파트는 점으로 구분합니다. 

-	Header
-	Payload
-	Signature

따라서 JWT는 아래와 같은 모습이 됩니다. 
`xxxxx.yyyyy.zzzzz`

### Header

헤더(Header)는 토큰의 타입과 알고리즘 2가지로 구성되어 있습니다. 
토큰의 타입은 JWT, 알고리즘은 HMAC이나 SHA256, RSA같은 알고리즘으로 들어갑니다.

```json
{
	"alg": "HS256",
	"typ": "JWT"
}
```

### Payload

페이로드(Payload)는 토큰에 담을 클레임(Claim)들을 담는 부분입니다. 
클레임의 종류는 아래 3가지가 있습니다.

#### Registered claims(등록된 클레임)

필수는 아니지만 유용하고 상호 작용이 가능한 클레임들이 미리 정의되어 있습니다. 
해당 클레임들을 등록된 클레임 부분에 정의해줍니다. 
[등록된 클레임 종류](https://datatracker.ietf.org/doc/html/rfc7519#section-4.1)

-	iss

	iss는 발급자(issuer) 클레임 입니다. 
	보통은 어플리케이션에 따라 어플리케이션 이름이나 URI등을 넣습니다. 
	문자열을 값으로 가집니다.

-	sub

	sub는 주제(Subject) 클레임 입니다. 
	주제 클레임값은 지역적이나 전역적으로 고유한 값을 가집니다. 
	문자열을 값으로 가집니다.

-	aud

	aud는 수신자(audience) 클레임 입니다. 
	수신자 클레임은 JWT가 의도한 수신자인지를 식별합니다. 
	해당 클레임으로 의도한 수신자가 아닐경우 JWT를 거부할 수 있습니다. 
	aud에는 단일 문자열이나 혹은 문자열 배열이 들어올 수 있습니다.

-	exp

	exp는 만료 시간(Expiration Time) 클레임 입니다. 
	JWT가 만료되는 시간을 설정할 수 있습니다. 
	exp시간이 현재시간보다 지나게 되면 JWT를 거부합니다. 
	시간은 NumericDate형식으로 `1480849147370`같이 지정합니다.

-	nbf

	nbf는 Not Before클레임 입니다. 
	JWT가 처리되면 안되는 이전 시간을 설정할 수 있습니다. 
	nbf시간이 현재시간보다 더 크면 JWT를 거부합니다. 
	마찬가지로 NumericDate형식으로 지정합니다.

-	iat

	iat는 발급 시간(Issued At)클레임 입니다. 
	JWT가 발급되는 시간을 식별합니다. 
	이 클레임으로 JWT의 수명을 결정할 수 있습니다. 
	마찬가지로 NumericDate형식으로 지정합니다.

-	jti

	jti는 JWT ID 클레임 입니다. 
	해당 클레임은 JWT에 고유 ID를 제공합니다. 
	해당 클레임을 사용할 때 각 JWT는 겹치지 않는 고유한 ID값을 가지도록 방지해야 합니다. 
	ID값ㅇ로 구분하여 JWT를 거부할 수 도 있습니다. 
	문자열을 값으로 가집니다.

#### Public claims(공개 클레임)

공개 클레임은 사용자들이 클레임을 마음대로 정의하면서 사용할 수 있습니다. 
하지만 충돌을 방지하고자 [IANA JSON Web Token Registry](https://www.iana.org/assignments/jwt/jwt.xhtml)에 등록된 이름으로 사용하거나, 혹은 해당 이름을 포함한 URI로 정의해야 합니다.

#### Private claims(비공개 클레임)

비공개 클레임은 사용자들 간에 협의하에 사용하는 사용자 정의 클레임 입니다.

```json
{
	"sub": "1234567890",
	"name": "John Doe",
	"admin": true
}
```

위의 페이로드에선 sub는 지정된 클레임, name은 공개 클레임, admin은 비공개 클레임에 해당합니다.

### Signature

서명(Signature)부분은 헤더에 지정된 알고리즘을 가져와서 그 알고리즘에 맞게 서명해야 합니다. 
서명은 헤더의 인코딩값과 정보의 인코딩값을 합친 후 주어진 비밀키로 해쉬를 하여 생성합니다. 
예르들어 HMAC SHA256 알고리즘을 사용한 경우는 아래와 같이 만들어집니다. 
`HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload), secret)` 
서명은 도중에 메시지가 변경되었는지 확인하는데 사용하며, 개인 키로 서명된 토큰의 경우는 JWT 발신자를 확인할 수 있습니다.

## 결과

결과로는 페이로드가 인코딩되고 암호로 서명된 JWT가 생성됩니다.
![jwt-result size:800*400](/front-end/jwt-result.png)
위의 이미지처럼 JWT는 Encode됩니다. 
[jwt debug](https://jwt.io/) 해당 페이지로부터 직접 JWT의 encode, decode 결과를 볼 수 있습니다.

JWT (Json Web Token)

## AES

암호화를 하는 방식에는 단방향 암호화, 비밀키 암호화, 공개키 암호화가 있는데, 그중 AES는 비밀키 암호화 입니다. 
많은 곳에서 AES를 사용하고 있습니다.

## Padding

패딩(Padding)이란 데이터를 블럭으로 암호화할 때 평문이 항상 블럭크기의 갯수가 될 수 없습니다. 
따라서 평문의 마지막 블록을 암호화 되기 전에 어떠한 데이터로 남은 공간을 채워주는 방식입니다. 
AES에서는 PKCS 패딩을 사용하는데, 이 방식은 예를들어 16바이트의 평문 중 3바이트가 비어있다면 3바이트를 모두 05로 채우는 방식입니다. 
PKCS#5와 PKCS#7 두가지가 있는데, 구현 되는 방식은 둘다 같고 다만 PKCS#5는 8바이트 고정, PKCS#7은 바이트가 고정되어있지 않습니다. 

### Mode

모드(Mode)는 블럭 암호화 순서 및 규칙에 대한 표준입니다. 
모드에 따라서 IV(초기화 벡터)를 사용할 수도 있고, 사용하지 않을수도 있습니다. 
일반적으론 CBC(Cipher-Block Chaining)모드가 가장 많이 사용됩니다. 
이 모드는 최초 평문 1블럭과 IV를 XOR 연산한 다음 암호화하고, 다음 평문 1블럭은 앞에서 암호화된 결과 블럭과 XOR하여서 다시 암호화 하는 방식입니다.

### PBKDF2

PBKDF는 Password-Based Key Derivation Function입니다. 
만약에 키 값을 탈취당했을 때를 고려하여서 키 값을 늘려버리고 암호화의 횟수를 여러번으로 늘려서 움호화의 수행 시간을 오래 걸리게 해줍니다. 
이 과정을 키 확장이라 하고, 외부 공격으로 부터 비교적 안전하게 해줍니다. 
salt와 반복횟수를 지정해주어서 새로운 결과값을 만들어냅니다. 
`salt`란 해시함수를 돌리기 전에 임의의 문자열ㅇㄹ 덧붙이는 것을 의미합니다.

## cryptoJS

cryptoJS는 javascript의 표준 및 보안 암호화 알고리즘 구현 라이브러리입니다. 
일반적인 사용법은 `CryptoJS.AES.encrypt('변화할 데이터','비밀키', { mode: '모드', padding: '패딩', iv: '초기화벡터' })`의 구조로 사용됩니다.

```js
const key = {
	iv: '...', // 32바이트(크기)의 문자열 초기화 벡터
	sa: '...', // 32바이트(크기)의 문자열 salt
	pa: '...', // 32바이트(크기)의 문자열 비밀키
};

const encrypt = (value: string, use: boolean = true) => {
	if(!use) return value;
	return ((CryptoJS) =>{
		return CryptoJS.AES.encrypt(
			value,
			// 비밀키에 PBKDF2를 적용하여 비밀키를 암호화합니다.
			// CryptoJS.PBKDF2('암호키', 'salt', { keySize: 키사이즈, iterations: 반복횟수 })
			CryptoJS.PBKDF2(key.pa, CryptoJS.enc.Hex.parse(key.sa), { keySize: 4, iterations: 1000 }),
			// mode는 default로 'CBC', padding은 default로 'Pkcs7'이 됩니다.
			{
				iv: CryptoJS.enc.Hex.parse(key.iv)
			}
		).toString();
	})(window['CryptoJS']);
};
```

## in java

java에서는 위의 암호화 결과를 decrypt(해독)하고 있습니다. 

```java
public static final String ENC_KEY = "..."; // cryptojs의 pa와 동일한 비밀키
public static final String salt = "..."; // cryptojs의 sa와 동일한 salt
public static final String iv = "...";// cryptojs의 iv와 동일한 초기화 벡터

private static String decrypt(String salt, String iv, String passphrase, String ciphertext, int iterationCount, int keySize) throws Exception {
	SecretKeyFactory factory = SecretKeyFactory.getInstance("PBKDF2WithHmacSHA1");
	// 반복횟수와 키 사이즈를 설정하고 salt를 이용해 KeySpec을 만듭니다.
	KeySpec spec = new PBEKeySpec(passphrase.toCharArray(), Hex.decodeHx(salt.toCharArray()), iterationCount, keySize);
	// KeySpec을 적용해 PBKDF2 방식으로 암호화된 비밀키를 만들어줍니다.
	SecretKey = key = new SecretKeySpec(factory.generateSecret(spec).getEncoded(), "AES");
	// PKCS5Padding의 Instance를 불러오지만, PKCS#7과 로직이 일치하여 해당 인스턴스만 존재합니다.
	Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");
	// CBC모드로 IV를 적용하여서 해독합니다.
	cipher.init(Cipher.DECRYPT_MODE, key, new IvParameterSpec(Hex.decodeHex(iv.toCharArray())));
	byte[] decrypted = cipher.doFinal(Base64.decodeBase64(ciphertext));
	return neew String(decrypted, "UTF-8");
}
```

AES란 무엇인지, CryptoJS와 java에서 암호화 복호화 방법

AES 암호화

[공식문서](https://immutable-js.com/) 
immutable이란 불변이란 뜻입니다. 
javaScript에서는 원시타입들은 변경이 불가능하지만, 그 이외에는 모두 변경이 가능한 값들입니다. 
변경이 가능한 값들은 메모리 주소를 참조하고 있기 때문에 값이 변경될 경우 해당 값을 사용하는 모든 곳에서 side effect가 발생하게 됩니다.

## 값의 불변성

```js
// javaScript에서 string은 원시타입입니다.
let immutable = 'text';
// 원시타입은 값을 재할당 할 수는 있어도 변경할 순 없습니다.
immutable = 'abcd';

// 참조타입은 메모리만을 참조하므로 값이 변경 가능합니다.
const mutable = {
	one: '1',
	two: '2',
};

mutable.two = '3';

// 따라서 참조타입에서 불변성을 가지려면 새로운 객체를 만들어서 재할당을 해야합니다.
let reallocation = {
	one: '1',
	two: '2',
};

reallocation = {
	one: '1',
	two: '3',
};

// 혹은 깊은 복사를 활용하여 주소값이 다른 객체를 생성 후 값을 변경해야 합니다.
const originObject = {
	one: '1',
	two: '2',
};

const copyObject = { ...originObject, two : '3' };
```

## 복잡한 구조의 객체

다행히도 구조가 간단한 객체의 경우에는 깊은복사를 통한 불변성 유지가 쉽습니다. 
하지만 객체가 복잡한 경우에는 복사 또한 어려워집니다.

```js
const object1 = {
	name: 'object1',
	item: {
		phone: '아이폰',
		car: '제네시스',
	},
};

const object2 = { ...object1 };

object1.item.phone = '갤럭시';
console.log(object2.item.phone); // 갤럭시
```

위의 예시처럼 깊은 복사를 하였음에도 불구하고 object1내의 item은 얕은 복사가 이루어 집니다. 
이러한 객체를 깊은복사 하기 위해선 아래와 같이 해야합니다.

```js
const object1 = {
	name: 'object1',
	item: {
		phone: '아이폰',
		car: '제네시스',
	},
};
// 객체 내의 item도 깊은 복사를 해야 합니다.
const object2 = { ...object1, item: { ...object1.item }};

// 혹은 문자열로 변환하였다가 다시 객체로 변환할 수 있습니다.
const object3 = JSON.parse(JSON.stringify(object1));
```

하지만 객체가 복잡해질수록, 혹은 데이터의 구조를 확실히 알지 못할수록 깊은 복사를 이용하기 힘들어 집니다. 
문자열로 변환하는 방법 또한 필요 이상의 연산 작업이 들어가고 좋은 방법은 아닙니다.

## immutable js 적용

immutable js는 List,Map,Stack,Set등의 데이터 구조를 제공해줍니다. 
불변 컬렉션으로 값의 변경을 불가능 하게 하면서 대신에 재할당을 하도록 합니다. 
또한 Batching Mutations와 Lazy Seq기능으로 인해 성능 향상을 기대할 수 있습니다. 

-	Batching Mutations

	반환을 하기 전에 데이터의 변화가 여러번 일어난다면, 새로운 컬렉션을 생성하지 않고 반환을 할 때만 새로운 불변 컬렉션을 생성합니다.

-	Lazy Seq

	연쇄작업 (filter, map 등...)이 있을 경우에 새로운 컬렉션을 생성하지 않고 필요한 만큼만 연산해줍니다.

반면에 적용할 때의 단점도 존재합니다. 
라이브러리를 추가함으로서 패키지의 사이즈가 커지게 되고, 뿐만 아니라 새로운 데이터 구조의 학습을 해야만 합니다.

### Map

자바스크립트의 object와 비슷합니다. 
다만 값을 변경할 때, 직접할당을 하지 않고 메서드를 통해 새로운 객체를 생성해줍니다.

```js
import { Map } 'immutable';

const testMap = Map({
	one: 1,
	two: 2,
	three: Map({
		four: 4,
		five: 5,
	}),
});

// object의 testMap.one = 10; 과 비슷하나 새로운 객체를 return합니다.
const newMap1 = testMap.set(one, 10);
// depth가 존재할 경우 setIn 메서드로 depth를 표현합니다.
const newMap2 = testMap.setIn([three, four], 40);
// 여러개의 값을 동시에 변경할 땐 mergeIn을 사용합니다.
const newMap3 = testMap.mergeIn([three], {four: 40, five: 50 });
```

### List

마찬가지로 자바스크립트의 []와 비슷합니다.

```js
import { Map, List } from 'immutable';

const testList = List([Map({ test: 1 }), Map({ test: 2 })]);

// get 메서드를 사용해서 n번째 원소값을 가져옵니다.
const element1 = testList.get(0);
// List내의 Map을 가져오려면 다음과 같이 사용합니다.
const element2 = testList.get([0, 'test']);
// n번째 원소값을 수정할 땐 set을 사용합니다.
const newList1 = testList.set(0, Map({ test: 3 }));
// n번째 원소의 내부 값을 변경할 땐 setIn을 사용합니다.
const newList2 = testList.setIn([0, 'test'], 3);
// 아이템을 추가할 땐 push를 이용합니다.
const newList3 = testList.push(Map({ test: 4 }));
// 아이템을 제거할 때는 delete를 사용합니다.
const newList4 = testList.delete(0);
```

### fromJS

fromJS를 사용하면 javascript의 참조객체를 immutable의 Map과 List로 알맞게 변환하여 eturn 해줍니다. 
이를 활용하면 사용방법을 익히지 않고도 활용하기 쉽습니다.

```js
const testMap = fromJS({
	a : 1,
	b : 2,
	c : {
		d: [4,5],
	}
});
```

### toJS

fromJS의 반대로 immutable의 불변객체를 javascript의 참조객체로 변환해줍니다.

## React에서 활용

React에서 리렌더가 일어날 때는 state나 props가 변경될 때 리렌더가 일어나게 됩니다. 
하지만 state나 props가 참조형일 때에는 내부 데이터가 변경되도 주소값은 그대로이기 때문에 리렌딩이 일어나게 되지 않습니다. 
값이 변동될 일이 없을 떈 적용하지 않아도 되고, 데이터 구조가 간단하다면 깊은 복사를 활용하면 됩니다. 
하지만 때에 따라서는 불변객체를 적용해야 좋습니다.

불변객체를 만들어주는 immutable js입니다.

Immutable js

[이미지 출처](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram) 
[공식문서](https://ko.reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) 
React의 class형 컴포넌트는 위 이미지와 같은 생명주기를 가집니다. 
Mounting, Updating, UnMounting의 3가지 상황이 있고, 
각 상황에 맞는 라이프 사이클 메서드를 거치면서 컴포넌트가 DOM에 올라가게 됩니다. 
라이프 사이클과 비동기에 대해 이해하면 리엑트에서 본인이 원하는대로 동작하는지 아닌지 판단하기 쉬워집니다.

## 단계

생명주기 메서드는 3가지 단계를 가지고 있습니다. 
각 단계에 맞게 코드를 짜야 컴포넌트가 의도한대로 동작합니다.

-	Render 단계

	이 단계에서는 사이드 이펙트 없이 순수하게 지닌 값을 통해 렌더링 됩니다. 
	사이드 이펙트란 state를 업데이트 하는 행위 등을 말하며, 이 시점에서는 컴포넌트를 일시정지, 중단, 렌더, 재시작 등이 가능합니다.

-	Pre-commit 단계

	업데이트에서의 getSnapshotBeforeUpdate만 이 단계에 해당하는데, 렌더를 마치고 DOM에 반영되기 직전에 일어납니다. 
 이 상황에서도 DOM을 읽을 수 있습니다.

-	Commit 단계

	변경사항들을 DOM에 적용시킵니다. 
	적용 이후에 `componentDidMount`, `ComponentDidUpdate` 메서드를 호출하여 사이드 이펙트를 발생시킬 수 있습니다.

## 생명주기 메서드

### 생성 (Mounting)

컴포넌트가 처음으로 불려져 생성될 때 입니다. 
Re-Render 시에는 불리지 않고 오직 한번만 불려지게 됩니다.

-	**constructor**

	컴포넌트의 생성자 입니다. 
	컴포넌트가 생성되면서 가장 먼저 실행 됩니다. 
	state나 변수, 그리고 클래스를 이곳에서 초기화 해줍니다.

	```tsx
	constructor(props: OwnProps) {
		super(props);

		this.state = {
			example : 'exp',
		}
	}
	```

	`super()`는 빈 객체를 만들고 this에 이 객체를 할당하는 일을 부모 클래스에게 기대합니다. 
	자식 클래스의 인스턴스에는 고유 멤버와 부모 클래스의 모든 멤버도 포함 되었기 때문에 반드시 호출해야 합니다. 
	`super(props)`의 props는 넣어주지 않더라도 클래스에서 인식은 할 수 있습니다. 
	하지만 constructor 단계에서는 props가 `undefined` 상태가 되는데 constructor에서 props를 사용하기 위해선 반드시 넣어줘야 합니다.
	**주의 constructor에서 state에 props를 넣을 때** 
	외부의 props가 변경되어도 constructor에서 초기화를 해주게 된다면 state는 변하지 않습니다. 
	외부 props에 따라 동작하게 하려면 update시에도 불려지는 getDerivedStateFromProps에서 넣어주거나, 혹은 props그 자체로 이용해야 합니다.

-	getDerivedStateFromProps

	이 메서드는 props로 받아온 데이터를 state에 넣어줄 때 사용하는 메서드입니다. 
	일반적으로 사용되는 함수는 아니며, state가 props에 의존해야 하는 경우에만 사용합니다.

	```tsx
	getDerivedStateFromProps() {
		if(props.firstName + props.lastName !== state.name) {
			return {
				name : props.firstName + props.lastName,
			}
		}
		return null;
	}
	```

-	render

	컴포넌트를 렌더링 해주는 메서드입니다. 
	클래스 컴포넌트에서 반드시 필요로 하는 메서드이고, 실제 DOM에 올라가게 될 태그들 입니다.

	```tsx
	render() {
		return (
			<div>
				<input type='text' value={this.state.text}>
			</div>
		)
	}
	```

-	**componentDidMount**

	컴포넌트가 마운트된 직후 실행됩니다. 
	네트워크 요청을 통한 초기화 작업을 할 때 자주 사용됩니다.

	```tsx
	componentDidMount() {
		ajax.get("/example").then(......);
	}
	```

### 업데이트 (Updating)

state가 변화하거나 props가 변화하거나 혹은 `forceUpdate()` 메서드를 사용할 때 발생합니다.

-	getDerivedStateFromProps

	생성시와 마찬가지입니다. props에 대해 tate가 갱신됩니다.

-	**shouldComponentUpdate**

	`성능 최적화 메서드`입니다. 
	이 메서드는 컴포넌트가 리렌더링을 할지 말지 결정해줍니다. 
	true값을 반환하면 리렌더링을 진행하고, false값을 반환하면 리렌더링이 일어나지 않습니다. 
	리엑트는 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트도 전부 리렌더링이 일어납니다. 
	이 메서드를 활용하면 부모 컴포넌트의 리렌더링에 자식 컴포넌트가 자유로워집니다. 
	기본타입(string, number 등..)은 그냥 비교해도 상관없으나, 참조타입(object, array)등은 **주의 얕은 비교를 해야만 값 비교가 가능합니다.**

	```tsx
	shouldComponentUpdate(nextProps, nextState) {
		return this.props.data !== nextProps.data;
	}
	```

-	render

	생성시와 마찬가지로 새로운 결과값이 반영된 컴포넌트를 렌더해줍니다.

-	getSnapshotBeforeUpdate

	이 메서드는 컴포넌트의 변화를 DOM에 반영하기 직전에 호출되는 메서드입니다. 
	스크롤바 위치처럼 업데이트 직전의 값을 참고할 때 쓰이며, 
	이 메서드에서 componentDidUpdate메서드로 새로운 값을 넘겨줄 수 있습니다. 
	일반적인 상황에선 쓰이지 않으나 스크롤 이벤트 같은 경우에 필요합니다.

-	componentDidUpdate

	컴포넌트가 업데이트 된 후에 불려집니다. 
	state나 props의 변화에 따른 로직을 수행할 때 사용하기 적절합니다.

	```tsx
	// getSnapshotBeforeUpdate 미사용
	componentDidUpdate(prevProps, prevState) {
		if (this.props.data !== prevProps.data) {
			this.flag = true;
		}
	}

	// getSnapshotBeforeUpdate 사용
	getSnapshotBeforeUpdate(prevProps, prevState) {
		if (prevProps.list.length < this.props.list.length) {
			const list = this.listRef.current;
			return list.scrollHeight - list.scrollTop
		}
		return null;
	}

	componentDidUpdate(prevProps, prevState, snapshot) {
		if (snapshot !== null) {
			const list = this. listRef.current;
			list.scrollTop = list.scrollHeight - snapshot;
		}
	}
	```

### 제거 (UnMounting)

컴포넌트가 제거될 때 일어납니다.

-	componentWillUnmount

	컴포넌트가 DOM에서 사라지기 직전에 호출됩니다. 
	타이머 제거, 네트워크 요청 취소 등의 정리작업을 실행하기 적절합니다. 
	이곳에선 반드시 setState를 발생시키면 안됩니다.

### 기타

-	componentDidCatch

	자식 컴포넌트에서 에러가 발생한 경우 호출됩니다. 
	commit단계에서 수행되므로, 에러 처리를 통한 side effect를 일으켜도 좋습니다.

-	componentWillMount

	컴포넌트가 DOM에 추가되기 직전에 실행되는 함수이나, 현재는 <dep>deprecated</dep>된 함수입니다.

class형 컴포넌트의 라이프 사이클에 대해 알아보고 그를 활용할 수 있도록 하는 글입니다.

LifeCycle Method

[원문](https://atomicdesign.bradfrost.com/chapter-2/) 
아토믹 디자인 패턴이란 컴포넌트를 재사용성이 강하고 단단하게 설계하는 디자인 패턴으로, 
리엑트나 뷰와같은 컴포넌트 단위 프론트 프레임워크를 사용할 때 적용하는 방식입니다. 
마치 화학처럼 원자가 모여 분자가 되고, 분자가 모여 하나의 유기체가 되어서, 
최종적으로는 잘 조립이 되어서 하나의 결과물을 구성하게 됩니다. 
따라서 이 디자인 패턴을 잘 적용하면 공통 컴포넌트를 통해 개발속도가 향상되고 
각 페이지들이 통일성 있으면서도, 다양한 기능을 구현 가능케 합니다.

## Atoms(원자)

Input이나 Button, H1, H2와 같은 순서 HTML 태그를 구성합니다. 
더 이상 쪼개질 수 없고, 마진이나 위치값을 가지지 않습니다. 
또한 state와 props를 다양하게 가져서 최대한 포용력 있게 구성해야 합니다. 

## Molecules(분자)

분자는 원자들이 모여서 이루어지며, 체크박스가 여러개 모인 리스트라던가, 
혹은 Input태그와 Label태그와 Button 태그가 합쳐져서 하나의 검색창의 단위를 가집니다. 

## Organisms(유기체)

유기체는 분자나 원자들이 합쳐져서 생성되고, 분자나 원자의 위치값을 조정합니다.

## Templates(템플릿)

템플릿은 페이지의 그리드를 정해주는 역할을 합니다. 

## Pages(페이지)

앞서 위에 있던 요소들이 모여서 하나의 페이지가 만들어지게 됩니다. 
템플릿을 잘 활용하여 페이지를 만드는 것이 통일감 있는 페이지가 만들어집니다.

아토믹 디자인 패턴(Atomic Design Pattern)이란 무엇인가, 또 컴포넌트를 어떻게 설계하는가에 대한 글입니다.

아토믹 디자인 패턴

## Component란?

[공식문서](https://ko.reactjs.org/docs/components-and-props.html) 
컴포넌트는 React에서 화면을 이루는 하나의 조각입니다. 
React를 사용할 때는 컴포넌트를 class형 또는 function형으로 정의할 수 있습니다. 
class형 컴포넌트의 경우에는 라이프 사이클 기능을 사용할 수 있고, 임의 메서드를 정의할 수 있습니다. 
function형 컴포넌트는 사용하기 간편하고, 라이프 사이클 대신에 hooks를 사용할 수 있습니다. 
또한 빌드 성능이 class형보다 약간 더 좋습니다. 
최신 React는 계속해서 최적화 hook과 편리성 hook을 개발하면서 function형을 공식으로 권장하고 있으나, 
코드 짜는 방식이 다르고 성능차이가 크지 않아서 
OMS에서는 몇몇 컴포넌트들만 function형으로 사용되고 있고, 대부분의 컴포넌트가 class형으로 사용되고 있습니다.

## class형 Component의 구성

class형 컴포넌트는 아래와 같은 구성으로 이루어져있습니다.

```tsx
// Counter.tsx 파일
/* import 선언부
 라이브러리 모듈이나, 다른 컴포넌트들을 import해주는 부분입니다. */
import React from 'react';

/* type 선언부
 typeScript에서 지원해주는 기능으로, 사용할 변수 명과 타입을 선언해주어서,
 컴포넌트의 가독성을 올려주고, 자동완성 및 컴파일 에러를 지원해줍니다. */
interface OwnProps {
	// 변수명 뒤에 ?를 붙히면 | undefined가 됩니다.
	// 즉 initialCounter: number | undefined와 같아집니다.
	initialCounter?: number;
	useName: boolean;
	name?: string;
}

interface OwnState {
	counter: number;
}

type aa = 'aa' | 'bb';

/* 클래스형 컴포넌트를 정의합니다.
 컴포넌트명은 관례로 첫 문자는 대문자로 사용합니다. */
class 컴포넌트명 extends React.Component<OwnProps, OwnState> {
	/* 변수 선언부
	 컴포넌트에서 사용할 변수를 선언해줍니다.(state, props 제외)
	 여기 사용되는 변수들은 반드시 리렌더 시마다 화면에 적용되니
	 변수들을 사용할 때 표현방법을 고민해야 합니다. */
	private flag: boolean = false;

	// 라이프 사이클 선언부
	constructor(props: OwnProps) {
		super(props);
		// 변수 및 state초기화
		this.state = {
			counter: 0,
		};
	}

	componentDidMount() {
		if (initialCounter !== undefined) {
			this.setState({ counter: initialCounter });
		}
	}

	// 렌더 영역으로 실제 화면에 보이게 되는 부분입니다. JSX 문법으로 작성합니다.
	render() {
		return (
			<div>
				{/*JSX 문법에서 조건부로 렌더링 할 수 있습니다.*/}
				{useName && <h1>안녕하세요 {name}입니다.<h1/>}
				<input type="text" value={this.state.counter} />
				<button onClick={this.onClickUp}>Up</button>
				<button onClick={this.onClickDown}>Down</button>
			</div>
		);
	}

	/* 사용자 함수 선언부, 컴포넌트에서 사용할 함수들을 선언해서 사용할 수 있습니다.
	 private을 붙히지 않으면 외부 컴포넌트에서 ref를 통해 DOM으로 직접 접근할 수 있습니다. /*
	setValue = (value: number) => {
		this.setState({ counter: value });
	};

	getValue = () => this.state.counter;

	private onClickUp = () => {
		this.setState({ counter: this.state.counter + 1 });
	};

	private onClickDown = () => {
		this.setState({ counter: this.state.counter - 1 });
	};
}

export default 컴포넌트명;
```

## state, props

컴포넌트에서 가장 중요한 개념인 state와 props입니다. 
React는 기본적으로 state나, props가 변경될 때 화면을 re-render합니다. 

-	props

	props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용합니다.

	```tsx
	<Counter initialCounter={10} useName={true} name="홍길동" />
	```

-	state

	state는 컴포넌트 내에서 동적으로 상태를 관리해주는 값입니다. 
	constructor에서 state를 선언 해주고, 이후에 어떠한 이벤트가 있을 때 이 state값을 변경해줍니다. 
	state값을 변경할때는 setState()메서드를 사용해주어야 하는데, 이 때 state가 바뀌는 것은 **비동기**로 실행됩니다. 
	따라서 상태가 변경된 이후에 어떤 작업을 하고 싶으면 콜백함수를 사용할 수 있습니다.

	```tsx
	this.setState({ counter: 10 }, () => console.log('만세'));
	```

## Life Cycle

class형 컴포넌트는 Life Cycle을 가지는데, 이를 활용하여 컴포넌트가 렌더될 때, 
업데이트 될 때, 혹은 컴포넌트가 사라질 때 등의 상황에서 특정한 코드를 실행시키거나 혹은 디버깅할 수 있습니다. 
[Life Cycle 포스트](/post/front-end/life-cycle)

## 공통 Component 사용법 알아보기

컴포넌트의 내부 로직을 이해하지 않더라도, 컴포넌트의 사요앙법을 어느정도는 알 수 있게 됩니다. 
interface로 선언된 props의 변수명과 타입을 확인하고 이에 따른 동작을 확인하면서 사용할 수 있습니다. 
추후 포스팅을 통해 컴포넌트 별로 분석해보도록 하겠습니다.

## 성능 올리기

-	리렌더링

	React는 3가지 경우에 컴포넌트에 리렌더링이 일어납니다. 
	state가 변경되거나, props가 변경되거나, 혹은 forceUpdate() 메서드를 호출하였을 때 입니다. 
	**리엑트는 부모 컴포넌트가 리렌더 되면 자식 컴포넌트도 전부 리렌더가 일어납니다.** 
	즉 리렌더가 자주 일어나게 되면 성능이 저하되고, 이를 `souldComponentUpdate`를 통해 최적화가 가능합니다. 
	최적화가 가능해도 애초에 불필요한 리렌더를 일으키지 않는것이 최선이고, 
	적절한 리렌더는 UI를 설계할 때 필요하지만, 무분별한 리렌더는 성능 저하를 유발합니다.

-	state vs ref

 [공식문서](https://ko.reactjs.org/docs/forwarding-refs.html) 
 createRef()는 상위 컴포넌트에서 리렌더링 시키는 것이 아닌, DOM에 직접적으로 접근하여서 하위 컴포넌트에서 리렌더를 일으켜 변경하거나 조작합니다. 
 하위 컴포넌트에서만 리렌더를 일으켜서, 리렌더의 범위를 최소화 시킴으로서 성능을 끌어올릴 수 있습니다. 
 하지만 무분별한 사용은 오히려 렌더의 범위는 줄이지만 렌더의 횟수를 늘려 성능이 저하될 수 도 있습니다. 
 공통 Component나 라이브러리에서 적절하게 사용하면 좋습니다.

-	shouldComponentUpdate

	[공식문서](https://ko.reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action) 
	라이프사이클인 shouldComponentUpdate는 false를 반환할경우 리렌더를 시도하지 않고, 
	심지어 true를 반환하는 경우에도 이전에 렌더링 된 React 엘리먼트와 동일 한 경우에는 DOM을 update하지 않아서 
	React의 렌더링 성능을 끌어올릴 수 있습니다.

React의 Class형 Component를 분석하여 공통 코드를 이해할 수 있도록 하는 글입니다.

React Class형 Component 분석하기

## Axios란?

Axios는 비동기 통신 라이브러리로, 흔히 알고 있는 ajax 기능을 내장하고 있습니다. 
OMS에선 utils/Ajax.ts 파일에 세팅이 되어있습니다. 
Axios는 Promise 기반으로 javascript에서 제공하는 XMLHttpRequests를 만들어줍니다. 
보통 Front-End에서 Back-End로 요청을 보낼 때 많이 사용되고, 혹은 외부 API를 받아오거나 크롤링을 할 때 사용합니다.

## Promise란?

Promise는 javascript에서 비동기 작업을 처리하는 방법중에 하나입니다. 
비동기 작업이 성공할 때와, 실패할 때를 나누어서 처리기를 연결해줄 수 있고, 
보통은 axios와 같은 비동기 통신에서 자주 사용됩니다. 
자세한 사용방법은 [mdn Promise](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)를 참고해주세요.

## 인스턴스 만들기

Axios는 인스턴스를 만들지 않고도 API 호출이 가능하지만, 
인스턴스를 만들면 baseURL, timeout 등의 기본적인 설정이 가능하고, 
또한 Interceptor를 적용시킬 수 있게 되어 편한 사용이 가능해집니다.

```js
import axios from 'axios';

const ajax = axios.create({
	baseURL: 'https://example.com/',
	timeout: 1000,
	headers: { 'Access-Control-Request-Headers': ['Authorization', 'Content-Type'] },
}); // ajax라는 인스턴스를 생성해줌.
```

## API 요청 보내기

인스턴스를 통한 요청 메서드는 아래와 같이 있습니다. 
HTTP Methods에 대해서는 [restful 포스트](/post/back-end/restful-api)를 참조해주세요. 
url은 반드시 들어가야하고, [] 이 부분에 들어가는 것은 선택사항입니다.

1. ajax.get, ajax.delete

	ajax.get(url[,config]); 
	get방식과 delete방식은 url에 query들이 담겨서 넘어가게 됩니다. 
	주의하실점은 parameter가 브라우저에 따라 일정 글자 수 이상이 넘어가게 되면, 
	에러가 발생할 수 있습니다.

	```js
	const config = {};
	ajax.get('example', config);
	```

2. ajax.post, ajax.put, ajax.patch

ajax.post(url[,data[,config]]); 
post, put, patch 방식은 request body에 데이터를 담아서 보내줍니다.

```js
const config = {};
const responseBody = {};
ajax.post('/example', responseBody, config);
```

## config 세팅

config에는 request와 response에 대해서 다양한 세팅을 해줄 수 있는데, 
자주 사용되는 것들에 대해서만 다루겠습니다.

```js
const config = {
	// headers는 request header에 담길 값들을 지정해줍니다.
	// back-end 설정에 맞춰 설정 데이터들을 넘길 수 있고, 인증토큰 값 등을 넘겨줍니다.
	headers: {
		'X-Requested-With': 'XMLHttpRequest',
		Authorization: token,
	},
	// Get방식과 Delete 방식에서 많이 사용되며, url 옆에 쿼리를 붙혀줍니다.
	// back-end에서는 @RequestParam, @PathVariable 등을 통해 값을 가져옵니다.
	params: {
		userId: 'X0134481',
	},
	// 인스턴스를 사용할땐 Delete방식에서만 사용됩니다.
	// Delete 방식에서 param이 아닌 request body에 데이터를 넣어주고 싶을 때 사용합니다.
	data: {
		name: '유영진',
	},
	// paramsSerializer는 params의 시리얼라이즈를 담당하는 옵션 함수입니다.
	// 데이터를 key[]=value1&key[]=value2로 보내는걸, key=value1&key=value2로 변경해줍니다.
	paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'repaet' }),
	// 요청이 시간 초과 되기 전의 시간을 지정합니다. 요청이 이 이상걸리면 요청을 중단합니다.
	timeout: 1000,
	// 자격증명을 이용하여 사이트간 제어 요청을 해야 하는지를 설정합니다.
	withCredentials: false, //기본값
	// status코드를 활용해 Promise를 이행할지, 거부할지를 결정합니다.
	validateStatus: function (status) {
		return status >= 200 && status < 300; // 기본값
	},
	// cancel 토큰은 아래에서 더 자세히 다룹니다.
	cancelToken: source.token,
};
```

## 응답

응답 정보는 promise의 결과에 return 됩니다. 
응답 정보는 이행(then)에 담기게 됩니다.

```js
ajax.get('/test').then((response) => {
	// 서버에서 보낸 데이터가 담깁니다.
	console.log(response.data);
	/* status code가 담깁니다. (200, 201, 204 등등…)
	status code를 활용하여 insert 문을 사용할 중복체크 로직 등을 exception이 아닌 방식으로 구현 가능합니다.*/
	if (response.status === 200) {
		// OK 코드
		console.log('중복 아이디');
	} else if (response.status === 204) {
		// Created
		console.log('생성 완료');
} 
// status를 code가 아닌 string으로 나타냅니다.
console.log(response.statusText);
// 서버에서 보낸 response header 값들을 볼 수 있습니다.
console.log(response.headers);
});
```

## 기본적인 사용법

OMS에서는 아래와 같은 방법으로 주로 사용합니다.

```js
import ajax, { ajaxHeaders, failure } from 'utils/Ajax';

// Get 방식 요청
const config = {
	headers: ajaxHeaders,
	params: {
		company: 'SKHYNIX', // 넘겨줄 데이터
	},
};
const success = (response) => {
	console.log(response.data);
};
const doFinally = () => {
	console.log('반드시');
};
ajax.get('url', config).then(success).catch(failure).finally(doFinally);

// Post 방식 요청
const responseBody = {
	userId: 'show5116',
	userName: '유영진',
};
const config = {
	headers: ajaxHeaders,
};
const success = (response) => {
	console.log(response.data);
};
const doFinally = () => {
	console.log('반드시'); // 요청 성공 실패 여부를 떠나 반드시 실행해야 하는 함수
};
ajax.post('/url', data, config).then(success).catch(failure).finally(doFinally);
```

## 에러

OMS에서는 utils/ajax.ts에 faulure가 정의되어 있어서, 기본적으로는 가져다가 사용하면 됩니다. 
하지만 특수한 상황에서는 에러메시지를 숨긴다던지, 혹은 실패했을 경우 다른 액션이 필요할 때, 
혹은 에러가 나는 원인이 프론트엔드인지를 찾을 때, 직접 에러 핸들러를 추가해서 사용해주면 됩니다.

```js
ajax.get('/url').catch((error) => {
	if (error.response) {
		// 요청은 전송되었으나, 응답코드가 2xx가 아닐경우
		console.log(error.response.data);
		console.log(error.response.status);
		console.log(error.response.headers);
	} else if (error.request) {
		// 요청은 전송되었는데, 응답이 수신되지 않았을 경우
		console.log(error.request);
	} else {
		// 요청을 보내는데 실패한 경우(프론트엔드 문제)
		console.log(error.message);
	}
});
```

## interceptors

axios인스턴스를 만들면 interceptor를 적용시킬 수 있는데, 
이로 인해 request 요청에 필요한 헤더를 편하게 세팅해주기도 하고, 
response에서 오는 요청에 특별한 이벤트를 걸어줄 수 도 있습니다.

```js
// Interceptor를 사용하기 시작
const requestInterceptor = ajax.interceptors.request.use(
	(request) => {...} ,
	(error) => {...}
);
const responseInterceptor = ajax.interceptors.response.use(
	(response) => {...} ,
	(error) => {...}
);

// Interceptor를 제거
ajax.interceptors.request.eject(requestInterceptor);
ajax.interceptors.response.eject(responseInterceptor);
```

현재 OMS에서는 로그인, 로그아웃, 그리고 토근에 관련되어서 interceptors가 사용되고 있고, 
이는 [auth 포스트](/post/front-end/auth)에서 더 자세히 다룹니다.

## 요청취소

취소토큰을 이용해 취소가 필요할 때 요청 취소를 할 수 있습니다. 
취소토큰은 **지원중단된** proposal-cancelable-promises를 기반으로 하고 있습니다. 
프론트에서 어떠한 동작에 의해서 취소시켜야 할 경우에만 사용할 것을 추천드리고,(요소를 제거) 
xception에 대한건 백엔드에서 처리할 것을 추천드립니다. 
사용 방법에는 2가지 방식이 있고, 코드스타일의 차이만 존재하고 기능은 같습니다.

### source 방식

```js
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
const config = {
	cancelToken: source.token,
};
ajax.get(url, config).catch((error) => {
	if (axios.isCancel(error)) {
		console.log('캔슬되었습니다.' + error.message);
	}
});

setTimeout(() => {
	source.cancel('시간초과');
}, 500);
```

### 생성자 방식

```js
const CancelToken = axios.CancelToken;
let cancelRequest;
const config = {
	cancelToken: new CancelToken((c) => (cancelRequest = c)),
};
ajax.get(url, config).catch((error) => {
	if (axios.isCancel(error)) {
		console.log('캔슬되었습니다.' + error.message);
	}
});

setTimeout(() => cancelRequest(), 500);
```

비동기 통신 라이브러리인 axios의 설정 및 사용법에 대해 알아보는 글입니다.

Axios

MarkDown파일은 사용법이 쉽고, 빠르게 문서를 정리할 수 있는 장점이 있습니다. 
확장자는 **.md**로 HTML 마크업을 대신하여서 표현되고 있습니다. 
각 프로젝트의 **README.md** 처럼 글씨와 간단한 이미지로 표현하는 문서입니다. 
현 프로젝트의 모든 글들은 mdx파일들로 이루어져 있습니다.

## .mdx

mdx파일은 .md파일과 동일한 문법으로 작성이 되는데, 
거기에 더불어 리엑트 컴포넌트와 함께 사용이 가능한 확장자입니다. 
따라서 현재 OMS-Tech-Blog는 MDX Remote를 이용해 .mdx파일을 해석하고, 
이를 하나의 블로그 글처럼 만들어주는 역할을 하고 있습니다.

## 마크다운 문법

마크다운의 문법은 기본적인것은 비슷하나, 
적용되는 컨텐츠에 따라 약간씩 다르게 적용될 수 있습니다. 
ex) github, bitbucket등의 사이트에서 README.md도 서로 다르게 적용됩니다.

### frontmatter

frontmatter는 파일 시작 시 파일에 대해 작성하는 구역입니다. 
파일에 맨 위에 파일에 대한 정보를 작성해 주면 됩니다.

```md
---
title: 'MarkDown 작성법'
date: '2023-04-03'
description: 'OMS-Tech-Blog에서 mdx 파일 작성법에 대한 글입니다.'
authorId: 'show5116'
authorName: '유영진'
tags: ['md']
thumbnail: '/front-end/markdown.png'
---
```

### 제목

`<h1>` 태그부터 `<h6>` 태그 까지 제목을 표현할 수 있습니다.

```md
	제목 작성법
	# 제목 1
	## 제목 2
	### 제목 3
	#### 제목 4
	##### 제목 5
	###### 제목 6
```

### 강조

```md
이텔릭체는 *별표(asterisks)*를 사용하세요.
강조는 **별표(asterisks)** 또는 `백틱(backtick)`을 사용하세요.
<del>취소선은</del> `<del></del>`를 사용하세요.
밑줄은 ``를 사용하세요.
```

이텔릭체는 *별표(asterisks)*를 사용하세요.
강조는 **별표(asterisks)** 또는 `백틱(backtick)`을 사용하세요.
<del>취소선은</del> `<del></del>`를 사용하세요.
밑줄은 ``를 사용하세요.

### 목록

`<ol>`, `<ul>` 목록 태그로 변환됩니다.

```md
1. 순서가 필요한 목록

2. 순서가 필요한 목록
 - 순서가 필요하지 않은 목록(서브)
 - 순서가 필요하지 않은 목록(서브)

3. 순서가 필요한 목록
 1. 순서가 필요한 목록(서브)
 2. 순서가 필요한 목록(서브)

4. 순서가 필요한 목록

- 순서가 필요하지 않은 목록에 사용 가능한 기호
 - 대쉬(hyphen)
 * 별표(asterisks)
 + 더하기(plus sign)
```

1. 순서가 필요한 목록

2. 순서가 필요한 목록
 - 순서가 필요하지 않은 목록(서브)
 - 순서가 필요하지 않은 목록(서브)

3. 순서가 필요한 목록
 1. 순서가 필요한 목록(서브)
 2. 순서가 필요한 목록(서브)

4. 순서가 필요한 목록

- 순서가 필요하지 않은 목록에 사용 가능한 기호
 - 대쉬(hyphen)
 * 별표(asterisks)
 + 더하기(plus sign)

### 링크

외부 링크는 `<a>`태그로 변환되고, 
내부 링크는 Next.Link로 변환됩니다.

```md
[GOOGLE](https://google.com)

[NAVER](https://naver.com "링크 설명(title)을 작성하세요.")

[상대적 참조](/about)

[제목](#제목)
```

[GOOGLE](https://google.com)

[NAVER](https://naver.com "링크 설명(title)을 작성하세요.")

[상대적 참조](/about)

[제목](#제목)

### 이미지

외부 링크는 `<img>`태그로 변환되고, 
이미지 파일은 Next.Image로 변환됩니다.

```md
![대체텍스트를 작성해주세요.](http://www.gstatic.com/webp/gallery/1.jpg)
![대체텍스트란에 사이즈 지정이 가능합니다. size:800*600](http://www.gstatic.com/webp/gallery/1.jpg "링크 설명(title)을 작성하세요.")
![프로젝트내 이미지 파일은 사이즈 지정을 하지 않으면 고정된 크기로 나옵니다.](/front-end/dog.png)
![사이즈 지정을 해주세요 size:500*300](/front-end/dog.png)
```

![대체텍스트를 작성해주세요.](http://www.gstatic.com/webp/gallery/1.jpg)
![대체텍스트란에 사이즈 지정이 가능합니다. size:800*600](http://www.gstatic.com/webp/gallery/1.jpg "링크 설명(title)을 작성하세요.")
![프로젝트내 이미지 파일은 사이즈 지정을 하지 않으면 고정된 크기로 나옵니다.](/front-end/dog.png)
![사이즈 지정을 해주세요 size:500*300](/front-end/dog.png)

### 이미지에 링크

이미지안에 링크를 사용할 수 있습니다.

```md
[![Google size:330*130](/front-end/google.png)](https://www.google.com/)
```

[![Google size:330*130](/front-end/google.png)](https://www.google.com/)

### 코드블록

코드 종류에 따라 블록을 작성할 수 있습니다. 
백틱 3번과 그 옆에 언어 종류를 적어주시면 됩니다. 
**주의 remoteMdx 라이브러리가 `java`를 지원하지 않아 하이라이터 적용이 안됩니다.**

````md
```java
String a = "aa";
```

```sql
SELECT a.* FROM user a;
```

```yml
spring:
	post: 8081
```

```html
<h2>안녕하세요</h2>
```

```css
a {
	background: black;
}
```

```ts
const a: string = 'aa';
```

```tsx
<Link>
	{Array(5)
	.fill(null)
	.map((item, index) => (
		{index}번째 입니다.
))}
</Link>
```

```bash
yarn start
git pull origin master
```

```groovy
dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-web'
	implementation 'org.springframework.boot:spring-boot-starter-webflux'
}
```
````

```java
String a = "aa";
```

```sql
SELECT a.* FROM user a;
```

```yml
spring:
	post: 8081
```

```html
<h2>안녕하세요</h2>
```

```css
a {
	background: black;
}
```

```ts
const a: string = 'aa';
```

```tsx
<Link>
	{Array(5)
	.fill(null)
	.map((item, index) => (
		{index}번째 입니다.
))}
</Link>
```

```bash
yarn start
git pull origin master
```

```groovy
dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-web'
	implementation 'org.springframework.boot:spring-boot-starter-webflux'
}
```

### 인용문

`<blockquote>` 태그로 변환됩니다.

```md
인용문(blockQuote)

> 남의 말이나 글에서 직접 또는 간접으로 따온 문장. 
> _(네이버 국어 사전)_

break!

> 인용문을 작성하세요!
>> 중첩된 인용문(nested blockquote)을 만들 수 있습니다.
>>> 중중첩된 인용문 1 
>>> 중중첩된 인용문 2 
>>> 중중첩된 인용문 3 
```

인용문(blockQuote)

> 남의 말이나 글에서 직접 또는 간접으로 따온 문장. 
> _(네이버 국어 사전)_

break!

> 인용문을 작성하세요!
>> 중첩된 인용문(nested blockquote)을 만들 수 있습니다.
>>> 중중첩된 인용문 1 
>>> 중중첩된 인용문 2 
>>> 중중첩된 인용문 3 

### 수평선

`<hr>`태그로 변환됩니다.

```md
---
(Hyphens)

***
(Asterisks)

___
(Underscores)
```

---
(Hyphens)

***
(Asterisks)

___
(Underscores)

### 줄바꿈

` `태그를 사용하거나, 띄어쓰기 2번을 이용해 줄바꿈을 할 수 있습니다.

```md
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세 
무궁화 삼천리 화려 강산 
대한 사람 대한으로 길이 보전하세
```

동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산 
대한 사람 대한으로 길이 보전하세

### JSX 태그

JSX 태그를 그대로 사용할 수 있습니다.

```md

	빨간색 
	<a href='/front-end/downloadMdx.mdx' download>예시 다운로드</a>
	<div
		style={{
			width: 0,
			height: 0,
			borderBottom '50px solid transparent',
			borderTop: '50px solid transparent',
			borderLeft: '50px solid skyblue',
			borderRight: '50px solid transparent',
		}}
	></div>

```


	빨간색 
	<a href='/front-end/downloadMdx.mdx' download>예시 다운로드</a>
	<div
		style={{
			width: 0,
			height: 0,
			borderBottom: '50px solid transparent',
			borderTop: '50px solid transparent',
			borderLeft: '50px solid skyblue',
			borderRight: '50px solid transparent',
		}}
	></div>


### 요약

펼쳐졌다 닫히는 details 태그를 사용할 수 있습니다.

```md
<details>
	<summary>요약입니다.</summary>
	Elit voluptate labore eiusmod aliqua in excepteur ea in.
</details>
```

<details>
	<summary>요약입니다.</summary>
	Elit voluptate labore eiusmod aliqua in excepteur ea in.
</details>

### 커스텀 기능

```md
**주의 주의사항 입니다.** 
강조구문에 주의 라는 글자로 시작하면 주의 구문이 생성됩니다.
```

**주의 주의사항 입니다.** 
강조구문에 주의 라는 글자로 시작하면 주의 구문이 생성됩니다.

## IDE 활용

.md 파일의 경우에는 **Intellij**와 **VS Code**에서 자동완성, 미리보기를 지원합니다. 
이를 활용해 작성하게 되면 좀더 편리하게 가능합니다.

OMS-Tech-Blog에서 mdx 파일 작성법에 대한 글입니다.