[TIL] Section 2 솔로 프로젝트 회고

ㅜㅜ·2022년 10월 18일
1

Today I learn

목록 보기
35/77
post-thumbnail

벌써 section 2가 끝이 보인다는 게 실감난다.
my agora states를 처음 만들 때가 어제같은데 오늘은 거기에 서버를 연결해서 데이터를 불러오도록 해주었다!



✅ 프로젝트 목표 & 완료도

Bare minimum

optional

  • section 1에서 구현한 my-agora-states를 React로 다시 개발하기

: 정말 정말 해보고 싶은데 리액트를 처음부터 만들어 나가는 건 처음이라 생각만에도 시간이 많이 걸렸음. 주말까지 시간적인 여유를 두고 조금씩 완성해나가야지.





🤔 과제를 하면서 새롭게 알게된 점

라우터

: app.js 파일에서는 이미 app.use("/discussions", discussionsRouter) 코드를 통해서 해당 경로로 라우팅하고, 미들웨어 discussionsRouter를 연결해주고 있다.(discussionsRouter는 discussions.js를 require 해주는 미들웨어)
그래서 discussions.js 파일에서는 따로 "/discussions"를 붙여주지 않고, 그 뒤에 올 주소만 적어주어야 제대로 작동했다.

//discussions.js 
//todo1:모든 discussions 목록을 조회하는 라우터를 작성 
//todo2: id에 맞는 discussion을 조회하는 라우터를 작성 
//내가 썼던 코드 
router.get("/discussions/",findAll)
router.get("/discussions/:id", findById)

//써야하는 코드
router.get("/",findAll)
router.get("/:id",findById)


find(), filter()

: 나는 filter를 사용해서 '요청으로 들어온 id와 일치하는 discussion을 응답합니다'라는 문제를 해결했지만. 위 함수 둘 다 배열에서 어떤 특정한 값을 찾는 용도로 사용이 가능하다.

arr.find()는 배열에서 주어진 판별 함수를 만족하는 첫 번째 요소의 을 반환하고, 그런 요소가 없다면 undefined를 반환한다.

반면에 filter()는 주어진 함수를 만족하는 값들만 모아 배열을 반환하기 때문에 아래와 같이 data[0]과 같은 인덱스 설정이 필요했다. 이 점을 간과해서 테스트를 하나 남겨두고 통과 못하고 있었다...😢

findById: (req, res) => {
    // TODO: 요청으로 들어온 id와 일치하는 discussion을 응답합니다.
    const { id } = req.params;
    const data = discussionsData.filter((el) => el.id === Number(id));
    if (data.length !== 0) {
      //내가 filter를 사용했기 때문에 data는 배열로 받아짐.
      //배열은 참조형이라 !== []로 하면 제대로 비교 안 돼서 .length로 조건 만들어줘야 함.
      res.status(200).send(data[0]);
    } else {
      res.status(404).send("Not Found");
    }
  },
};


//find로 만들었다면 
const data = discussionsData.find((el)=> el.id === Number(id));
if(data){
  res.status(200).send(data);
}else{
  res.status(404).send("Not Found");
}

fetch 사용해서 서버와 클라이언트 연결해주기

: 처음에는 fetch를 대체 어디에 연결해야하나 고민을 많이 했다...
agoraStatesDiscussions는 원래 data.js에 담긴 dummy data를 가지고 있는 변수였다. 만약 agoraStatesDiscussion을 바꾸지 않는다고 생각하면 너무 많은 내용들을 하나하나 고쳐야해서 agoraStatesDiscussion 자체를 fetch에서 가져온 데이터를 넣는 변수로 재할당해 사용해야겠구나 하는 생각에 이르렀다.

fetch를 사용하는 게 늘 지나가듯이 한 번 쓰고 넘어가고 해서 쓸 때마다 다시 찾아보는 기분인데...
fetch에 url을 넣을 때는 꼭 문자열 형태로 넣어주어야 하고,
fetch에서 처음 받아오는 데이터는 json()매서드로 접근할 수 있게 JSON 형태로 만들어 줄 수 있다.

fetch("http://localhost:4000/discussions")
  //fetch 함수로는 받아온 데이터를 바로 사용할 수 없으므로
  //json()이라는 매서드를 사용해서 JSON 형태로 변환해야함.
  .then((response) => response.json())
  .then((data) => {
    agoraStatesDiscussions = data;
    const ul = document.querySelector("ul.discussions__container");
    render(ul);
  });

express에서 res.json()과 fetch에서 사용되는 json()

각각 express, fetch에서 사용되는 매서드라는 차이가 있다.
이름이 비슷하더라도 사용되는 곳이 다른 것!





🤪 Section 2를 마치며

이번 섹션을 마치면서는 내 부족함이 좀 더 낱낱이 보이는 것 같아 조금 조급한 마음이 생겼다.
현재 듣고 있는 과정만으로는 자바스크립트나 리액트에 대한 숙련도를 쌓는 데 어려움이 있지 않나 싶다.
아무래도 교육과정은 여러가지 개념들을 많이 알려줘야하고, 그러다보니 좋은 실습 과제들이 주어지기는 하지만 그걸 더 여러번 연습해볼 기회는 없는 것 같다. (물론 복습도 하고 있지만 ! 더 다양하고 여러가지 기능들을 구현해보고 싶은 맴!)
앞으로는 다른 콘텐츠들도 많이 활용해아지.
section 3에 들어가면 더 어려운 알고리즘 문제들도 많다고 하니... 알고리즘 문제도 꾸준히 풀어야지...

profile
다시 일어나는 중

0개의 댓글