[team-13 FE] 1주차 PR #29

cchoongh · 2021-04-23T13:29:13Z

1주차에는 빨간색으로 표시한 컴포넌트 구현 위주로 진행되었습니다.

Slider 컴포넌트
- 라이브러리로 배포할 목적으로 설계하고 구현해봤습니다. 아직은 초기구현 상태입니다.
- Slider를 사용하는 부모의 사이즈와 내부에 보여질 아이템 크기에 맞춰 itemCntOnView매개변수 만큼의 아이템 개수를 한 번에 띄워줍니다.
- 부모와 아이템의 사이즈를 런타임에서 파악하기 위해 useRef()를 사용했는데 맞는 방법인지 모르겠습니다.
- 윈쪽, 오른쪽 버튼을 부모에서 커스터마이즈하여 사용할 수 있도록, useImperativeHandle(), forwardRef()를 적용해 봤습니다.
서버 API관련 질문
- 서버랑 통신하는 함수들은 보통 어떻게 분리하여 관리하는지 궁금합니다.
- 서버 URL은 어디에 저장해놓고 사용하나요?
기타 질문
- 컴포넌트내에서 props로 넘어오는 값들이 유효한지 확인하고 에러를 throw하는 코드는 어디에 작성하면 좋을까요??
- 변하지 않는 props들을 이펙트함수 내에서 사용할 때, deps array에 넣어주지 않으면 warning이 뜨는데, 굳이 넣어야하는 이유가 무엇인가요?
- 아래와 같이 preview 기능에서 <img> 태그에 src 속성을 넣어서 사용한다고 하면, 작은 이미지들을 클릭할때마다, 확대이미지로 띄우기 위해 네트워크요청을 클릭할 때마다 하게되는데 이런식으로 구현하는게 일반적인건가요?

* 런타임 때 필요할 것 같지 않아, 일단 dependenciesDev에 추가돼 있는데, 추후에 변경 될 수도 있을 듯

* common/Modal 컴포넌트 추가. content 컴포넌트를 자식으로 둔 다음. content가 가운데 배치되도록 구현 * MenuDetailModal에서 common/Modal을 사용하고, content로 MenuDetail 컴포넌트를 사용하도록 구조를 짜봤음.

* 아직 거의 비어있음. * 전역적으로 사용될 config들이 저장될 Global.js * custom hook들이 있는 hooks 디렉터리

Fe/feature/menu detail modal

* 스타일 적용 * 이미지가 5개 미만일 시, 회색으로 채워지도록 * 클릭 로직 구현

Fe/feature/menu detail modal

* common/badge.js * 추가하고 싶은 뱃지 있으면 위 파일안에다가 구현후 export에 추가하기

Fe/feature/menu detail modal, common한 벳지컴포넌트 추가

* 'OrderInfo'쪽 구현 도중에 조정한거라, 해당 부분이 살짝 포함 되어있음..

* 추후에 'common/'으로 뺄 가능성 농후

* 하위 구성요소 'OrderInfo', 'SmallInfoContainer' 컴포넌트 추가 * 수량 변화에 따른 총 주문가격 로직 구현 * 아직 '주문하기'버튼 클릭 로직은 미구현(백엔드에서 선처리 필요)

Fe/feature/menu detail modal

Fe/feature/header nav button

* 전체의 아이템 개수가 화면에 보여질 아이템 개수로 딱 나눠 떨어지지 않을 때의 경우를 처리하는 로직 구현

[ADD]: Slider 끝부분 처리

* Slider쪽 코드도 같이 고침.. * onSlide콜백을 받도록 수정

[ADD]: Slider 컨트롤 버튼 disabled기능 구현

* useFetch() => useFetchData() 이름 변경 * Global객체에 server url관련 함수 추가

* position속성 absolute => relative

* 추천 슬라이더 스타일 구현 * 추천 슬라이더 페이지 표시 구현 * 추천 슬라이더 버튼들 구현 * 전체적인 margin, padding 조정

Fe/feature/menu detail modal

[ADD] BestMenu Tab function added

crongro · 2021-04-26T07:20:39Z

모와 아이템의 사이즈를 런타임에서 파악하기 위해 useRef()를 사용했는데 맞는 방법인지 모르겠습니다.

제한적으로 사용할 수 있다고 생각합니다.

crongro · 2021-04-26T07:36:07Z

서버 URL은 어디에 저장해놓고 사용하나요?

배포되지 않는 설정파일에 두고 빌드타이밍에 소스코드를 replace하는 방식을 많이 하겠죠.

웹팩설정을 해야하는데, cra에서는 세련방 방법은 저도 찾아봐야겠네요.
https://stackoverflow.com/questions/42686149/cant-build-create-react-app-project-with-custom-public-url

crongro · 2021-04-26T07:36:44Z

컴포넌트내에서 props로 넘어오는 값들이 유효한지 확인하고 에러를 throw하는 코드는 어디에 작성하면 좋을까요??

컴포넌트 상단에서 제일 먼저 체크해야겠죠?

crongro · 2021-04-26T07:39:59Z

변하지 않는 props들을 이펙트함수 내에서 사용할 때, deps array에 넣어주지 않으면 warning이 뜨는데, 굳이 넣어야하는 이유가 무엇인가요?

변할까봐요.

crongro · 2021-04-26T07:43:59Z

아래와 같이 preview 기능에서 <img> 태그에 src 속성을 넣어서 사용한다고 하면, 작은 이미지들을 클릭할때마다, 확대이미지로 띄우기 위해 네트워크요청을 클릭할 때마다 하게되는데 이런식으로 구현하는게 일반적인건가요?

이미지는 기본적으로 브라우저에 캐시가 되니, 매번요청하게 되지는 않을거에요. 클릭할때 이미지를 가져오도록 하는것은 lazy loading차원에서 좋네요. 그리고 이미지 preloading이라는 기법으로 미리 이미지를 가져오는 방법도 있습니다.

LargeCard에서 할인가격이 없는 경우 render 정보 수정

Fe/feature/best menu

[UPDATE] DELETE Margin Left,Right

crongro

엄청 열심히 개발하셨군요.
잘 구현하셨네요. 컴포넌트 크기가 대체로 큰편이 아니라서 그부분이 좋았습니다.

복잡한 계산은 동일한 결과일 수 있으니, 메모이제이션을 적용할 곳이 있는지도 생각해보시고요.

crongro · 2021-04-26T07:52:39Z

fe/sidedish-fe/src/components/BestMenu/BestMenu.jsx

+  const renderTabTitles = () => { 
+    return response.body.map((v, idx) => {
+        if (index === idx) {
+          console.log("SAME")


디버깅 코드는 지우고 커밋하기~

crongro · 2021-04-26T07:57:35Z

fe/sidedish-fe/src/components/BestMenu/BestMenu.jsx

+  return (
+    <div style = {{ marginLeft : "5%" }}>
+      <style.BestMenuTitle>{BestMenuStatic.Title}</style.BestMenuTitle>
+      <FlexRowContainer >


FlexRowContainer 도 styled.Flex 로 해도 될 듯 하고요. 일관성을 생각해서요.
공통요소라 예외로 한거 같군요.

crongro · 2021-04-26T07:57:55Z

fe/sidedish-fe/src/components/BestMenu/BestMenu.jsx

+  }
+
+  return (
+    <div style = {{ marginLeft : "5%" }}>


이건 또 별도 styled component로 만드신건 아니군요.

crongro · 2021-04-26T08:07:58Z

fe/sidedish-fe/src/components/BestMenu/BestMenuTab.jsx

@@ -0,0 +1,14 @@
+const BestMenuTab = ( props ) => {
+    const Items = Object.values(props)[0]
+    const renderItems = () => Items.map((v) => {


destructuring 해서 Items.map(({cateId}) => {}

crongro · 2021-04-26T08:14:52Z

fe/sidedish-fe/src/components/Header/Header.jsx

+            </style.HeaderLeftStyle>
+
+            <style.HeaderRightStyle>
+                <style.SearchBarFormStyle>


네이밍 보니 앞에도 style을 붙이고, 뒤에도 Style이라고 하시느 중복이름인거 같아요.
정작중요한 것은 SearchBar, SearchButton 인데 가운데 끼여서 잘 드러나지 못하는 것 같아요.

crongro · 2021-04-26T08:32:07Z

fe/sidedish-fe/src/components/MenuDetailModal/MenuDetail/OrderInfo/OrderInfo.js

+
+function OrderInfo({ data }) {
+  const priceRef = useRef(data.prices[1].match(/[0-9]*/g).join(''));
+  const [totalPrice, setTotalPrice] = useState(data.prices[1]);


(data.prices[1]) 1이 가진 의미가 좀더 구체적이면 좋겠죠.
prices 배열대신 객체구조를 사용한다던가 등

crongro · 2021-04-26T08:36:03Z

fe/sidedish-fe/src/components/MenuDetailModal/MenuDetail/OrderInfo/SmallInfoContainer.js

+
+  const renderSmallInfos = () => {
+    return data.map((info, idx) => {
+      const [entry, content] = info;


이것도 위에서 같이 선언가능하겠네요.
return data.map(([entry, content], idx) => {

crongro · 2021-04-26T08:44:47Z

fe/sidedish-fe/src/components/common/Slider.js

+  return (itemWidth + betweenMargin) * itemLength - betweenMargin;
+}
+
+const _calcPositionLeft = ({ itemWidth, currIdx, betweenMargin }) => {


이런메서드들을 Slider밖에 선언한 것도 괜찮네요.

crongro · 2021-04-26T08:48:43Z

fe/sidedish-fe/src/components/common/Slider.js

+      itemWidth: itemRef.current.offsetWidth,
+      sliderWidth: styledRef.current.offsetWidth,
+      itemCntOnView
+    });
+    const newTotalWidth = _calcTotalWidth({
+      itemWidth: itemRef.current.offsetWidth,
+      itemLength: items.length,
+      betweenMargin: newBetweenMargin


여기서 계산되는 값들이 매번 달라지는 값이면 어쩔수 없지만,
같은값인 경우에는 캐시를 잘 활용하셔야겠네요.
offsetWidth 이런값을 접근할때 reflow가 발생한다고 합니다.

crongro · 2021-04-26T08:50:56Z

fe/sidedish-fe/src/components/common/Slider.js

+
+// TODO: default slide buttons, disable slide button
+
+function Slider({ itemCntOnView, items, onSlide, defaultBtn = true, pageable = false }, ref) {


오늘 언급한 것처럼, Slider 컴포넌트가 범용적으로 동작하도록 계속 발전시켜보세요~

Be dong

[BE] mock-api 샘플 데이터 추가

Feature create detail

Feature/modal carousel

* [#1] init: 🎉 개발 환경 구축 * [#3] feat: ✨ Header 만들기 * [#5] feat: ✨ BestTab UI 구현 - BestTab UI - 상수 파일 - const.js - 재사용 컴포넌트 - Label.jsx - ItemCard.jsx * [#7] feat: ✨ Slide UI 구현 - App.jsx - SlideContainer import - BestItem.jsx - 삭제 (미사용) - BestItems.jsx - ItemCard prop 추가 - BestTab.jsx - 스타일 수정 - SlideContainer.jsx - UI 구현 - SlideItems.jsx - UI 구현 - SlideArrowBtn.jsx - UI 구현 - ItemCard.jsx - 스타일 수정 - prop 추가 - Label.jsx - prop 추가 - 기본 값 추가 * [#8] feat: ✨ ShowMoreBtn UI 구현 - App.js - ShowMoreBtn import - ShowMoreBtn.jsx - UI 구현 * [#10] feat: ✨ Header Dropdown 구현 - App.js - Header 경로 수정 - Header.jsx - 경로 변경 - HeaderLeft & Right 분리 - HeaderLeft.jsx - 컴포넌트화 - Navigations 컴포넌트화 - HeaderRight.jsx - 컴포넌트화 - Navigations.jsx - 컴포넌트화 - Dropdown 구현 * [#13] feat: ✨ API에 fetch 요청 로직 구현 * [#13] feat: ✨ API 요청, 베스트 기능구현 - BestItems.jsx - API 데이터 동기화 - BestTab.jsx - useState, useEffect, API 요청 - BestTabContainer.jsx - API 데이터 동기화 - BestTabNavigator.jsx - API 데이터 동기화 - ItemCard.jsx - prop 변경 - Label.jsx - COLOR변수 추가 * [#15] feat: ✨ 상세 modal 페이지 UI 구현 - App.js - PopUpContainer import - PopUpContainer.jsx - UI 구현 - PopUpImages.jsx - UI 구현 - PopUpInformations.jsx - UI 구현 * [#16] feat: ✨ 모달 페이지 이벤트 구현중 * [#16] feat: ✨ 수량정보 컴포넌트 분리 * [#19] refactor: 🔨 리팩토링, 부족한 부분 추가 구현 - 파일 및 폴더 구조 변경 - common 폴더 생성 - Context.jsx - useContext 사용하여 prop drilling 개선 - 팝업 이벤트 구현 - 수량 변경 - 주문하기 - 주문결과 안내 메시지 UI * [#19] refactor: 🔨 리팩토링 * [#17] feat: ✨ dj-slider 폴더구조 구축 * [#17] feat: ✨ 슬라이드 1/2 구현 중 * [#23] refactor: 🔨 코드 리뷰 코멘트 반영 및 개선 * [#17] feat: ✨ 슬라이드 구현중/일부사항 수정 - util.js - price에 comma 붙이는 기능 구현 - PopUpItemCountContainer.jsx - price에 comma 붙이는 기능 import - ItemCard.jsx - price에 comma 붙이는 기능 import - 이미지 background로 수정 - Label.jsx - 라벨 배경색상 적용 * [#17] feat: ✨ 슬라이드 구현중 - 모듈화 - 시연을 위한 기능 구현을 위해 보류 * [#25] feat: ✨ 슬라이드 2/2 구현, API 데이터 동기화 - 슬라이드 명칭을 캐로셀로 변경 - API 데이터 동기화 - 캐로셀의 ItemCard를 children으로 변경 - 모듈화를 위함! - 아이템카드 mini, large 프로퍼티 추가 - 상세모달 캐로셀 추가 - 상세모달 스크롤 추가 - 모든 카테고리 보기 기능 구현 * [#27] feat: ✨ BestTab Skeleton UI 만들기 - Main.jsx - 시연을 위한 loop 설정 추가 - BestTab.jsx - SkeletonTab import - BestTabNavigator.jsx - 주석 제거 - SkeletonTab.jsx - Skeleton UI 구현 - DicoJsonCarousel.jsx - Carousel 구현중 * [#29] feat: ✨ PopUp Skeleton UI 만들기 - Context.jsx - 주석 제거 - BestTab.jsx - 주석 제거 - PopUpContainer.jsx - Skeleton import - PopUpItemsSlide.jsx - 주석 제거 - SkeletonPopUpContainerBody.jsx - Skeleton UI 구현 * feat: ✨ carousel loop 기능 구현 * [#31] feat: ✨ README.md 작성완료 Co-authored-by: kowoohyuk <kowoohyuk91@gmail.com>

zel0rd and others added 30 commits April 19, 2021 16:19

[ADD] FE First Push(CRA)

2151864

[ADD] App.js Structure design

efa3cb6

[CHORE]: styled-components 패키지 추가

1bec34f

* 런타임 때 필요할 것 같지 않아, 일단 dependenciesDev에 추가돼 있는데, 추후에 변경 될 수도 있을 듯

[ADD]: 모달 초기 구현

1b04315

* common/Modal 컴포넌트 추가. content 컴포넌트를 자식으로 둔 다음. content가 가운데 배치되도록 구현 * MenuDetailModal에서 common/Modal을 사용하고, content로 MenuDetail 컴포넌트를 사용하도록 구조를 짜봤음.

[ADD]: util디렉터리 생성

42bcec1

* 아직 거의 비어있음. * 전역적으로 사용될 config들이 저장될 Global.js * custom hook들이 있는 hooks 디렉터리

Merge pull request #1 from zel0rd/fe/feature/MenuDetailModal

298715f

Fe/feature/menu detail modal

[ADD]: reset.css 적용 (index.css수정)

ac0d117

[ADD]: 모달창 Preview 구현

5d7eb96

* 스타일 적용 * 이미지가 5개 미만일 시, 회색으로 채워지도록 * 클릭 로직 구현

Merge pull request #2 from zel0rd/fe/feature/MenuDetailModal

cc77697

Fe/feature/menu detail modal

[ADD]: 재사용 가능한 badge컴포넌트 추가

ff5bf4d

* common/badge.js * 추가하고 싶은 뱃지 있으면 위 파일안에다가 구현후 export에 추가하기

Merge pull request #3 from zel0rd/fe/feature/MenuDetailModal

da87ec2

Fe/feature/menu detail modal, common한 벳지컴포넌트 추가

[FIX]: 모달 크기 조정

29d4755

* 'OrderInfo'쪽 구현 도중에 조정한거라, 해당 부분이 살짝 포함 되어있음..

[ADD] react-icons 추가

ad415fa

[ADD] header style component로 변경

dbbdba0

[ADD] Header 구조 설계

e120a34

[ADD] header component 스타일 적용

3e744aa

[ADD]: 모달에서 쓰이는 Counter컴포넌트 구현

5d900ac

* 추후에 'common/'으로 뺄 가능성 농후

[FIX] header style 작업중

62145a7

[ADD]: 모달 우상단 주문정보UI 구현

010550c

* 하위 구성요소 'OrderInfo', 'SmallInfoContainer' 컴포넌트 추가 * 수량 변화에 따른 총 주문가격 로직 구현 * 아직 '주문하기'버튼 클릭 로직은 미구현(백엔드에서 선처리 필요)

[FIX]: 이벤트뱃지 폰트사이즈 수정

b94480a

Merge pull request #4 from zel0rd/fe/feature/MenuDetailModal

7127356

Fe/feature/menu detail modal

[ADD] header 제작 임시저장

8d383f5

Merge remote-tracking branch 'origin/fe/dev' into fe/feature/Header

123f3d8

[ADD] Header static resource component

252730e

[FIX] Header style

30c4e03

[Fix] Dropdown Function

96e14c9

Merge pull request #5 from zel0rd/fe/feature/Header

23645bc

Fe/feature/header nav button

[ADD] update MenuCard(large)

1ff8f7a

[ADD] update BestMenu temporal

6f07b1f

Merge remote-tracking branch 'origin/fe/dev' into fe/feature/BestMenu

ce6a84f

deprecated-hongbiii assigned cchoongh Apr 24, 2021

cchoongh and others added 12 commits April 24, 2021 21:31

[ADD]: Slider 끝부분 처리

392c8d8

* 전체의 아이템 개수가 화면에 보여질 아이템 개수로 딱 나눠 떨어지지 않을 때의 경우를 처리하는 로직 구현

Merge pull request #10 from zel0rd/fe/feature/Slider

61db40e

[ADD]: Slider 끝부분 처리

[ADD]: Slider 컨트롤 버튼 disabled기능 구현

c5cf716

* Slider쪽 코드도 같이 고침.. * onSlide콜백을 받도록 수정

Merge pull request #11 from zel0rd/fe/feature/MenuDetailModal

45f445d

[ADD]: Slider 컨트롤 버튼 disabled기능 구현

[FIX]: 통신관련 유틸 수정

6ddee4a

* useFetch() => useFetchData() 이름 변경 * Global객체에 server url관련 함수 추가

[ADD]: 왼쪽, 오른쪽 버튼 svg 추가

43bfdb9

[FIX]: Slider 스타일 살짝 수정

ffd5d0d

* position속성 absolute => relative

[DELETE]: 불필요한 MOCK 이미지 파일들 삭제

31e0d5a

[ADD]: 아이템 상세 모달 완성도 높이기

66beb47

* 추천 슬라이더 스타일 구현 * 추천 슬라이더 페이지 표시 구현 * 추천 슬라이더 버튼들 구현 * 전체적인 margin, padding 조정

Merge pull request #12 from zel0rd/fe/feature/MenuDetailModal

f7a1621

Fe/feature/menu detail modal

[ADD] BestMenu Tab function added

071b6f1

Merge pull request #13 from zel0rd/fe/feature/BestMenu

794c546

[ADD] BestMenu Tab function added

zel0rd added 5 commits April 26, 2021 17:00

[UPDATE] 베스트 메뉴에서 할인 가격이 없는 경우 처리

e7f889c

LargeCard에서 할인가격이 없는 경우 render 정보 수정

[ADD] change LargeCard space-between

f34e0ef

Merge pull request #14 from zel0rd/fe/feature/BestMenu

79c00b9

Fe/feature/best menu

[UPDATE] DELETE Margin Left,Right

85396ba

Merge pull request #15 from zel0rd/fe/feature/BestMenu

1ca3c3c

[UPDATE] DELETE Margin Left,Right

crongro approved these changes Apr 26, 2021

View reviewed changes

crongro merged commit 4fb0074 into codesquad-members-2021:team-13 Apr 26, 2021

sallyjellyy pushed a commit that referenced this pull request Apr 29, 2021

Merge pull request #29 from d-h-k/BE-Dong

c106381

Be dong

wheejuni pushed a commit that referenced this pull request Apr 29, 2021

Merge pull request #29 from ghojeong/feature/be/mock-api

1dd8e69

[BE] mock-api 샘플 데이터 추가

wheejuni pushed a commit that referenced this pull request Apr 29, 2021

Merge pull request #29 from swing-park/feature-create-detail

e7d652d

Feature create detail

hayoung123 pushed a commit that referenced this pull request May 2, 2021

Merge pull request #29 from hayoung123/feature/modal-carousel

6a81984

Feature/modal carousel

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[team-13 FE] 1주차 PR #29

[team-13 FE] 1주차 PR #29

cchoongh commented Apr 23, 2021 •

edited

Loading

crongro commented Apr 26, 2021

crongro commented Apr 26, 2021

crongro commented Apr 26, 2021

crongro commented Apr 26, 2021

crongro commented Apr 26, 2021

crongro left a comment

crongro Apr 26, 2021

crongro Apr 26, 2021

crongro Apr 26, 2021

crongro Apr 26, 2021

crongro Apr 26, 2021

crongro Apr 26, 2021

crongro Apr 26, 2021

crongro Apr 26, 2021

crongro Apr 26, 2021

crongro Apr 26, 2021


		// TODO: default slide buttons, disable slide button

		function Slider({ itemCntOnView, items, onSlide, defaultBtn = true, pageable = false }, ref) {

[team-13 FE] 1주차 PR #29

[team-13 FE] 1주차 PR #29

Conversation

cchoongh commented Apr 23, 2021 • edited Loading

crongro commented Apr 26, 2021

crongro commented Apr 26, 2021

crongro commented Apr 26, 2021

crongro commented Apr 26, 2021

crongro commented Apr 26, 2021

crongro 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

cchoongh commented Apr 23, 2021 •

edited

Loading