충남대 FE_강병현_1주차_과제 Step1 #18

kang-kibong · 2024-06-27T04:50:23Z

안녕하세요. 카테캠 프론트엔드 파트 수강 중인 충남대학교 재학중인 강병현입니다. 😊

먼저 코드리뷰에 도움 주셔서 감사드리며, 과제를 다음과 같이 진행해보았습니다.

👨🏻‍💻 해결 과정

craco 라이브러리를 활용하여 src 폴더와 각 기능별 폴더들의 절대 경로를 aliasing했습니다.
tsconfig.json에 Prettier와 ESLint 실행을 위한 설정을 추가하고, 절대 경로 설정을 tsconfig.paths.json으로 분리하여 확장했습니다. 추가로 lint-staged 명령어 정의와, prepare 스크립트를 통해 husky를 자동으로 설치 및 실행할 수 있도록 설정했습니다.
Emotion 스타일 라이브러리를 통해 간단한 Button 컴포넌트를 만들어 styled가 적용되는지 확인했습니다.
resetStyles.ts에서 Emotion의 css를 사용하여 reset CSS를 작성하고, Global 스타일을 적용했습니다.
프로젝트 생성 시 발생하는 불필요한 코드와 파일을 정리했습니다.
초기 폴더 구조는 각 기능별로 나누어 구성했습니다.
Storybook 설치와 더불어 절대 경로 이슈를 tsconfig-paths-webpack-plugin 설치 및 Storybook config파일 설정을 통해 해결하였습니다.
components 구조에 따라 파일들을 그룹핑하여 관리하고 story와 docs를 함께 작성해보았습니다.

🛠️ 코드 리뷰 반영

📄 요구 사항

babel-preset-react-app 설치
package.json의 eslintConfig 제거
testing library와 typescript 패키지 devdependencies로 변경
README에 초기 폴더 구조에 대한 설명 기재
lint 대상 변경
QUESTION.md 추가

🙋‍♂️ 리뷰어분께

질문 사항이 많아, QUESTION.md에 기재하였습니다.

위 내용을 바탕으로 코드 리뷰 진행해주시면 감사하겠습니다. 🙇‍♂️

Initialized a new project using Create React App with TypeScript template.

Removed redundant code and deleted unused files to clean up the project.

Set up absolute import paths using craco to simplify module imports and improve project structure.

Installed Prettier and configured formatting rules across the project.

Installed ESLint and set up rules to enforce coding standards and best practices throughout the project.

Installed @emotion/react and @emotion/styled as project dependencies.

Added a global reset CSS file to normalize styles across the application.

Created initial folder structure for the project.

Organized project files into a new directory structure for better organization and maintainability.

Integrated lint-staged and husky to enforce linting and formatting on staged files before commits.

Added the detailed feature list for implementing reusable components using Storybook in the README file. The feature list includes: - Installation of Storybook - Implementation of Button component with theme, size, and basic attributes - Implementation of Input component with disabled, invalid, size, and basic attributes - Implementation of Image component with ratio, radius, and basic attributes

- Add customizable theme and size props - Update types for ButtonTheme and ButtonSize - Set default props for theme and size

- Implemented conditional styling for button sizes using getSizeStyles function. - Applied responsive design for 'responsive' size using media queries.

- Implemented conditional styling for button theme using getThemeStyles function.

- Added Storybook configuration for the Button component - Implemented Button component stories with various themes and sizes

package.json

README.md

src/components/Button/Button.tsx

src/components/Button/Button.styled.ts

src/components/Button/Button.tsx

package.json

README.md

Replaced the magic number 3 used for ranking comparison with a constant TOP_RANKING_THRESHOLD to improve code readability and maintainability.

Replaced magic numbers for image sizes with constants IMAGE_SIZE_LARGE and IMAGE_SIZE_SMALL to improve code readability and maintainability in the GoodsItem component.

…ect to devDependencies Added @babel/plugin-proposal-private-property-in-object to devDependencies to resolve missing dependency issue in babel-preset-react-app.

…lity

taehwanno · 2024-06-30T02:14:41Z

QUESTION.md

+초기 React프로젝트를 reportWebVitals로 console로 간단하게 찍어보니 console탭에서 성능에 대한 결과를 객체 형태로 확인할 수 있었습니다.
+결과로 FCP, TTFB, LCP, FID, CLS와 같이 다양한 방면으로 성능 측정이 가능하다는 것을 확인할 수 있었습니다.
+이러한 웹 성능 측정을 회사에서 실제로 많이 고민하고 코드를 짜는지 궁금하고, 한번도 이런 성능 측정을 해본 경험이 없기에 이 부분에 대해서 더 자세히 알려면 어떤식으로, 어떻게 공부하고 경험할 수 있는지 궁금합니다.
+


이러한 웹 성능 측정을 회사에서 실제로 많이 고민하고 코드를 짜는지 궁금하고

요건 회사에 속한 팀 문화마다 다를 거 같아요. Web Vitals에 있는 수치를 중요시 여긴다면 CI 과정에서 특정 점수 이하로 내려가지 않도록 추적해서 내려간다면 CI를 깨뜨린다거나 PR 병합을 하지 못하게 한다거나 강하게 규칙을 적용할 수도 있을 거 같구요. 제가 속한 조직에서는 강한 규칙보다는 도구를 활용해서 각 수치가 얼만큼 변화하고 있는지 추적해서 대응하는 방향으로 처리하고 있어요. datadog 또는 sentry 와 같은 도구의 피처가 그 예시입니다.

한번도 이런 성능 측정을 해본 경험이 없기에 이 부분에 대해서 더 자세히 알려면 어떤식으로, 어떻게 공부하고 경험할 수 있는지 궁금합니다.

제가 느끼기에는 일반적으로 아래처럼 3가지 단계를 반복적으로 진행하게 되는데요, 이를 위해 수치적 분석을 위한 개념을 이해하고 분석 및 개선 후 수치 변화 추적을 위해 Web Vitals, Lighthouse, Chrome DevTools의 Performance 탭 사용 방식을 익히는 것 정도가 생각나네요.

문제 식별

진단을 통한 원인 파악 (병목 지점 파악 포함)

개선 후 변화 분석

아래 3가지를 읽고 이해하는게 시작점이 될 수 있지 않나 싶습니다.

Core Web Vitals

Metrics

Fast load times

taehwanno · 2024-06-30T02:19:45Z

QUESTION.md

+
+구글링해본 결과 일단 `rules`에 `"import/no-unresolved": "off”`하면 해결할 수 있다고 하여 작성해놓은 상태입니다.
+
+이 이슈를 해결할 수 있는 방안은 무엇일까요?


2번 문제는 import/no-unresolved": "off” 제거하더라도 에러는 발생안하고 있어서 해결된 거 같기도 한데 맞을까요?

taehwanno · 2024-06-30T02:35:12Z

QUESTION.md

+└── Button.tsx
+```
+
+보통 어떤식으로 하는지 궁금합니다! 정답이란게 있을까요?


책임 분리를 통해 얻는 이점이 무엇인지 명확히 할 필요가 있겠습니다. 어떤 이점이 있을까요?

taehwanno · 2024-06-30T02:38:07Z

QUESTION.md

+
+스타일을 압축 및 호이스팅하여 최적화하고 souce map및 label로 더나은 개발 경험을 생성하는 플러그인을 원하면 권장한다고 합니다.
+
+해당 내용에 대해서 잘 이해가 가지 않아 고민입니다!


혹시 https://emotion.sh/docs/@emotion/babel-plugin 내용 읽어보셨을까요?

taehwanno · 2024-06-30T02:42:06Z

QUESTION.md

+
+개인적으로 tailwindcss는 inline css와 같이 클래스명 내에서 스타일링할 수 있다는 점에서 유지보수하기 힘들 것 같다는 생각에 평소 css-in-js를 많이 사용하는 것 같습니다.
+
+성능 차이에서일까요? 아니면 편의성때문일까요? 두 라이브러리에 대한 차이에 대해서도 궁금합니다.


혹시 Utility-First Fundamentals 읽어보셨을까요? 읽어보신 뒤의 병현 님 생각도 궁금합니다. 추가로 CSS-in-JS, 무엇이 다른가요? 글도 추천드립니다.

tailwindcss와 css-in-js 의 선택은 프로젝트의 요구사항과 팀의 선호도에 따라 달라질 수 있다는 생각이 들었습니다.

tailwindcss의 장점은 클래스명에 대해 고민할 필요가 없고, 제공하는 유틸리티 클래스를 사용하여 반응형 디자인과 이벤트 처리를 더욱 간결하게 작성할 수 있다는 점인 것 같습니다. 때문에 기존 CSS를 사용하면 길어지는 코드를 획기적으로 줄일 수 있는점과 css-in-js와는 다르게 모든 클래스를 빌드시간에 생성하기 때문에 성능면에서 좋다는 생각이 들었습니다. 그러나 러닝 커브가 존재하기 때문에 팀원 모두가 사용법에 대해 숙지해야 한다는 점이 있는 것 같습니다.

css-in-js, 특히 styled-components는 동적으로 스타일링하기에 최적화되어 있있는 것 같고 낮은 러닝 커브가 장점인 것 같습니다.
그러나 런타임에서 스타일을 생성하기 때문에 성능 저하가 발생할 수 있다는 점이 단점인 것 같습니다.
최근에는 이를 해결하기 위해 zero-runtime css-in-js 라이브러리가 등장하고 있다는 점을 알게되었습니다.

taehwanno · 2024-06-30T02:46:11Z

QUESTION.md

+
+이번 과제에서도 적용해보았지만, 이를 고려하면 git hook을 통해 포맷팅와 린팅을 자동화 시킬 수 있다는 점이 장점이라 생각되어 다른 프로젝트에서도 평소 사용하고 있는 편입니다.
+
+현업에서도 많이 쓰이는 기술일까요? 아니면 이것도 필요에 따라 설치하는 편인가요?


보통 많이 씁니다. 커밋할 때 eslint, prettier 적용하고 CI에서 잘 적용됐는지 eslint, prettier 실행해서 체크하는 과정을 거치게 되는데 적용하지 않으면 CI에서 깨질 수 있으니까요.

taehwanno · 2024-06-30T02:49:20Z

QUESTION.md

+
+이번 과제에서는 기능에 따라 패턴을 잡아봤습니다.
+
+혹시 정답이란게 있을까요? 혹은 최근 많이 사용되어지고 있는 패턴이 있을까요?


아래 글들 읽어보시고 한번 병현님 생각 전달해봐주시겠어요?

파일 구조

Colocation

일단 “폴더 구조에 대한 정답은 없다.”인 것 같습니다.

그러나 도움이 되는 방법 중 하나는 colocation을 적용하는 것인 것 같습니다.

처음에는 관련된 기능을 하나의 폴더에 모아 작업을 진행하다가, 점차 프로젝트가 커지면 관련된 파일들을 가능한 한 가까운 곳에 배치하는 것이 좋다는 것으로 이해했습니다.

이후에는 특정 기능을 수정할 때 수정해야 할 파일이 어디에 있는지 명확하게 예측할 수 있기 때문에 시간이 단축되고 작업 용이성이 향상될 수 있다는 생각이 들었습니다!

kang-kibong added 18 commits June 25, 2024 13:25

docs(README.md): add a list of features

3a896a3

feat(kakao-gift): create TypeScript project using CRA

586a145

Initialized a new project using Create React App with TypeScript template.

chore: remove unnecessary code and files

9a6f829

Removed redundant code and deleted unused files to clean up the project.

chore: configure absolute paths using craco

f22f89e

Set up absolute import paths using craco to simplify module imports and improve project structure.

chore: set up Prettier formatting rules

dc76831

Installed Prettier and configured formatting rules across the project.

chore: configure ESLint rules according

45a3b22

Installed ESLint and set up rules to enforce coding standards and best practices throughout the project.

chore: add emotion styling library

de2ffcc

Installed @emotion/react and @emotion/styled as project dependencies.

feat: add Button component

2ae3ea8

feat: Apply reset CSS globally

b5fcaed

Added a global reset CSS file to normalize styles across the application.

feat: Initialize folder structure

5ef0d54

Created initial folder structure for the project.

chore: Moved files to new directory structure

f558c4e

Organized project files into a new directory structure for better organization and maintainability.

feat: feat: Add lint-staged and husky

2317065

Integrated lint-staged and husky to enforce linting and formatting on staged files before commits.

chore: install and configure Storybook

ddc3fff

refactor(components): update Button component

f9747a7

- Add customizable theme and size props - Update types for ButtonTheme and ButtonSize - Set default props for theme and size

design(Button): Implement button styling based on size props

bc5c112

- Implemented conditional styling for button sizes using getSizeStyles function. - Applied responsive design for 'responsive' size using media queries.

design(Button): Implement button styling based on theme props

c7e61b0

- Implemented conditional styling for button theme using getThemeStyles function.

feat(storybook): add Button component story

c7b8991

- Added Storybook configuration for the Button component - Implemented Button component stories with various themes and sizes

taehwanno self-requested a review June 27, 2024 14:21

taehwanno requested changes Jun 27, 2024

View reviewed changes

taehwanno reviewed Jun 27, 2024

View reviewed changes

README.md Show resolved Hide resolved

kang-kibong added 9 commits June 28, 2024 18:17

feat: add Input component

af20619

feat: add disabled prop styling to Input component

6dd2c28

feat: add invalid prop styling to Input component

76fcdd0

feat: implement size prop styling for Input component

df88036

feat: add Storybook stories for Input component

4621a85

feat: add Image component

0213fc5

feat: add ratio prop to set image aspect ratio in Image component

41eede0

feat: add radius prop to set border radius in Image component

74bec12

feat: add width and height props to Image component

563337a

kang-kibong added 17 commits June 28, 2024 21:42

feat: add Container component

dfdaebe

feat: add Storybook stories for Container component

5ef7785

feat: add FullScreen story for Container component

3058f54

feat: add Grid component

dcaeca4

feat: add NumberColumns story for Grid component

daf0158

feat: add ResponsiveColumns story for Grid component

b38ee04

chore: move Button component file to common folder

571bacf

chore: move files

3872a5c

docs: update README

e524f7d

feat: add autodocs tags to all Storybook files

69d09a4

fix: add babel-preset-react-app to package.json

997a79a

docs: add requirements from code review to README

a9c4096

chore: remove eslintConfig from package.json

65a4214

chore: move testing and types dependencies to devDependencies

def5518

docs: add initial folder structure explanation to README

ce11642

chore: update lint script target

9abf298

docs: create QUESTIONS.md

43c723b

kang-kibong changed the base branch from main to kang-kibong June 28, 2024 15:12

taehwanno mentioned this pull request Jun 29, 2024

충남대 FE_손동훈1주차 과제 Step1 #29

Merged

kang-kibong added 7 commits June 29, 2024 12:49

feat(button): update responsive height styles

02fd425

refactor(ranking): remove magic number by defining a constant

ab9c04c

Replaced the magic number 3 used for ranking comparison with a constant TOP_RANKING_THRESHOLD to improve code readability and maintainability.

refactor(props): refactor all files to spread props for cleaner code

60a07c4

refactor(goods-item): replace magic numbers with constants

3d13ff9

Replaced magic numbers for image sizes with constants IMAGE_SIZE_LARGE and IMAGE_SIZE_SMALL to improve code readability and maintainability in the GoodsItem component.

chore: move styles folder to assets folder

2c9105b

fix(dependencies): add @babel/plugin-proposal-private-property-in-obj…

ab6680f

…ect to devDependencies Added @babel/plugin-proposal-private-property-in-object to devDependencies to resolve missing dependency issue in babel-preset-react-app.

refactor(GoodsItem): separate renderRanking method for better readabi…

a06d91e

…lity

taehwanno reviewed Jun 30, 2024

View reviewed changes

taehwanno merged commit e5816a2 into kakao-tech-campus-2nd-step2:kang-kibong Jun 30, 2024

taehwanno assigned kang-kibong Jul 1, 2024

taehwanno mentioned this pull request Jul 6, 2024

충남대 FE_강병현_2주차_과제 kakao-tech-campus-2nd-step2/react-gift-ui-flow#27

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

충남대 FE_강병현_1주차_과제 Step1 #18

충남대 FE_강병현_1주차_과제 Step1 #18

kang-kibong commented Jun 27, 2024 •

edited

Loading

taehwanno Jun 30, 2024

taehwanno Jun 30, 2024

taehwanno Jun 30, 2024

taehwanno Jun 30, 2024

taehwanno Jun 30, 2024 •

edited

Loading

kang-kibong Jul 17, 2024

taehwanno Jun 30, 2024

taehwanno Jun 30, 2024

kang-kibong Jul 17, 2024


		구글링해본 결과 일단 `rules`에 `"import/no-unresolved": "off”`하면 해결할 수 있다고 하여 작성해놓은 상태입니다.

		이 이슈를 해결할 수 있는 방안은 무엇일까요?


		스타일을 압축 및 호이스팅하여 최적화하고 souce map및 label로 더나은 개발 경험을 생성하는 플러그인을 원하면 권장한다고 합니다.

		해당 내용에 대해서 잘 이해가 가지 않아 고민입니다!


		개인적으로 tailwindcss는 inline css와 같이 클래스명 내에서 스타일링할 수 있다는 점에서 유지보수하기 힘들 것 같다는 생각에 평소 css-in-js를 많이 사용하는 것 같습니다.

		성능 차이에서일까요? 아니면 편의성때문일까요? 두 라이브러리에 대한 차이에 대해서도 궁금합니다.


		이번 과제에서도 적용해보았지만, 이를 고려하면 git hook을 통해 포맷팅와 린팅을 자동화 시킬 수 있다는 점이 장점이라 생각되어 다른 프로젝트에서도 평소 사용하고 있는 편입니다.

		현업에서도 많이 쓰이는 기술일까요? 아니면 이것도 필요에 따라 설치하는 편인가요?


		이번 과제에서는 기능에 따라 패턴을 잡아봤습니다.

		혹시 정답이란게 있을까요? 혹은 최근 많이 사용되어지고 있는 패턴이 있을까요?

충남대 FE_강병현_1주차_과제 Step1 #18

충남대 FE_강병현_1주차_과제 Step1 #18

Conversation

kang-kibong commented Jun 27, 2024 • 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

taehwanno Jun 30, 2024 • 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

kang-kibong commented Jun 27, 2024 •

edited

Loading

taehwanno Jun 30, 2024 •

edited

Loading