Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Week7 #9

Merged
merged 8 commits into from
Feb 17, 2023
Merged

Week7 #9

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
457ccdf
init : 초기 세팅
f0rever0 Dec 20, 2022
428d1fc
feat : mainpage 및 msw
f0rever0 Dec 21, 2022
78340c1
feat : writepage
f0rever0 Dec 21, 2022
c78ceba
refactor : console.log 삭제
f0rever0 Dec 21, 2022
c562585
feat : letter 및 letter modal 기능
f0rever0 Dec 22, 2022
3f72d9a
design : 편지 css
f0rever0 Dec 22, 2022
f50321e
feat : 모달 닫힐때 타이핑 기능 초기화
f0rever0 Dec 22, 2022
540fc68
refactor : type 및 component 명 수정
f0rever0 Dec 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions week7/letter/src/common/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export interface letter {
export interface Letter {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

앗 이렇게 공통으로 쓰일 type interface을 밖에서 선언해주는 방법 좋은 것 같아!!

id: number;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

호곡! 나는 편지마다 id 값을 넣을 생각을 못해서 인덱스로 접근했는데 맞네맞네 id 중요하지!!!! 꼼꼼하게 넘 잘했다아~

writer: string;
title: string;
Expand All @@ -7,8 +7,8 @@ export interface letter {
password: string;
}

export interface letterDataProps {
letterData: letter;
export interface LetterDataProps {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이거 왜 비슷한거로하나더 만들어찌?!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

음,,, 어떤게 비슷하다는거지?! letterDataProps -> LetterDataProps 바꾼 이유말하는건가? 그거는 type 명을 대문자로 시작하게 통일하고 싶어서 수정했어!

letterData: Letter;
}
export interface UseInterval {
(callback: () => void, interval: number): void;
Expand Down
8 changes: 4 additions & 4 deletions week7/letter/src/components/letter.tsx → week7/letter/src/components/letterItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ import React, { useState } from "react";
import styled from "styled-components";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { letter, letterDataProps } from "../common/type";
import { Letter, LetterDataProps } from "../common/type";
import { useInterval } from "../utils/useInterval";

const Letter = (letterData: letterDataProps) => {
const letter: letter = letterData.letterData;
const LetterItem = (letterData: LetterDataProps) => {
const letter: Letter = letterData.letterData;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LetterDataProps 타이핑을 해줘서
letterData.letterData 는 Letter 로 자동추론 될 것 같아요
불필요한 타입선언은 되려 혼란을 야기할 수 있어요!!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

그렇군요!! 정확하게(개발자의 의도대로) 자동추론 되는거는 개발자가 선언 안하고 넘겨도 되나요?

const [isOpened, setIsOpened] = useState(false);
const [content, setContent] = useState("");
const [count, setCount] = useState(0);
Expand Down Expand Up @@ -157,4 +157,4 @@ const LetterInfo = styled.section`
}
`;

export default Letter;
export default LetterItem;
10 changes: 5 additions & 5 deletions week7/letter/src/pages/mainPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import React from "react";
import { useNavigate } from "react-router-dom";
import { useState, useEffect } from "react";
import styled from "styled-components";
import Letter from "../components/letter";
import { letter } from "../common/type";
import LetterItem from "../components/letterItem";
import { Letter } from "../common/type";

const MainPage = () => {
const navigate = useNavigate();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

navigate에도 찾아보니까 type 선언을 해줄 수 있더라고!! 근데 이러한 선언을 꼭 필요한지는.. 같이 생각해보면 좋을 것 같아!

const [letters, setletters] = useState<letter[]>([]);
const [letters, setletters] = useState<Letter[]>([]);

const getLetters = () => {
fetch("/letters")
Expand All @@ -34,8 +34,8 @@ const MainPage = () => {
<WriteButton onClick={gotoWrite}>편지쓰기</WriteButton>
</Header>
<LetterContainer>
{letters.map((letterData: letter) => {
return <Letter key={letterData.id} letterData={letterData} />;
{letters.map((letterData: Letter) => {
return <LetterItem key={letterData.id} letterData={letterData} />;
})}
</LetterContainer>
</>
Expand Down