2023.04.02, weekly memoirs

 

 

 

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.

 

일주일에 두번 열심히 스터디를 나가고 있다.

취업 준비하는 동기들끼리 같이 있으니 정보 공유도 되고 무엇보다 큰 힘을 얻는 거 같다.

위코드에서 다같이 공부했던 생각도 많이 나고, 스터디 장소는 멀지만 일주일에 두번 빠지지 않고 다닐 생각이다 👍