express.Router({mergeParams:true});

나는 express에 이런 기능이 있다는거를 처음 알았다. 그래서 내가 안되나보다.ㅠㅠ

기능이 뭘까?

const router = express.Router({ mergeParams: true });

Router에서 하위 Router로 한 번 더 routing을 하는 경우에 사용한다. 예를들어서,

• 부모 라우터

const noteRouter = require('./noteRoutes');

router.use('/:ticketId/notes', noteRouter);

• 자식 라우터

const express = require('express');
const router = express.Router({ mergeParams: true });

const { protect } = require('../middleware/authMiddleware');

복잡하게 생각할 것 없이 그냥 리액트에서 children으로 하위컴포넌트를 받아오는 기능과 유사하다고 생각하면 좋을것 같다.

proxy..

한참이 지난후에야 원인을 알게된 에러고, 이제서야 해결했다..

중복된 email로 회원가입을 하려고하면 proxy 에러가 발생했다.
몇번이나 package.json과 node_modules를 지웠다가 npm install로 다시 생성했는지 모르겠다

등잔 밑이 어둡다는 속담이 지금 상황과 딱 이다.
답은 중복된 email로 시도할때 proxy 에러라는 점이였다. express 버전4를 사용했는데 express 버전4에서 async await를 사용하려면 express-async-handler를 사용해줘야하는데 내 실수로 express-async-handler 코드를 빼먹었었다. 정확히는 없어도 사용가능하지만 잘 작동시키려면 말이다. 아무튼 사용은 이런식으로 했어야했다.

예를들면..

const asyncHandler = require('express-async-handler');

const registerUser = asyncHandler(async (req, res) => {
  const { name, email, password } = req.body;


  // 사용자가 이미 존재하는지 확인
  const userExists = await User.findOne({ email });

  if (userExists) {
    res.status(400);
    throw new Error('User already exists');
  }
}

이런식으로 말이다. 그렇게해야 new Error를 발생시킬수 있었다.

save(),create(),new

헷갈려

어떤 강의에서는 new User()로 DB에 생성후, save()로 저장하는반면 또 다른 강의에서는 create()로 DB에 저장하고 save()를 안쓴다.
도대체 어떤 차이인걸까?

결론부터말하자면 현재 표준은 .save() 를 쓰는 방법이라고한다.

파고들어가보자

몽구스 모델에는 새 문서를 만드는데 자주 사용되는 create() 함수가 있다.

const User = mongoose.model(
  'User',
  mongoose.Schema({
    email: String,
  })
);

const doc = await User.create({ email: 'bill@microsoft.com' });

doc.email; // 'bill@microsoft.com'

create() 함수는 save() 함수를 둘러싼 얇은 래퍼라고하는데, 위의 create() 호출은 다음과 동일하다.

아래의 코드는 대체적으로 선호하는 코드라고한다.

const doc = new User({ email: 'bill@microsoft.com' });
await doc.save();

참고자료

리액트에서 a태그를 써야할까 Link태그를 써야할까?

결론부터 말하자면, 리액트에서는 a태그보다 Link태그를 사용하는것을 추천한다.

why?   a태그는 페이지를 새로 불러오는데 웹이 지니고있는 상태가 초기화되고 새로 컴포넌트를 렌더링하게된다. 이는 속도저하의 원인이되는 반면에, Link태그는 브라우저의 주소만 바꿀뿐 페이지를 새로 불러오지 않는다. 그렇기때문에 컴포넌트와 상태가 초기화되지않는다.

history가 안먹혔다.

액션함수 인자값으로, history를 넘겨 history.goBack()을 사용하여 이전페이지로 이동하려고했으나 먹히지가 않았다.
console.log로 확인 결과 history가 undefined이 뜨는걸 확인할 수 있었다.

찾아가는 과정

1. 인자 값으로 history 하나만 넘겨서 콘솔 찍어본 결과 잘 먹히는걸 볼 수 있었다.
2. 인자 값으로 두개 이상 값을 보내면 어림없죠 undefined 바로 출력.
   
   ex))

   onClick={() => onRemove( history, id )} // 이런식으로 넘겨주면 언디파인뜸
   

3. 대괄호로 묶어줘서 콘솔찍어보니 잘 먹음
   

onClick={() => onRemove({ history, id })} // 이런식으로 사용,

// thunk 정의함수.. 
export const removeReview =
  ({ history, id }) =>
  async (dispatch) => {
    try {
      await axios.delete(`/api/reviews/delete?id=${id}`);

      alert('상품 삭제 완료');

      history.goBack();
    } catch (err) {
      console.error(err);
      if (err.response) {
        const errors = err.response.data.msg;

        if (errors) {
          alert(errors);
        }
      }
      dispatch({
        type: REVIEW_POST_FAILURE,
        payload: { msg: err },
      });
    }
  };

그동안 history가 어떤건 적용이되고, 어떤건 에러가 뜨는 이유가 궁금했었는데 이번 기회를 통해 제대로 짚고 넘어갈 수 있어서 좋았다.