Javascript 배열의 내장 함수 sort()에 대해 이전에 간단히 정리한적이 있지만 이용 방식을 확실히 알고 가도록 다시 정리해보자.

arrayObj.sort(sortFunction)

임의의 Array 객체에 대해서 정렬을 수행하는 함수이다. sortFunction에는 정렬 기준을 결정하는 데 사용되는 함수를 추가할 수 있다. sortFunction은 임의의 a, b 두개의 요소를 파라미터로 입력받는다. 이 때 정렬 조건은 다음과 같다.
ex) 함수 리턴 값을 a - b 라고 했을 때,

• 리턴 값이 0보다 작을 경우, a가 b보다 앞에 오도록 정렬한다.
• 리턴 값이 0보다 클 경우, b가 a보다 앞에 오도록 정렬한다.

이 조건을 이용하여 숫자, 문자열에 대한 오름차순과 내림차순 정렬을 할 수 있다.

숫자 정렬

문자열 정렬

오름차순을 기준으로 설명해보자면 순서대로 data의 name 값을 비교해가면서,

• a가 b보다 작을 경우엔 -1을 리턴하여 a가 b보다 앞에 오도록

• a가 b보다 클 경우엔 1을 리턴하여 b가 a보다 앞에 오도록
• a와 b가 같을 경우엔 0을 리턴하여 순서를 변경하지 않도록 정렬해준다.

count([문자])

문자열 중 [문자]의 개수를 반환한다.

a = "hello"
a.count('l')
# 2

find([문자])

문자열 중 문자가 처음 나온 위치를 반환한다. 존재하지 않는다면 -1을 반환한다.

index([문자])

문자열 중 문자가 맨 처음으로 나온 위치를 반환한다. 존재하지 않는다면 오류가 발생한다.

[문자].join([문자열])

문자열의 각각의 문자 사이에 문자를 삽입한다.

",".join('hello')
# h,e,l,l,o

upper(), lower()

문자열을 대문자 혹은 소문자로 바꿔준다.

lstrip(), rstrip(), strip()

문자열의 왼쪽 혹은 오른쪽 또는 양쪽의 공백을 지워준다.

replace([이전 문자열], [새 문자열])

특정 문자열을 새로운 문자열로 변경한다.

a = "life is too short"
a.replace("life", "day")
# a = "day is too short"

split()

괄호 안에 아무 값도 넣지 않으면 공백을 기준으로 문자열을 잘라 리스트로 반환한다. 괄호 안에 값이 존재하면 그 값으로 문자열을 잘라 리스트로 반환한다.

a = "life is too short"
a.split()
# ['life', 'is', 'too', 'short']
b = "a:b:c:d"
b.split(':')
# ['a', 'b', 'c', 'd']

원격으로 설정된 리눅스 서버로 접근했을 때, 로컬의 세션이 종료될때마다 프로세스도 함께 죽는 현상이 발생한다. 리눅스에서 제공하는 명령어인 nohup을 이용하면 터미널의 세션 연결이 끊어지더라도 지속적으로 프로세스를 동작할 수 있게 해준다.

nohup

터미널 종료 후 프로세스 작업을 유지해주는 리눅스 명령어

nohup [커맨드 명령어] & 를 이용하여 백그라운드 프로세스를 유지시키려고 했다. 커맨드 명령어에는 자신의 프로젝트를 실행시키는 명령어를 적어주면 된다.

nohup yarn start & 하지만 또다시 세션종료와 동시에 프로세스도 죽는 문제가 발생했다😥 이 문제는 아래 disown 옵션을 추가해서 해결할 수 있었다!

disown

터미널 종료 시 프로세스 종료 방지

disown은 프로세스 작업의 소유권을 shell session에서 해제시키는 옵션이다. 옵션으로 추가해주면 현재 session job list에서 job 들이 빠져나가게 된다. (이는 jobs 커맨드로 확인 가능, 프로세스 전체 보기로 보면 프로세스는 남아있는 것을 볼 수 있다.)

따라서 터미널이 종료되어도 SIGHUP이 전달되지 않아서 계속 돌아가게 된다.

nohup을 실행하고 나면 프로젝트 내부에 nohup.out의 이름을 가진 파일이 생성된다. 세션이 종료되어도 프로세스의 출력값을 저장하는 파일로, 언제든지 이 파일을 통해 프로세스의 상태를 확인할 수 있다.

nohup 으로 실행중에 nohup.out 을 비우고 싶다면, 아래 명령어를 사용하면 된다. cat /dev/null > nohup.out

참고 블로그 🔍

https://crazyj.tistory.com/242

News Viewer Project

외부 API를 이용하여 최신 뉴스 기사 불러오는 실습 프로젝트

✨ 공부한 기술

React, axios, Sass (+ styled-components), React router

📚 TIL

Axios

원하는 뉴스 기사 데이터를 불러오기 위해 비동기 통신 기술인 axios 의 GET 통신을 이용하였다.

async/await

서버의 API를 사용할 때에는 네트워크 송수신 과정에서 시간이 소요되기 때문에 작업이 즉시 처리되게 하지 않고, 응답이 수신될 때 까지 기다렸다가 전달받은 응답 데이터를 처리하게 된다. 이를 '비동기적 처리' 라고 한다.

💡 동기적 처리 : 해당 요청 작업이 끝날 때 까지 중지 상태가 되어 다른 작업을 수행할 수 없게 하는 것

❌

다음 코드에서는 렌더링 시 작업을 즉시 처리하기 때문에, 응답 받은 response 데이터를 찾을 수 없어 오류가 발생할 수 있다.

⭕

이는 아래 첨부 사진과 같이 async, await을 이용하여 비동기적으로 처리해준다.

💡 useEffect 함수에는 async를 붙힐 수 없기 때문에, 내부 async 함수를 따로 만들어야 한다!

useEffect

사용자가 선택한 카테고리 값에 따라 API URL의 query string이 달라지기 때문에 useEffect의 배열 안에 category 를 넣어주었다. category 값이 변경될 때마다 해당 URL을 통해 데이터를 다시 불러오도록 한다.

Styled-Components

Styled-Components 는 npm 패키지를 이용해 쉽게 다음 명령어로 설치 가능하다.

npm i styled-components

실제로 사용하기 위해 Styled-Components에서 Styled를 import를 해준다.

import styled from "styled-components"

위 코드에서는 React 컴포넌트인 NavLink에 대한 스타일링을 Category에 정의하여 사용하도록 하였다.

리덕스는 데이터를 관리하는데 도와주는 역할을 한다. 데이터 상태관리를 위해 React나 Angular와 함께 자주 쓰인다.

Store

전체 데이터의 상태를 저장하고 있는 데이터 저장소

createStore()

하나의 Reducer를 가지는 데이터 저장소를 생성하는 함수

const countStore = createStore(countReducer);

dispatch()

리듀서에게 action 인자를 전송할 수 있는 Store의 함수

const handleAdd = () => {
  countStore.dispatch({ type: ADD });
};
const handleMinus = () => {
  countStore.dispatch({ type: MINUS });
};

subscribe()

데이터가 변경될 때 실행될 함수를 인자로 전송할 수 있는 Store의 함수

getState()

Store 내부 데이터의 상태를 확인할 수 있는 Store의 함수

const onChange = () => {
  number.innerText = countStore.getState();
};

countStore.subscribe(onChange);

Action

Action은 Store라는 저장소에 정보를 전달하기 위한 데이터 묶음

const ADD = "ADD_TODO"
const DELETE = "DELETE_TODO"

Action Creator

Action Creator는 Action을 생성하기 위한 함수이다.

const handleAdd = (text) => {
        return {
                type: ADD,
                text,        
        }
}

Reducer

데이터의 상태를 관리할 수 있는 오직 1개의 함수

• Store와 데이터 정보를 주고 받는 역할을 해준다.
• String 타입으로 전달된 Action을 통해 데이터를 어떻게 변경할지 관리해주는 역할을 한다.

const countReducer = (count = 0, action) => {
  switch (action.type) {
    case "ADD":
      return count + 1;
    case "MINUS":
      return count - 1;
    default:
      return count;
  }
};

CombineReducers()

많은 리듀서들을 하나로 합쳐 하나의 리듀서로 관리할 수 있도록 해준다.

import { combineReducers } from 'redux';

const toDoReducer = combineReducers({
  countReducer,
  nameReducer
});

프로젝트 진행 중 게시판을 만들면서 내가 작성한 글, 댓글, 공감에 대해서만 수정, 삭제 기능을 이용하는 방법을 구현해본 것에 대해 정리한다.

게시물에 대한 권한을 확인하는 속성

내가 작성한 글 or 댓글에만 수정, 삭제 버튼을 렌더링 해주기 위해서 클라이언트는 사용자의 토큰 정보를 헤더에 담아 서버에 전달함으로서 게시물에 대한 권한을 확인하여야 한다.

게시물은 비로그인 사용자도 볼 수 있어야하기 때문에 토큰이 전송될 때와 전송되지 않을 경우 2가지를 고려하여 구현하였다.

• 요청 헤더에 사용자의 토큰을 담아 axios를 이용하여 현재 게시물의 정보를 가져올 수 있는 api를 호출한다.

사용자의 권한이 확인되면 서버는 아래 JSON 구조와 같이 응답 데이터에 게시물에 대한 정보와 함께 권한을 확인할 수 있는 editable 속성을 포함하여 전달하도록 구현하였다. 멘토님의 조언을 토대로 서버와 상의하여 데이터의 필드를 설계하였고 실제로 서버에서 받은 응답 데이터의 모습이다.

댓글, 공감 컴포넌트도 동일하게 각 아이템마다 editable 속성을 통해 권한을 확인하면서 특정 이벤트 실행 가능 여부를 판단하도록 했다.

💬 들어가며

프로젝트를 진행하면서 초반에 가장 많이 발생했던 CORS 이슈에 대해 확실히 짚고 넘어가기 위해 정리해보려 한다.

CORS 가 도대체 뭐지?

CORS, Cross-Origin Resource Sharing 이라는 정책으로 웹 개발자라면 흔히 겪는 에러의 원인이라고 과언이 아니라고 한다. 실제로 서버와 통신을 진행해서 프로젝트를 진행해 본 경험이 없었던 나는 에러가 발생했을 당시 당황스러웠던 기억이 많다.

CORS는 쉽게 말해서 '다른 출처 간의 리소스를 공유하는 것에 대한 정책' 을 의미한다. 이 정책 덕분에 다양한 곳에서 가져오는 리소스가 안전하다는 최소한의 보장을 받을 수 있다.

CORS 의 동작 방식

실제로 어떤 방법을 통해 리소스를 안전하게 사용할 수 있는지 알아보자.

기본적으로 클라이언트가 리소스를 요청할 때에 HTTP 프로토콜을 사용하여 요청을 보내게 되는데, 이때 브라우저는 Request Header에 서버에 요청을 보내는 출처가 담긴 Origin이라는 필드를 함께 담아보낸다.

실제로 진행 중인 프로젝트에서도 API를 통해 데이터를 요청할 때의 헤더 내용을 다음과 같이 확인할 수 있었다.

이후 서버는 이 요청에 대해 응답을 할 때 Response Header에 Access-Control-Allow-Origin 이라는 필드에 '요청 리소스에 접근이 허용된 출처'를 담게 되고, 이후 응답을 받은 브라우저는 Request Header에 담았던 Origin과 Access-Control-Allow-Origin 필드의 값을 비교해보며 응답이 유효한지에 대해 결정하게 된다.

위 방식이 기본적인 CORS의 흐름이다. 하지만, CORS가 동작하는 방식은 3가지가 존재하기 때문에 개발하는 상황에 따라 자신이 어떤 시나리오에 적용되어있는지 파악한다면 에러를 고치는 것이 한결 쉬워질 것이다.

☝🏻 Preflight Request

가장 많이 마주치는 시나리오는 프리플라이트 요청 방식이다. 이 방식은 브라우저가 본 요청을 보내기 전 예비 요청인 Preflight를 보내면서 요청이 안전한 것인지 확인하는 과정을 거친다. 이 예비 요청에는 HTTP 메소드 중 OPTIONS 메소드가 사용된다. 위에서 첨부한 캡처사진 또한 Preflight 요청이기에 OPTIONS 메소드를 사용하는 것을 확인할 수 있다!

다음으로 눈여겨 보아야 할 것은 예비 요청에 대해 서버가 보낸 응답 헤더에 포함된 Access-Control-Allow-Origin 필드이다. 요청 헤더에서의 Origin 필드의 출처와 응답 헤더에서의 ACAO 필드의 값이 동일한 것을 확인할 수 있다. 만약, ACAO 필드에서 허용하지 않는 출처를 Origin에 담았다면 CORS 정책을 위반하게 되어 에러를 뱉어내게 되는 것이다.

✌🏻 Simple Request

단순 요청이다. 예비 요청 없이 본 요청을 바로 서버에 보낸다. 이후 ACAO 필드를 확인해서 통신하는 방식은 Preflight 요청 방식과 같다.

하지만 아무 때나 단순 요청이 가능하지 않고, 아래와 같은 특정 조건을 만족하는 경우에만 예비 요청을 생략할 수 있다.

• PUT, DELETE 같은 메소드를 사용하지 않으면 된다.
• 2번에 명시된 필드들은 기본적인 헤더들이기에, 대부분은 조건을 만족하지만 사용자 인증의 경우 Authorization 필드를 사용하므로 이 경우 조건을 만족시킬 수 없다.
• 대부분의 경우 Content-Type으로 application/json이나 text/xml을 사용하기 때문에 3번 조건 또한 만족시키기 어려운 경우가 많다고 한다.

🤟🏻 Credentialed Request

다른 방법들과 달리 추가 인증을 통해 좀 더 보안을 강화하는 방법이다.

기본적으로 비동기 리소스 요청 API인XMLHttpRequest 나 Fetch 호출을 통해서 브라우저는 자격 증명, 즉 인증과 관련된 헤더를 함부로 요청에 담아 보내지 않는다. 이때 인증 관련 정보를 담을 수 있게 해주는 옵션이 바로 credentials 옵션이다.

자세한 정보는 참고 블로그를 통해 더 알아볼 수 있다.

참고 블로그 🔍

https://evan-moon.github.io/2020/05/21/about-cors/

최근 기술 세미나에 참관하여 배웠던 _웹 표준_에 대해 정리해보고 적용시켜보려한다.

웹 표준

표준화 단체인 W3C가 권고한 표준안에 따라 HTML, CSS, JavaScript 등에 대한 표준 기술을 규정한 것

• 구조적 마크업과 표현, 레이아웃 및 행위 제어를 잘 분리하는 구축 방식

• 웹 상에서 지켜야 하는 표준적인 규칙이지만 필수적이진 않다. 하지만 어떤 운영체제, 브라우저든 웹 페이지를 동일하게 보이고 정상작동 되게 하기 위해 필요한 규칙이다.

웹 표준의 항목

크게 4가지가 존재하며, 진행 중인 프로젝트에 반영하여 수정해볼 수 있는 예시들과 함께 설명해보도록 하겠다.

1. 인지성 ☝🏻

정보와 사용자 인터페이스 요소는 사용자가 인지할 수 있는 형태로 제공해야한다.

✅ 대체 텍스트

이미지 태그를 삽입 시 대체 텍스트를 넣어 눈이 아닌 다른 방법으로 웹을 이용하는 사용자들에게 또한 인지성을 제공한다.

✅ 링크 이동은 a 태그, 이벤트 실행은 button태그로 설정한다.

🎃 적용해보기

alt 태그는 시각 장애인이 사용하는 스크린 리더기나 점자 타자기와 같은 보조기기에서 인식하는 대체 텍스트이다. 이 속성을 사용하여 이미지 태그에 부가 설명을 추가해주었다.

이전에는 상단바에 존재하는 사이트맵의 태그가 모두 Button으로 되어있었다. 링크로 연결되는 태그이므로 Link 태그로 변경해주었다.

✅ 시멘틱 태그, Semantic = "의미의"

태그에 특정 역할, 의미를 부여함으로서, 컴퓨터, 웹 사용자가 HTML 요소의 의미를 명확히 해석하여 시멘틱 웹을 실현하게 해주는 요소이다.

• 종류 : header, nav, aside, section, article, footer
• 검색엔진, 개발자에게도 콘텐츠의 의미를 명확히 설명하여 해석할 수 있도록 한다.
• 검색엔진 최적화(SEO)와 같은 마케팅 도구에 노출 될 가능성 높아진다.
  
  

2. 실행성 ✌🏻

사용자가 직접 인터페이스의 요소들을 탐색하여 콘텐츠의 위치를 알 수 있도록 도와줄 수 있어야 한다.
✅ 사이트맵 상단바나 드롭다운 기능을 통해 콘텐츠의 위치를 파악할 수 있도록 한다.

✅ 키보드 제어 키보드를 통해서 컨텐츠에 접근할 수 있도록 한다.

✅ 포인터

컴포넌트에 대해 마우스를 올렸을 때 실행 가능한 이벤트가 존재하는지 알 수 있게 해야한다.

3. 이해성 👌🏻

사용자들이 웹 컨텐츠의 정보들을 이해하고 해석할 수 있어야 한다.

✅ 언어

스크린 리더 프로그램은 html 문서 작성 시 상단에 위치하는 lang(language)의 속성 값에 따라 언어를 판단하게 된다. 만약, lang="en" 일 경우에는 영어로 인지하여 한국어는 읽지 못한다. 반면, lang="ko" 일 경우, 한국어/영어 구분없이 읽을 수 있다.

• 중간에 다른 언어가 사용될 때에는 해당 태그에 lang 속성을 언어에 맞게 추가해주면 된다.
  

✅ 알림 문구

사용자가 어떤 이벤트를 실행한 후, 실행값을 인지하고 수정할 수 있도록 알릴 수 있어야 한다.

🎃 적용해보기

회원가입 시 입력 조건이 일치하지 않을 때, 특정 필드의 값 아래에 알림 문구를 띄우게 구현하여 사용자가 쉽게 수정할 수 있도록 하였다.

📚 참고 블로그

• https://velog.io/@ru_bryunak/HTML-%EA%B8%B0%EC%B4%88-2-%EC%8B%9C%EB%A7%A8%ED%8B%B1-%ED%83%9C%EA%B7%B8%EB%9E%80

데이터가 메모리가 어떻게 저장되고, 처리되어야 하는지 명시적으로 알려주는 것

literal 값 자체가 변하지 않는 값

🌱 기본 자료형 타입 (Primitive Type)

• Object, Reference 형태가 아닌 실제 값을 저장하는 자료형

• 스택(Stack) 메모리에 저장

  • Boolean, Number, String, Undefined, Null (Javascript)

• Symbol

  • 심볼은 불변하고 유일함
    • 객체의 Key로 사용하여 변하지 않는 고유한 값을 설정해줄 수 있음

🔗 참조 타입 (Reference Type)

• Array let list: Array<myArray> = [1, 2, 3]; let list: myArray[] = [1, 2, 3];

타입스크립트에서 추가되는 타입

• Any : 어떤 타입도 상관 없는 타입, 사용하지 않는 게 중요 👀
• Void : 타입이 없는 상태, 함수 리턴 값이 없을 때 사용
• Never : 리턴에 주로 사용, 아래 3가지가 주로 사용

• Enum

• 열거형 데이터 타입 별도의 값이 설정된 멤버들의 집합으로 이루어진 자료형
• 쉬운 이름으로 데이터에 접근하기 위해 활용 멤버에 따로 값을 할당하지 않으면 default = 0 이 할당되며, 이후 멤버들은 이전 멤버의 값에 +1된 값이 할당된다.

• Tuple

• Object 형 배열이지만, 타입이 여러가지인 경우 사용

컴포넌트의 객체가 생성되어 DOM 상에 삽입될 때 아래 순서대로 호출된다.

• constructor()
  • 컴포넌트가 생성될 때 자동으로 호출되는 컴포넌트 생성자 함수
• render()
  • 클래스 컴포넌트에서 반드시 구현되어야 하는 메서드
• componentDidMount()
  • 컴포넌트가 화면에 출력될 때 호출되는 함수
  • 외부 라이브러리 연동, axios/fetch를 통한 데이터 요청, DOM 속성 읽기/수정 작업 시 실행

컴포넌트 업데이트 🌷

props 또는 state가 변경될 때 컴포넌트를 다시 갱신해주어야 할 필요가 있다. 이 때 사용되는 메서드들이다.

• static getDerivedStateFromProps(nextProps, prevState)

• 업데이트 시킬 props의 값(nextProps.value)과 업데이트 전 state의 값(prevState.value)를 매개변수로 갖는다.

• shouldComponentUpdate(nextProps, nextState)

• 특정 조건에 따라 업데이트를 막아줄 수 있는 함수

• getSnapshotBeforeUpdate()

• 실제 DOM이 업데이트 되기 전에 이전 상태를 저장하여 가져오는 함수

• 이 메서드는 props, state의 업데이트에 따라 컴포넌트에 특정 함수를 실행시키고 싶을 때 사용한다.

• componentDidUpdate()

  • 컴포넌트에서 렌더링 호출 후에 발생하는 함수

HOOKS 🌴

🌊 State Hook

useState

클래스 컴포넌트에서처럼 state를 생성하고 관리할 수 있다. 아래 사진과 같이 대괄호로 묶어 생성하고, 수정한다.

📌 사용법

✅ 타입스크립과 함께 사용할 때 원하는 타입 구조의 인터페이스를 생성해주고 다음과 같이 정의해준다.

interface dataInfo {
    name: string,
    age: number
}
const [data, setData] = useState<dataInfo>()

• 객체나 배열의 state을 생성하고 싶을 때는 다음과 같이 정의해준다.

  const [data, setData] = useState<dataInfo>(Object)
  const [data, setData] = useState<dataInfo[]>([])

⚡ Effect Hook

useEffect

컴포넌트가 마운트 / 언마운트 / 업데이트 될 때, 컴포넌트가 렌더링 이후 수행해야 하는 일을 알려주도록 하는 함수

📌 사용법

useEffect( () => {
    // mount 시 실행할 함수
    return () => {
        // unmount 시 실행할 함수
    ]
}, [deps값]);

✅ deps 배열에 특정 state가 존재할 때,

1) 컴포넌트가 처음 마운트 될 때 호출 2) 컴포넌트가 언마운트 될 때 호출 3) 해당 state 값이 업데이트 될 때 호출

✅ deps 배열이 빈 배열일 때,

1) 컴포넌트가 처음 마운트 될 때 호출

🎃 실제로 사용해보기

프로젝트 진행 시 사용했던 코드와 함께 설명하겠다.

위 코드는 댓글 commentItem 또는 답글 recommentItem 각각에 추천/비추천의 개수가 변경될 때마다 item에 commentItem, recommentItem을 저장해주어야 하므로 작성된 코드이다.

💡 deps 배열은 말그대로 배열이므로 여러 개의 변수가 할당되는 것이 가능하다.

• 추천/비추천 버튼을 누르면 컴포넌트의 props로 commentItem 또는 recommentItem이 들어오게 된다.
• 이 때, 들어온 commentItem 또는 recommentItem의 값에 따라 setItem 함수를 통해 item에 값을 저장하게 된다.

Ajax 란?

(Asynchronous Javascript And Xml) Javascript를 이용한 비동기 통신 기술로, 클라이언트와 서버 사이에서 전체 페이지를 리로드 할 필요 없이,** 필요한 데이터만 로드** 할 수 있다.

💡 Ajax는 JSON, XML, HTML, txt 등 다양한 형태의 데이터를 주고 받을 수 있다.

💡 Ajax를 구현할 수 있는 기술들 중 최신 기술인 Fetch(), Axios() 에 대해 알아보도록 한다.

• Fetch(), Axios() API 모두 Javascript 라이브러리로, Promise 기반의 비동기 통신 기술이다. ( = Promise 객체 형태로 return 한다. )

1. fetch

• import 하지 않아도 사용 가능하다.
• 지원하지 않는 브라우저가 있다.
• 네트워크 에러가 발생했을 때 기다려야 한다. ( reponse timeout API을 제공하지 않음 )

1-1. fetch를 이용해보자!

fetch(url, options)
    .then((response) => console.log("response:", response))
        .catch((error) => console.log("error:", error))

• 첫번째 인자인 url을 통해 API를 호출한다. 반환된 Promise 타입의 객체는 호출의 성공 여부에 따라 응답 객체(response) 또는 예외 객체(error)를 resolve, reject한다.

🔎 옵션(options) 객체 : HTTP 방식(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body) 등을 설정 가능하다.

예제 다음은 JSONPlaceholder에서 fetch를 이용하여 free API를 호출하는 코드이다.

🔎 가져오려는 데이터의 형태

 {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
 }

🔎 (7-11번째줄)

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => res.json())
  .then(json => {
      setTodos(data);
      setLoading(false);
  });

간단히 설명하자면, url에 존재하는 JSON 형태의 데이터를 성공적으로 가져오면 첫번째 .then을 실행한다. 데이터를 JSON 형태로 파싱한 후, 파싱된 데이터는 두번째 .then의 실행으로 인해 todos 변수에 저장된다.

실제 결과를 확인하면 아래와 같다.

💭 *예제 실행 시 해결한 issue * 가져오려는 데이터의 타입과 변수의 타입을 올바르게 지정하지 않으면 오류가 발생한다. 위 예제에서 여러개의 object가 담긴 array를 가져오는 것을 제대로 알아보지 않고 하나의 array를 가져오는 거라 생각해서 문제가 발생했었다.

2. axios

• 대부분의 브라우저에서 지원하고 있는 라이브러리이다.
• request aborting (요청취소)가 가능하다.
• catch에 걸렸을 때, .then을 실행하지 않고, console 창에 해당 에러 로그를 보여준다.
• fetch 보다 더 많은 기능이 존재한다.

2-1. axios를 이용해보자!

클라이언트와 서버 간에 사용되는 HTTP Methods 중 많이 사용되는 메서드를 기반으로 알아보도록 한다. ( GET, POST, DELETE, PUT )

🚀 설치와 호출

npm install axios or yarn add axios const axios = require('axios');

GET

✅ GET은 서버에서 원하는 데이터를 가져와서 보여주기 위해 사용한다. 입력한 url에서 axios.get(url, [,config])

🚀 사용해보기

POST

✅ POST는 프론트에서 서버에 데이터를 저장하기 위한 용도로 사용한다. axios.post(url, { data 객체 }, [,config])

🚀 사용해보기

DELETE

✅ DELETE는 서버에 저장된 데이터를 삭제하기 위해 사용한다. axios.delete(url, [,config])

PUT

✅ PUT은 프론트에서 서버에 데이터를 저장하기 위한 용도로 사용한다. axios.put(url[, data[, config]])

💬 들어가며

'숨고' 사이트 클론 프로젝트를 2주간 진행하면서 해결했던 이슈에 대해 정리해보려 한다. 프로젝트 진행 전에도 리액트를 공부하면서 혼자서 이것저것 만들어봤던 경험이 있었지만, 상대적으로 대량의 데이터를 가진 사이트를 서버와 협업하여 만들어보는 경험은 처음이었기 때문에 긴장도 되었고 어떤 것을 배우게 될지 설레기도 했다.

❌ 문제 발생

문제는 유저 데이터를 불러와 렌더링하는 과정에서 발생했다.

구현하려고 했던 기능은 사용자가 스크롤을 내려 화면을 이동할 때, 일정 개수만큼 유저 데이터를 가져와 띄워주는 기능이다. 첫 화면에서는 제대로 동작하였지만, 라우팅을 통해 다른 페이지를 이동한 후, 뒤로 가기나 이전 버튼을 통해 돌아오게 되면 엄청난 에러와 함께 110번의 유저가 아닌 1020번대의 유저들을 불러왔다.

🔎 원인 찾기

먼저 원인을 찾기 위해 스크롤 시 데이터를 불러오는 함수 onScroll() 를 확인했다. 해당 함수 내의 분기 문은 scroll height가 일정 조건을 만족하면 state가 변경되어 데이터를 가져오는 방식이다. 이해를 돕기 위해 코드를 추가했다.

• 이 함수는 window의 scroll이 실행 되었을 때 발생되는 이벤트 리스너 함수로, 스크롤이 실행되면서 변경되는 scroll height의 값에 따라 작동한다.
• 발생하는 문제의 원인이 분기 문을 통과하여 유저 배열의 인덱스로 사용되는 preIndex, index 상태 값이 업데이트 되는 것 때문이라고 생각했기에, 페이지 이동 시 scroll height을 확인해보았다.
• 페이지가 이동하면 1~10까지의 데이터가 불러와지고 scroll height가 대략 1000px 이상이어야 하지만… 터무니없이 작은 수가 저장되어 분기 문을 통과하는 것을 알게 되었다.

💭 고민해보기

1. 해결을 위해 처음엔 'scroll height 를 변경시킬 수는 없을까?' 라는 생각이 들었다. 그러기 위해선 미리 scroll height 를 저장시켜 놓아야 했고, 이는 비효율적이라고 판단했다. 유저 리스트를 다른 곳에 저장해놓고 불러오는 방식 또한 다른 데이터 스토어를 이용하지 않고 있었기에 불가 했다.

2. 'Window에 리스너를 붙이지 않고, 유저를 띄우는 클래스 자체에 리스너를 붙여야 하는가?' 하고 수정해보았지만 작동이 되지 않았다.

🤦‍♀️ 드디어 해결..!

기본적이지만 중요했다. 기존 코드에서는 컴포넌트가 마운트 될 때에 데이터를 가져온 후, 리스너 함수를 붙이도록 구현했다. '분명 데이터를 가져온 후, onScroll() 함수가 실행되도록 구현을 했는데 왜 scroll height의 값은 작은 걸까?' 고민을 하다가 '데이터를 가지고 오기 전에 리스너 함수가 실행되었을 수 있겠다!' 라는 생각이 번쩍 들었다.

결과는 역시 데이터를 가져오기 전 scroll의 리스너 함수가 먼저 실행되어 버리는 비동기 처리 방식으로 코드가 짜여 졌기에 문제가 발생한 것이었다..

다음과 같이 데이터를 가져온 후, call back 함수에 리스너 함수를 넣어주는 방식으로 코드를 수정하여 문제를 해결할 수 있었다.

                    #뿌듯신기👀

회고

아쉬웠다. 리액트를 공부하면서 외부 api에서 데이터를 받아오는 프로젝트 경험이 있었기에 ajax의 비동기적 처리 방식에 대해선 인지하고 있었지만, 막상 직접 페이지부터 컴포넌트까지 설계하여 구현 하다 보니 가장 기본적인 ajax의 특징에 대해서 잊고 문제 해결에 시간이 오래 걸린 것에 대해 아쉬웠다. 하지만 다행이기도 했다. 덕분에 비동기 방식에 대해서 확실히 알 수 있었고, 앞으로 같은 문제가 발생하더라도 더 빠르게 원인을 파악하여 해결할 수 있는 능력을 기를 수 있었기 때문이다. 어떤 이슈를 해결할 때마다 느끼는 점이지만 실패를 거듭할수록 성장하고 있다고 생각한다. 아직 부족한 점이 많지만 앞으로 겪을 실패들을 또 다른 도전, 또 다른 성장이라고 생각하며 차근차근 성장하는 개발자가 되고 싶다. 🌱

BottomNavigation 태그에 적절한 props를 사용하지 않았다는 문제였다. 코드 내에서는 에러가 발생하지 않아서 도무지 원인이 무엇인지 알 수 없었다.

🚀 고민해보기

오류 메시지에 제안된 방식으로 showlabels를 삭제해보거나 소문자로 수정해보았지만 해결되지 않았다. 웹서핑을 통해 깃헙의 동일한 이슈를 찾았고, 이를 통해 해결할 수 있었다.

💬 원인 & 해결

BottomNavigation 태그 내부에 사용해주어야 할 특정 컴포넌트를 사용하지 않고 Button을 사용하여서 발생

해결 방법 MaterialUI 문서에 따라 BottomNavigationAction를 사용하여 해결

수정한 코드

🔎 참고 블로그

https://github.com/mui-org/material-ui/issues/14176#issuecomment-454038379

Material UI를 사용하면서 작은 에러들이 곳곳에서 발견 되었는데, Select 컴포넌트 이용 중 처음 발생했던 에러에 대해 얘기해보고자 한다.

findDOMNode is deprecated in StrictMode error

🚀 해결 방법

Function Component로 프로젝트를 진행하였고 이에 대한 해결 방법부터 먼저 설명하자면,

📌 import한 ThemeProvider를 wrapper tag로 감싸준다. 📌 unstable_createMuiStrictModeTheme를 실행해 가져오는 리턴 값을 ThemeProvider의 속성 값 theme에 넣어준다.

Class Component에서는 MaterialUI에서 작성한 글을 통해 확인할 수 있다.

https://ko.reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage

❔ 발생 이유

오류는 해결 되었으니 이제 이유를 알아보자. 프로젝트 생성 시 CRA(create-react-app)을 이용하면, index.js는 다음과 같이 생성된다.

위 코드에서 중요 시 봐야할 것은 React.StrictMode 태그이다.

🔎 StrictMode 란?

컴포넌트들을 대상으로 잠재적인 문제들을 알아내기 위한 검사 도구이다. StrictMode 태그로 감싸진 컴포넌트들을 검사하게 되며, React 공식 문서에 따른 검사 기능은 다음과 같다.

기능

• 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
• 레거시 문자열 ref 사용에 대한 경고
• 권장되지 않는 findDOMNode 사용에 대한 경고
• 예상치 못한 부작용 검사
• 레거시 context API 검사 ( + 이외에도 향후 더 많은 기능이 추가될 예정이라고 한다.)

결론적으로, _권장되지 않는 DOMNode를 사용해서 발생한 에러_이다.

💬 들어가며

사이드 프로젝트를 진행하면서 사용자 초대 링크를 카카오톡 공유 API를 통해 전송하는 기능을 구현하게 되었다. API에서 데이터를 가져오는 실습은 해본 적이 있지만, API를 통해 데이터를 전송해보는 경험은 처음인지라 좀 긴장했다. Javascript, Android, IOS 를 통한 연동 참고 자료는 검색해보면 많았지만 React, Typescript 관련 자료는 많지 않아 애를 좀 먹었다. React, Typescript로 연동한 과정을 차근차근 정리해보도록 하겠다.

🚀 요약 설명

• Kakao Developer 회원가입
• 애플리케이션 추가
• 사용하고자 하는 플랫폼에 사이트 도메인 등록
• 앱 키를 이용해 플랫폼 내에 SDK 설치 및 필요 코드 추가

💁‍♀️ 상세 설명

1. Kakao Developer 회원가입

2. '내 애플리케이션' - 애플리케이션 추가하기

• 앱 아이콘, 앱 이름, 사업자명을 입력하고 저장해준다.
• 앱 이름은 대부분 홈페이지 명을 사용한다. (앱 아이콘은 다음 사진에서 참고)

앱 아이콘은 위 빨간 박스를 가리킨다.

3. 애플리케이션 설정해주기

• 생성된 애플리케이션을 누르면 앱 키, 플랫폼, 기본 정보를 확인할 수 있다.

🔑 앱 키

• 앱 키에선 다음과 같이 발급 받은 고유키를 확인할 수 있고 이를 통해 원하는 플랫폼에서 API를 사용 가능하다.

🏝 플랫폼

• 플랫폼 설정하기를 통해 사용하고자 하는 플랫폼에서 등록버튼을 누르면 사이트 도메인을 등록할 수 있다. 발급된 앱 키는 등록된 도메인에서만 적용된다.

4. 코드 추가하기

Kakao SDK 스크립트 파일 추가하기

프로젝트의 index.html 파일의 head 태그 내에 다음 코드를 추가한다.

발급 받은 앱 키를 통해 초기화하기

API를 사용할 수 있는지 인증하는 과정이며 다음과 같이 API를 사용하고자 하는 컴포넌트에서 추가해주었다. init 함수의 인자값에 발급 받은 앱 키를 넣어주면 된다. 나는 .env파일에 저장해 둔 변수를 가져와 넣어주었다.

👀 초기화가 잘 되어 API를 가져왔는지 콘솔로 확인해보면 true값이 뜨고, false라면 초기화를 실패한 것이다. 그런 경우엔 앱 키를 다시 확인해보도록 하자.

📌 리액트에서는 window를 통해 window.Kakao로 접근해야 한다.

📌 만약, 에러가 뜨면서 Kakao를 가져오지 못한다면 아래와 같이 해결해보자. 내게 발생했던 에러는 다음과 같았다.

'Window & typeof globalThis' 형식에 'Kakao' 속성이 없습니다.

이는 Typescript로 인해 window에 Kakao를 받을 속성 type이 정의되어 있지 않아 발생하는 에러이다. 에러는 아래와 같이 해결할 수 있었다.

✅ react-app-env.d.ts 에 window의 새로운 속성인 Kakao를 추가한다.

type을 any로 설정하면 Typescript를 사용하는 이유가 없으므로 Object로 설정하였으나, 'Object' 형식에 'Link' 속성이 없습니다. 또 다른 에러가 발생하여 어떤 타입으로 설정해주어야 하는지 찾아봤지만 결국 any로 설정해야 했다.

interface Window {
     Kakao: any
}

** 🔥 앱 키는 보안을 위해 .env 파일에 저장하여 끌어 쓰는 것이 좋다!**

🔎 '.env'가 무엇인가요? 개발을 하다 보면 외부에 알려지면 안 되는 값, 예를 들면 git, 오픈 소스에 올리면 안되는 값들이 있다. 이 때, 변수를 파일에 따로 설정해두어 사용할 수 있게 환경변수를 저장하는 곳이다. CRA를 이용해 프로젝트를 생성했다면 별도의 설치 필요 없이 .env 파일을 생성하여 변수를 저장할 수 있고, 그렇지 않다면 dotenv 라이브러리를 설치하여 동일하게 이용한다.

• dotenv는 yarn, npm을 통해 설치할 수 있다. yarn add dotenv / npm i --save dotenv

✅ 프로젝트의 _최상위의 위치_에 파일이 존재해야 하며, package-lock.json 과 동일한 경로에 위치시키면 된다! ✅ .gitignore 파일에 .env를 추가해주어 외부에 파일이 노출되지 않도록 설정해준다.

카카오톡 메시지 플랫폼 도구 이용하기

초대코드를 이용해 공유 URL을 전송하는 것이 목적이었으므로, 메시지 API를 사용하였다.

내가 만든 공유 버튼을 누르면 위 함수가 실행되면서 원하는 사람에게 아래와 같은 양식의 메시지를 전송하게 된다.

💭 문서와 친해지기

처음엔 뭐가 뭔지 잘 모르겠어서 문서도 계속 읽어보고, 검색도 해보면서 어떻게 다루는지 알게 되니 재밌게 진행할 수 있었다. 내가 사용한 API 말고도 다양한 도구들이 제공되고 있어 다음에 프로젝트를 하게 되면 또 한번 다른 API를 사용해보고 싶다!

📌 참고 블로그

• React에서 dotenv 사용하는법
• 카카오톡 공유하기 API 초간단 사용법

🐾 React 에는 클래스 컴포넌트 와 함수 컴포넌트 형태가 존재한다. 🐾 React 는 JSX 를 통해 Element를 생성한다. 🐾 React 는 Props 와 State 를 통해 컴포넌트의 상태 값을 다룬다.

🚀 Component

클래스 컴포넌트

Life Cycle (생명 주기 기능)과 Props, State 를 사용한다.

함수 컴포넌트

초기 마운트 속도가 상대적으로 클래스 컴포넌트보다 빠르고, 불필요한 기능이 없으므로 메모리 자원을 절약할 수 있다.

📌 함수 컴포넌트에서도 클래스 컴포넌트의 생명 주기 메서드들과 State를 연결할 수 있는 HOOKS를 사용해 State를 사용할 수 있다.

🔎 클래스 컴포넌트의 Life Cycle과 함수 컴포넌트의 HOOKS에 관해서는 다음 글에서 확인할 수 있다.

🚀 JSX

리액트에서는 Javascript의 모든 기능을 갖춘 JS의 확장 문법인 JSX를 이용하여 엘리먼트를 표현하고 생성한다. 표현하는 데에는 다음과 같은 규칙이 존재한다.

• 태그는 꼭 닫혀야 한다.

• 2개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져야 한다. ( 주로 div, Fragment , <> 등을 이용한다. )

• 조건부 렌더링 : 삼항 연산자 or AND 연산자를 이용해야한다. ( if문을 사용할 수 없다. )

• style 은 객체 형태로, 클래스의 이름을 설정하는class 는 className 가 대신한다.

  • 대쉬 대신 두 문자 이상은 첫번째 문자 대문자!

🚀 Props & State

Props 는 Javascript에서 함수의 인자값과 같은 역할로, 함수 or 클래스에 인자를 제공하고 React 엘리먼트를 반환할 수 있게 한다.

• 부모 컴포넌트가 자식 컴포넌트에게 주는 값으로, 변경 불가

State 는 Props와 유사하지만 비공개적이고, 컴포넌트 내부에서 변경할 수 있는 제어 가능한 데이터의 상태 값이라고도 한다.

• 컴포넌트 내부에서 선언하여 변경할 수 있는 값 💡 State의 값은 setState을 통해 변경한다. 💡 setState은 객체로 전달되는 값만 변경한다.

• 최상위 프로퍼티 ** ✔ **compilerOptions
  • type : @types or typeRoots
    • typesRoots : 타입 정의 파일 경로
      • @types : 패키지 이름
  • target : 빌드의 결과물 버전 설정 (기본 ES3)
  • lib : 기본 type definition 라이브러리 설정 (지정하지 않으면,

    target : es3 -> lib : lib.d.ts 사용,
    target : es5 -> lib : dom, es5, scripthost 사용,
    target : es6 -> lib : dom, es6, dom.iterable, scripthost 사용

    • outDir, outFile : 하나의 파일로 output
  • module : 컴파일 된 모듈의 결과물을 어떤 모듈 시스템으로 할지 설정 target : es6 -> module : es6 target : -> module : commonjs ✔ compileOnSave : 파일 저장 시, 자동 컴파일 여부 ✔ extends ✔ files : 입력된 상대 혹은 절대 경로의 파일만 컴파일 ✔ include, exclude : .gitignore와 같은 개념

Typescript Compiled Language, 정적 타입 언어 Javascript Interpreted Language, 동적 타입 언어

*🔥 Typescript -> Compiling -> Javascript *

• Compiled : 컴파일이 필요한

• _Interpreted _: 컴파일러가 필요없는

• 정적 타입 언어 : 타입이 정해져 있는

• 동적 타입 언어 : 타입을 자유롭게 변환할 수 있는

Javascript는 엄격한 규칙이 없고, 코드 관리도 편해 사용하기 쉽다는 장점이 있지만, 규모가 큰 프로젝트를 진행하거나 버그를 최소화 하고 싶을때 한계점이 존재한다. 이로 인해 Typescript가 탄생하게 되었다. Typescript는 언어의 타입을 예측 가능하고, 읽기 쉬운 코드로 Javascript를 더욱 효율적으로 사용할 수 있게 해준다.

🚀 개발 환경 구축하기

• 프로젝트 생성 후, npm init -y를 통해 package.json 생성
• npm i typescript - typescript 모듈 설치

👀 -global로 설치하지 않았을 경우, 다음과 같은 방법으로 프로젝트 내의 컴파일러인 tsc를 이용해서 컴파일한다. => ./node_modules/.bin/ 안의 명령어로 컴파일

• npm script에서는 ./node_modules/.bin/ 내의 명령어는 상대경로를 쓰지 않아도 사용하여 컴파일 될 수 있게 한다.

• npm script를 통해 컴파일 package.json 파일에 다음과 같이 추가해준다. npm run tranpile 을 실행하면, 프로젝트에 test.js 파일이 생성된다.

🚀 초기 환경 세팅

( 모든 명령어는 global로 설치했을 경우로 작성하였다. )

tsc --init

tsconfig.json default 파일을 생성한다.

tsc -w

파일이 변경될 때마다 자동으로 컴파일해주는 검사 도구

npm i tslint -D

tslint Javascript 소스 코드가 코딩 규칙을 준수하는지 확인해주는 코드 분석 도구 tslint --init을 통해 tslint.json 생성

Representational State Transfer, 정보를 얻고자 하는 자원에 고유한 이름을 붙혀, 해당 자원의 상태를 서버와 클라이언트 간 주고 받는 것을 의미한다.

REST 의 특징은,

REST 방법론을 이용해 API를 설계했을 때 아래와 같은 특징을 지닌다.

1) 서버/클라이언트 (Server-Client) 구조 자원에 대해 클라이언트는 request, 서버는 response 하는 구조로 각각의 역할이 확실하게 구분되고, 일관적인 인터페이스로 분리되어 작동할 수 있다.

2) 무상태성 (Stateless) 서버는 세션, 쿠키 정보를 별도로 관리하지 않고, 데이터의 상태정보를 기억할 필요 없이, 클라이언트 사이드에서 들어온 요청에 대해서만 처리해주면 되기 때문에 구현이 쉽고 단순해진다.

3) 캐시 처리 가능 (Cacheable) 클라이언트는 응답 데이터를 캐싱할 수 있어야한다.

4) 자체 표현 구조 (Self-descriptiveness) JSON형태의 구조로 구성되어, REST API 메시지를 만 확인하고도 어떤 메서드로 무슨 요청을 하고 있는지 직관적으로 이해가 가능하다.

5) 계층형 구조 서버의 계층을 다중으로 구성하여, 보안, 암호화 계층 등을 추가하여 구조상의 자유도를 높일 수 있다. Proxy, Gateway와 같은 네트워크 기반의 중간매체 사용도 가능하다. ex) 사용자 인증을 위해 request 헤더에 토큰을 추가하여 서버에서 인증 절차를 거칠 수 있게 한다.

RESTful API

⚠️ URI 설계 시 주의할 점

• 슬래시 구분자(/)는 계층 관계를 나타내는 것에 사용한다.
• URI 마지막 문자에 슬래시(/)를 포함하지 않는다.
• 파일확장자는 URI에 포함하지 않는다.
• 밑줄(_)은 URI에 포함하지 않으며, 하이픈(-)을 이용하여 가독성을 높인다.
• URI 경로에는 소문자가 적합하다.

Method 방식

대표적으로 사용하는 Method는 GET, POST, PUT, DELETE 이다.

🚀 GET 방식

• GET을 통해 해당 자원을 조회하고, 가져올 수 있다.
• 주소창에 쿼리 스트링이 그대로 노출되어 보안성이 낮다.
• POST 보다 상대적으로 전송 속도가 빠르다.

🚀** POST 방식**

• POST를 통해 해당 URI를 요청하면, 자원을 생성한다. 즉, 클라이언트에서 서버로 일정 크기 이상의 데이터를 전송한다.
• 주소창에 전송 데이터의 정보가 노출되지 않아 GET에 비해 보안성이 높다.
• GET 보다 속도가 느리다.
• 서버로 데이터를 전송하기 전 인코딩하고, 전송 후 서버에서 디코딩 작업을 해주어야 한다.

🔎 더 알아보기 : GET vs POST 차이 프로젝트를 진행하면서 GET과 POST의 차이에 대해서 궁금했다. 어떤 상황, 어떤 상태에 맞게 자원을 관리해야하는지 REST의 개념에 더 접근하여 알아보려 한다. GET 방식 - 클라이언트에서 서버에 데이터를 요청할 때 주로 사용 - 전달되는 데이터가 255개의 문자를 초과하면 문제가 발생할 수 있다. POST 방식 - 클라이언트에서 서버로 데이터를 전송할 때 주로 사용 - 서버에 많은 데이터를 전송하기 위해서 주로 사용

🚀 PUT 방식

• 해당 자원의 전체 교체 및 수정이 필요할 때 사용한다. 🚀 DELETE 방식
• 해당 자원을 삭제할 때 사용한다.

💭

REST에 대한 개념은 알고 있었지만, 추상적이었기에 정확히 어떤 과정을 의미하는지 모르고 있었다. 서버와 클라이언트 간의 데이터를 주고받는 프로젝트를 통해 react-router와 fetch를 더 자세히 공부해보고 실습해보면서, RESTful한 API의 설계 원리에 대해 확실히 알게 된 것 같다. 다만 앞으로 여러 다양한 상황에서 자원을 관리해보면서, 각각의 역할에 맞는 메소드를 활용해 RESTful한 방식에 대해 더 알아가야할 것 같다고 느꼈다 😊

React-Router

사용자의 브라우저가 클라이언트 사이드에서 뷰 렌더링을 담당하도록 돕는 라이브러리

💡 서버 사이드 렌더링을 할 때에도 라우팅을 도와주는 컴포넌트들을 제공해준다.

라이브러리 설치하기

프로젝트 디렉토리로 이동하여 다음 명령어를 통해 리액트 라우터를 설치한다.

yarn add react-router-dom

1. Components 🔥

Route

• 현재 URL 경로와 매치될 경우 보여줄 컴포넌트를 지정하는데 사용하는 컴포넌트 ➰ props > path : 매치시킬 경로, component : 보여줄 컴포넌트

<Route path="/home" component={Home} />

Link

• HTML의 <a>태그와 동일한 역할을 하는 컴포넌트 ➰ props > to : 이동할 경로를 지정

<Link to="/home">This is home</Link>

👉 'This is home' 텍스트는 클릭할 수 있게 렌더링 되어 클릭 시, 주소창 경로는 '.../home'으로 변경된다.

Router

• Route, Link 컴포넌트가 함께 동작할 수 있도록 연결시켜주는 컴포넌트로, 항상 Router를 공통 상위 컴포넌트로 가져야한다. ➰ props > history

<Router>
    ...
    <Route />
    <Route />
    ...
</Router>

• Router의 종류에는 BrowserRouter, HashRouter, withRouter 등이 존재한다.

🔎 ** 더 알아보기 **

history

리액트에서 Router들은 props로 history 객체를 주고 받으며 페이지의 기록을 공유한다. history 객체를 콘솔로 확인해보면 다양한 메소드와 관련 객체들이 존재한다. 가장 빈번하게 사용되는 메소드는 push()인데, 이는 history.push('이동하고자 하는 path')를 통해 원하는 컴포넌트로 이동이 가능하다. ** 1. history 객체 ** ** 2. 예제 코드 **

• props로 받은 history의 메소드 push를 이용해 pathname과 state가 담긴 객체를 pathname에 적힌 경로로 전달하는 코드이다.

HashRouter

• 주소창에 해쉬(#)가 붙는다.
• 검색 엔진이 읽지 못하기에 거의 사용되지 않는다. ( 백엔드가 필요하지 않은 상황에 주로 사용 )

BrowserRouter

• HTML5의 history API를 활용한 라우터
• 주로 사용되는 라우터

Switch

• 모든 Router 컴포넌트들을 반복하며, 현재 URL과 path가 일치하는 첫번째 요소만 렌더링 하여 라우터 충돌을 막도록 하는 컴포넌트

  <Router>
  <Switch>
     <Route exact path="/" component = { Main }/>
     <Route path = "/about" component = { About }/>
  </Switch>
  </Router>

  🔎 ** 더 알아보기 **

  <Router>
  <Route exact path="/" component = { Main }/>
  <Route path = "/about" component = { About }/>
  <Route path = "/detail" component = { Detail }/>
  <Route component = { Error }/>
  </Router>

  만약, 3가지 path(13줄)와 일치하지 않아 어떠한 URL로도 이동할 수 없는 경우에 Error 컴포넌트를 띄우기 위해 4번째 줄과 같이 Route를 추가해보자. 실제로 실행시켜보면 어떠한 URL에도 Error 컴포넌트가 렌더링 되는 것을 볼 수 있다. 👉 왜냐하면, 4번째 줄은 매칭시킬 path의 값이 없으므로 ~무조건적으로 렌더링~~이 되기 때문이다. 이를 해결하기 위해 Switch가 등장하였고, 위 코드는 다음으로 해결할 수 있다.

  <Router>
  <Switch>
    <Route exact path="/" component = { Main }/>
    <Route path = "/about" component = { About }/>
    <Route path = "/detail" component = { Detail }/>
    <Route component = { Error }/>
  </Switch>
  </Router>

  ❔ exact : 정확히 동일한 path가 들어왔을 경우에만 컴포넌트를 렌더링 하도록 하여 중복 컴포넌트 렌더링을 막는다.

2. Hooks 🔥

• class 작성 필요 없이 상태값(state)와 Hooks를 통해 react-router의 기능들을 이용할 수 있다.

• Hooks를 사용하기 전에 match, location, history의 역할에 대해서도 이해할 수 있도록 하자.

useLocation

🐾 location 객체는 현재 페이지의 정보를 가진다. 대표적으로 location.search로 현재 url의 쿼리 스트링을 가져올 수 있다

🚀 사용 예시

const location = useLocation();

다음은 네이버 영어 사전에 'hello'를 검색한 후 location을 확인했을 때의 결과이다.

location 객체 내의 search메소드를 통해 쿼리스트링 결과값을 가져올 수 있다.

useHistory

🐾 history 객체는 브라우저의 이동 기록들을 가지고 있다. 스택(stack)에 현재까지 이동한 url 경로들이 담겨있는 형태로, 주소를 임의로 변경하거나 되돌아갈 수 있도록 해준다

🚀 사용 예시

const history = useHistory();

history.push('/');

💡 function component에서도 다음을 통해 페이지 이동 시 객체를 전달할 수 있다.

history.push({
    pathName: '/',
    state: { 
        isOk: true,
        root: main
    }
});

-> 이동한 페이지의 location.state를 확인하면 전송된 객체의 값들을 가져올 수 있다.

useRouteMatch

match 객체에는 Route의 path와 url이 매칭된 대한 정보가 담겨진다. 대표적으로 match.params로 path에 설정한 파라미터값을 가져올 수 있다.

🚀 사용 예시

const match = useRouteMatch();

❔ match : Route 컴포넌트의 props인 path가 URL에 어떻게 match 되는가에 대한 정보를 담는 객체

useParams

• 현재 Route 컴포넌트의 match.params 에 접근해 사용할 수 있도록 한다.

Main 페이지에서 history.push를 통해 first 페이지로 이동할 때, pathname에 id를 붙여서 푸시해보자.

Route의 속성인 path에는 아래 사진에서 볼 수 있듯이 :id를 추가해주자.

first 페이지에서 params를 확인해보면 main 페이지에서 first로 보낸 params 즉, id값이 url과 페이지에 전송된 것을 확인할 수 있다.

💭

공식 api 문서와 블로그를 통해 실제로 실습해보고 공부하며 글을 정리해보았지만 실제로 많이 사용해보고 익숙해져야 할 것 같다.