[Message] 웹 편지 구현

[seojisoosoo]

✨ 구현 기능 명세

• 편지의 잠금모달 구현
• 잠금모달 클릭 시, 힌트를 보고 비밀번호를 맞추는 체크모달 구현
• 비밀번호를 맞추면 편지가 등장하도록 구현
• 글쓰기 버튼을 누르면 편지를 쓸 수 있는 모달이 등장하도록 구현
• 편지를 작성하면 동일하게 편지가 체크모달과 잠금모달로 감싸진 채 생성되도록 구현

🎁 PR Point

types/common.ts

• 미리 지정할 수 있는 타입들을 지정해주었어요!!

export interface List {
    writer: string;
    message: string;
    password: string;
    hint: string;
}

export interface SecretList{
    hint:string; 
    password:string
}

mocks/handlers.ts

• messageList라는 더미데이터를 만들고, msw로 모킹했어요! get과 post모두 msw로 구현했습니다.
• get은 잘되는데 post에서 애를 많이 먹었어요. 자스에서도 post할 때 그냥 req.body를 받아오는 방식으로 했어서 이번에도 그렇게 했더니 에러가 나더라고요! req.body 를 await req.json() 으로 바꾸어주니 잘 되었습니다.

    rest.post<List>("/letters", async (req, res, ctx) => {
        await sleep(200);
        messageList.push(await req.json())
        return res(ctx.status(201), ctx.json(messageList));
    }),

components/CheckModal.tsx

• props를 넘길 때 에러가 정말 많이 나서 이렇게 저렇게 다 해봤는데, 이런식으로 넘겨받는 props에도 타입을 지정해주어야한다는 사실을 깨달았습니다!
  function CheckModal({hint, password}:SecretList): JSX.Element

components/Message.tsx

• 원래는 useRef를 이용해서, ref.current.value로 input값을 받아오려고 했는데요, 자꾸만 ref값이 null일 수 있다는 에러가 떠서, 다음과 같이 onChange 이벤트를 주고, useState를 이용했습니다.
  <input type="text" placeholder="글쓴이" onChange={({ target: { value } }) => setWriter(value)}/>
• get, post 에 맞춰서 컴포넌트를 분리하고 싶었는데, 분리를 하니까 msw에서 post랑 get이 따로 놀더라고요(post했는데, get이 안되는 문제..), 그래서 get, post를 Message 컴포넌트 하나에서 모두 구현했습니다.

😭 소요 시간, 어려웠던 점

• 10h
• msw를 쓰는데 POST에서 body를 어떻게 주는지 몰라 헤맸어요
• 타입스크립트 props를 넘기는 과정에서 타입을 주지 않아서 헤맸어요
• 하지만 모두 해결!!! 햄복하다!

😎 구현 결과물

2022-12-28.4.18.47.mov

2022-12-28.4.29.02.mov

📚 레퍼런스

타입스크립트 초기세팅
타입스크립트 msw
타입스크립트 msw 타입 지정
타입스크립트 msw POST
타입스크립트 msw req.body 에러 해결방법
JSON.parse
POST fetch로 구현
css grid 사용하기
타입스크립트 이벤트 타입 지정