[프리온보딩] 220525 그룹과제 #3

그룹과제 #3

공식적인 내생각

가끔 삘받아서 지금 코딩하지 않으면 안될 것 같은 때가 있다

오늘이 그날이었다… 새벽 6시까지 작업하고 풀리퀘 넣고 8시인가 9시에 잤다

덕분에 예정했던 구현내용은 다 끝나고 삭제버튼만 남아서 일어나서 마저 하니까 끝났다

수정 삭제 추가까지 구현했으니 더 추가할 건 없어보인다 이제 리드미 열심히 작성하자….

다음과제들 분량 많아보이던데 이번주보다 빡셀 것 같다 언제쯤 필라테스를 다시 갈 수 있을까요

작업 내용

Array.reduce를 통해 새 배열 만들기

const newAds: IAd[] = prevData
    ? adsData.ads.reduce((acc: IAd[], curr: IAd) => {
            if (curr.id !== newAd.id) acc.push(curr)
            else acc.push(newAd)
            return acc
        }, [])
    : [...adsData.ads, newAd]

prevData 여부에 따라 수정인지, 추가인지 결정할 수 있도록 하느라 삼항연산자를 사용하였다

여기서 reduce를 사용하여 새 배열을 만든 이유는 광고 수정 시 해당 id의 광고 내용을 업데이트해야 하기 때문이다

따라서 기존 배열을 돌면서 curr의 id가 같으면 원래 데이터 대신 새 데이터 (newAd) 를 push하고, 그 외의 경우엔 기존 데이터 (curr) 를 그대로 push하여 순서를 지켜주었다

이게 순서가 꼬이면 출력 순서도 꼬이므로… 순서를 지켜주고 싶었다

reduce는 배열의 모든 값을 돌면서 명시된 함수를 실행하고, 그 결과로 acc를 업데이트하고, 모든 값을 돈 뒤의 acc을 반환한다 (curr은 배열의 각 값이 들어간다)

마지막 인자는 acc의 초기값이므로, 배열을 반환하고 싶다면 빈 배열을 넣으면 된다

acc에 push나 concat 등의 메서드를 사용하여 curr을 추가하면 이전 값까지 저장된 배열에 새 값이 추가되므로… 굳이 let arr = [] 위에 따로 선언해주고 map이나 forEach로 push해가면서 새 배열을 만들 필요가 없다

Array.filter를 통해 값 삭제된 배열 만들기

ads: adsData.ads.filter((ad: IAd) => ad.id !== id),

filter 메서드는 지정한 조건에 맞는 데이터만 포함된 새 배열을 반환하므로 이를 이용하여 광고의 id값이 일치하는 경우에 대해 데이터를 삭제할 수 있다

삭제 버튼을 누르면 삭제를 누른 광고의 id만 받아오고, 이 id를 전역 adsData의 모든 광고 데이터들과 비교하여 id가 같지 않은 광고들만 남겨두었다

공용 컴포넌트 밖으로 빼기 (feat: children)

interface IProps {
  type: 'button' | 'submit'
  onClick?: MouseEventHandler<HTMLButtonElement>
  children: ReactNode
  className?: string
}

const Button = ({ type, onClick, children, className }: IProps) => {
return (
    <button className={cx(styles.buttonWrapper, className)} type='button' onClick={onClick ?? undefined}>
        {children}
    </button>
)};

똑같이 생긴 버튼이 자주 등장해서 아예 스타일을 적용한 버튼을 분리해주었다

컴포넌트의 props로 children을 받으면 커스텀 컴포넌트 안에 자식 컴포넌트나 태그를 넣을 수 있다

props가 존재하지 않을 수도 있다면 (예시에서 onClick) 연산자를 통해 undefined를 넣어주면 된다 (굳이 if문으로 분리할 필요가 없다)

classNames를 추가로 입력받아 classnames 라이브러리를 통해 클래스 2개를 중첩하여 넣어주었다

커스텀 컴포넌트 만들기 마스터다 이제 짱이다 하하

박스 내부에 그림자 주기

box-shadow: inset 0 0 0 2px colors.$WHITE;

적용 전

적용 후

box-shadow 속성에 inset을 넣으면 요소의 바깥이 아니라 안쪽으로 그림자가 생긴다

세로, 가로 오프셋은 0으로 설정하여 정중앙을 기준으로 그림자가 지도록 하였고, 흐림 정도 (blur) 도 0으로 설정하여 딱딱하게 만듦으로써 테두리를 그려주었다

마지막 2px는 퍼짐 정도 (spread) 로, 안쪽에 2px만큼의 흰색 테두리를 그려주는 것과 같은 의미이다

선택된 라디오 버튼이 조금 더 직관적으로 보일 수 있도록 흰색 안쪽 테두리를 넣어 수정하였다