[3주차 기본/생각 과제] 🍚 점메추 🍚 #4

jungwoo3490 · 2023-11-10T05:15:57Z

✨ 구현 기능 명세

🌱 기본 조건

기본조건1

✅ 선택 과정은 총 3단계입니다. ( 3개 → 3개 → 2개)

✅ 아이템은 총 18개 이상입니다. (3 x 3 x 2 = 18)

위는 “최소”기준이며 그 이상의 개수는 가능합니다.

기본조건2

✅ 전역상태관리 라이브러리, context 사용 금지 ❌

✅ Router 사용 금지 ❌

🧩 기본 과제

추천 종류 선택
- 취향대로 추천 / 랜덤 추천 중 선택합니다.
- 선택시 다음화면으로 넘어갑니다.

[취향대로 추천]

답변 선택
- 호버시 스타일 변화가 있습니다.
- 클릭시(선택시) 스타일 변화가 있습니다.
이전으로, 다음으로(결과보기) 버튼
- 아무것도 선택되지 않았을 시 버튼을 비활성화 시킵니다.
  
  → 눌러도 아무 동작 X
  
  → 비활성화일 때 스타일을 다르게 처리합니다.
- 이전으로 버튼을 누르면 이전 단계로 이동합니다.
- 다음으로 / 결과보기 버튼을 누르면 다음 단계로 이동합니다.
- 버튼 호버시 스타일 변화가 있습니다.
결과
- 선택한 정보들에 맞는 결과를 보여줍니다.

[ 랜덤 추천 ]

숫자 카운트 다운
- 3 → 2 → 1 숫자 카운트 다운 후 결과를 보여줍니다.
- 추천 결과는 반드시 랜덤으로 지정합니다.

[ 공통 ]

결과 화면
- 다시하기 버튼
  
  → 랜덤추천이면 랜덤 추천 start 화면으로, 취향대로 추천이면 취향대로 추천 start 화면으로 돌아갑니다.
  
  → 모든 선택 기록은 리셋됩니다.

🌠 심화 과제

theme + Globalstyle 적용
- 전역으로 스타일을 사용할 수 있도록 적용해보세요
애니메이션
- 랜덤 추천 - 카운트다운에 효과를 넣어서 더 다채롭게 만들어주세요!
헤더
- 처음으로 버튼
  
  → 추천 종류 선택 화면일시 해당 버튼이 보이지 않습니다.
  
  → 처음 추천 종류 선택 화면으로 돌아갑니다.
  
  → 모든 선택 기록은 리셋됩니다.

[ 취향대로 추천 ]

단계 노출
- 3단계의 진행 단계를 보여줍니다.
이전으로 버튼
- 이전으로 돌아가도 선택했던 항목이 선택되어 있습니다.

6. useReducer , useMemo , useCallback 을 사용하여 로직 및 성능을 최적화합니다.

생각과제

리액트에 대하여

컴포넌트는 어떤 기준과 방법으로 분리하는 것이 좋을까?

좋은 상태 관리란 무엇일까?

렌더링을 효과적으로 관리하는 방법은 무엇이 있을까?

Props Drilling이란 무엇이고 이를 어떻게 해결할 수 있는가?

💎 PR Point

step state를 통해 현재 유저가 어떤 단계에 있는지 관리하도록 하였다.

const [step, setStep] = useState(-1);

옵션 선택을 안 했을 경우 다음으로 가기 버튼을 회색 처리하는 부분을 인라인 style 삼항 연산자를 사용하여 구현하였다. 추가적으로 삼항 연산자를 사용하여 옵션 선택을 안 했을 경우 버튼을 사용하지 못하게 하기 위해 이벤트 핸들러를 바인딩시키지 않았다.

<NextButton
  onClick={selectedIdx === -1 ? () => {} : handleClickNextButton}
  style={
    selectedIdx === -1
      ? {
          backgroundColor: "lightgray",
          color: "gray",
        }
      : {}
  }
>

옵션 선택을 안 했을 경우 다음으로 가기 버튼을 회색 처리하는 부분을 인라인 style 삼항 연산자를 사용하여 구현하였다. 추가적으로 삼항 연산자를 사용하여 옵션 선택을 안 했을 경우 버튼을 사용하지 못하게 하기 위해 이벤트 핸들러를 바인딩시키지 않았다.

<NextButton
  onClick={selectedIdx === -1 ? () => {} : handleClickNextButton}
  style={
    selectedIdx === -1
      ? {
          backgroundColor: "lightgray",
          color: "gray",
        }
      : {}
  }
>

데이터를 삼중 객체 배열로 저장해둔 다음, 각 인덱스를 난수로 생성하는 방식으로 결과값을 랜덤으로 꺼내왔다.

const randomFirstIndex = Math.floor(Math.random() * menuData.length);
const randomSecondIndex = Math.floor(
  Math.random() * menuData[randomFirstIndex].length
);
const randomThirdIndex = Math.floor(
  Math.random() * menuData[randomFirstIndex][randomSecondIndex].length
);

const randomFood = menuData[randomFirstIndex][randomSecondIndex][randomThirdIndex];

이번에 css 파일을 별도로 관리하지 않고 styled-component를 사용하여 스타일링을 적용해보았다⭐️

🥺 소요 시간, 어려웠던 점

8h
처음에 Router를 사용하지 않고 어떻게 화면 이동을 제어할지에 대해 고민을 많이 했던 것 같다. step state를 두고 단계가 넘어갈때마다 step을 증가시키며 step에 따라 다른 컴포넌트를 렌더하도록 설계하고 난 뒤부터는 수월하게 진행되었던 것 같다.

🌈 구현 결과물

2023-11-10.2.11.59.mov

aazkgh

너무너무 수고했습니다👏👏👏 이번 뒤풀이 나와준 정우 최고최고 ><><

aazkgh · 2023-11-12T17:56:45Z

week3/.eslintrc.cjs

나도 eslint 쓰고 싶ㄷr,,,,

aazkgh · 2023-11-12T17:57:21Z

week3/Menu-Recommender/public/vite.svg

요거! 지워주는 게 좋지 않을까용??

마자 필요없는건 지워두 됨~!

aazkgh · 2023-11-12T17:57:37Z

week3/Menu-Recommender/src/assets/react.svg

얘두!!ㅎㅎ

aazkgh · 2023-11-12T17:58:16Z

week3/thinking.md

+- 좋은 상태 관리란 무엇일까?
+
+  - 무분별하게 전역으로 상태를 관리하는 것은 좋지 않다.
+  - 상태를 관리하는 코드는 그 상태와 연관된 컴포넌트와 최대한 가까이 배치되어야 한다.(응집성)


오 이거를 응집성이라고 하는 군아ㅎㅎㅎ

aazkgh · 2023-11-12T18:03:32Z

week3/Menu-Recommender/src/App.jsx

+    <React.Fragment>
+      <Header />
+      <ContentSwapWrapper>
+        {step === -1 ? (


삼항 연산자를 이렇게 연결해서 써본 적이 없어서 처음 보고 조건 중첩문인 줄 ㅎㅎ,,,,
덕분에 중요한 거 알아갑니당ㅎㅎ

aazkgh · 2023-11-12T18:34:12Z

week3/Menu-Recommender/src/utils/MenuData.js

+  [
+    [
+      {
+        menu: "제육덮밥",


,,,,,,,,새벽에 보니까 배고프다

aazkgh · 2023-11-12T18:34:44Z

week3/Menu-Recommender/src/utils/SelectStepData.js

상수값들 별도로 빼준 거 좋아요! 굳👍

이거 진짜 난 왜 생각 못햇을가,,, 리팩 때 반영해봐여징,,

aazkgh · 2023-11-12T18:36:23Z

week3/Menu-Recommender/src/components/SelectStep.jsx

+  gap: 1rem;
+`;
+
+const BeforeButton = styled.button`


이거랑 밑에 NextButton 스타일드 컴포넌트가 똑같이 생긴 거 같은데?? 굳이 분리할 필요가 있을까~?

그르게-! 하나로 합쳐줘도 될듯!

aazkgh · 2023-11-12T18:37:22Z

week3/Menu-Recommender/src/components/SelectStep.jsx

+  }
+`;
+
+const NextButtonWrapper = styled.div`


위의 코드 보니까 NextButtonWrapper가 이전으로 버튼과 다음으로 버튼을 모두 감싸고 있던데 컴포넌트명을 다른 걸로 바꿔주는 게 어때?

aazkgh · 2023-11-12T18:40:18Z

week3/Menu-Recommender/src/components/RecommendResult.jsx

+  font-weight: 600;
+`;
+
+const ResetButton = styled.button`


얘도 밑에 애들이랑 css가 똑같은 거 같은데??ㅎㅎㅎ
const Button으로 스타일드 컴포넌트 하나 만들어서 호옥시 변경 사항 생길 경우에 상속 받아서 쓰는 게 낫겠따 ㅎㅎ

SynthiaLee

이번 주 과제도, 심심스 발표도,,코테 발표도,,,학교 팀플도,,,,화이탱,,,,,(+ 정우 살려)💪🏼

SynthiaLee · 2023-11-13T11:17:55Z

week3/Menu-Recommender/index.html

+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>


나도 지금 이거 보고 생각났는데 title 안 바꿔줬다,,,!

SynthiaLee · 2023-11-13T11:18:13Z

week3/Menu-Recommender/public/vite.svg

마자 필요없는건 지워두 됨~!

SynthiaLee · 2023-11-13T12:57:34Z

week3/Menu-Recommender/src/App.jsx

+            optionType={optionType}
+            setStep={setStep}
+          />
+        ) : step === resultCombination.length ? (


오오 이거 진짜 생각못해본 방법이다,,! 역시 새로워~

SynthiaLee · 2023-11-13T13:06:43Z

week3/Menu-Recommender/src/App.jsx

+export default App;
+
+const ContentSwapWrapper = styled.div`
+  height: calc(100vh - 4rem);


calc 잘 썼다-!!

SynthiaLee · 2023-11-13T13:11:29Z

week3/Menu-Recommender/src/components/RandomResult.jsx

+  flex-direction: column;
+  align-items: center;
+
+  width: 59.375rem;


아니 이 소숫점 세자리짜리 width는 어째서 계속 나오는겁니까아아ㅏㅇㄱ

SynthiaLee · 2023-11-13T13:42:08Z

week3/Menu-Recommender/src/components/SelectStep.jsx

+  gap: 1rem;
+`;
+
+const BeforeButton = styled.button`


그르게-! 하나로 합쳐줘도 될듯!

SynthiaLee · 2023-11-13T13:43:10Z

week3/Menu-Recommender/src/components/SelectStep.jsx

+  &:hover {
+    border: 1.5px solid gray;
+
+    cursor: pointer;


cursor: pointer 속성도 border: none 이랑 마찬가지로 모든 button 태그에 공통으로 적용하고 싶은거라면 GlobalStyle 로 빼줘도 될 듯~~

SynthiaLee · 2023-11-13T13:44:05Z

week3/Menu-Recommender/src/utils/MenuData.js

+    ],
+    [
+      {
+        menu: "짜장면",


난 짜장면,,,🤤

SynthiaLee · 2023-11-13T13:44:28Z

week3/Menu-Recommender/src/utils/SelectStepData.js

이거 진짜 난 왜 생각 못햇을가,,, 리팩 때 반영해봐여징,,

SynthiaLee · 2023-11-13T13:44:35Z

week3/Menu-Recommender/vite.config.js

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/


으앙 주석

인데 config 파일이네 모지

jungwoo3490 added 7 commits November 5, 2023 11:39

[Chore] 초기 세팅

f2734c5

[Feat] Header 컴포넌트 구현

a3285fd

3주차 기본과제 - 기능 구현 완료

c772d75

react/prop-types 검사 해제 설정

91177b1

3주차 생각 과제

a0963b6

디렉토리 이동 & 랜덤 인덱스 변수명 변경

4c4281e

불필요 스타일링 코드 제거

02d242b

jungwoo3490 requested review from aazkgh and SynthiaLee November 10, 2023 05:17

jungwoo3490 self-assigned this Nov 10, 2023

jungwoo3490 added the 3주차 label Nov 10, 2023

aazkgh reviewed Nov 12, 2023

View reviewed changes

SynthiaLee reviewed Nov 13, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[3주차 기본/생각 과제] 🍚 점메추 🍚 #4

[3주차 기본/생각 과제] 🍚 점메추 🍚 #4

jungwoo3490 commented Nov 10, 2023

aazkgh left a comment

aazkgh Nov 12, 2023

aazkgh Nov 12, 2023

SynthiaLee Nov 13, 2023

aazkgh Nov 12, 2023

aazkgh Nov 12, 2023

aazkgh Nov 12, 2023

aazkgh Nov 12, 2023

aazkgh Nov 12, 2023

SynthiaLee Nov 13, 2023

aazkgh Nov 12, 2023

SynthiaLee Nov 13, 2023

aazkgh Nov 12, 2023

aazkgh Nov 12, 2023

SynthiaLee left a comment

SynthiaLee Nov 13, 2023

SynthiaLee Nov 13, 2023

SynthiaLee Nov 13, 2023

SynthiaLee Nov 13, 2023

SynthiaLee Nov 13, 2023

SynthiaLee Nov 13, 2023

SynthiaLee Nov 13, 2023

SynthiaLee Nov 13, 2023

SynthiaLee Nov 13, 2023

SynthiaLee Nov 13, 2023

SynthiaLee Nov 13, 2023

[3주차 기본/생각 과제] 🍚 점메추 🍚 #4

Are you sure you want to change the base?

[3주차 기본/생각 과제] 🍚 점메추 🍚 #4

Conversation

jungwoo3490 commented Nov 10, 2023

✨ 구현 기능 명세

🌱 기본 조건

🧩 기본 과제

🌠 심화 과제

생각과제

💎 PR Point

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

aazkgh 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

SynthiaLee 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