[ 3주차 기본/생각 과제 ] #10

Jun-min2 · 2023-11-10T14:23:37Z

✨ 구현 기능 명세

🌱 기본 조건
기본조건1

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

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

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

기본조건2

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

✅ Router 사용 금지 ❌

🧩 기본 과제

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

[취향대로 추천]

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

[ 랜덤 추천 ]

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

[ 공통 ]

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

생각과제
리액트에 대하여

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

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

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

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

💎 PR Point

열심히 도움을 받아 작성했습니다.

🥺 소요 시간, 어려웠던 점

상상그이상 드립니다. 전부 어려웠어요.

🌈 구현 결과물

_2023_11_10_23_21_36_680.mp4

hae2ni

수고하셨습니다!! 나중에 리팩토링하실 때 더더 많이 고민해보시면 진짜 많이 느실 거에요!

hae2ni · 2023-11-13T14:44:59Z

week3/src/App copy.js

@@ -0,0 +1,58 @@
+import logo from "./logo.svg";


요고 로고,, 지워주세요!

hae2ni · 2023-11-13T14:45:15Z

week3/src/App copy.js

@@ -0,0 +1,58 @@
+import logo from "./logo.svg";
+import "./App.css";


안쓰면 지워주기!

담부터는 yarn으로! create vite로 해주쎄요!

hae2ni · 2023-11-13T14:46:52Z

week3/src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';


hoxy create react app 으로 하셨ㄴㅏ용?

hae2ni · 2023-11-13T14:49:03Z

week3/src/App.css

@@ -0,0 +1,38 @@
+.App {


안쓰면 지워주기!

hae2ni · 2023-11-13T14:49:36Z

week3/src/App.jsx

+
+const App = () => {
+  const [currentStep, setCurrentStep] = useState("");
+  const renderMain = () => {


오 switch문!! 너무 깔끔한데요??

hae2ni · 2023-11-13T15:21:04Z

week3/src/components/main/SecondStage.jsx

+        고기/해물
+      </button>
+      {secondChoice === "" ? (
+        <button


이거 버튼 계속 겹쳐서 나오니까 나중에 styled-component 들여올 때 아예 컴포넌트 자체로 분리하는 게 나을 것 같아요

hae2ni · 2023-11-13T15:21:27Z

week3/src/components/main/ThirdStage.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+const ThirdStage = ({ setRecommendationType, setThirdChoice, thirdChoice }) => {


여기도 마찬가지로 props로 해서 구조분해할당을 이용해주면 더 깔끔할 것 같네요!

hae2ni · 2023-11-13T15:22:06Z

week3/src/components/main/ThirdStage.jsx

+
+      {thirdChoice === "" ? (
+        <button
+          onClick={() => {


onClick보다는 아예 function이나 화살표 함수로 해서 이름있는 함수로 만들어서 걸어주는게, 더 가독성이 있고 나중에 유지보수하기 편리해지는 것 같습니다!

hae2ni · 2023-11-13T15:22:17Z

week3/src/components/main/index.css

@@ -0,0 +1,21 @@
+button {


안쓰는 파일은 꼭 지워주세요

hae2ni · 2023-11-13T15:22:29Z

week3/src/constants/constants.js

@@ -0,0 +1,44 @@
+export const menuOptions = {


이건,,, 어디서 쓰느ㄴ 건가요? 못 본 것 같아서,,

doyn511

기능 구현하느라고 고생 많아써!!!! styled-component가 어렵더라도.. 한번 써보자..! 사실 나도 이번에 처음 써봐서 잘은 모르겠긴한데! 같이 파이팅하자!!!

doyn511 · 2023-11-13T17:07:53Z

week3/src/App copy.js

+  const startClick = () => {
+    // "Start" 버튼 클릭 시 실행할 동작
+  };


요걸 만들어준 이유는?! 무슨 기능을 수행하는 코드지?

doyn511 · 2023-11-14T04:15:34Z

week3/src/App.jsx

+    switch (currentStep) {
+      case "random":
+        return <Random />;
+      case "prefer":
+        return <Preference />;
+      default:


우와 그러게 switch문 완전 깔끔하다!!!!

doyn511 · 2023-11-14T04:27:37Z

week3/src/assets/data.js

+import japan_rice from "../image/japan_rice.jpg";
+import japan_beefsoup from "../image/japan_beefsoup.jpg";
+import china_rice from "../image/china_rice.jpg";
+import china_noodleO from "../image/china_noodleO.jpg";
+import china_noodleX from "../image/china_noodleX.jpg";
+import china_seafood from "../image/china_seafood.jpg";
+import china_soup from "../image/china_soup.jpg";
+import japan_fish from "../image/Japan_fish.jpg";
+import japan_noodleO from "../image/japan_noodleO.jpg";
+import japan_noodleX from "../image/Japan_noodleX.jpg";
+import japan_soup from "../image/japan_soup.jpg";
+import korea_beef from "../image/korea_beef.jpg";
+import korea_beefsoup from "../image/korea_beefsoup.jpg";
+import korea_noodleO from "../image/korea_noodleO.jpg";
+import korea_noodleX from "../image/korea_noodleX.jpg";
+import korea_rice from "../image/korea_rice.jpg";
+import korea_soup from "../image/korea_soup.jpg";


와아.. 이미지 import..... 혠언니 말처럼 바로 img에 저 링크 넣어주자

doyn511 · 2023-11-14T04:27:49Z

week3/src/Button.js

@@ -0,0 +1,5 @@
+const Button = ({ onClick, text }) => {


혹시 요 버튼이 무슨 버튼일까..?

doyn511 · 2023-11-14T04:28:59Z

week3/src/components/main/CountDown.jsx

+  useEffect(() => {
+    time > 0 && setTimeout(() => setTime(time - 1), 1000);
+  }, [time]);


오.. useEffect...!!!

👍👍👍👍👍!!

doyn511 · 2023-11-14T04:30:56Z

week3/src/components/main/FirstStage.jsx

+        onClick={() => {
+          setFirstChoice("china");
+        }}
+        className={firstChoice === "china" ? "selected" : ""}


요것도 이항연산자!

doyn511 · 2023-11-14T04:35:28Z

week3/src/components/main/RandomResult.jsx

+  let pop = FOOD_LIST[Math.floor(Math.random() * FOOD_LIST.length)];
+  return (
+    <>
+      <img src={pop.img} alt={pop.name} />


헉 alt를 저렇게 넣어줬구나! 나는 그냥 냅다 결과이미지 이렇게 넣었는데.. 리팩토링 할 때 참고해야겠다!!!!

doyn511 · 2023-11-14T04:35:55Z

week3/src/components/main/RandomResult.jsx

+      <div>{pop.name}</div>
+      <button
+        onClick={() => {
+          setRandomType(false);


야무지게 초기화 해줬군~ 멋져!!

doyn511 · 2023-11-14T04:48:00Z

week3/src/assets/data.js

+  },
+  {
+    name: "돈지루",
+    category: ["japan", "rice", "soup"],


요렇게 쓰니까 뒤에서 filterList 함수인가 만들 때 category[0] 이런 식으로 불러오는거 같더라고..?
근데 개인적으로 그렇게 불러오면 뭐가 뭔지 잘 모를거 같아서 ..
뭐 .. 각각 country, type, soupOrNot 뭐 이런 식으로 이름 지어주는건 어떨까 싶어!

doyn511 · 2023-11-14T04:50:00Z

week3/src/logo.svg

요런 애도 안쓰면 지워주자

binllionaire

고생했어 준민오빠 !!! 그래도 코드 깔끔한데요 ?!! 조건에 따른 로직처리 부분 더 공부해보면 진짜 조을듯 합니다 🤓

binllionaire · 2023-11-14T06:01:38Z

week3/README.md

+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).


왜 CRA 썼는지 궁금하다!!

나나.. npm으로 해가지구.. 그런거 같아,,

binllionaire · 2023-11-14T06:18:24Z

week3/src/components/main/FirstStage.jsx

+      {firstChoice === "" ? (
+        <button
+          onClick={() => {
+            setRecommendationType(2);
+          }}
+          disabled
+        >
+          NextStage
+        </button>
+      ) : (
+        <button
+          onClick={() => {
+            setRecommendationType(2);
+          }}
+        >
+          NextStage
+        </button>
+      )}


Suggested change

{firstChoice === "" ? (

<button

onClick={() => {

setRecommendationType(2);

}}

disabled

>

NextStage

</button>

) : (

<button

onClick={() => {

setRecommendationType(2);

}}

>

NextStage

</button>

)}

<button

onClick={() => setRecommendationType(2)}

disabled={firstChoice === ""}

>

NextStage

</button>

이렇게 더 간단하게 할 수 도 있겠다!

binllionaire · 2023-11-14T06:23:44Z

week3/src/components/main/ThirdStage.jsx

+      {thirdChoice === "" ? (
+        <button
+          onClick={() => {
+            setRecommendationType(4);
+          }}
+          disabled
+        >
+          NextStage
+        </button>
+      ) : (


요기도 위와 마찬가지로 바꿀 수 있겠다!!!

binllionaire · 2023-11-14T06:24:48Z

week3/src/components/header/Test.jsx

+const Test = () => {
+  return <h1>오늘의 메뉴스~</h1>;
+};


이거 컴포넌트 이름 왜 Test인가용?!!!

binllionaire · 2023-11-14T06:26:46Z

week3/src/App.jsx

+    <>
+      <Test />
+      {renderMain()}


Header로 하는게 더 가독성이 좋을 것 같은데~!!!

binllionaire · 2023-11-14T06:29:49Z

week3/src/components/main/CountDown.jsx

+  useEffect(() => {
+    time > 0 && setTimeout(() => setTime(time - 1), 1000);
+  }, [time]);


👍👍👍👍👍!!

binllionaire · 2023-11-14T06:30:34Z

week3/src/components/main/FirstStage.jsx

+      >
+        한식
+      </button>
+      <button


흐흐 styled-component로 하면 이런 처리는 진짜 편할거야 🤗

aazkgh

같은 왕초보끼리 도와주자는 의미로 코리 왔습니당!!~!!~~!💓

재학생이라 학교도 다니느라 힘들텐데 왕초보기도 해서 과제하는 거 자체가 힘들었을 것 같아요(˘･_･˘) 우리 그래도 과제 push 하기 전에 한 번 확인하고 다듬는 과정은 꼭 해주면 좋을 것 같아요!!ㅎㅎ

모르는 거 있으면 다른 웨비들한테 같이 물어봅시다💪 그리고 왕초보끼리는 알잖아요?? 물어보기 머쓱한 질문들 있는 거,,,크크 그런 거는 우리 서로 머리를 맞대고 공부해봅시당ㅎㅎ 같이 무럭무럭 성장해서 웹잼까지 화이팅해봐요!!!!!! 이번 과제도 수고했습니다❤

aazkgh · 2023-11-14T06:04:02Z

week3/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">


오빠 거 보고 나도 생각난 건데 우리 lang="ko"로 바꾸는 거 잊지말아요!!

aazkgh · 2023-11-14T06:04:54Z

week3/public/index.html

+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->


우리 초기 세팅 하면서 이런 부분은 지우고 시작합시다!!

aazkgh · 2023-11-14T06:06:56Z

week3/src/App.jsx

+        return (
+          <>
+            <p>원하는 추천 방식을 골라죠~</p>
+            <button


인죵인둉

aazkgh · 2023-11-14T06:12:41Z

week3/src/App.test.js

이 파일은 용도가 뭘까요???

aazkgh · 2023-11-14T06:15:20Z

week3/src/components/header/Test.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Test = () => {


이 컴포넌트 지금App.jsx에서 1번 밖에 안 쓰기도 하고 코드 내에서 다시 쓸 일이 없을 것 같은데 컴포넌트로 쓰기엔 재사용성이 조금 떨어지는 것 같다는 생각이 듭니다! 굳이 별도의 컴포넌트로 빼지 않아도 될 것 같아요!!

aazkgh · 2023-11-14T06:47:03Z

week3/public/logo192.png

이런 파일들도 마찬가지로 지워주세요!

aazkgh · 2023-11-14T06:51:02Z

week3/src/App copy.js

지금 보니까 이 파일은 아예 사용하지 않는 파일인 것 같은데 맞을까요?
아마 App()을 처음에는 익숙한 JS 코드로 짜다가 React로 수정한 것 같은데 이렇게 사용하지 않는 코드는 push 하기 전에 다 삭제해줍시다!! 특히, 이 파일은 우리 과제와 직접적으로 관련 있는 코드라서 다른 분들이 코리하실 때 헷갈리실 수도 있을 것 같아요! 우리 조금 더 꼼꼼히 확인해봅시다🙌

aazkgh · 2023-11-14T06:52:28Z

week3/src/Button.js

@@ -0,0 +1,5 @@
+const Button = ({ onClick, text }) => {


이렇게 함수 이름을 onClick으로 작성해주면 어떤 역할을 하는지 찾아보기가 힘들겠죠?!
어떤 동작을 실행하는 함수인지 함수명을 명확하게 설정해줍시다!!

aazkgh · 2023-11-14T06:54:10Z

week3/src/components/main/FirstStage.jsx

+const FirstStage = ({ setRecommendationType, setFirstChoice, firstChoice }) => {
+  return (
+    <>
+      <button


이 선택지 컴포넌트들은 mapping으로 돌려줘도 괜찮을 것 같아요!

aazkgh · 2023-11-14T06:54:55Z

week3/src/components/main/Preference.jsx

+    const secondFilteredList = firstFilteredList.filter(
+      (item) => item.category[1] === secondChoice
+    );
+
+    const thirdFilteredList = secondFilteredList.filter(
+      (item) => item.category[2] === thirdChoice
+    );
+
+    const finalResult = thirdFilteredList[0];


저도 혜인 언니 말에 동의합니다!! 같은 작업을 반복적으로 하는 거니까 함수화해주면 좋을 것 같아요!

Jun-min2 added 4 commits November 10, 2023 06:10

week3_1

59a7978

week3

d8e64e8

week3 Final

46add41

week3 last

98dc5ee

Jun-min2 requested review from binllionaire, hae2ni and doyn511 November 10, 2023 14:23

Jun-min2 self-assigned this Nov 10, 2023

hae2ni reviewed Nov 13, 2023

View reviewed changes

doyn511 reviewed Nov 14, 2023

View reviewed changes

binllionaire reviewed Nov 14, 2023

View reviewed changes

aazkgh reviewed Nov 14, 2023

View reviewed changes

		@@ -0,0 +1,58 @@
		import logo from "./logo.svg";
		import "./App.css";

		@@ -0,0 +1,8 @@
		import { render, screen } from '@testing-library/react';

		@@ -0,0 +1,53 @@
		import React from "react";

		const ThirdStage = ({ setRecommendationType, setThirdChoice, thirdChoice }) => {

		# Getting Started with Create React App

		This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

		@@ -0,0 +1,7 @@
		import React from "react";

		const Test = () => {

[ 3주차 기본/생각 과제 ] #10

Are you sure you want to change the base?

[ 3주차 기본/생각 과제 ] #10

Conversation

Jun-min2 commented Nov 10, 2023

✨ 구현 기능 명세

🌱 기본 조건

🧩 기본 과제

생각과제

💎 PR Point

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

hae2ni 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

doyn511 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

binllionaire 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

aazkgh left a comment • 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

aazkgh left a comment •

edited

Loading