코드스테이츠 과제 깃헙 - fe-sprint-react-hooks
json-server 라이브러리
.json 파일을 가지고 실제 API처럼 동작하는 서버를 만들어준다.
npm i -g json-server터미널에서 -g 옵션으로 전역에 설치해준다.
react 앱 파일 내에 설치하면 제대로 작동하지 않을 수 있다.
cd data
json-server --watch data.json --port 3001json 파일이 있는 폴더안에서 라이브러리를 실행시켜준다.
--port이라는 옵션을 붙이면 원하는 포트에서 서버를 열 수 있다.
뒤에 붙여주지 않으면 json-server는 저절로 3000번 포트를 점유하고 서버를 열게 된다.
포트 번호를 뒤에 붙여 정확히 어느 포트에 서버를 여는 것인지 인지하는 것이 좋다.
💡 REST API의 기본적인 성능은 전부 갖추고 있으나 실제 앱에 사용되는 라이브러리는 아닙니다! 절대로 실제 앱에 json-server 라이브러리를 이용해 서버를 구축하지 말아주세요. json-server는 앱의 프로토타입을 만들거나 공부를 위해 서버가 필요할 때 사용하는 용도로 이용해 주시길 바랍니다.
포스트맨에서 localhost 안될 때
postman에서는 web-version에서가 아니라 desktop-version을 따로 제공중인데 여기서만 localhost 서버에 send request가 가능하다.
Download Postman 에서 desktop version을 다운받아 앱을 연 후에 send request를 보냈더니 해결 됐다.
참고 : postman) Cloud Agent Error: Can not send requests to localhost. Select a different agent.
중복되지 않는 author 모음
더미 데이터가 있을 때, 중복되지 않는 author가 들어있는 객체만 모으는 코드
const blogs= [ {
"id": 2,
"title": "박해커의 삶",
"body": "오늘도 박해커는 열심히 코딩을 하네",
"author": "박해커",
"likes": 31
},
{
"title": "제목",
"body": "아무 내용",
"author": "김코딩",
"likes": 4,
"id": 3
},
{
"title": "앗",
"body": "잘 작동하네",
"author": "강하나",
"likes": 0,
"id": 7
},
{
"title": "다시 도전",
"body": "과연 input 성공",
"author": "강하나",
"likes": 0,
"id": 8
},
{
"title": "내용이 ",
"body": "잘 들어가나?",
"author": "박해커",
"likes": 0,
"id": 9
},
{
"title": "adsf",
"body": "adf",
"author": "parkhacker",
"likes": 0,
"id": 10
}]
const authorUnique =
blogs &&
blogs.filter((character, idx, ary) => {
return ary.findIndex((data) => data.author === character.author) === idx;
});author의 이름은 같은데 index 번호는 다른 객체는 걸러준다.
따라서 같은 author 가 들어있는 객체는 제일 처음 나왔던 객체만 남게 된다.
가능하면 처음부터 백엔드에 중복되지 않은 author 만 모인 객체 데이터 보내달라고 요청하는게 더 편하다...
fetch 사용시 주의
fetch 쓸 때, POST, PATCH, PUT과 같은 body가 있는 메서드는 headers: { "Content-Type": "application/json", }, 는 필수로 써야 제대로 동작한다.
기왕이면 "Accept": "application/json"도 함께 써주는 것이 좋음
fetch(`http://localhost:3001/blogs/`, {
method: "POST",
headers: {
"Content-Type": "application/json", // POST 메서드에서는 필수
Accept: "application/json",
},
body: JSON.stringify({
title: bindTitle.value,
body: bindBody.value,
author: bindAuthor.value,
likes: 0,
}),
})
.then((res) => {
if (!res.ok) {
throw Error("could not fetch the data for that resource");
}
return res.json();
})
.then(() => {
setIsPending(false);
setError(null);
navigate("/"); //"/" 로 이동(라우터)
navigate(0); // 현재 페이지 새로고침
})
.catch((err) => {
setError(err.message);
});참고 : [JS] 📚 자바스크립트 Fetch API 으로 AJAX 요청하기
[JavaScript] fetch 함수 쓰는 법, fetch 함수로 HTTP 요청하는 법
useNavigate 사용법
npm install react-router-domreact-router-dom에서 import 해야하니 터미널에서 설치하고 import 해준다.
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate("이동할 주소 또는 숫자")navigate 변수는 첫번째 인자로 이동시킬 페이지의 주소 를 넣거나 0, -1 과 같은 값을 넣어 페이지 새로고침, 히스토리의 뒤로가기 버튼과 같은 동작을 시킬 수도 있다.
당연히 useNavigate 는 react의 component 안에서만 쓸 수 있다.
일반 함수 내에서는 useNavigate를 사용할 수 없으므로,
window.location.href, window.location.replace 등을 사용해야한다.
- 반복되는 fetch를 빼내서 export 해서 사용하기 위해, 다른 모듈(파일)에서 일반함수 만들때, 해당 모듈은 일반함수이므로 react Hook들을 사용할 수 없다.
// 해당 주소로 이동
const URL = "http://localhost:3000/"
navigate("/") // "/" 위치로 이동 새로고침 안됨
window.location.href = "URL"; // URL 주소로 이동 및 새로고침됨
window.location.replace("URL"); // URL 주소로 이동 및 새로고침됨
// 현재 페이지에서 새로고침
navigate(0)
window.location.reload() // 위와 같은 동작
location.reload(); // 위와 같은 동작 window는 전역객체로 생략 가능
window.history.go() // 위와 같은 동작,
history.go(0) // 0을 전달해도 현재페이지 새로고침된다.
// 뒤로 가기
navigate(-1)
window.history.go(-1)
history.go(-1)
// 앞으로 가기
navigate(1)
window.history.go(1)
history.go(1)location.reload() 메서드는 현재 URL을 다시 로드한다.
history.go() 메서드의 매개변수로 0 또는 빈 값을 전달하면 현재 URL을 다시 로드한다.
location.href 와 location.replace 차이
window.location.href = "URL"
window.location.replace("URL")| location.href | location.replace() | |
|---|---|---|
| 새로운 페이지로 이동 | 기능 | 기존페이지를 새로운 페이지로 변경 |
| window 객체의 속성 | 형태 | window 객체의 메서드 |
| 기록된다 | 주소 히스토리 | 기록되지 않는다. |
href는 페이지를 이동하는 것이기 때문에 뒤로가기 버튼을 누른경우 이전 페이지로 이동이 가능하지만, replace는 현재 페이지를 새로운 페이지로 덮어 씌우기 때문에 이전 페이지로 이동이 불가능하다.
href는 일반적인 페이지 이동시 이용을 하면 되고,
replace의 경우는 이전페이지로 접근이 필요없는경우 보안상 덮어씌우는 것도 괜찮을듯 하다.
참고 : [2022.07.13] 리액트 라우터 - useNavigate
[JavaScript]현재 페이지 새로고침하는 방법
location.href 와 location.replace 차이점
useParams 사용법
npm install react-router-dom터미널에서 설치하고 import 해준다
import React from 'react';
import { useParams } from 'react-router-dom';
const test = () => {
const { params } = useParams(); // 객체 형태로 들어오므로 Router에서 path=":params" 로 정해준 이름을 확인해서 구조분해할당으로 변수에 할당한다.
// fetch(url+params) 에서 활용할 수 있다.
return (
<>
<p>현재 URL의 Params : `${params}` </p>
</>
)
}
export default test;현재 url의 params를 확인할 수 있다.
참고 : [React] useParams() 사용하여 파라미터 가져오기
리액트 구조분해할당
태그나 컴포넌츠에 속성을 넘겨줄 때에도 구조분해할당이 가능하다.
import React from 'react';
const value = {
value,
type: "text"
}
const App = () =>{
return (<>
<input value="value" type="text" />
<input {...value} /> // 위와 동일하다
</>);
}