[pre Project] 6일차 리뷰 (08.25 ~ 08.27)

6일차 리뷰 (08.25 ~ 08.27)

✅ 새로 알게 된 점 1 : && 연산자

• error message : Uncaught TypeError: Cannot read properties of null (reading 'map')

   {items && items.map((item) => 
      <Question key={item.id} item={item}/>
   )}
  

• 원래 알고있던 내용이었지만 잊고 같은 실수를 했다…
• 데이터 렌저링 전에 map으로 찍어버려서 에러가 나는 것이다!
• && 연산자를 사용하면 연산자 전의 값이 true이면 뒤의 값이 실행된다!

  각 피연산자가 부울로 변환될 때 하나의 변환 결과가 false인 경우 AND 연산자는 중지되고 해당 거짓 피연산자의 원래 값을 반환합니다. 나머지 피연산자는 평가 하지 않습니다 . (MDN)https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND

✅ 새로 알게 된 점 2 : Proxy 설정

세션 들으면서 프록시 설정하는게 배포에 좋다~ 라는 것만 기억이 나기도 했고, 백엔드 분이 프록시 설정 필요하다고 해주셔서 테스트 데이터 받을 때 설정해봤다. 프록시를 사용해서 좋았던 점은

1. 반복되는 port 부분을 한번 설정해주고 사용하는거라 호출할때 endpoint (path) 만 설정해주면 된다는 점
2. cors 에러를 서버 단에서 잡아주는 건줄 알았는데 React proxy 설정을 하면 스스로 잡아준다! 킹 갓 리액트,,

사용방법!

• package.json 파일 마지막 부분에 넣어준다 (endpoint 제외)

   {
    "proxy" : "http://localhost:3001"
   }
  

• url 부분에 endpoint 넣어주기

  useEffect(() => {
    axios.get("/qustions")
      .then((res) => res.data)
      .then((data) => setItems(data));
  }, []);
  

✅ 새로 알게 된 점 3 : axios 데이터 타입

• 당연히 늘 json 으로 받았기 때문에 그것 만 되는 줄 알았다, 심지어 검색했을때도 자동으로 json타입으로 변환 해준다는 장점을 봐서! 하지만 그게 아니라 어떤 데어터도 잘 받아주는 듯!? 백엔드분이 string 타입으로도 테스트 해보자고 하셔서 해봤더니 오! 잘 나왔다. 조금 더 공부가 필요하다!

👍 잘한 점

1. 팀장의 역할 + 프론트엔드의 역할을 하려다 보니 내 의견을 내는 것이 조심스러웠다. 그래도 최대한 조율하려 했고, 무조건 안된다는 마인드 보다는 해볼게요! 라는 마인드로 임하지 않았나,,
2. 우리 팀의 분위기가 편안하고 자유로운 분위기였으면 해서 (친목이 아닌 자유로운 소통이 가능한!) 공용 디코에 화이팅이라던가,, 카톡에 힘내자던가,, 꽤 노력을 한 것 같다!
3. 프론트엔드로서 주도적으로 프로젝트를 진행한 점! 일정이나 해야할 일을 정해놨더니 중간 조율 없이도 무난하게 각자 해야할 일을 할 수 있었다!

🥲 아쉬운 점

1. 백엔드와 소통할 때 서버에 대해 잘 모르다 보니 의견을 마음껏 내지 못한 점,, 정말 아쉬운 부분이다. 프로젝트가 처음이라 적응 시간이 필요한 것인지..?!
2. 백엔드분과 테스트로 데이터를 받아오는 과정에서 메소드를 혼동해서 에러가 났었다,, POST, GET,, 순간 너무 창피했다,, 기초적인 부분을 놓치다니,, 좀 더 신경써야겠다!

🚀 추가적으로

1. 얼른 axios 공부를 해야겠다!
2. 로그인 부분 얘기도 나왔었는데 어떻게 session을 처리하고 실행할 것인지 고민해봐야 할 것 같다!