경북대 FE_이효은_1주차 과제 Step3 #85

Hyoeunkh · 2024-06-28T15:00:39Z

step 1,2,3이 모두 포함되어 있습니다.

커밋 기록 삭제하는 도중에 origin/feat-hyoeun 브랜치에서 pull 받고 push를 반복하다 보니 충돌이 여러번 일어나서 기간 내에 커밋 기록을 남기기 어려웠습니다..

…react-foundation into feat-hyoeun

sjoleee

안녕하세요~!

현재 storybook이 정상적으로 실행되지 않는데요, 만약 효은님 환경에서는 정상적으로 동작하고 있다면 다음 순서에 따라 한 번 진행해보실래요?

node_modules 폴더를 삭제한다.
npm i로 다시 의존성을 설치한다.
npm run storybook으로 스토리북을 띄우고 확인한다.

위 순서대로 진행한 후, 만약 제대로 실행되지 않는다면 왜 이런 문제가 발생했을지 확인해 보시고 잘 동작하도록 수정해 보시면 좋겠어요!

그리고 모든 컴포넌트에 공통된 피드백입니다.
만약 제가 Button 컴포넌트를 사용하려고 하는데, padding을 x방향으로 1000px만큼, y방향으로 1000px만큼 주고싶다면 어떡해야 할까요?
즉, 스타일 오버라이딩을 어떤 방식으로 제안하는 컴포넌트인가요?

sjoleee · 2024-06-29T15:27:04Z

README.md

+
+## 3단계 과제
+
+질문 1. webpack은 무엇이고 어떤 역할을 하고 있나요? -여러 개의 파일을 하나의 파일로 합쳐주는 번들러입니다. 여기서 번들러란 코드, 프로그램을 묶어서 패키지로 제공하는 것입니다. 하나의 시작점(index.js 등)으로부터 의존성을 가지는 모듈을 추적하여 하나의 결과물을 만들어내는 모듈 번들러 역할을 합니다.


여러 파일을 하나로 합치는 이유는 무엇일까요?

현재 storybook이 정상적으로 실행되지 않는데요, 만약 효은님 환경에서는 정상적으로 동작하고 있다면 다음 순서에 따라 한 번 진행해보실래요?

node_modules 폴더를 삭제한다.

npm i로 다시 의존성을 설치한다.

npm run storybook으로 스토리북을 띄우고 확인한다.
위 순서대로 진행한 후, 만약 제대로 실행되지 않는다면 왜 이런 문제가 발생했을지 확인해 보시고 잘 동작하도록 수정해 보시면 좋겠어요!

제 컴퓨터에는 의존성을 삭제 후 재설치해도 잘 실행이 되어서 어떤 부분에서 그렇게 말씀하셨는지 잘 모르겠습니다!
저번에 PR 날리기 직전, 갑자기 절대경로가 인식이 안되어서 .storybook/main.ts에 webpackFinal를 추가하여 해결했는데, 이부분이 문제인 걸까요?

그리고 모든 컴포넌트에 공통된 피드백입니다.
만약 제가 Button 컴포넌트를 사용하려고 하는데, padding을 x방향으로 1000px만큼, y방향으로 1000px만큼 주고싶다면 어떡해야 할까요?
즉, 스타일 오버라이딩을 어떤 방식으로 제안하는 컴포넌트인가요?

emotion/react 의 css props로 스타일을 오버라이딩합니다! 예를 들면

<Button css={css` padding-left:1000px; padding-right:1000px `}/>

입니다. 사실 멘토님의 질문 의도를 제대로 파악하지 못하였는데, css props를 사용해서 재사용성을 어떻게 보장할 것인지 묻는 것일까요? 2주차 과제를 진행하면서 위 코드대로 했을 때, 컴포넌트 props에 css가 들어갈 수 없는 오류가 있었습니다. 그래서 열심히 찾아본 결과

@emotion/babel-preset-css-prop를 설치해보았는데,
import React from ‘react’ 와 같은 에러가 떠서 아래와 같이 시도했지만
결국 상단에 주석을 추가하는 방식으로 해결했습니다.. 이 방법밖에 없는 걸까요?

처음 시도해본 코드
//babel.config.js

module.exports = { presets: [ '@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic', importSource: '@emotion/react' }], ['@emotion/babel-preset-css-prop'], ], plugins: ['@emotion/babel-plugin'], };

결국 /* @jsxImportSource @emotion/react */ 를 추가하는 방법으로 해결

sjoleee · 2024-06-29T15:29:17Z

README.md

+
+질문 1. webpack은 무엇이고 어떤 역할을 하고 있나요? -여러 개의 파일을 하나의 파일로 합쳐주는 번들러입니다. 여기서 번들러란 코드, 프로그램을 묶어서 패키지로 제공하는 것입니다. 하나의 시작점(index.js 등)으로부터 의존성을 가지는 모듈을 추적하여 하나의 결과물을 만들어내는 모듈 번들러 역할을 합니다.
+
+질문 2. 브라우저는 어떻게 JSX 파일을 읽을 수 있나요? -바벨과 같은 컴파일러를 이용하여 JSX를 자바스크립트 객체로 변환하면 읽을 수 있습니다.


바벨이 JSX를 변환하고 나면 어떻게 바뀔까요?

왜 변환까지 해가며 JSX를 사용하는 걸까요?

sjoleee · 2024-06-29T15:34:56Z

README.md

+
+질문 2. 브라우저는 어떻게 JSX 파일을 읽을 수 있나요? -바벨과 같은 컴파일러를 이용하여 JSX를 자바스크립트 객체로 변환하면 읽을 수 있습니다.
+
+질문 3. React에서 상태 변화가 생겼을 때 어떻게 변화를 알아챌 수 있나요? -상태 정보를 가진 객체의 주소값이 변경되면 알 수 있습니다!


상태 변화를 알아채는 방법에 대한 적절한 설명이라고 할 수 있을까요~?

React는 어떻게 상태가 변했음을 알 수 있을까요??
상태를 변화시키기 위한 과정을 차근차근 하나씩 살펴보면서 다시 한 번 고민해보시면 좋겠습니다 ㅎㅎ

0c92c89
README에 추가적으로 공부하고 이해한 것들을 적어두었습니다!

sjoleee · 2024-06-29T15:40:27Z

src/components/Button.tsx

+export interface IButton {
+  theme: THEME;
+  size: 'small' | 'large' | 'responsive';
+  children: string;
+  onClick: () => void;
+}


이렇게 만들어진 Button 컴포넌트는 button Element의 모든 api를 활용할 수 있을까요?
다른 컴포넌트처럼 IButton에 extends를 사용해서 타입을 확장해보시면 좋겠어요!

현재 모든 prop이 필수로 설정되어 있어요.
optional prop으로 두는 것이 더욱 편리하거나, 유용할 수 있으니 어떤 것을 optional로 설정할지 한 번 고민해보시면 좋겠습니다.

e0a9e94
아래 네 개의 리뷰까지 Button.tsx 모두 수정하여 커밋했습니다!

sjoleee · 2024-06-29T15:41:51Z

src/components/Button.tsx

+export interface IButton {
+  theme: THEME;
+  size: 'small' | 'large' | 'responsive';
+  children: string;


Button의 자식으로는 string만 허용해야 할까요?
만약 버튼 내부에 작은 svg아이콘과 문자열을 함께 넣고 싶다면 어떡하면 좋을까요?

sjoleee · 2024-06-29T16:37:56Z

src/components/GoodsItem.tsx

+export const GoodsItem = ({ imageSrc, subtitle, title, amount, rankingIndex }: IGoodsItem) => {
+  return (
+    <GoodsItemWrapper>
+      {rankingIndex ? <RankingNumber rankingIndex={rankingIndex}>{rankingIndex}</RankingNumber> : null}
+      <img src={imageSrc} alt="goodsItem" />
+      <p className="subtitle">{subtitle}</p>
+      <p>{title}</p>
+      <h1>{amount}원</h1>
+    </GoodsItemWrapper>
+  );
+};


현재 과제에서 제공해준 스토리북과 default 상태의 생김새가 많이 다른 것 같습니다. 어떻게 수정해야할지 확인해보시면 좋겠어요.

sjoleee · 2024-06-29T16:47:36Z

src/components/Layout/Container.tsx

+};
+
+const StyleContainer = styled.div<IContainer>`
+  max-width: ${(props) => props.maxWidth};


현재 maxWidth의 타입이 string인데요, 문제가 발생할 여지가 많습니다.
예를 들어, 현재 스토리북에서 확인해보시면 maxWidth가 제대로 적용되지 않았어요.
단위가 없는 100이라는 문자열 대신 100px로 입력하시면 정상적으로 적용됩니다.

그럼 어떻게 해야 개발자의 실수를 최소화할 수 있을까요? 어떡하면 단위를 적용하도록 강제할 수 있을까요?
이걸 타입스크립트가 도와줄 수 있지 않을까요?

7f91189
구체적으로 px를 쓰도록 지정했습니다

sjoleee · 2024-06-29T16:48:23Z

src/components/Layout/Grid.tsx

+import { css } from '@emotion/react';
+
+export interface IGrid {
+  gap: number;


gap을 주지 않고 싶다면 반드시 0을 줘야하는데, 너무 번거롭지 않을까요?

b75eff0
옵션으로 수정했습니다

sjoleee · 2024-06-29T16:49:16Z

src/stories/Configure.mdx

해당 파일은 불필요하므로 제거되어도 좋을 것 같아요~

2862a8c
불필요한 파일 제거했습니다.
코드리뷰 남겨주셔서 감사합니다!

sjoleee · 2024-06-29T16:50:34Z

src/stories/assets/accessibility.png

stories/asset 내부에 불필요한 파일이 많은 것 같아요. 정리해 주시면 좋겠습니다

Hyoeunkh added 25 commits June 25, 2024 23:54

docs: README 작성

79fba18

feat: CRA 생성

e766839

feat: typescript 설정

912bde4

feat: tsconfig 설정

209be07

feat: ESLint 설정

557587d

feat: prettier 설정

214c3cf

feat: emotion-reset css 설정

0691fbb

design: emotion을 활용하여 global style 설정

14cd625

feat: gitignore 추가

a1f5f90

remove: 불필요한 코드 및 파일 제거

9cdb654

fix: React import 오류 해결을 위해 eslint 수정

fc406c9

feat: scripts에 lint, format 명령어 추가

3033e28

refactor: 코드 포매팅

b4118a7

feat: 폴더 구조 설정을 위해 gitkeep 파일 추가

99aa0e8

refactor: React.FC 삭제

105072b

rename: globalstyle 파일 이름 reset으로 수정

540efc7

docs: 폴더 구조 설명 추가 및 구현할 기능 목록 수정

267ade8

feat: test

5a8e0d7

feat: test

cee7551

textㅅㅅㅅ

b9cb66d

test

18da5d2

feat: storybook 설치

00c7b9c

feat: 컴포넌트 구현

20143d4

docs: 리드미 수정

1164797

Merge branch 'feat-hyoeun' of https://github.com/Hyoeunkh/react-gift-…

a3f20b1

…react-foundation into feat-hyoeun

Hyoeunkh changed the title ~~Feat hyoeun~~ 경북대 FE_이효_1주차 과제 Step3 Jun 28, 2024

Hyoeunkh changed the title ~~경북대 FE_이효_1주차 과제 Step3~~ 경북대 FE_이효은_1주차 과제 Step3 Jun 28, 2024

fix: 충돌 수정

e65d2c7

sjoleee changed the base branch from main to hyoeunkh June 29, 2024 14:50

sjoleee requested changes Jun 29, 2024

View reviewed changes

Hyoeunkh added 9 commits June 30, 2024 15:42

docs: [1주차 리뷰] 질문에 대한 답 README 수정

0c92c89

refactor: [1주차 리뷰] type 수정, outline 스타일 방식 변경

e0a9e94

refactor: [1주차 리뷰] optional 지정 및 Pick 타입 사용

eb79af2

refactor: [1주차 리뷰] optional 설정 및 컴포넌트 분리

a3d5b2e

fix: [1주차 리뷰] maxWidth의 타입을 구체적으로 지정

7f91189

refactor: [1주차 리뷰] gap을 optional 타입으로 지정

b75eff0

remove: [1주차 리뷰] 불필요한 파일 제거

2862a8c

fix: [1주차 리뷰] style의 단위 오류 수정 및 Pick 사용으로 타입 지정

7d9b09e

fix: [1주차 리뷰] stories 디폴트 값 변경

a0f86cf

Hyoeunkh force-pushed the feat-hyoeun branch from 3396184 to a0f86cf Compare July 2, 2024 06:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

경북대 FE_이효은_1주차 과제 Step3 #85

경북대 FE_이효은_1주차 과제 Step3 #85

Hyoeunkh commented Jun 28, 2024 •

edited

Loading

sjoleee left a comment

sjoleee Jun 29, 2024

Hyoeunkh Jul 4, 2024

Hyoeunkh Jul 4, 2024

sjoleee Jun 29, 2024

sjoleee Jun 29, 2024

Hyoeunkh Jul 4, 2024

sjoleee Jun 29, 2024

Hyoeunkh Jul 4, 2024

sjoleee Jun 29, 2024

sjoleee Jun 29, 2024

sjoleee Jun 29, 2024

Hyoeunkh Jul 4, 2024

sjoleee Jun 29, 2024

Hyoeunkh Jul 4, 2024

sjoleee Jun 29, 2024

Hyoeunkh Jul 4, 2024

sjoleee Jun 29, 2024


		## 3단계 과제

		질문 1. webpack은 무엇이고 어떤 역할을 하고 있나요? -여러 개의 파일을 하나의 파일로 합쳐주는 번들러입니다. 여기서 번들러란 코드, 프로그램을 묶어서 패키지로 제공하는 것입니다. 하나의 시작점(index.js 등)으로부터 의존성을 가지는 모듈을 추적하여 하나의 결과물을 만들어내는 모듈 번들러 역할을 합니다.


		질문 1. webpack은 무엇이고 어떤 역할을 하고 있나요? -여러 개의 파일을 하나의 파일로 합쳐주는 번들러입니다. 여기서 번들러란 코드, 프로그램을 묶어서 패키지로 제공하는 것입니다. 하나의 시작점(index.js 등)으로부터 의존성을 가지는 모듈을 추적하여 하나의 결과물을 만들어내는 모듈 번들러 역할을 합니다.

		질문 2. 브라우저는 어떻게 JSX 파일을 읽을 수 있나요? -바벨과 같은 컴파일러를 이용하여 JSX를 자바스크립트 객체로 변환하면 읽을 수 있습니다.


		질문 2. 브라우저는 어떻게 JSX 파일을 읽을 수 있나요? -바벨과 같은 컴파일러를 이용하여 JSX를 자바스크립트 객체로 변환하면 읽을 수 있습니다.

		질문 3. React에서 상태 변화가 생겼을 때 어떻게 변화를 알아챌 수 있나요? -상태 정보를 가진 객체의 주소값이 변경되면 알 수 있습니다!

경북대 FE_이효은_1주차 과제 Step3 #85

Are you sure you want to change the base?

경북대 FE_이효은_1주차 과제 Step3 #85

Conversation

Hyoeunkh commented Jun 28, 2024 • edited Loading

sjoleee 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

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

Hyoeunkh commented Jun 28, 2024 •

edited

Loading