[ 3주차 기본/심화 과제 ] BTS, 봉준호, 손흥민, 떡볶이, let's go #3

choichoijin · 2022-10-25T15:47:22Z

📦week3
 ┣ 📂public
 ┣ ┗ 📜index.html
 ┗ 📂src
     ┣ 📂assets
     ┣ 📒App.jsx
     ┣ 📒GlobalStyles.jsx
     ┣ 📒index.jsx
     ┣ 📒Modal.jsx
     ┣ 📒Portal.jsx
     ┗ 📒quizInfo.jsx

✨ 구현 기능 명세

기본 과제

이름을 올바르게 클릭한다면, 위 점수가 증가하고, 다음 사진으로 넘어갑니다
-> quizInfo.jsx에서 이미지 src와 정답 객체인 quizList / 옵션 텍스트 배열인 optionTextList로 관리합니다.
다시보기 버튼을 클릭한다면, 사진은 첫 번째 사진으로 돌아오고 점수는 0점이 됩니다.
전부 맞추게 된다면, 완료했다는 UI 를 보여줍니다.

심화 과제

Portals 을 이용한 Modal을 만들어 봐요! (바깥을 누르면 모달창이 닫혀도 좋을 것 같아요)
-> setTimeout을 이용해 0.7초가 지나면 자동으로 닫히도록 구현했습니다!
정답을 선택했을 때, 득점했다는 듯한 애니메이션을 자유롭게 넣어주세요!

🎁 PR Point

점수가 바뀔 때마다 커졌다 작아지는 애니메이션을 구현했어요. ScoreBoard 컴포넌트 key값에 currentStep을 주니까 해당 값이 바뀔 때마다 리렌더링되면서 애니메이션이 실행되더라구요! (참고 블로그) 이렇게 해도 괜찮을까요?
다 jsx 파일로 만들었는데 제대로 사용한 건지 모르겠어요!

😭 소요 시간, 어려웠던 점

5~6h
css 신경 쓰는데 시간이 좀 걸렸읍니다ㅎ 심화 과제할 때 처음에 그냥 모달 만들어 놔서 수정하고 다시 push했어요! ㅜ

😎 구현 결과물

2022-10-26.12.28.15.mov

woogisea · 2022-11-07T11:47:28Z

week3/src/App.jsx

+          <End>👏🏻 당신은 떡볶이 마스터! 👏🏻</End>
+        ) : (
+          <QuizContainer>
+            <QuizImg src={quizList[currentStep].src} />


img태그라면 alt태그를 사용해서 웹 접근성을 고려해보는것도 좋을 것 같아요!!!

오 저도 그 부분 예전에 코드리뷰로 받았었는데 alt를 써주는게 웹 표준에 맞다고 하더라구요. 생각해보니 저도 안썼네요,, 추가해야겠어요
우기씨 고마워!

@Dev-jwJeong @Seong-Gyeong
헉 제가 중요한 부분을 놓치고 있었네요,,,,

저번에 앱잼하면서 굳이 필요하지 않은 alt는 "" 빈 값으로 놓아도 된다는 리뷰를 받은 적이 있습니다!
한 번 생각해볼만한 것 같아서 블로그 공유할게요!!! 링크

@choichoijin 대체 텍스트가 되려 구문 해석에 방해가 될 때, 이미지의 제목이나 설명이 이미 존재할 때 정도 alt를 빈값으로 두는 것 같은데 그럴 일이 많이 있을 것 같지는 않아보여요,!

@joohaem
이 코드에서는 alt값을 써줘야 하는 것은 맞지만 이미지가 설명하는 것을 주변에서 알아낼 수 있는 것은 비워주는 게 맞다고 생각해요! 예를 들어
<ImageDiv className="thumbnail" src={thumbnail} layout="fill" alt="" />
에서 근처에 있는 title 텍스트가 내용을 충분히 포함하고, alt가 없으면 src값을 읽어주기 때문에 스크린 리더가 썸네일임을 알 수 있어서 alt값을 비워준 적이 있습니다
무리하게 alt값을 넣어줄 때 오히려 접근성에 해가 될 수 있는 상황은 생각해 볼 만한 것 같아서 공유해 보았습니다,,,,!!!

@choichoijin
예시가 잘 이해가 안되네요!
해당 img 태그가 (img 태그가 맞나요?😂😂) 스크린 리더로 "thumbnail" 로써 읽히나요??? 파일명으로 읽히나요?

스크린리더로 직접 해보니까 alt 를 빈 값으로 넣으면 아예 읽히지 않아서, 스크린리더 종류에 따라 다를 것 같아요 (혹은 아티클이 부정확한 정보일 수 있다고 생각합니다. 그런 경우가 굉장히 많거든요)

가령 src로 읽힌다고 하여도, 이 경우는 저는 alt 가 "정보를 방해하는 역할"이 아니라 "정확한 정보를 명시하는 역할"이라고 생각해요
이미지가 로드가 안 되는 경우에도 src가 아닌 alt로써 화면에 나타내주니까요!
보다 더 정확한 스크린리더 동작을 위해서는 aria-label 속성도 생각해볼 수 있을 것 같아요

이외에 대체 가능한 텍스트나, 명시 불가능한 이미지에 대한 이야기는 저도 새롭게 알아갑니다 !! 자료 공유 고마워요😊😊

@joohaem
아앗 저 코드는 딜리버블 했던 코드에서 한 줄만 쏙 가져온 거라 약간 이해가 안될 수 있겠네요,,! 스크린 리더에 따라 src를 안 읽어줄 수도 있다는 걸 못 생각한 건 제 불찰이네용 ,,

저희 페이지에서 썸네일 이미지에 대한 내용은 뉴스 타이틀에서 설명해주고 있다고 생각했어요. 이렇게 주변에 있는 제목 텍스트(빅스텝 어쩌구)가 썸네일을 그대로 설명해주기 때문에 alt값에 타이틀을 넣으면 중복된 정보라고 생각했습니다! 그렇다고 alt= "thumbnail"이라고 지정하면, 밑 4개의 이미지에 같은 alt값이 달리면서도 제공되는 정보는 없다는 느낌이 들었어요 혹시 이럴 때는 어떻게 해야된다고 생각하시는지 궁금해요!!

@choichoijin

정말 일부 스크린리더에 한한 이야기였네요 ! 🔗 MDN

🔗 공식 문서를 더 찾아보니까 요런 alt 결정 순서도도 있더라구요-

딜리버블 예시로는 alt 가 빈 값이 맞는 것 같네요 !!! 역시 짱리버블 <>

이외에 더 많은 설명의 태그 content 를 img 태그와 잇고 싶으면 aria-describedby 같은 속성값으로 id 값을 이어주기도 하는 것 같아요!

기업들에서는 접근성을 안 지키면 벌금을 무는 경우도 있고, 언젠가는 신경 써야 할 부분인데 신기한 기능들이 진짜 많네요 !!

덕분에 많이 알아가요 !!!~ 재밌따

@joohaem
헉.. 신기해...... aria-describedby 까지.. 왕 유용하네요!!!
원래도 alt값 뭘로 지정할지 고민 많이 했는데 앞으로 제대로 더 고민하는 개발자가 되야겠다는 생각이..ㅎㅎㅎ😇
유익한 정보 감사해여 ~~~!!

woogisea · 2022-11-07T11:48:37Z

week3/src/quizInfo.jsx

+const optionTextList = quizList.map((quiz) => {
+  return quiz.answer;
+});


헉 저는 answer에 대한 배열을 따로 만들어서 사용했는데 이렇게 하나의 배열을 만들어두고 answer만 뽑아서 배열로 만드는게 깔끔한 것 같네요!! 배워갑이돵

woogisea · 2022-11-07T11:49:55Z

week3/src/App.jsx

+const Content = styled.div``;
+


저는 styled-components를 쓸 때 항상 고민되는 부분이였는데 스타일을 적용하지 않는 부분도 컴포넌트를 만들어둬야 할지,, 그냥 div태그로 사용할지 고민인데...! 유진님은 어떠세여?!

저도 고민! 또 styled-component를 쓰니까 간단한 스타일 하나 적용하려고 해도 그걸 다 컴포넌트화를 시켜야하는데 이렇게 하는 게 맞나? 싶더라구요. . . 혹시 다덜 어떻게 하시나여

@Dev-jwJeong @Seong-Gyeong
styled-components를 사용하게 될 경우 className을 따로 지정해주지 않기 때문에, 저는 페이지 레이아웃을 직관적으로 보기가 어려울 것이라고 생각해 이렇게 설정하게되었습니다! 컴포넌트화가 스타일 지정과 더불어 이러한 역할도 있을 것이라고 생각했어영

woogisea · 2022-11-07T11:50:42Z

week3/src/App.jsx

+  align-items: center;
+  height: 120px;
+  font-size: 45px;
+  color: wheat;


wheat 컬러 처음본다,,와

woogisea · 2022-11-07T12:08:33Z

week3/src/App.jsx

+    <>
+      <Header>BTS, 봉준호, 손흥민, 떡볶이, let's go</Header>
+      <Content>
+        <ScoreBoard key={currentStep}>{currentStep} points</ScoreBoard>


저는 useState의 값에 따라서 styled-components 내부에서 조건부 렌더링을 하는 방식으로 구현했는데 컴포넌트에 key를 통해서 조건부 렌더링을 구현할 수도 있군요..! 제 생각에는 프로젝트에 꼭 필요한? 불필요한 애니메이션은 아닌것 같아서 좋은 것 같아요!

@Dev-jwJeong 저도 map이외에 key를 써 본 방식은 처음이었는데, 이 방법이 값이 바뀌면서 리렌더링 시킬 때 단순하게 쓸 수 있지만 나중에 유지보수하기에는 우기님이 하신 방법이 좋을 것 같네요!!

woogisea · 2022-11-07T12:12:17Z

저는 quizInfo.jsx과 같이 jsx문법을 사용해서 UI를 그리는 파일이 아니라면 확장자로 js를 사용하는 편이긴 한데... 다른 분들 의견도 궁금해요!

woogisea · 2022-11-07T12:15:56Z

css에 신경 쓴 느낌이 낭낭하네요,,, 배고파졌어요,, 깔꼼하고 순식간에 끝내버린 과제 잘봤숨니다! 파일구조도 항상 pr에 올라와서 보기 편한거 같아요 나중에 저도 폴더구조 같이 올려야겠네요! ㅋㅋ

그리고,,, 퀴즈 다 틀렸어요 응급실 떡볶이랑, 엽기 떡볶이 차이점이 뭔가요 ㅋㅋ

pinktopaz

코드리뷰하고 나니까 배가 고플 정도로 멋진 UI였습니다,,,최고
이번에도 코드 보고 많이 배워가요!
애니메이션도 너무 깔끔해서 저도 한 번 따라 적용해볼랍니다
역시 실눈캐는 사기캐!
이번 주도 수고 많앗서💚

pinktopaz · 2022-11-07T04:50:44Z

week3/src/App.jsx

+        <ScoreBoard key={currentStep}>{currentStep} points</ScoreBoard>
+        {isFinished ? (
+          <End>👏🏻 당신은 떡볶이 마스터! 👏🏻</End>
+        ) : (


이렇게 퀴즈 전체에 대해 삼항연산자 적용한 게 넘 인상깊네요
삼항 연산자 쓰는 거 왠지 무서워했는데 이렇게 쓰니까 훨씬 깔끔한 것 같아서 저도 삼항연산자 쓰는 거 습관을 들여야겠다는 생각이 듭니당
멋져요!

@Seong-Gyeong 마자요! if else문을 훨씬 간단하게 쓸 수 있어서 두려워하지마시고 쓰는 걸 추천합니당 ㅎㅎ

pinktopaz · 2022-11-07T04:52:28Z

week3/src/App.jsx

+            </OptionList>
+            <RestartBtn
+              onClick={() => {
+                setCurrentStep(0);


오 아예 reload를 하도록 처리 하지 않고 이렇게 필요한 state만 초기화해서 처음으로 돌아가는 방법도 있겠네요!
아무래도 불필요한 state까지 다 초기화하지 않아도 돼서 이렇게 하면 훨씬 자원 낭비가 덜 할 것 같아요!
하나 또 배워갑니다!😀

pinktopaz · 2022-11-07T04:55:01Z

week3/src/App.jsx

+  width: 150px;
+  height: 70px;
+  margin: 4px 0;
+  background-image: ${`url(${plate})`};


초록색 접시로 버튼 스타일도 맞춘 당신,,,넘 센스있다!

pinktopaz · 2022-11-07T06:36:01Z

week3/src/Portal.jsx

+const ModalPortal = ({ children }) => {
+  const el = document.getElementById("modal");
+  return reactDom.createPortal(children, el);
+};


혹시 이 portal.jsx는 어떻게 작동(?)하는 걸까요?
저 같은 경우에는 modal을 portal로 감싸줬거든요!
다른 Modal.jsx나 다른 파일에서 이 portal이 어떻게 영향을 주는 건지 궁금해요!

pinktopaz · 2022-11-07T18:53:06Z

week3/src/App.jsx

+          <End>👏🏻 당신은 떡볶이 마스터! 👏🏻</End>
+        ) : (
+          <QuizContainer>
+            <QuizImg src={quizList[currentStep].src} />


오 저도 그 부분 예전에 코드리뷰로 받았었는데 alt를 써주는게 웹 표준에 맞다고 하더라구요. 생각해보니 저도 안썼네요,, 추가해야겠어요
우기씨 고마워!

pinktopaz · 2022-11-07T18:54:04Z

week3/src/App.jsx

+const Content = styled.div``;
+


저도 고민! 또 styled-component를 쓰니까 간단한 스타일 하나 적용하려고 해도 그걸 다 컴포넌트화를 시켜야하는데 이렇게 하는 게 맞나? 싶더라구요. . . 혹시 다덜 어떻게 하시나여

pinktopaz · 2022-11-07T18:57:20Z

week3/src/App.jsx

+      transform: scaleY(0.8);
+    }
+    100% {
+      transform: scaleY(1);


keyframes로 점수판이 위아래로 뿜스뿜스하는 걸 만들었군여! 첨에 위아래로 뿜스뿜스한다고 해서 어떻게 한 거지...했는데 저도 담에는 이거 적용해봐야겠어요! 멋져요!

pinktopaz · 2022-11-07T18:58:29Z

week3/src/App.jsx

+  height: 350px;
+  margin-top: 20px;
+  border-radius: 25px;
+  object-fit: cover;


요거를 써준 이유가 있나요? 안쓰면 모서리가 남는다거나...?

@Seong-Gyeong 이미지 비율 조정 없이 가득 채우고 싶어 지정하게 되었습니다!

[ 2주차 기본 과제 ] 레트로 TodoList 🎮 / 딜리버블밖에 없는 velog 💙 + JS

choichoijin added 22 commits October 12, 2022 13:25

chore: 코드 리뷰 반영

9baad8b

chore: week1 파일 복사

2546c4b

chore: week1 코드 리뷰 반영

08d8842

chore: week1 폴더 복사

b08b1e8

feat: 추가, 삭제, 레이아웃 기본 기능 구현

95da66d

chore: class명 지정 코드 수정

4cf4137

chore: 리스트 추가 코드 수정

8b6f060

chore: 변수명 수정

6bfcd9c

feat: velog dropdown 구현

8d3709d

fix: 한글 인풋 중복 실행 안되도록

bb42f21

feat: 태그 추가시 중복 방지

8235cf7

chore: 코드 정리

26cd5b3

init: react app 설치

497e4b5

asset: 이미지 추가

c08b4ec

design: 전체적인 ui 구현

c9824e7

feat: quiz, option 랜덤 생성/ 맞으면 점수 추가

6a5cbf8

feat: 완료 ui 구현

a767444

feat: 모달창 구현

924888d

design: 점수 득점 시 애니메이션

dc239ff

chore: 코드 정리

45a7908

feat: 모달 portals 이용하도록 수정

488f62d

chore: 파일 형식 변경

205cf97

choichoijin requested review from woogisea and pinktopaz October 25, 2022 15:57

choichoijin self-assigned this Oct 25, 2022

choichoijin requested a review from joohaem October 25, 2022 15:58

woogisea reviewed Nov 7, 2022

View reviewed changes

pinktopaz reviewed Nov 7, 2022

View reviewed changes

choichoijin and others added 3 commits November 9, 2022 01:40

Merge pull request #2 from IN-SOPT-WEB/week2

cae33fa

[ 2주차 기본 과제 ] 레트로 TodoList 🎮 / 딜리버블밖에 없는 velog 💙 + JS

chore: 코드 리뷰 반영

a464180

chore: 오타 수정

e54c7da

choichoijin merged commit 09ea945 into main Jan 18, 2023

choichoijin deleted the week3 branch January 18, 2023 03:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ 3주차 기본/심화 과제 ] BTS, 봉준호, 손흥민, 떡볶이, let's go #3

[ 3주차 기본/심화 과제 ] BTS, 봉준호, 손흥민, 떡볶이, let's go #3

choichoijin commented Oct 25, 2022 •

edited

Loading

woogisea Nov 7, 2022

pinktopaz Nov 7, 2022

choichoijin Nov 9, 2022 •

edited

Loading

joohaem Nov 9, 2022

choichoijin Nov 10, 2022

joohaem Nov 10, 2022

choichoijin Nov 10, 2022

joohaem Nov 10, 2022

choichoijin Nov 10, 2022

woogisea Nov 7, 2022

woogisea Nov 7, 2022

pinktopaz Nov 7, 2022

choichoijin Nov 9, 2022

woogisea Nov 7, 2022

woogisea Nov 7, 2022

choichoijin Nov 9, 2022

woogisea commented Nov 7, 2022

woogisea commented Nov 7, 2022

pinktopaz left a comment

pinktopaz Nov 7, 2022

choichoijin Nov 9, 2022

pinktopaz Nov 7, 2022

pinktopaz Nov 7, 2022

pinktopaz Nov 7, 2022

pinktopaz Nov 7, 2022

pinktopaz Nov 7, 2022

pinktopaz Nov 7, 2022

pinktopaz Nov 7, 2022

choichoijin Nov 9, 2022

[ 3주차 기본/심화 과제 ] BTS, 봉준호, 손흥민, 떡볶이, let's go #3

[ 3주차 기본/심화 과제 ] BTS, 봉준호, 손흥민, 떡볶이, let's go #3

Conversation

choichoijin commented Oct 25, 2022 • edited Loading

✨ 구현 기능 명세

🎁 PR Point

😭 소요 시간, 어려웠던 점

😎 구현 결과물

Choose a reason for hiding this comment

Choose a reason for hiding this comment

choichoijin Nov 9, 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

Choose a reason for hiding this comment

woogisea commented Nov 7, 2022

woogisea commented Nov 7, 2022

pinktopaz 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

choichoijin commented Oct 25, 2022 •

edited

Loading

choichoijin Nov 9, 2022 •

edited

Loading