[7주차 과제] 웹 비밀 편지 만들기 #6

seojisoosoo · 2022-12-27T19:27:55Z

✨ 구현 기능 명세

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

🎁 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 사용하기
타입스크립트 이벤트 타입 지정

Happhee

와넘 야무진데 ?!! 지슈슈 체고다!!

Happhee · 2022-12-28T05:20:40Z

week7/tsmessage/src/components/common/Header.tsx

+
+export default function Header() {
+  return (
+    <h1>💌웹 비밀 편지💌</h1>


넘 기여운데?! ㅎㅅㅎ 😄

Happhee · 2022-12-28T05:22:45Z

week7/tsmessage/src/types/common.ts

@@ -0,0 +1,6 @@
+export interface List {


Suggested change

export interface List {

export interface LetterInfo

로 조금더 인터페이스명이 명확했음 좋겠다!
그리구 types/common.ts로 했는데, 여기서는 공통으로 타입이 사용되는게 맞지만 만약 기능이 많다면, types/letter.ts 로 파일명 지정하는게 관리하기 편할거야!

Happhee · 2022-12-28T07:47:04Z

week7/tsmessage/src/pages/Message.tsx

+    <>
+        <Header/>
+        <button type='button'>글쓰기</button>
+            {messages.map(({writer, message},i) => (


i 보다는 idx 라고 지칭해주자! 너무 약어는 지양하자구>.<

Happhee · 2022-12-28T07:51:03Z

week7/tsmessage/src/pages/Message.tsx

+        axios.post("/letters", 
+            {
+              "writer": writer,
+              "message": message,
+              "password": password,
+              "hint": hint     
+            }
+          ).then((res) => {
+            console.log(res)
+            axios.get("/letters")
+              .then((res) => {
+                setMessage("")
+                setMessages(res.data);
+              });
+          });
+      };


src/lib폴더를 만들고, axios로 instance 만든다음에 그 객체를 사용해서 letterApi.ts 만들고 내부에서 post 함수 export해서 import하는 방법으로 코드를 짜보자!

in-sopt 서히꺼 참교!

Happhee · 2022-12-28T07:52:58Z

week7/tsmessage/src/pages/Message.tsx

-
-        <button disabled={!message}>추가</button>
-      </form>
+            <button disabled={!message}>추가</button>


버튼 타입오디쪄!

Happhee · 2022-12-28T07:55:47Z

week7/tsmessage/src/components/CheckModal.tsx

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


Suggested change

interface SecretList{

hint:string;

password:string

}

interface CheckModalProps{

hint:string;

password:string

}

로 사용하는게 적당하지아느까?! 그냥 나의 개인적인 의견!! 왜냠 컴포넌트의 props로 사용하고 이쓰니까아!!

Happhee · 2022-12-28T07:56:06Z

week7/tsmessage/src/components/CheckModal.tsx

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


Suggested change

interface SecretList{

hint:string;

password:string

}

interface CheckModalProps{

hint:string;

password:string

}

로 사용하는게 적당하지아느까?! 그냥 나의 개인적인 의견!! 왜냠 컴포넌트의 props로 사용하고 이쓰니까아!!

Happhee · 2022-12-28T07:56:24Z

week7/tsmessage/src/components/CheckModal.tsx

+  )
+}
+
+const StCheckModalWrapper=styled.div`


article은 어떄?!

hayounSong

고생했어 지수야!! 너가 타스 걱정했던것 치곤...너무 잘했는데..? 고생많았어 정말 그리고 많이 배워가!! 앱잼도 화이팅!!!

hayounSong · 2022-12-28T20:11:36Z

week7/tsmessage/src/components/CheckModal.tsx

+
+export default function CheckModal({hint, password}:SecretList): JSX.Element {
+    const [visible, setVisible] = useState<boolean>(true)
+    const [text, setText]=useState<string>("")


이렇게 빼먹지 않고 State에도 타입선언 다 해주는거 너무 좋다!!

hayounSong · 2022-12-28T20:11:55Z

week7/tsmessage/src/index.tsx

+  worker.start();
+}
+
+const root = ReactDOM.createRoot(


이런 root에도 타입 선언이 있으면 좋지 않을까 하는 의견..!

hayounSong · 2022-12-28T20:15:29Z

week7/tsmessage/src/components/Message.tsx

+        fetchData();
+    }, []);
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {


FormEvent를 이용해서 이런식으로 타입 선언을 해주는 구조구나.. 또 배워갑니다!!

hayounSong · 2022-12-28T20:15:53Z

week7/tsmessage/src/types/common.ts

@@ -0,0 +1,11 @@
+export interface List {


이렇게 필요한 type들 외부에서 구분해주는거 좋은거같아!!

seojisoosoo added 27 commits December 27, 2022 15:53

feat : 타입스크립트 세팅

c605d07

feat : 라이브러리 설치

693f9f7

feat : gitignore 수정

842a58f

feat : 파일구조 정리

39de92e

feat : 헤더 구현

0b0509d

feat : msw 모킹 추가

060aa13

feat : 타입 추가

edc696a

feat : get 구현

d38f668

feat : post 구현

f500d86

feat : mockserviceworker 추가

f9bb768

etc : 불필요 코드 생략

59c733e

feat : 글쓰기 버튼 클릭 시 form 나오도록 수정

6dabfaa

design : 카드 디자인 구현

99a9e76

style : 글씨체 적용

6622ab6

style : 카드 스타일링 수정

ca9ca55

feat : 잠금 모달 구현

8e68037

style : 잠금 모달 커서포인터 추가

bfa039a

design : 체크 모달 디자인 구현

b3a6a95

feat : 비밀번호 입력 후, 맞으면 메시지 열리는 기능 구현

9ce17af

feat : 잠금모달 클릭 시, 체크모달로 넘어가도록 구현

90fbed1

etc : 타입 분리

e458398

design : post input 박스 스타일링

1e18017

etc : 헤더 띄어쓰기

10ceebf

etc : 더미 데이터 변경

cb11ddf

etc : 불필요한 코드 삭제 및 타입 지정

dbcf363

etc : 불필요한 코드 삭제

7136ff2

etc : 불필요 코드 삭제

3ec8490

seojisoosoo self-assigned this Dec 27, 2022

seojisoosoo added the 7주차 label Dec 27, 2022

seojisoosoo requested a review from Happhee December 27, 2022 19:45

seojisoosoo requested review from hayounSong, joohaem, woogisea and f0rever0 December 27, 2022 19:45

etc : 불필요한 코드 삭제

c72ea15

Happhee reviewed Dec 28, 2022

View reviewed changes

hayounSong reviewed Dec 28, 2022

View reviewed changes

seojisoosoo merged commit 99fc714 into main Feb 25, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[7주차 과제] 웹 비밀 편지 만들기 #6

[7주차 과제] 웹 비밀 편지 만들기 #6

seojisoosoo commented Dec 27, 2022 •

edited

Happhee left a comment

Happhee Dec 28, 2022

Happhee Dec 28, 2022

Happhee Dec 28, 2022

Happhee Dec 28, 2022

Happhee Dec 28, 2022

Happhee Dec 28, 2022

Happhee Dec 28, 2022

Happhee Dec 28, 2022

hayounSong left a comment

hayounSong Dec 28, 2022

hayounSong Dec 28, 2022

hayounSong Dec 28, 2022

hayounSong Dec 28, 2022

[7주차 과제] 웹 비밀 편지 만들기 #6

[7주차 과제] 웹 비밀 편지 만들기 #6

Conversation

seojisoosoo commented Dec 27, 2022 • edited

✨ 구현 기능 명세

🎁 PR Point

types/common.ts

mocks/handlers.ts

components/CheckModal.tsx

components/Message.tsx

😭 소요 시간, 어려웠던 점

😎 구현 결과물

📚 레퍼런스

Happhee left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hayounSong left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seojisoosoo commented Dec 27, 2022 •

edited