02-09 코딩일기

밀려쓰는 02-09 코딩일기..

오늘은 React로 게시판을 만들어 보고자 dummy json 파일을 만들어 Json-server에 연결하여 만들어 보았다.

기본적인 폴더 구조는
src 폴더 안에 components 에 모든 section을 폴더화 하여 넣고 assets 폴더에 dummy-data.json 을 만들어 api를 관리 하는 식으로 하였다.

json server 는 port 3001 / react 는 3000 으로 통신하고
react-router-dom 을 설치하여 spa 로 만들었고, 아래 route path를 통해 링크를 관리했다.

<Route exact path="/" element={<Main />} />
<Route path="/board/:no" element={<Board />} />
<Route path="/create_form" element={<Form />} />
<Route path="/login" element={<Login />} />

<Main /> 섹션 부분을 제작 중이어서 첫화면을 띄우면 빈화면이 나온다.
<List /> 섹션을 이용해 목록 창을 4가지로 구성하였고 , 각 리스트 마다 Link to="?" 태그를 걸어 한 페이지에서 이동하게 만들었다.

모든 섹션마다 axios 통신을 위해 axios를 설치하고 / useAxios 라는 커스텀 훅을 만들어 통신했다.

export const useAxios = (url) => {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    axios.get(url).then((res) => setData(res.data));
  }, [url]);

  return data;
};

<기본적인 화면 - 목록에 Frontend 클릭시>
아래 목록이 4가지 구성이 되어 있어 각 영역마다 통신을 위해 useParms()로 각 요소에 맞는 파라미터를 받아온 후 보여주게 설정 하였다. ( + spiner를 만들어 통신이 걸릴 때 스피너 이미지도 나온다. )

<게시글 작성 버튼 클릭시 나오는 submit form>

추가 해야 할 부분

1) login 페이지를 만들었는데 , Localstorage 에 담고 있어 이걸 mongodb 를 통해 계정 관리를 할 생각이다.
2) 아직 상세페이지가 만들어 지지 않아서 , List형식으로 간단하게 내용만 볼 수있기에 상세페이지 추가 , List 컨텐츠 클릭시 상세페이지로 보여주기
3) 이미지가 https://source.unsplash.com/random 에서 동일하게 보여주고 있기에 , 사용자가 직접 upload 할 수 있도록 input-file 을 추가할 것이다.
4) 등등...할 게 많은 것 같다!