weekly memoirs
이번 주에 한 일
✅ 공부
1.
포트폴리오를 만들고 있다.
디자인 때문에 너무 힘들어서 레퍼런스 찾아봤다가 엄청난 인터렉티브 UI를 보았다.
코드 구경가니 scss 로 만드셨던데 페이지가 scss라 훨씬 가볍게 돌아갔던 건가? 하면서도 scss 만으로도 이렇게 구현할 수 있구나 하는 당연한 생각을 한 거 같다.
지금 포트폴리오는 emotion.js 를 사용하고 있는데 코드를 재활용하려고 용을 쓰다보니
왜 아토믹 디자인이 만들어졌는지 이해가 가기도 했다.
아토믹 디자인 방식은 아니지만 이제껏 써보지 않은 방식으로 한번 써보았는데
👇 카드 공통 컴포넌트
//src/common/Card.tsx
/** @jsxImportSource @emotion/react */
import styled from '@emotion/styled';
interface LayoutProps {
size?: 'large' | 'medium' | 'small';
children: React.ReactNode;
}
interface Size {
width: string;
height: string;
margin?: string;
}
const sizes: Record<string, Size> = {
large: {
width: '800px',
height: '500px',
},
medium: {
width: '500px',
height: '500px',
},
small: {
width: '80vw',
height: '500px',
margin: '3%',
},
};
export const Card = styled.div<LayoutProps>`
${({ theme }) => theme.variables.flex('column')};
border-radius: 10%;
background: ${({ theme }) => theme.colors.grey1};
width: ${({ size = 'medium' }) => sizes[size]?.width || sizes.medium.width};
height: ${({ size = 'medium' }) =>
sizes[size]?.height || sizes.medium.height};
margin: ${({ size = 'medium' }) =>
sizes[size]?.margin || sizes.medium.margin};
`;
👇 꺼내쓸 때
//../Project.tsx
<Card key={id} size='small' ref={bannerRef}>
<S.ProjectTitle>{title}</S.ProjectTitle>
<S.projectImg src={projectImg} />
<S.ProjectDescription>
{description_1}
<br />
{description_2}
</S.ProjectDescription>
</Card>
1. Card 컴포넌트를 재활용하고자 함
2. 각각 Card 컴포넌트를 만들고 스타일만 빼서 쓰기보단 Card 컴포넌트를 하나로 두고 크기값만 바뀌길 원했음
3. small / medium / large 값의 크기를 따로 빼서 객체로 만든 후 Card 컴포넌트에 props로 넘겨줌
3-1. 값이 null로 나올 경우에도 UI를 그려주기 위해(타입스크립트) medium 을 기본값으로 지정
3-2. 객체 내의 키값을 찾을 수 있도록 "size => 변수명[size].width" 형식으로 작성
3-3. null 값이 들어가도 값을 찾을 수 있도록 옵셔널체이닝
4. Card 컴포넌트는 전체 layout을 공통으로 쓰기 위해 쓰이는 컴포넌트이기 때문에 무조건 {children} 값을 받음
=> 타입 지정
interface LayoutProps {
size?: 'large' | 'medium' | 'small';
children: React.ReactNode;
}
2.
포트폴리오를 열심히 만들다가도 지금 next.js 하기도 바쁜데 emotion.js 와 싸우고 있어도 되나..? 하는 생각이 종종 들기도 했다
사실 코드 신경 안 쓰고 기능 구현만 하자면 이틀이면 뚝딱할 일을 계속 잡고 있으니 이게 맞나하는 생각이 든다.
하지만 그러다가도 코드가 똑같이 다시 쓰이는걸 보면 너무너무 신경 쓰여서 결국 컴포넌트 구조를 다시 생각해보게 되고
그렇게 오늘까지 온 거 같다 ㅎ
그래도... UI 얼추 다 짜놨으니 이번 주에는 완성 되겠지.. 나 파이팅...!!!!
✅ 취업
1.
일주일에 두번 열심히 스터디를 나가고 있다.
취업 준비하는 동기들끼리 같이 있으니 정보 공유도 되고 무엇보다 큰 힘을 얻는 거 같다.
위코드에서 다같이 공부했던 생각도 많이 나고, 스터디 장소는 멀지만 일주일에 두번 빠지지 않고 다닐 생각이다 👍
'TIT' 카테고리의 다른 글
2023.04.16, weekly memoirs (0) | 2023.04.16 |
---|---|
2023.04.10, weekly memoirs (0) | 2023.04.10 |
2023.03.19, weekly memoirs (0) | 2023.03.19 |
2023.03.12, weekly memoirs (0) | 2023.03.12 |
2023.03.05, weekly memoirs (0) | 2023.03.05 |
댓글