[2nd_Project] WaffleCard

tab컴포넌트 scss함수 사용하기 import { rgba } from 'polished 색을 확장하려는데 투명도도 자동으로 상대적으로 지정하고 싶다 - scss rgb함수 사용 변하는 사이즈만큼 이동하고 싶다.. width값을 기준으로 하지 말고 좌표값으로

유효하지 않은 props값 예외처리 해주기 props에 어떤 값과 type들이 들어올 수 있는지 고려해서 전부 처리해줘야함 자식 컴포넌트 import안해도 가져오게하기

props으로 들어오는 이벤트 함수는 부모에 포함된 로직을 실행시켜주는 것 ⇒ 이벤트 발생 시 자신과 부모의 로직 둘 다 실행시켜주기 Home 페이지 구현 시작 - 각 컴포넌트마다 반응형 처리를 해줘야한다

컴포넌트 사용 시에 스타일 추가로 입혀주기 이미 만들어진 컴포넌트에 스타일 추가로 입히는 방법 이렇게 쓰려면 나머지 return 시에 나머지 props도 전부 넘겨줘야 한다 나머지 props을 이어받은 모든 자식 컴포넌트에게 적용된다 나머지 props는 가장 마

팀원 코드리뷰 시 배운 점 props으로 받아온 데이터 객체를 사용하기 쉽게 구조분해할당해준다. useMemo와 useCallback도 적절하게 사용한다 그 외 알게 된 점들 스타일을 인라인으로 적용하면 우선순위가 높게 잡하기 때문에 컴포넌트 사용 시 확장한 스타일

모달창을 라우팅으로 구현하려면 항상 Home화면이 떠있어야함 그렇게 되면 어떤 페이지든 Home컴포넌트가 렌더링되는 문제 => 루트 경로 외에 채팅 모달이 뜨는 경로에도 Home컴포넌트를 연결해주고, Home컴포넌트 내부에서 중첩라우팅을 걸어서 해결

탭 아이템 포커스를 현재 경로의 파라미터 기준으로 하게했는데 채팅 모달이 뜰 경우 경로에 각 탭아이템을 나타내는 파라미터가 사라져 포커싱이 해제된다 => 카드 생성 시 history push url경로에 현재 url파라미터를 추가해서 해결

url에 따라 다른 데이터를 받아 화면을 그려야했는데 한페이지에서 하려고하니 너무 복잡했다. => 카드들을 CardsContainer 컴포넌트로 분리하고 현재 parameter(CurrentParam)를 props으로 넘김 => CardsContainer 컴포넌트에서는

K(Keep) 기획부터 디자인, 컴포넌트를 만들고 페이지까지 구현하는 과정을 차근차근 체계적으로 잘 해나간 것 같다. 제대로 된 협업 사이클을 경험했고, 팀원들에게 배울점이 많았다. 깃,깃허브를 사용한 협업에서 큰 충돌없이 잘 진행됐다. 회의 전 팀원들 각각 회의 아젠

탭에 대한 정보를 상수로 저장해서 사용하도록 리팩토링했다탭포인터 이동을 해야하기때문에 인덱스가 꼭 필요했고상수를 객체들이 들어있는 배열의형태로 만들어서 구현했다프로퍼티에 대한 인덱스를 구할땐 findindex함수를 사용했다피드백인덱스 정보가 유의미한 정보는 아니기 때문

scrollWidth, clientWidth(ref로 접근)를 사용해 자식의 너비가 부모의 것보다 클 때 상태를 true로 바꿔준다출처

가이드 페이지 이미지 슬라이드 반응형 적용에서 애를 먹었다 이미지 사이즈가 다 다르고 텍스트가 2줄이 될 때 slide컨테이너의 높이가 변하는게 문제였다 → 이미지를 감싼 이미지 컨테이너의 높이를 정하고, → 텍스트와 이미지를 flex-direction: column,

요구사항 카드들이 자동으로 옆으로 이동하면서 순환하는 애니메이션 isOverflow가 true일 때 애니메이션 실행 카드 컨테이너에 마우스 hover시 애니메이션 중지, 해제하면 다시 실행 스크롤 하면 애니메이션 멈추고 스크롤 되도록 기능 구현 방법 전체 카드 각각을

문제점스크롤이 끝나면 useInterval을 중단 시키는 코드를 useInterval의 콜백함수 안에 작성해줬다.문제점은 delay초마다 스크롤이 끝난지 확인하는 로직이 실행되어 비효율적이다.해결책intersection observer를 도입하여, 마지막 카드를 감시

문제점/결과isPlayMove상태를 의존하기 때문에 useInterval(스크롤 애니메이션)이 재실행, 중지될 때마다 리렌더링이 발생한다. 이를 막기 위해 ref로 변경 시도했지만 원하는대로 동작하지 않았다..이유isPlayMove 상태가 바뀔 때마다 리렌더링되어, 바