프리온 보딩 2주차 총 4번의 프로젝트를 진행하면서 2번의 밤을 세우는 일을 종종 경험하게 되었다. 종종 밤을 세우다 보니까 삶의 질도 떨어질고, 계획했던 일정도 무너지고 협업 방식 하는 데 있어서 문제가 있다고 느껴져서 협업 방식에 대한 논의와 팀 룰을 재정비하여 효율적으로 프로젝트를 진행하는 방법에 대해 논의한 결과 아래와 같다.
styled-components, typescript, react를 세 가지 기술을 사용하는 데 있어서 컴포넌트를 효율적으로 관리하기 위해서 아래와 같은 방법은 구성하여 컴포넌트를 만들었다.
// Sample.tsx
import React, { ReactElement } from 'react';
import { SCProps } from 'types/props';
import SampleProps from './Sample.type';
import * as S from './Sample.styled';
const Sample = ({
className,
children,
sampleId,
title,
primary,
}: SCProps<SampleProps>): ReactElement => (
<S.Sample className={className} primary={primary}>
<span>{sampleId}</span>
<span>{title}</span>
{children}
</S.Sample>
);
Sample.defaultProps = {
title: 'title',
primary: false,
};
export default Sample;
// Sample.styled.ts
import styled from 'styled-components/macro';
import SampleProps from './Sample.type';
export const Sample = styled.div<Pick<SampleProps, 'primary'>>`
width: 100px;
color: ${props => props.theme.color.primaryBlue};
`;
// Button.typs.ts
export default interface SampleProps {
sampleId: number;
title?: string;
primary: boolean;
}