[항해 플러스 프론트엔드 7기] 사전 스터디 3주차 - React

Jaehyun Ahn·6일 전
React항해플러스프론트엔드
0

항해 플러스

목록 보기
7/7

react-router-dom

react-router-dom이란?

: React 어플리케이션에서 클라이언트 사이드 라우팅을 구현하기 위한 라이브러리. 여러 페이지 이동을 가능하게 하는 라이브러리

사용법

  1. 페이지 컴포넌트 생성
  2. Router.js 작성 - url 1개당 페이지 컴포넌트 연결
  3. App.js에 Router 적용

// Router.js
<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="contact" element={<Contact />} />
    <Route path="works" element={<Works />} />
  </Routes>
</BrowserRouter>

react-router-dom 주요 hooks

  • useNavigate : 코드를 통한 path 이동
  • useLocation : 현재 path 정보 확인
  • Link : a 태그를 대체하는 태그
    • JSX에서 a 태그를 사용해야 한다면 Link 태그를 사용해서 구현해야 함. a 태그를 사용하면 페이지가 이동하면서 브라우저가 새로고침 되기 때문

children

: 컴포넌트 태그 사이에 들어가는 내용 (props.children)

  • 하위 요소로 컴포넌트를 받고 싶을 때 사용
  • layout에 적용하면 공통 UI (header, footer 등) + 페이지 요소 구조로 만들 수 있다.

Dynamic Route

Dynamic Route (동적 라우팅)이란

: path에 유동적인 값을 넣어 특정 페이지로 이동하도록 구현하는 방법

  • path/:id 로 설정하여 동적 페이지 이동 가능
  • :id는 url에 따라 바뀌는 값. useParams hook으로 조회 가능
<Route path="page/:id" element={<Page />} />

query parameter 조회


// Works.js

import { Link } from 'react-router-dom';

const data = [
  { id: 1, todo: '리액트 배우기' },
  { id: 2, todo: '노드 배우기' },
];

function Works() {
  return (
    <div>
      {data.map((work) => (
        <div key={work.id}>
          <Link to={`/works/${work.id}`}>{work.todo}</Link>
        </div>
      ))}
    </div>
  );
}


// Work.js

import { useParams } from 'react-router-dom';

const data = [
  { id: 1, todo: '리액트 배우기' },
  { id: 2, todo: '노드 배우기' },
];

function Work() {
  const { id } = useParams(); // useParams hook을 통해 쿼리 파라미터 추출
  const work = data.find((item) => item.id === parseInt(id));
  return <div>{work?.todo}</div>;
}


// 라우터 단

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="works" element={<Works />} />
  <Route path="works/:id" element={<Work />} />
</Routes>

비동기 프로그래밍

동기 vs 비동기

  • 동기 : 현재 실행중인 코드가 끝나야 다음 코드가 실행되는 방식.
  • 비동기 : 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식. 순서 보장 X. setTimeout, addEventListener, api 서버 통신 로직이 대표적인 비동기 코드


console.log("1");
setTimeout(() => console.log("2"), 3000); // 비동기 코드
console.log("3");
// 실행 순서 → 1 → 3 → 2

콜백 지옥

: 콜백 함수 중첩이 많아져 들여쓰기가 깊어지고 가독성이 안좋아지는 문제

  • 이벤트 처리, 서버 통신과 같은 비동기적 작업을 수행할 때 자주 발생
  • Promise, async/await 로 해결할 수 있다

setTimeout(() => {
	console.log('아메리카노')
  	setTimeout(() => {
    	console.log('밍밍한 아메리카노')
        ...
    }, 500)
}, 500)

Proimse

: 비동기 작업을 표현하는 객체, 3가지 상태를 가짐

  • pending : 대기
  • fulfilled : 성공
  • rejected : 실패

then, catch, finally


axios.get("/api")
  .then(res => console.log("성공:", res))   // 성공 시 실행
  .catch(err => console.log("실패:", err)) // 실패 시 실행
  .finally(() => console.log("항상 실행")); // 무조건 실행

async/await

  • await 는 Promise가 처리될 때까지 기다렸다가 결과를 리턴
  • 에러는 try ~ catch로 처리

const getWeather = async () => {
	try {
		const response = axios.get('/api');
		console.log('성공' + response);
	} catch (error) {
		console.log('실패' + error);
	}
}

REST API

REST API란

: 어떤 자원에 대해 CRUD를 진행할 수 있게 HTTP method를 사용하여 요청을 보내는 것. REST 원칙을 적용하여 설계한 API

  • REST
    • 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것
      HTTP URL을 통해 자원을 명시, HTTP 메소드(GET, POST, PUT, PATCH, DELETE)를 통해 해당 자원에 대한 CRUD를 적용함.
    • 전반적인 웹 어플리케이션에서 상호작용 하는데 사용되는 웹 아키텍쳐 모델. 즉 자원을 주고받는 웹 상에서의 통신 체계에 있어서 범용적인 스타일을 규정한 아키텍쳐
  • API
    응용 프로그램을 통해 데이터를 제공받거나, 기능을 사용하고자 할 때 사용하는 인터페이스 및 규격

REST의 특징

  • 균등한 인터페이스 (Uniform Interface)
    • HTTP의 표준만 따른다면 어떠한 기술이던지 접목하여 사용할 수 있다. 플랫폼이나 언어의 제약에 구애받지 않는다.
    • REST API 정의를 JSON 방식으로 많이 함. XML도 가능
  • 무상태성 (Stateless)
    • 서버는 클라이언트의 상황을 고려하지 않고 API 요청에 대해서만 처리하기 때문에 이를 “상태가 없다”고 표현한다.
    • 클라이언트를 고려하지 않아도 되기 때문에 구현이 간결해진다.
  • 캐싱 가능 (Cacheable)
    • REST는 HTTP 표준을 기반으로 만들어졌기 때문에 HTTP의 특징인 캐싱을 사용할 수 있다.
    • GET 메소드를 Last-Modified 값과 함께 보낼 경우, 컨텐츠의 변화가 없을 때 캐시된 값을 사용하게 된다. 이렇게 되면 네트워크의 응답시간 뿐만 아니라 API 서버에 요청을 발생시키지 않기 때문에 부담이 덜하다는 장점을 가지게 된다.
  • 자체 표현성 (Self-Descriptiveness)
    • REST API 자원 명시 규칙 및 메소드는 그 자체로 의미를 지니기 때문에 어떠한 요청에 있어서 그 요청 자체로 어떤 것을 표현하는지 알아보기 쉽다.
    • API 문서를 제공하더라도 요청하는 방식만으로 어떠한 의미인지 알 수 있어야 좋은 REST API라고 할 수 있다.
    • 좋은 REST API는 요청만 보더라도 무슨 행동을 하는지 알 수 있어야 한다.
  • 클라이언트 - 서버 구조 (Client-Server Architecture)
    • REST 서버가 API를 제공하는 방식이기 때문에 클라이언트에서 처리하는 부분과 독립적으로 동작한다.
    • 서로간의 의존성이 줄어들고 클라이언트와 서버를 최대한 독립적으로 개발할 수 있도록 도와준다.
  • 계층형 구조 (Layered System)
    • 클라이언트는 계층형 구조가 불가능하지만 REST 서버의 경우, 보안/로드 밸런싱/암호화 등을 추가할 수 있고 Proxy 및 게이트웨이 등 중간 매체를 사용할 수 있다.

REST API의 핵심

  • URL은 리소스(자원)를 표현해야 한다.
    • 리소스 명은 동사가 아닌 명사를 사용한다
    • 리소스는 Collection과 Document로 표현할 수 있다.
  • 리소스에 대한 행위는 HTTP Method로 표현해야 한다.
    • GET : 리소스 조회
    • POST : 리소스 생성
    • PUT : 리소스 업데이트 (전체)
    • PATCH : 리소스 업데이트 (부분)
    • DELETE : 리소스 삭제

HTTP 상태코드

  • 2xx : 성공 관련 (200 Ok, 201 Created)
  • 3xx : 리다이렉션 관련 (304 Not Modified)
  • 4xx : 클라이언트 에러 관련 (400 Bed Request, 401 Unauthorized)
  • 5xx : 서버 에러 관련 (500 Internal Server Error)

Path Variable vs Query Parameter

  • Path Variable : /users/10 와 같이 경로에 값을 포함하는 경우
  • Query Parameter : /users?id=10 와 같이 ?key-value 형태로 정렬, 필터링 같은 조건 검색에 적합함

JSON

JSON이란

: JavaScript Object Notation. 자바스크립트 객체 문법을 토대로 문자 기반의 데이터 교환 형식

  • 문자열, 숫자, boolean, 배열, 객체 모두 표현 가능
  • JS 객체와 유사하지만 같진 않다
    - 작은 따옴표 X, 큰 따옴표만 허용

JSON method

  • JSON.stringify() : JS 객체를 JSON 문자열로 변환할 때 사용

console.log(JSON.stringify({ x: 5, y: 6 }));
// "{"x":5,"y":6}"
  • JSON,parse() : JSON 문자열을 JS 객체로 변환할 때 사용

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count);
// 42

console.log(obj.result);
// true
profile
Jaehyun Ahn
미래 프론트 어쩌고
이전 포스트

[항해 플러스 프론트엔드 7기] 사전 스터디 4주차 - TS

0개의 댓글