[3주차 기본과제] 당신 누구얒! #5

myeongheonhong · 2022-11-04T05:49:52Z

✨ 구현 기능 명세

기본 과제
생각 과제

🎁 PR Point

App컴포넌트에서 이름, 이미지, 보기예시를 담은 people배열을 선언해주어서 Content컴포넌트에 해당하는 props를 전달해준다.
마지막 사진에 도달 시 index와 people배열의 길이가 같아졌을 경우 넘겨주는 props를 조건문을 통해 다르게 전달해준다.
다시하기를 눌렀을 경우 index와 point를 리셋해준다.

😭 소요 시간, 어려웠던 점

5h
부모에서 자식으로 데이터를 넘겨서 처리를 해야하는 자식에서 부모로 데이터를 넘겨서 개발을 해야하는지 처음이다 보니 감이 안왔습니다. styled-component이용하는 것도 처음이라서 어려웠습니다.
styled-component에 이미지를 띄울 때 import 방식 외에 경로를 넘겨주어서 적용해보고 싶었는데 마음처럼 되지 않았습니다.ㅠㅠ

😎 구현 결과물

week03.mp4

과제 틀을 잡기위해 설정한 값 변경.

- image를 보여주는 IamgeBox 구현, - 이름 보기를 보여주는 NameList&NameItem 구현, - NameItem에는 onClick 속성을 통해 props로 전달받은 checkPerson에 클릭 된 보기에 해당되는 이름을 인자로 전달. - ResetBtn을 클릭 시 resetGame함수를 실행시킴.

- 다시하기의 버튼을 Main 컴포넌트로 이동시켜 해당 파일 삭제.

- [정답,이미지,5명의 보기]의 배열정보를 담고있는 people을 선언. - Main에서 전달된 checkPerson의 매개변수가 정답과 일치한다면 answer의 상태를 true로 변경. useEffect에서 answer의 상태가 변경시 Point와 다음문제(Index증가)로 넘어감. - resetGame이 호출될 경우 reset의 값을 true로 변경 시 useEffect에서 점수와 문제(Index)를 초기화. - 조건에 따라 전달하는 props를 다르게하여 마지막 문제를 맞출 시 끝나는 메세지를 보여주는 화면 구현.

- 두개의 컴포넌트로 나누어서 진행하는 구현사항 반영

leeseooo

Header와 Content 컴포넌트로 잘 분리해서 구현해주신 것 같아요👍👍👍
저도 요즘 더 나은 변수명, 함수명을 짓기 위해 노력하고 있는데 동참해보실런지 . .

leeseooo · 2022-11-04T06:01:10Z

week03/src/components/Content.jsx

+                <NameList>
+                    <NameItem onClick={() => checkPerson(example[0])}>
+                        {example[0]}
+                    </NameItem>
+                    <NameItem onClick={() => checkPerson(example[1])}>
+                        {example[1]}
+                    </NameItem>
+                    <NameItem onClick={() => checkPerson(example[2])}>
+                        {example[2]}
+                    </NameItem>
+                    <NameItem onClick={() => checkPerson(example[3])}>
+                        {example[3]}
+                    </NameItem>
+                    <NameItem onClick={() => checkPerson(example[4])}>
+                        {example[4]}
+                    </NameItem>
+                </NameList>


요거는 똑같은 코드가 중복적으로 반복되고 있으니까 map()을 이용해보면 어떨까여

leeseooo · 2022-11-04T06:06:56Z

week03/src/App.jsx

+                <Content
+                    point={point}
+                    image={people[index][1]}
+                    example={people[index][2]}
+                    person={people[index][0]}
+                    checkPerson={checkPerson}
+                    resetGame={resetGame}
+                    index={index}
+                    lenght={people.length}
+                />


people 자체를 props로 넘겨주면 image, example, person, length props는 없어도 될 것 같은데 어떻게 생각하시나요?
props가 너무 많으면 코드를 봤을 때 이해하기 힘들 수 있고, 다른 곳에서 재사용하기도 힘들 수 있을 것 같아요

음 제 생각에는
Content를 함수같은 느낌으로 바라보면,
people로 인자로 전달받은 컴포넌트에서 변수를 설정해줄 텐데
그럼 변수를 설정할때 전달한 컴포넌트로 가서 확인하고 변수를 설정하고 하는 작업의 번거로움도 있을거 같아요!!
그래서 해당 변수가 존재하는 컴포넌트에서 각각의 변수를 나누어서 전달하는게 좋다고 생각해서 저렇게 코딩한거 같아요!

하지만 개발자가 충분히 객체정보에 대한 이해도가 있거나, 복잡하지 않은 객체에 대해서는 말해준것처럼 넘겨주는것도 좋은거 같네요!!

아하 이해했어요! 그렇게 생각할 수 있을 것 같아요
저도 다시 한 번 고민해봤는데요, people 변수를 배열 안의 배열(이차원배열)로 만들지 않고
key,value를 가진 객체로 만드는 건 어떨까요?
image, example, person 을 프로퍼티로 가진 객체로 people을 변경한다면
props로 people만 넘겨주더라도 그 안에서 다시 구조분해 할당을 해서 사용할 수 있을 것 같아요.

leeseooo · 2022-11-04T06:09:31Z

week03/src/App.jsx

+    const [reset, setReset] = useState();
+
+    const checkPerson = (example) => {
+        if (example === people[index][0]) {


people[index][0]은 다른 사람이 봤을 때는 이해하기 힘들 것 같아요.
그리고 example이라는 변수명도 무엇을 의미하는지 한번에 이해하기 힘들었어요.
변수명을 이해하기 쉽게 바꿔보는 건 어떨까요?

변수명..함수명... 가독성 높이기 동참하겠습니다...!!

leeseooo · 2022-11-04T06:12:21Z

week03/src/components/Content.jsx

+};
+
+export default function Content(props) {
+    const { image, example, checkPerson, resetGame, index, length } = props;


props 꺼내서 쓰는 거 좋은 것 같아요~👍👍

갓지영님이 일려주셨습니다!!>_<

질투나네요~ 저한테도 물어봐주세요~

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

leeseooo · 2022-11-04T06:14:03Z

week03/src/components/Content.jsx

+Content.defaultProps = {
+    point: '0',
+};


App.jsx에서 point state가 0으로 초기화 되어있는데 이 코드도 꼭 필요한가요?

아 그렇군요...!!ㅎㅎㅎ불필요한거 같습니다!! 반영하겠습니당ㅎㅎㅎ

leeseooo · 2022-11-04T06:17:00Z

week03/src/App.jsx

+export default function App() {
+    const [index, setIndex] = useState(0);
+    const [point, setPoint] = useState(0);
+    const [answer, setAnswer] = useState(false);


boolean 변수니까 isCorrect 이런식으로 '정답 여부'가 변수명에 포함되면 이해하기 좋지 않을까요?
지금은 answer 라는 명사여서 string이 들어갈 것 같은 변수라서요.

오,,,,이런게 좋은변수,함수명 짓기군요...!! 앞으로 코딩할때 신경써서 작성해야겠네요!!

근데 저도 이름 잘 못 짓거든요 ㅋㅋ 같이 노력해요

leeseooo · 2022-11-04T06:28:20Z

week03/src/App.jsx

+            {index === people.length && <Done>!끝!</Done>}
+            {index < people.length && (
+                <Content
+                    point={point}
+                    image={people[index][1]}
+                    example={people[index][2]}
+                    person={people[index][0]}
+                    checkPerson={checkPerson}
+                    resetGame={resetGame}
+                    index={index}
+                    lenght={people.length}
+                />
+            )}
+            {index === people.length && (
+                <Content
+                    point={point}
+                    image={image5}


index와 people.length를 이용해서 조건부 렌더링으로 잘 보여주고 있는 것 같아요!

그런데 72번째 줄과 85번째 줄의 조건이 동일하니까 하나로 묶고,
73번째 줄 Content 컴포넌트를 하나로 묶어서,
삼항연산자(? : )로 나타내는 건 어떨까요?

삼항연산자로 표현하는 게 항상 정답은 아니지만 . . . 좀 더 가독성 좋은 방식으로 조건부 렌더링을 해주면 좋을 것 같은데 어떠신가요

2가지의 케이스로 나뉠 때에는 삼항연산자가 좋은거 같아요!!
위에 예시에서는 작거나 같거나 클수도 있는 조건이면 저런식으로 표현해주는게 더 좋을거 같다는 생각이 드네요!
위의 예시에서 삼항연산자를 사용하게 되는 경우에는 작지 않은 경우에는 두가지(같음,큰경우)가 있기 때문에 해당 조건식으로 나타내봤습니당!!
(사실 삼항연산자는 생각도 못해봤습니다,,,,^^;;;;;)

Done 컴포넌트는 합치는게 좋겠네요!!ㅎㅎㄱㅅㄱㅅ

지금 다시 고민해보니깐
index < people.length 일 때, 그렇지 않을 때 두 가지로 나눠서 컴포넌트를 보여주면 좋을 것 같아요
index === people.length 일 때 보여주고 있는 Content 컴포넌트랑 Done 컴포넌트를 합쳐도 될 것 같아요
지영언니가 땅콩먹는 이미지 Content가 문제에 해당하는게 아니라 사실은 끝났을때 보여주는 거니까요.
어떻게 생각혀

- styled-component에 대한 아티클작성. - React/Vue/Angular/Svelte 비교 아티클 작성.

NaveOWO

놀러왔슴니다~~~ 수고하세요~~~~~~
useEffect 야무지게 쓰는거 배우고 가요!!!🔥 므찌다!!

NaveOWO · 2022-11-07T01:57:14Z

week03/src/components/Content.jsx

+};
+
+export default function Content(props) {
+    const { image, example, checkPerson, resetGame, index, length } = props;


ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

NaveOWO · 2022-11-07T01:58:42Z

week03/src/components/Content.jsx

+
+    return (
+        <StyledContent>
+            <StyledScore>{props.point} 점</StyledScore>


point 변수 비구조화할당 해주는거 빠짐~

NaveOWO · 2022-11-07T02:00:02Z

week03/src/components/Content.jsx

+        <StyledContent>
+            <StyledScore>{props.point} 점</StyledScore>
+            <ImageBox src={image}></ImageBox>
+            {index !== length && (


index가 length보다 커지면 안되니깐 index < length 가 더 정확해보여요!!

myeongheonhong added 11 commits October 15, 2022 22:53

[Init] : 3주차 세미나 실습코드

8373745

[Etc] : gitignore에 node_modules 추가

e9666ad

[Init] : 초기 파일 생성

9eac4db

Fix : header영역 디자인 수정

f2ed87c

과제 틀을 잡기위해 설정한 값 변경.

[ Css ] : 스타일 전역 초기화

3d3c8e5

[ Fix ] : Styled Component 적용

db9c988

[ Etc ] : "타이틀 수정, 이미지 추가, Reset 라이브러리 추가"

67a3a4c

[ Etc ] : "Footer.jsx 파일 삭제"

41b1ba7

- 다시하기의 버튼을 Main 컴포넌트로 이동시켜 해당 파일 삭제.

[ Fix ] : "구현사항 반영"

133600c

- 두개의 컴포넌트로 나누어서 진행하는 구현사항 반영

myeongheonhong requested review from leeseooo and Dangpy November 4, 2022 05:49

leeseooo reviewed Nov 4, 2022

View reviewed changes

[ Feat ] : "생각과제 아티클 작성"

7dd695d

- styled-component에 대한 아티클작성. - React/Vue/Angular/Svelte 비교 아티클 작성.

myeongheonhong requested a review from joohaem November 5, 2022 04:24

NaveOWO reviewed Nov 7, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[3주차 기본과제] 당신 누구얒! #5

[3주차 기본과제] 당신 누구얒! #5

myeongheonhong commented Nov 4, 2022

leeseooo left a comment

leeseooo Nov 4, 2022

leeseooo Nov 4, 2022

myeongheonhong Nov 4, 2022

leeseooo Nov 5, 2022 •

edited

Loading

leeseooo Nov 4, 2022

myeongheonhong Nov 4, 2022

leeseooo Nov 4, 2022

myeongheonhong Nov 4, 2022

leeseooo Nov 5, 2022

NaveOWO Nov 7, 2022

leeseooo Nov 4, 2022

myeongheonhong Nov 4, 2022

leeseooo Nov 4, 2022

myeongheonhong Nov 4, 2022

leeseooo Nov 5, 2022

leeseooo Nov 4, 2022

myeongheonhong Nov 4, 2022 •

edited

Loading

leeseooo Nov 5, 2022

NaveOWO left a comment

NaveOWO Nov 7, 2022

NaveOWO Nov 7, 2022

NaveOWO Nov 7, 2022

[3주차 기본과제] 당신 누구얒! #5

Are you sure you want to change the base?

[3주차 기본과제] 당신 누구얒! #5

Conversation

myeongheonhong commented Nov 4, 2022

✨ 구현 기능 명세

🎁 PR Point

😭 소요 시간, 어려웠던 점

😎 구현 결과물

leeseooo 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

leeseooo Nov 5, 2022 • edited Loading

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

myeongheonhong Nov 4, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NaveOWO 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

leeseooo Nov 5, 2022 •

edited

Loading

myeongheonhong Nov 4, 2022 •

edited

Loading