[3주차 기본/심화/생각 과제] 당신 누구얒! #4

borimong · 2022-11-04T07:03:13Z

✨ 구현 기능 명세

기본 과제

이름을 올바르게 클릭한다면, 위 점수가 증가하고, 다음 사진으로 넘어갑니다
다시보기 버튼을 클릭한다면, 사진은 첫 번째 사진으로 돌아오고 점수는 0점이 됩니다
전부 맞추게 된다면 (예시에서는 5개), 완료했다는 UI 를 보여줍니다

심화 과제

작성 예정입니다!
생각 과제
🪜 React / Vue / Angular / Svelte 를 비교해보는 아티클을 작성해보자

각 라이브러리/프레임워크의 주된 차이점은 무엇인가?
스타트업을 창업한다고 할 때, 무슨 라이브러리/프레임워크를 사용해야 할까?
난 무엇을 위해 React 를 학습하는가?
🪜 styled-components에 대해 알아보는 아티클을 작성해보자
해당하는 라이브러리의 장/단점은 무엇인가?
대체할 수 있는 라이브러리가 있는가? (emotion, stitches, …)
난 어떤 스타일링 라이브러리가 가장 마음에 드는가?

🎁 PR Point

-기본 과제

styled component 그냥 기본적인 방법으로만 썼는데,, 좀 더 효율적인 방법이 있다면 알고 싶습니다!
총 네 개의 state 를 사용했습니다! state 옆에 어떤 상태를 저장하는지 주석으로 설명해 두었어요! 근데 state 는 적으면 적을수록 좋은 것 같습니다..
response 값이 업데이트될 때만 함수를 실행하도록 useEffect 훅을 사용했는데요!
React Hook useEffect has missing dependencies: 'answer', 'i', and 'score'. Either include them or remove the dependency array. You can also do a functional update 'setI(i => ...)' if you only need 'i' in the 'setI' call.
요런 경고 메시지가 생성되더라구요!! 다른 state 들도 있는데 얘네 추가하거나 의존성 배열을 지워라.. 라는 의미인데 의존성 배열을 지우라는 게 무슨 의미인지 모르겠어서 일단 내비두었습니다.. 실행은 잘 되더라구요ㅠㅠ
그리고 해당 useEffect 에서 제가 생각했을 때는, score === 5 가 되었을 때 setEnd(1) 을 해주어야 한다고 생각했는데, 그렇게 하니까 생각대로 동작하지 않아서 4를 넣었더니 제대로 동작하더라구요.. ! 값이 저장되는 타이밍이 제가 생각한 것과 달라서 그런 것 같은데, 이 부분 아신다면 설명해주시면 정말 정말 감사하겠습니다..!(저도 이유 계속 찾아보겠습니다..! )

-심화 과제

작성 예정이에유!

😭 소요 시간, 어려웠던 점

8h
부모 컴포넌트의 값을 바꿔야 하는 부분이 가장 까다로운 부분이었던 것 같습니다! 부모 컴포넌트에서 자식 컴포넌트에서의 이벤트로 바뀌어야 하는 값들은 state 로 바꿔주고, setState를 포함하는 함수를 만든 뒤 이를 자식 컴포넌트에게 Props 로 전달하는 방식으로 해결했습니다!
pr 메시지에 적은 자잘한 오류들이 시간을 많이 잡아먹었습니다ㅠㅠ

😎 구현 결과물

joohaem

멋지다 현쒸이!!!!

React Hook useEffect has missing dependencies: 'answer', 'i', and 'score'. Either include them or remove the dependency array. You can also do a functional update 'setI(i => ...)' if you only need 'i' in the 'setI' call.

useEffect 내부의 콜백함수에 쓰이는 변수들을 의존성 배열에 추가해야합니다!
왜냐하면, 의존성 배열에 있는 변수들이 변할 때마다 콜백함수를 실행하게끔 되어있는데,
의존성 배열의 변수와 콜백함수의 변수가 불일치 할 때, 렌더링이 원하지 않는 방향으로 될 수 있기 떄문이에요!

joohaem · 2022-11-04T16:52:51Z

week3/src/components/Content.jsx

+//Content 상단에서 현재 점수를 보여주는 컴포넌트 
+const Score = (props) => {
+    const {score} = props;
+    return (
+        <div>
+            <Scr>{score}점</Scr>
+        </div>
+    );
+}


나누는 컴포넌트들 다른 파일로 관리하면 좋을 것 같아요!

오홍 그럼 Score 파일을 하나 더 만들어서 분리해 보겠슴돠!!

joohaem · 2022-11-04T16:53:16Z

week3/src/components/Content.jsx

+//함수명 고민중.. 
+const Choice = (props) => {
+    const {i, changeResponse} = props;
+    let base = 5*i;


const 사용해도 좋을 것 같아요

let 사용을 지양했어야 했는데,, 반성합니다요..!

joohaem · 2022-11-04T16:53:56Z

week3/src/components/Content.jsx

+const Choice = (props) => {
+    const {i, changeResponse} = props;
+    let base = 5*i;
+    const names = ["김현수", "김남준", "김서현", "김형겸", "나림", "류성경", "문서연", "박현지", "서지수", "송우영", "송하윤", "한예원", "유준상", "윤지영", "이서영", "장명지", "정재욱", "정현욱", "최유진", "최은형", "홍명헌", "서혜은", "홍서희", "이주함", "웹사랑해"];


해당 배열은 리렌더링되어도 바뀌지 않아도 될 값이에요,
즉 리렌더링 될 때마다 새롭게 변수를 정의하기 때문에, 컴포넌트 바깥에서 선언해주면 좋을 것 같아요!~

넵 알겠쭙니다!!

joohaem · 2022-11-04T16:58:31Z

week3/src/components/Content.jsx

+        if (answer[i] === response){
+            setScore(score+1);
+            setI(i + 1);
+            if (score === 4){
+                setEnd(1);
+            }
+        }    


setState 는 비동기로 동작해요
따라서, setScore 를 사용하고 if문으로 걸러준다면, 바뀌기 전값으로 조건을 확인합니다

올바르게 동작시키고 싶으면,
state 를 의존성 배열ㄹ로 가지는 useEffect 를 따로 만들어 if(score === 5) ~ 를 해줘야 해요

오호.. 그렇군여..! 우선 한 번 도전해 보겠습니댜!!

joohaem · 2022-11-04T16:59:04Z

week3/src/components/Content.jsx

+    const [response, setResponse] = useState(-1); //유저가 어떤 버튼을 클릭했는지 알 수 있게 클릭한 버튼의 인덱스를 저장하는 state 
+    const [i, setI] = useState(0); // 버튼명을 바꾸기 위해 필요한 base 값을 업데이트할 때 필요한 state  
+
+    /* 그냥 우다다다 state 를 남발했는데요..! state 를 더 적게 쓸수록 좋은 것인지 궁금합니다! */


저는 그렇다고 생각합니다 ,,! state가 많아질수록 그만큼 리렌더링이 되는 경우의 수가 많아지는 것이기에!

글쿤요..! 또 하나 배워 갑니다..!

NaveOWO

현수 너무 수고햇다~~~~!!!!
코딩하면서 state에 관해 생각도 하고 이래저래 오류에 대해 궁금해하는 것도 너무 멋져🌟🌟

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

week3/src/Modal.js

+
+const Modal = (props) => {
+
+    const {onClose, correct} = props;


어이구 야무지게 받아왔네!💙

NaveOWO · 2022-11-07T02:06:04Z

week3/src/Modal.js

+      <Background>
+        <Content>
+            {correct ? 
+            <Box><h4>정답!</h4><p>함가브자이마리야</p><Btn onClick = {onClose}>닫기</Btn></Box>  : 


onClose라는 변수명은 처음 봤을 때 어떤 기능을 하는지 명확하지 않아 보여요! closeModal 같은 직관적인 변수명을 지어도 좋을 것 같아요!!

오!! closeModal 이 확실히 더 직관적인 변수명인 것 같아요 :) 바로 수정하겠습니다!!

NaveOWO · 2022-11-07T02:06:58Z

week3/src/Modal.js

+
+`
+
+const Btn = styled.button`


개인적인 선호이긴 한데, 저는 컴포넌트 명을 지을 때 어떤 기능을 하는지 이름을 붙여주는 편이에요! closeBtn 같이!! 나중에 코드를 볼 때 뭐한느거였지? 할 때가 있더라구요!

오오 확실히 컴포넌트명에 동사가 들어가니까 기능 예측이 쉬운 것 같아요!! 반영하겠습니다 :)

NaveOWO · 2022-11-07T02:12:32Z

week3/src/components/Content.jsx

+            <Btn onClick={() => {changeResponse(0)}}>{names[base]}</Btn>
+            <Btn onClick={() => {changeResponse(1)}}>{names[base + 1]}</Btn>
+            <Btn onClick={() => {changeResponse(2)}}>{names[base + 2]}</Btn>
+            <Btn onClick={() => {changeResponse(3)}}>{names[base + 3]}</Btn>
+            <Btn onClick={() => {changeResponse(4)}}>{names[base + 4]}</Btn> {/* map 을 써서 줄일 수 있지 않을까 생각중입니다.. */}


names.map((key,index) => { <Btn onClick={() => {changeReponse(index)}}>{name.[base+index]}</Btn>

참고해주세요~

최고최고..!!

NaveOWO · 2022-11-07T02:12:50Z

week3/src/components/Content.jsx

+
+        }
+
+    }, [response]); // 여기서 뜨는 경고.. 무슨 말일까요..ㅎㅎ 


무슨 에러가 뜨나요!?

React Hook useEffect has missing dependencies: 'answer', 'i', and 'score'. Either include them or remove the dependency array.eslintreact-hooks/exhaustive-deps 라는 경고인데, response 외에 다른 state 도 있는데 이것들은 왜 의존성 배열에서 빠뜨렸니..? 를 묻는 그런 경고인 것 같아요..! 구글링을 해도 답이 잘 안나오더라구요..ㅠㅠ

NaveOWO · 2022-11-07T02:14:37Z

week3/src/components/Content.jsx

+    return (
+        <div>
+            <Score score = {score} end = {end}></Score>
+            {score < 5 ? (<Choice score = {score} end = {end} i = {i} changeResponse = {changeResponse} modalOn = {modalOn} handleModal = {handleModal} correct={correct} ></Choice>) : (<End>끝</End>)}


5 같은 상수는 변경가능성 & 직관성을 따졌을 때
const MAX_SCORE = 5
이렇게 빼서 변수를 써주는것도 좋은 방법인 것 같아요!!

꺄 그렇군요..! 디테일 최고..!!

borimong added 15 commits October 13, 2022 14:00

construction : week2 브랜치 생성

3cf0bc6

feat: todolist 화면 전환 구현

8990238

feat: todo리스트 add 기능 구현

f47fc8a

feat: 아이콘 클릭 시 리스트 삭제

445f96f

feat: velog dropdown 구현 완료

13f55ea

feat: velog 태그 추가 및 삭제 기능 구현

f7468de

init: 작업 환경 세팅

f417cec

feat: 헤더 구현 완료

a38b544

feat: 버튼 클릭 시 사진, 버튼명, 점수 변경하기 구현

d11e367

feat: 다시하기 기능 구현

fad18ca

:bug 다시하기 버튼에 setEnd(0) 추가 및 score 범위 수정

649f492

refactor: 필요 없는 매개변수 제거

67e39d9

etc: 주석 추가

c53b4e5

feat: styled-component 이용한 css 작업 완료

504668d

:docs 생각 과제 완료

69f2672

borimong requested review from joohaem, NaveOWO, seoyeun0106 and talkingOrange November 4, 2022 10:11

joohaem approved these changes Nov 4, 2022

View reviewed changes

borimong added 2 commits November 5, 2022 04:37

feat: portal 이용한 modal 구현 완료

5168d36

feat: 모달창 스타일링 구현 완료

516daba

NaveOWO reviewed Nov 7, 2022

View reviewed changes

borimong changed the title ~~[3주차 기본/생각 과제] 당신 누구얒!~~ [3주차 기본/심화/생각 과제] 당신 누구얒! Dec 2, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[3주차 기본/심화/생각 과제] 당신 누구얒! #4

[3주차 기본/심화/생각 과제] 당신 누구얒! #4

borimong commented Nov 4, 2022 •

edited

Loading

joohaem left a comment

joohaem Nov 4, 2022

borimong Nov 10, 2022

joohaem Nov 4, 2022

borimong Nov 10, 2022

joohaem Nov 4, 2022

borimong Nov 10, 2022

joohaem Nov 4, 2022

borimong Nov 10, 2022

joohaem Nov 4, 2022

borimong Nov 10, 2022

NaveOWO left a comment

NaveOWO Nov 7, 2022

borimong Nov 10, 2022

NaveOWO Nov 7, 2022

borimong Nov 10, 2022

NaveOWO Nov 7, 2022

borimong Nov 10, 2022

NaveOWO Nov 7, 2022

borimong Nov 10, 2022

NaveOWO Nov 7, 2022

borimong Nov 10, 2022

NaveOWO Nov 7, 2022

borimong Nov 10, 2022


		}

		}, [response]); // 여기서 뜨는 경고.. 무슨 말일까요..ㅎㅎ

[3주차 기본/심화/생각 과제] 당신 누구얒! #4

Are you sure you want to change the base?

[3주차 기본/심화/생각 과제] 당신 누구얒! #4

Conversation

borimong commented Nov 4, 2022 • edited Loading

✨ 구현 기능 명세

🎁 PR Point

😭 소요 시간, 어려웠던 점

😎 구현 결과물

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

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

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

borimong commented Nov 4, 2022 •

edited

Loading