React 숙련주차 팀 프로젝트 1차시

서론

뉴스피드를 만들기 전 개인 과제를 명시된 조건에 맞춰서 기능들을 구현하는 것을 진행하였다.

아직 나는 모르는 것도, 배운 것도 많이 없기에 막막했지만, 기존의 개인 프로젝트를 따라가는 것이라고 생각했기 때문에 이전에 했던 것들을 바탕으로 진행하였다.

 

페이지 이동 기능은 그 자리에서 처음으로 구현하는 기능이었는데, 예제를 보며 진행하니 생각보다 수월하게 진행되었다.

간단하게 react-router-dom의 useLocation 을 이용하여 구현하는 것이었다.

import React from 'react';
import MOCK_DATA from '../mock';
import '../css/main.css';
import { useNavigate, useLocation } from 'react-router-dom';

const DetailPokeMon = () => {
    const location = useLocation();
    const pokemonIdString = location.pathname.slice(9); // 포켓몬 ID 를 쿼리스트링으로부터 받아옵시다.
    //console로 확인해보니 분명 id값이 잘 나오는데 포켓몬이 안 나와서 typrof로 확인해보니
    //string이어서 읽히지 않음.
    //그래서 string을 다시 숫자로 변환
    console.log(pokemonIdString);
    const pokemonId = Math.floor(pokemonIdString);
    const pokemon = MOCK_DATA.find((p) => p.id === pokemonId);
    const navigate = useNavigate();

    if (!pokemon) {
        return <div>포켓몬을 찾을 수 없습니다.</div>;
    }

    return (
        <div>
            <img src={pokemon.img_url} alt={pokemon.korean_name} />
            <h2>{pokemon.korean_name}</h2>
            <p>타입: {pokemon.types.join(', ')}</p>
            {/* {* onClick 이벤트를 완성해주세요. *} */}
            <button onClick={() => navigate('/PokeMon')}>뒤로 가기</button>
        </div>
    );
}

export default DetailPokeMon;

location이라는 변수에 useLocation을 담고 pathname.slice를 통해 url의 제일 뒤에 있는 아이디를 추출해서 이를 바탕으로 데이터를 불러오는 것이었다.

 

사실 코드를 진행하면서도 내가 잘 하고 있는 것인지, 이해를 잘 했는지 긴가민가하다...

https://github.com/za0012/reactProject2

---

본론

뉴스피드를 제작하는 팀프로젝트를 진행하게 되었다.

뉴스피드는  팔로우 중인 다른 블로그의 글이 발행된 순서대로 표시되는 피드이다. 

 

여튼, 뉴스피드의 주제를 무엇으로 할지 회의를 진행했으며, 회의 결과 맛집 뉴스피드로 결정하였다.

 

아래는 회의를 통해 만든 와이어 프레임을 다시 정리한 사진들이다.

참고 : https://www.notion.so/teamsparta/09-39fc7e850d91495d9ee16ece30df938f

 

이후 역할분담도 함께 진행하였다.