[3주차-ts] 이상형 with TS #6

henization · 2022-06-15T05:36:52Z

✨ 구현 기능 명세

🎁 PR Point

😭 어려웠던 점

😎 구현 결과물

github-actions · 2022-06-15T05:37:22Z

오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :)
과제 레퍼런스 참고해서 빠트린 부분은 없는 지 체크해볼까요?

github-actions · 2022-06-15T08:40:41Z

오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :)
과제 레퍼런스 참고해서 빠트린 부분은 없는 지 체크해볼까요?

github-actions · 2022-06-15T08:41:49Z

오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :)
과제 레퍼런스 참고해서 빠트린 부분은 없는 지 체크해볼까요?

github-actions · 2022-06-16T08:19:38Z

오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :)
과제 레퍼런스 참고해서 빠트린 부분은 없는 지 체크해볼까요?

github-actions · 2022-06-16T08:26:55Z

오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :)
과제 레퍼런스 참고해서 빠트린 부분은 없는 지 체크해볼까요?

github-actions · 2022-06-16T08:38:37Z

오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :)
과제 레퍼런스 참고해서 빠트린 부분은 없는 지 체크해볼까요?

github-actions · 2022-06-16T08:41:49Z

오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :)
과제 레퍼런스 참고해서 빠트린 부분은 없는 지 체크해볼까요?

Happhee

혠니 응원한다구💛💛💛💛

모르는거 이씀 질문 갈겨~

Happhee · 2022-06-17T05:08:26Z

week3_ts/src/pages/Main.tsx

+            navigation("/complete", {
+                // navigation에 값을 다중으로 넘겨주는 방법
+                state: { checkLists: checkLists("16강"), matchWinners: matchWinners },
+            });
+        }


내가 혠니랑 열띤 토론하고나서 이제 다시 찾아보니까 Common API reference - 리액트 navigate에서 보면 navigation.navigate(name, params) 형태로 들어가는 거라서 저기 params에는 함수나 컴포넌트가 들어갈수 없는 것같아!

그래서 값을 다중으로 넘기려면

state: { checkLists: "16강", matchWinners: "이겻다" },

이런식으로 얼마든지 가능한데! 혠니 코드는 함수랑 ref 자체를 넘겨받는거라 인식을 못하는 것같아! 여기서 state를 넘겨주지 말고 몬가 props로 넘기거나 그래야 할 것가튼데 흠흠 혹싀 이해 안데면 알랴주구 >.<

오 .... !! 값을 다중으로 넘기는 건 가능하되, 함수랑 ref 자체를 넘기는 건 안된다! 그러므로 props를 사용해야된단 뜻이겠지?!

joohaem

고생했어요 !!!!~

초기세팅 직접 한 건가요?? awesome 하네요🔥🔥🔥🎈

MainHeader, Tournament 는 Main 페이지서,
WinnerSection 은 Complete 페이지서 불러오는 컴포넌트니까,

components/main/MainHeader
components/main/Tournament
components/complete/WinnerSection

로 하면 더 명확한 폴더구조가 될 것 같네요!!!

TS 도 깔끔하게 뚝딱뚝딱 해내신 거 멋집니다 !!! 화이팅👍👍

joohaem · 2022-06-17T06:34:17Z

week3_ts/src/assets/images/index.ts

+export interface HandsomeGuy {
+    name: string;
+    url: string;
+}
+
+export const handsomeGuys: HandsomeGuy[] = [
+    {
+        name: "김종인",
+        url: jongIn,
+    },


assets/images 폴더에는 이미지 파일만 위치시키고,
해당하는 handsomeGuys 객체배열은 다른 폴더에 정의해서 export 시키는 것이 더 의미분리가 될 것이라 생각해요!!~
(assets 폴더가 아닌, constant나 core 폴더같은)

흐핳ㅎㅎ내가 이러케 했오 ㅎㅎㅎ혠니 내 코드 참고하누라,,,ㅎㅎㅎ나도 배워가겠샴~

넵넵!! export 하는 다른 파일을 만들어보겠슴다!

는 그냥 파일만 이동시킴 되군요 헤헷

joohaem · 2022-06-17T06:49:12Z

week3_ts/src/pages/Main.tsx

+    useEffect(() => {
+        if (fighterList.length === 0 && matchWinners.current.length >= 8) checkLists("8강");
+        else if (fighterList.length === 0 && matchWinners.current.length >= 4) checkLists("4강");
+        else if (fighterList.length === 0 && matchWinners.current.length >= 2) checkLists("결승");
+        else if (fighterList.length === 0 && matchWinners.current.length === 1) {
+            console.log(matchWinners.current[0]);
+            navigation("/complete", {
+                // navigation에 값을 다중으로 넘겨주는 방법
+                state: { matchWinners },
+            });
+        }
+    });


useEffect 를 사용할 떄는 엔간해서 두번째 인자를 설정해주는 것이 좋다고 알고 있는데,
따로 이유가 있을까요??
공식문서

useEffect 내에서는 figtherList와 matchWinner만 활용하는 데에 비해,
두번째 인자를 설정하지 않는다면 해당 변수 외에 모든 것이 변할 때 (리렌더링 될 떄) 마다 콜백을 실행시키게 됩니다
무한 루프에 갇히게 될 가능성도 있고, 불필요한 렌더링이 지속적으로 일어나게 될 것 같아요!

Suggested change

useEffect(() => {

if (fighterList.length === 0 && matchWinners.current.length >= 8) checkLists("8강");

else if (fighterList.length === 0 && matchWinners.current.length >= 4) checkLists("4강");

else if (fighterList.length === 0 && matchWinners.current.length >= 2) checkLists("결승");

else if (fighterList.length === 0 && matchWinners.current.length === 1) {

console.log(matchWinners.current[0]);

navigation("/complete", {

// navigation에 값을 다중으로 넘겨주는 방법

state: { matchWinners },

});

}

});

useEffect(() => {

if (fighterList.length === 0 && matchWinners.current.length >= 8) checkLists("8강");

else if (fighterList.length === 0 && matchWinners.current.length >= 4) checkLists("4강");

else if (fighterList.length === 0 && matchWinners.current.length >= 2) checkLists("결승");

else if (fighterList.length === 0 && matchWinners.current.length === 1) {

console.log(matchWinners.current[0]);

navigation("/complete", {

// navigation에 값을 다중으로 넘겨주는 방법

state: { matchWinners },

});

}

}, [fighterList, matchWinner.current]);

useEffect를 사용할 때 두번째 인자를 붙이는 걸 자꾸 잊어버리는 거 같아요 제대로 사용하겠심다 !.!

joohaem · 2022-06-17T06:49:55Z

week3_ts/src/pages/Main.tsx

+        else if (fighterList.length === 0 && matchWinners.current.length >= 4) checkLists("4강");
+        else if (fighterList.length === 0 && matchWinners.current.length >= 2) checkLists("결승");
+        else if (fighterList.length === 0 && matchWinners.current.length === 1) {
+            console.log(matchWinners.current[0]);


콘솔은 지워주셔도 좋을 것 같습니다😋😋

joohaem · 2022-06-17T06:52:25Z

week3_ts/src/component/MainHeader.tsx

+    // 현재 몇 라운드인지
+    const countRoundNum = (): number => {
+        return matchWinners.current.length + 1;
+    };
+    // 이번 강에는 총 몇 번의 라운드가 있는지
+    const totalRoundNum = (): number => {
+        return Math.ceil((fighterList.length + matchWinners.current.length * 2) / 2);
+    };


단순 리턴 함수를 선언하신 이유가 무엇인가요??! 😲😲

Suggested change

// 현재 몇 라운드인지

const countRoundNum = (): number => {

return matchWinners.current.length + 1;

};

// 이번 강에는 총 몇 번의 라운드가 있는지

const totalRoundNum = (): number => {

return Math.ceil((fighterList.length + matchWinners.current.length * 2) / 2);

};

// 현재 몇 라운드인지

const countRoundNum = matchWinners.current.length + 1;

// 이번 강에는 총 몇 번의 라운드가 있는지

const totalRoundNum = Math.ceil((fighterList.length + matchWinners.current.length * 2) / 2);

그러게!! 나도 궁금하다!!!!!!!!!!

화살표 함수를 사용해야한다는 생각을 계속 갖고 있어서 그런 거 같습니다 짚어주셔서 감자합니다

joohaem · 2022-06-17T06:55:45Z

week3_ts/src/pages/Complete.tsx

+const StyledRoot = styled.div`
+    display: flex;
+    flex-direction: column;


Main 페이지에서도 그렇고, StyledRoot 는 어떤 의미인지 궁금합니다!!!

page 최상단 div 레이아웃?!

그리고 궁금한거! 여기서만 Styled라고 명시한 이유는?? 다른데서는 그냥 GameTitle 이렇게 쓰는데!
차이가 머에여?!

원래 최상단루트는 StyledRoot로 두는데, 컴포넌트 분리를 하면서 마음대로 쓰게 된거 같아요잇. 페이지 최상단 루트를 제외하고 수정하겠습니다~!

joohaem · 2022-06-17T06:56:53Z

week3_ts/src/pages/Complete.tsx

+    font-family: "HaenamFont";
+`;
+
+const GameTitle = styled.header`


왕 시멘틱 태그 좋네요🤩🤩 h1나 h2 같은 헤딩태그는 어떨까요??

오오 넵넵 !!!!!!! 좋으네요

joohaem · 2022-06-17T06:57:54Z

week3_ts/src/component/WinnerSection.tsx

+        <StyledRoot>
+            <p>👑</p>
+            <article>
+                <img src={matchWinners.current[0].url} />


img 태그에는 alt 속성이 필수로 들어가는 것이 웹표준에 적합합니다!

추가로 alt 속성은

만약 이미지가 정보를 포함하고 있다면, 텍스트는 이미지를 묘사해야 한다.

만약 이미지가 요소 내에 위치하고 있다면, 텍스트는 링크가 어디와 연결되어 있는지를 설명해야 한다.

만약 이미지가 단순한 장식이라면 alt=""와 같이 사용해야 한다.

라는 규칙이 있슴댜~.~

오 넵!!!!!!!!!!!!감사합니다!!!!!!!!

joohaem · 2022-06-17T06:58:24Z

week3_ts/src/component/WinnerSection.tsx

+            <p>👑</p>
+            <article>
+                <img src={matchWinners.current[0].url} />
+                <div>{matchWinners.current[0].name}</div>


strong 같은 태그도 적합할 것 같다는 생각이 듭니다 !!~

joohaem · 2022-06-17T06:59:08Z

week3_ts/src/component/WinnerSection.tsx

+    p {
+        position: absolute;
+        z-index: 999;
+        font-size: 8rem;
+    }
+    article {
+        width: 35rem;
+        cursor: pointer;
+        position: relative;
+        display: flex;
+        justify-content: center;
+
+        img {
+            width: 100%;
+        }
+        div {
+            position: absolute;
+            top: 75%;
+            left: 50%;
+            font-size: 5rem;
+            color: white;
+            transform: translate(-50%, -50%);
+            text-shadow: -0.2rem 0 black, 0 0.2rem black, 0.2rem 0 black, 0 -0.2rem black;
+        }
+    }


이정도 뎁스의 스타일링은 따로 선언하여 작성하는 것이 후의 유지보수에도, 가독성 측면에서도 더 좋다고 생각해요!

> 요렇게 명시해주는게 더 좋을것같아여!

선택자 없이 사용하는건 지양해야델듯?!!

joohaem · 2022-06-17T07:00:57Z

week3_ts/src/component/Tournament.tsx

+            {fighterList.map((fighter, index) => {
+                if (index < 2) {
+                    return (
+                        <article onClick={() => getSelectWinner(index)} key={index}>
+                            <img src={fighter.url} />
+                            <div>{fighter.name}</div>
+                        </article>
+                    );
+                }
+            })}


Suggested change

{fighterList.map((fighter, index) => {

if (index < 2) {

return (

<article onClick={() => getSelectWinner(index)} key={index}>

<img src={fighter.url} />

<div>{fighter.name}</div>

</article>

);

}

})}

{fighterList.slice(0, 2).map((fighter, index) => (

<article onClick={() => getSelectWinner(index)} key={index}>

<img src={fighter.url} />

<div>{fighter.name}</div>

</article>

)}

이렇게도 축약할 수 있을 것 같네요!?

Happhee · 2022-06-17T13:57:27Z

week3_ts/vite.config.ts

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()]


오구 기특해 ㅎㅎ

Happhee · 2022-06-17T14:02:09Z

week3/src/App.jsx

+    const [round, setRound] = useState("16강");
+    const matchWinners = useRef([]);
+    const [fighterList, setFighterList] = useState(randomGameInfo);
+    const [gameEnd, setGameEnd] = useState(false);


Suggested change

const [round, setRound] = useState("16강");

const matchWinners = useRef([]);

const [fighterList, setFighterList] = useState(randomGameInfo);

const [gameEnd, setGameEnd] = useState(false);

const [round, setRound] = useState<string>("16강");

const matchWinners = useRef<array>([]);

const [fighterList, setFighterList] = useState<여기도 타입 지정>(randomGameInfo);

const [gameEnd, setGameEnd] = useState<boolean>(false);

state, ref에도 타입지정 필요합니다!!
react-hook : 서히 벨로그

@Happhee 초기값 설정하면 자동으로 타입추론이 되긴 해요 !!~@

@joohaem 그건 아는데 !! 그래도 명시 해주는게 맞는방법아니야?!! 추론하게 하는게 타입스크립트를 쓰는 이유가 맞는걸까? 라는 의문이 들었오!

넵넵 빨간줄 안떠서 그냥 그대로 한 거 같아유 수정해놓을게요!

Happhee · 2022-06-17T14:05:27Z

week3/src/App.jsx

+    const getSelectWinner = (pos) => {
+        matchWinners.current.push(fighterList[pos]);
+        setFighterList(fighterList.slice(2));
+    };


요기도 매개변수 타입 지정!!!!!!!!🚨🚨🚨🚨🚨🚨

타입스크립트에서 변수에는 타입 무조건 갈기자🚨🚨🚨

Happhee · 2022-06-17T14:06:52Z

week3_ts/src/component/MainHeader.tsx

+}
+
+export default function MainHeader(props: MainHeaderProps) {
+    const { round, matchWinners, fighterList } = props;


구조분해할당 져아여 ㅎㅎㅎ

Happhee · 2022-06-17T14:08:46Z

week3_ts/src/pages/Complete.tsx

+const StyledRoot = styled.div`
+    display: flex;
+    flex-direction: column;


그리고 궁금한거! 여기서만 Styled라고 명시한 이유는?? 다른데서는 그냥 GameTitle 이렇게 쓰는데!
차이가 머에여?!

Happhee · 2022-06-17T14:09:00Z

week3_ts/src/component/Tournament.tsx

+    const { matchWinners, fighterList, setFighterList } = props;
+
+    // 승자를 골랐을 때
+    const getSelectWinner = (pos: number) => {


아여기썻넹 ㅎㅎ

github-actions · 2022-06-19T08:58:09Z

오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :)
과제 레퍼런스 참고해서 빠트린 부분은 없는 지 체크해볼까요?

init: 초기세팅

66e2629

henization self-assigned this Jun 15, 2022

henization added the 3️⃣ 3주차 3주차 과제에요. label Jun 15, 2022

henization added 4 commits June 15, 2022 15:58

init: 이미지 경로 설정

8aeeaa6

feat: route 설정

fb0aeac

feat: image index파일로 묶기

234f415

fix: 폴더구조 수종

207dae4

feat: 라운드 개수 계산 수정

fd2218a

henization added 4 commits June 15, 2022 20:44

feat: 기능구현

bd9c992

fix: 이미지 배열 수정

9b64008

fix: map에 key값 추가

18a5293

fix: 조건문 수정

622fd34

chore: 파일 정리

f150cc0

feat: Complete 페이지 완성

a51386f

style: 주석 정리

673fbe0

henization requested review from Brokyeom, Happhee, joohaem and say-young516 June 16, 2022 08:41

Happhee reviewed Jun 17, 2022

View reviewed changes

joohaem reviewed Jun 17, 2022

View reviewed changes

Happhee reviewed Jun 17, 2022

View reviewed changes

henization added 4 commits June 19, 2022 16:53

fix: 폴더 구조 수정

1bf2548

fix: 경로 수정

9d18660

style: styled-component 명 수정

aa82b6a

feat: 이미지 폴더 이동 및 경로 수정

9b14518

henization changed the title ~~[Week3-ts] 이상형 with TS~~ [3주차-ts] 이상형 with TS Jun 20, 2022

[3주차-ts] 이상형 with TS #6

Are you sure you want to change the base?

[3주차-ts] 이상형 with TS #6

Conversation

henization commented Jun 15, 2022

✨ 구현 기능 명세

🎁 PR Point

😭 어려웠던 점

😎 구현 결과물

github-actions bot commented Jun 15, 2022

github-actions bot commented Jun 15, 2022

github-actions bot commented Jun 15, 2022

github-actions bot commented Jun 16, 2022

github-actions bot commented Jun 16, 2022

github-actions bot commented Jun 16, 2022

github-actions bot commented Jun 16, 2022

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

joohaem 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

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

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

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

github-actions bot commented Jun 19, 2022