리액트 미니블로그 프로젝트

REACT SPACE MINI BLOG

리액트와 자바스크립트를 바탕으로 제작한 우주 컨셉 블로그 프로젝트입니다. 리덕스와 훅 등을 이용해서 북마크, 댓글, 라우팅 기능 등을 구현했습니다. 이에 더해 axios, fetch 등을 이용해 가상 더미 데이터등에서 데이터 바인딩을 직접 적용해본 프로젝트입니다.

기여도 : 개발 100%, 디자인 100%

글꼴 : NOTOSANS

WEBSITE

PROJECT MAIN TASK

게시물 별 상세페이지 이동

1. 라우터 기능 이용, 주소 값 URL 파라미터 지정

2. 게시물 정보 바인딩

3. useNavigate 훅 사용해서 링크 이동
useQuery로 유저 데이터 받아와서 바인딩

1. useQuery 훅으로 쿼리 생성하기

2. axios로 지정된 url에서 get으로 데이터 가져오기

3. 변수에 결과 값 저장하기

4. 지정된 html에 할당하기
다중 input 이용해서 댓글 기능 만들기

1. input 태그 생성해서 onChange, onSubmit 기능 추가

2. onChange를 이용해서 특정 useState에 값 담기

3. submit 이벤트 발생 시 배열에 객체 값 추가하기
리덕스로 북마크 아이템 삭제 구현

1. 리덕스로 값 만들고 함수 제작하기 (createSlice)

2. dispatch로 store.js에 요청 보기

3. 조건 충족 시 배열에서 값 삭제

Route, useNavigate

Route는 URL 경로에 따라 렌더링되는 화면을 지정해주는 기능이고 useNavigate는 해당 경로로 링크를 이동시켜주는 내장 기능입니다.

<Route path="/detail/:id" element={<Detail article="{article}" />} /> // 라우터 주소 지정 및 내용 설정

<h4 className="article-title">{props.article.title}</h4>

<p className="article-content">{props.article.content}</p>

// props로 함수 전달하기

<Card article={article[i]} i={i} count={count} navigate={navigate}></Card> article == data, navigate == 함수

<div className="card-click" onClick={() => {props.navigate(`/detail/${props.article.id}`);}}> // 전달 받은 데이터의 id값으로 이동

useQuery , axios

useQuery란 데이터를 비동기적으로 가져오고 캐싱하는 데 사용되는 기능입니다. axios는 http 데이터를 가져오는 라이브러리입니다.

let result = useQuery(["작명"], () => { // [작명]이란 키워드를 가진 쿼리 생성

return axios

.get("https://beingborn.github.io/gitImage/userdata.json") // url에서 get으로 데이터 받기

.then((res) => {

});

{result.isLoading && "로딩중"} // 데이터 값의 상태에 따라 값 나타내기

{result.error && "에러남"}

안녕하세요{" "} {result.data && result.data.name}

onchage, submit

onchange는 input 태그의 상태 변화를 감지하는 기능입니다. submit은 form이 서버로 전송될 때 발생하는 이벤트입니다.

const [userComment, setComment] = useState('') // 댓글 임시 저장 공간 생성

const onChange = event => setComment(event.target.value); // 댓글 임시 저장 공간에 value 값 저장 저장한다.

const [userCommentList , setList] = useState([])

let commentCount = userCommentList.length;

const onSubmit = event => {

event.preventDefault(); // 폼 제출 동작 막기

if (userComment === ''){ // 공백 검사 return; }

const newComment = {user : '@newUser', content : userComment} // 새로운 댓글에 값 지정

setList(userCommentList => [newComment, ...userCommentList]) // 배열 앞에 댓글 추가

setComment('') // 공백(space) 값 포함 submit

Redux, useDispatch

Redux란 여러 변수 및 배열 값을 종합적으로 모아 관리하는 자바스크립트 라이브러리입니다. useDispatch는 상태를 변경하기 위한 redux의 훅입니다.

let cart = createSlice({ name: "cart", initialState: [...] 배열 값 만들기

reducers: {

deleteItem(state, action) { 해당 state 변경 함수 생성

let deleteItemId = state.findIndex((a) => { 전달받은 index값의 아이디 저장

return a.id === action.payload; });

state.splice(deleteItemId, 1); }

export let { addCount, addItem, deleteItem, reset } = cart.actions; 함수 export 하기

let dispatch = useDispatch(); // store.js 로 요청 보내주는함수

삭제 버튼 클릭 시 deleteItem에 id를 매개변수로 요청

데이터 바인딩

요소에 객체 및 데이터 값을 주소를 통해 전달해주는 것

var carformSlides; // 슬라이드

var clickModel // 클릭된 슬라이드 변수

carformSlides.click(function() {

clickModel = $(this).find('p').text(); // 클릭된 (this)의 텍스트 값 변수 할당

$('.clicked-model').text(clickModel); // 해당 값 바인딩

localStorage.setItem('choose', clickModel); // 로컬스토리지에 값 저장

});

저장소에 있는 값 다른 브라우저에서 가져오기

var clickSub = localStorage.getItem('choose');