[React 숙련] JSON이란? | {JSON} Placeholder 사용하기

1. JSON이란? ▶ JS 객체 문법 기반으로 만든 데이터 교환 형식 ▶ 큰 따옴표(")만 허용 ▶ 메서드 : JSON - 문자열 형태 - 서버/클라이언트 간 데이터 전송시 사용 (★파싱 필요 ★ ) (1) JS -> JSON 형태 * JSON.stringify({js객체}) : JSON 문자열로 변환 JSON.stringify( {x:5, y:6} ) ; // "{"x":5,"y":6}" (2) JSON -> JS 형태 * JSON.parse(json형식) : 자바스크립트 객체 변환 ( ★ 네트워크 통신의 결과 ★) 2. {JSON} Placeholder = fake API (가짜 서버) JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fa..

• format_list_bulleted React
• · 2023. 11. 9.
• textsms

[React 숙련] REST API & Path Variable vs Query Parameter

1. REST API ▶ 어떤 자원에 대해 crud 할 수 있게 http method(GET, POST,PUT,DELETE) 사용하여 요청 보내는 것 ▶ URI를 통해 정보의 자원 표현 / 자원의 행위는 HTTP Method로 명시함 ▶자원 : URI / 행위 : Http Method / 표현 ▶ 규칙 (1) 명사 복수형 사용 / 소문자 작성 (2) 마지막에는 '/' 포함 x (3) 언더바 사용 x 하이픈 사용 (-) (4) 파일 확장자 표시 x ▶RestFul 하다 = 위의 REST API의 조건을 다 만족시킨 설계 상태 2. Path Variable vs Query Parameter ▶ 언제 왜 써야하는지 아는 것이 중요! ▶ GET method를 이용해 데이터 가져오면 (1) Path Variabl..

• format_list_bulleted React
• · 2023. 11. 9.
• textsms

[React 숙련] 비동기 프로그래밍 입문 (promise 객체 / async,await)

1. 비동기 프로그래밍이란? ▶ 동기: 현재 실행중인 코드가 끝나야 다음코드 실행 ▶ 비동기 : setTimeout, addEventListener // 요청,실행대기, 보류 등 코드 , 서버통신과 관련 로직이 대표적 (ex. 짜장면 배달: 배달 후 할일 후에 짜장면 그릇 가져감) ▶ 콜백지옥 : 비동기 시, 일어날 수 있는 문제 => 가독성+수정이 어려움 => (ES6) promise 객체가 나옴! 2. promise 객체의 handling 방법 (예외처리) ▶ promise 객체 (1) 대기 : pending / 요청하고난 직 후 상태 --> 초초 그 잡채 (2) 이행 : fulfilled / 성공적으로 전달한 상태 (3) 거부 : rejected / 이유는 모르겠지만 거절당함 ▶ handling 방..

• format_list_bulleted React
• · 2023. 11. 9.
• textsms

[React 숙련] 상세페이지 구현하기 (react-router-dom)

0. 동적 라우팅 (Dynamic Route) ▶ path에 유동적인 값 입력 1.Works.jsx import React from 'react'; import { Link } from 'react-router-dom'; const data = [ { id: 1, todo: '리액트배우기', }, { id: 2, todo: '노드 배우기', }, { id: 3, todo: '스프링배우기', }, ]; //console.log(data); function Works() { return ( {data.map((item) => ( {item.id} {item.todo} ))} ); } export default Works; ▶ 를 사용 + {`/(절대경로)works / #{item.id}`} -> 하이퍼링크처..

• format_list_bulleted React
• · 2023. 11. 9.
• textsms

[React 숙련] 리액트 hook : useNavigate | useLocation | useParams | Link (api)

1. useNavigate (활용도 높은 페이지 전환 hook) ▶ 어떤 버튼 클릭 / 액션이 있을 때 페이지 이동 ( 태그의 href와 유사 역할 ) import React from 'react'; import { useNavigate } from 'react-router-dom'; function Home() { const navigate = useNavigate(); return ( Home { navigate('/works'); }} > works로 이동 ); } export default Home; ▶useNavigate(); 사용해서 버튼 클릭시 navigate('/works') 2. useLocation (hook) import React from 'react'; import { useNav..

• format_list_bulleted React
• · 2023. 11. 9.
• textsms

[React 숙련] 리액트 react-router-dom

0. react-router-dom (패키지) 설치하기 ▶ 터미널 : yarn add react-router-dom 1. 페이지 컴포넌트 작성 (단일페이지 구현 -> 다중 페이지로 구현) ▶ scr > pages 폴더 > 4개의 페이지 구성 2. Router.js 파일 생성 (router 구성하는 설정 코드 작성-> 주입) import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Home from '../pages/Home'; import About from '../pages/About'; import Contact from '../pages/Contact'; import Works from '../pages/Works'; const..

• format_list_bulleted React
• · 2023. 11. 9.
• textsms