[SidePJ] 깃허브 Issue Cracker 1부 - 프로젝트 시작

마지막 프로젝트를 시작했다! 

벌써부터 끝이 너무 아쉽지만 그래도 이번 프로젝트도 더더더 열심히 해보고자 한다.

 

Issue Tracker Issue Cracker 🍪 시작! 

 

이번 프로젝트는 Raccon , pyro, 노을, Neo와 함께하는 5인 대가족!!!!!! ( 다같이 밥도 못먹음!@ )

우리의 목표는 이것!

1) 타입스크립트와 친해지기 

2) Recoil 이랑도 친해지기 

3) 에러처리와 최적화까지

4) CSS 강박에서 벗어나자!!!! ( 과연 될까 )

 

단순히 깃허브 이슈 크래커 완성을 넘어서 리코일 라이브러리를 찐하게 이해하고 직접 구현해보는 시간을 가질 예정이다.

그러기 위해서는 첫주부터 달려야 하는데 면접이 하나 있어서 마음이 급하긴 하지만 열심히 해봐야지! 

게시글을 쓰던 중에 타입에러인 경우가 많아  타입에러인 경우에 #type 태그를 붙여놓겠습니다 😜

 

---

📌 Typescirpt 로 OAuth 구현!

typescirpt 로 OAuth 구현해보며 겪은 난관들

 

1) Callback.tsx 의 타입 #type

 

import { RouteComponentProps } from 'react-router-dom';

const Callback = ({ history, location }: RouteComponentProps): JSX.Element => {
  const authUri = `http://`
  const { code } = qs.parse(location.search, {
        ignoreQueryPrefix: true,
      });
    
    //중략
   history.push('/main/issue-list');
   //중략

타입스크립트가 처음이다 보니  React 의 Component로 return 한 것이 정확히 어떤 타입인지 헤맸는데, 

JSX.Element였다 .

그리고 Callback 안에서 사용하는 history와 location 의 타입은 RouteComponentProps다

 

실제 RoutComponentProps  내부를 뜯어보면  이렇게 생겼다.

export interface RouteComponentProps<
    Params extends { [K in keyof Params]?: string } = {},
    C extends StaticContext = StaticContext,
    S = H.LocationState
> {
    history: H.History<S>;
    location: H.Location<S>;
    match: match<Params>;
    staticContext?: C;
}

 

✅ small Tip~

처음 코드 구현 시에는 타입어떤걸 지정하는지 모르겠어서 엄청 해맸느데 , 

mac기준 ( command + 클릭) 하면 해당 타입의 내부를 뜯어볼 수 있다! 매우 좋음 (라쿤이 은연중에 알려주심) 

 

 

 

 

 

---

📌 Typescirpt로 Material UI 사용기

❖  Icon Tabs 커스텀 스타일 입히기

기본

Expected

원래 이렇게 아이콘과 라벨이 coloumn형태로 되어 있느데, 내가 하고싶은건  아래와 같은  row 정렬 과 크기 조정

 

1) row 정렬

원본

 <Tab icon={<FlagIcon />} label="마일스톤" />

수정

<Tab
        className={classes.tabWrapper}
        label={
          <div>
            <FlagIcon style={{ verticalAlign: 'middle' }} /> 마일스톤
          </div>
        }
      />

이렇게 바꿔줌으로써 겨우 성공!!!!!!!

참고: https://github.com/mui-org/material-ui/issues/11653

 

 

 

2)  click Handler #type

처음 meterial UI의 Tab을 사용하는 중에 이벤트 타입 지정에서  계속 오류가 났다.

 

타입스크립트 단하나의 장점 (??)인 제안메세지를 보니 Record<string, never >를 넣어보라해서 넣었더니 어떨결에 성공.?

export default function TabList(): JSX.Element {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  const handleChange = (
    event: React.ChangeEvent<Record<string, unknown>>,
    newValue: number
  ) => {
    setValue(newValue);
  };

  return (
    <Tabs
      value={value}
      onChange={handleChange}

* never 과 unknown 의 차이는  -> https://simsimjae.tistory.com/464

참고:https://github.com/mui-org/material-ui/issues/17454 

 

3) style custom

Material UI를 사용하면서 가장 불편한 점은 style-components로 custom하게 스타일지정하기가 어렵다는 점 , 그로 인해 방법을 찾던 중 useStyles로스타일을 지정한다는 점을 알아냈다.  

 

---

❖ export 에러

cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module. TS1208

해결과정 -> https://rrecoder.tistory.com/151

---

📌  Material UI 에서  styled-componets 사용하기

같은 조인 이아먼스 , 어터먼스께서 탐구해준 끝에 좋은 내용을 알게 되었다! 

기본적으로는 material  UI에서 설정한 스타일이 styled-components에서 지정한 스타일을 먹는다 

styled  componets가 선언된 후에 -> materialUI에서  인라인으로 선언되기 때문 

 

해결방법  injectFirst

<StylesProvider injectFirst> 를 통해서 Material-UI → Styled-Components 의 순서로 바꿀 수 있다.

하단 블로그에서 injectFirst 사용법을 확인할 수 있다 .

 

그렇다면 materialUI의 useStyle을 굳이 사용한느 이유는?

: useStyle 를 사용하면 materialUI의 타입을 알아서 추론해주는 장점이 있다. 

참고:https://iamssen.medium.com/material-ui-%EC%99%80-styled-components-%EB%A5%BC-%EC%84%9E%EC%96%B4%EC%84%9C-%EC%93%B8%EB%95%8C-%EC%84%B8%ED%8C%85%ED%95%B4%EC%A4%98%EC%95%BC-%ED%95%98%EB%8A%94-%EA%B2%83-76570015a89

 

 

---

📌 IOS, FE, BE 회의

❖ 게시글 저장 시 이미지 저장하는 방법에 대한 고민

파이로의 정리

 

1) 게시글을 저장할 때 이미지를 저장

장점: 저장소 낭비가 없음 

단점: 에러 처리를 확실히 해야 함

 

2) 게시글 작성 중 이미지를 선택할 때 이미지 저장

장점: 구현이 더 쉽다

단점: 저장소 낭비

 

🙂 생각보다 웹과 모바일에서 선호하는 사용자 UI 가 다르다는 걸 깨달았다.

IOS : 많은 버튼들이 있는 것 보다 한가지 버튼으로 깔끔하게 처리하는 것이 좋다

web: 구성을 잘 하면 버튼이 늘어나는 것은 크게 상관 없다 라는 결론이 나서 일단 개발을 진행하며 추후에 추가할 것을 추가하기로 했다.

 

 

❖ 백엔드 API 로컬 

이전까지는 api 테스트를 해보려면 BE단에서 배포를 해야지 api요청 과 응답이 가능했기 때문에 

배포 전까지는 FE단에서 알아서 mock데이터를 만들어 사용한후 데모 전에 해당 값들을 변경해야 했다.

이 과정에서 FE단이 만든 mock과 BE의 API 변수명 같은게 정확히 협의되지 않으면 오류가 발생해 번거로움이 있었는데 

 

BE단이 구현 진행중이 백엔드 서버를 내 컴퓨터에서 도커로 오픈할 수 있게 설정해놓으셔서 내가 원할때마다 도커로 열어서 사용했다!

즉 , 내 pc에서 서버를 도커로 돌리고, 그 안에 잇는 db에 요청을 보내고 응답을 받을 수 잇/다. 

백엔드 없이도 API 요청을 해볼 수 있다. 파이로 와 노을 감사해요 ㅠㅠㅠ

 

❖ Component간 관계도 회의 

오늘은 각 component들의 관계에 대한 회의를 했다.

역시나 BE, IOS, FE 의 관점에 차이가 있음에 재밌었다.

BE: 일단 BE는 저 하나하나의 요소를 entity로 칭한다.   각 엔티티의 1:N 관계를 미리 상세히 이해하고 성립한다.

FE : View 위주로 component를 나눈다. 사용자 시나리오에 맞춰 차근차근 관계를 이해하고 성립한다.

IOS: FE와 비슷하긴 한데 , 용어나 그런것들이 조금씩 다르다 .

 

 

---

📌 1차 PR 후 코드리뷰

1차코드리뷰를 다시 보니 그당시 고민이 새록새록 떠오른다.

그 당시 가장 고민됐던 것은

 

📌 다양한 종류의 버튼을 효율적으로 선언하기

참고 - Material UI 의 Button사용중입니다

 

ButtonGroup Component

입력받는 type에 따른 Button을 가져옴

interface IButton {
  classes: IButtonType;
  name: string;
  color?: string;
  icon?: JSX.Element | undefined;
}

const ButtonGroup: FC<Prop> = ({ type, name, color = 'white', icon }: Prop) => {
  const classes = useButtonStyles();

  return {
    large: <ButtonLarge {...{ classes, name, color }} />,
    medium: <ButtonMedium {...{ classes, name, color }} />,
    smallFill: <ButtonSmallFill {...{ classes, name, color, icon }} />,
    smallBorder: <ButtonSmallBorder {...{ classes, name, color, icon }} />,
    mediumText: <ButtonMediumText {...{ classes, name, color, icon }} />,
    smallText: <ButtonSmallText {...{ classes, name, color, icon }} />,
  }[type] as JSX.Element;
};

export default ButtonGroup;

그 각각의 Button들 

function ButtonLarge({ classes, name, color }: IButton) {
  return (
    <Button
      variant="contained"
      className={classes.buttonLarge}
      style={{
        backgroundColor: `${color}`,
        color: `${color === 'white' ? '#222' : '#fff'}`,
      }}
    >
      {name}
    </Button>
  );
}

사용 시

<ButtonGroup type={SMALL_FILL} name='이슈작성' icon={<AddIcon style={{ fontSize: 16 }} />} />

이렇게 필요한 속성들을 넣으면 짜잔~ 버튼 등장

하지만 이친구들의 type은 무엇일까요?

 

앞서 각 Button 컴포넌트들이 받을 props는 IButton 인터페이스를 받고 있는데 그안의 classes 는 IButtons를 받고 있다.

 

type IButtonType = ClassNameMap<
  | 'buttonLarge'
  | 'buttonMedium'
  | 'buttonSmallFill'
  | 'buttonSmallBorder'
  | 'buttonMediumText'
  | 'buttonSmallText'
>;

IButtonType은 바로 이것!

 

useButtonStyles를 따로 이렇게 만들었고

import { makeStyles } from '@material-ui/core/styles';

const useButtonStyles = makeStyles(() => ({
  buttonLarge: {
    width: '340px',
    height: '64px',
    fontSize: '18px',
    borderRadius: '20px',
  },

Material UI의 Button component들에게 개개인의 style 속성을 부여하기 위해 

makeStyles를 사용했고 이 style은 ButtonGroup에서 classes로 ButtonCompoent 에게 전달됨 

 

ButtonGroup 

const ButtonGroup: FC<Prop> = ({ type, name, color = 'white', icon }: Prop) => {
  const classes = useButtonStyles();

  return {
    large: <ButtonLarge {...{ classes, name, color }} />,
    medium: <ButtonMedium {...{ classes, name, color }} />, 
    //중략
    }}
    
  function ButtonLarge({ classes, name, color }: IButton) {
  return (
    <Button
      variant="contained"
      className={classes.buttonLarge}
    >
      {name}
    </Button>
  );
}

이렇게 전달받아서 스타일 지정 가능!!!!

---

📌 TypeScript 에서 styled-components 에 속성 넘겨주기

스타일 컴포넌트에 img라는 함수를 가지고 잇느데

 그 안에 props로 넣고 싶으면 img가 기존에 가지고 있는 속성 명으로 props를 넘겨주어야 한다.

 

ProfileImg 컴포넌트

interface ProfileImgProps {
  src: string;
  style: any;
}

const ProfileImg = ({ src, style }: ProfileImgProps): JSX.Element => {
  return <ProfileImgStyle {...{ src, style }}></ProfileImgStyle>;
};

export default ProfileImg;

const ProfileImgStyle = styled.img`
  width: ${({ style }) => `${style?.width}px`};
  height: ${({ style }) => `${style?.height}px`};
  border-radius: 70%;
`;

가령 예시로 ProfileImg컴포넌트가 width를 직접 받아서 적용하고 싶다면 

ProfileImg 의 props는 style, width등  기존 img라는 함수가 가지고 있는 속성을 사용해야 한다.

사실상 styled.img 라는건 img라는 함수를 불러와 사용하는 것이기 때문에 그안에서 부를 수 있는 요소를 받을 수 있다.

 

사용시 

<ProfileImg style={{ width='20px', height='30px' }} />

이런느낌을 사용이 가능하다.