TIL 20211026 [항해99 41일차]

이번주 내가 맡은 역할

Card CRUD

오늘 Card부분 앞면과 뒷면 Component 만들고 있는데 Eslint부분 오류에 많이 당황했다...😱

당황한 오류1.
-> 오류 메세지 : prop-types import should occur before import of ../elements

// before 코드 (오류 난 코드)
import React from 'react';
import { Grid, Image, Text } from '../elements';
import PropTypes from 'prop-types';

// after 코드 (오류 해결 코드)
import React from 'react';
import PropTypes from 'prop-types';
import { Grid, Image, Text } from '../elements';

• 해결 방안
  PropTypes를 elements import 위로 위치 변경해줬더니 해결됐다. import 위치로 오류가 생길줄은 예상하지 못해서 놀랬다.😳

당황한 오류2.
-> 오류 메세지 : Unreachable code detected.ts(7027)

// before 코드 (오류 난 코드)
const CardBack = ({ content, image, interest, stack }) => {
  return; 
    <Grid>
      <Grid>
        <Image scr={image} shape="rectangle" />
        <Text>{content}</Text>
        <Text>{stack}</Text>
        <Text>{interest}</Text>
      </Grid>
    </Grid>
  ;
};

// after 코드 (오류 해결 코드)
const CardBack = ({ content, image, interest, stack }) => {
  return (
    <Grid>
      <Grid>
        <Image scr={image} shape="rectangle" />
        <Text>{content}</Text>
        <Text>{stack}</Text>
        <Text>{interest}</Text>
      </Grid>
    </Grid>
  );
};

• 해결 방안
  이 오류는 return 옆에 ;이 있고, ()가 빠져있어서 난 오류였다. EsLint를 안쓸때는 return()를 신경을 전혀 안썼는데... 이제는 신경써야겠다😂

---

EsLint를 적용하면서 그전에는 정말 대충해도 어느정도는 실행이 됐구나를 실감하게 됐다... 지금은 린트를 적용해서 그런지 조금이라도 다르면 오류가 떠서 한번 실행하기가 쉽지않다.. 그래서 린트적용하고 코딩하는게 솔직히 힘들지만... 이기회에 깔끔한 코드를 작성하는 습관을 기르고 싶다!😂 위에 오류들처럼 당황스러운 오류들이 참많지만 그래도 린트를 포기하지말고 화이팅...!