[프리온보딩코스] 3주차 - 과제4

✍알게된 것과 느낀점

• 데이터 구조에도 설계가 필요하다
• CSS에서 할 수 있는 건 CSS에서 (일정 글자 수 이상이면 자르고 ... 붙이기 = ellipsis)
• 컴포넌트 내 변수 위치
• 조건부 렌더링, 삼항연산자 그만 사랑하자
• lodash의 uniqBy
• 리덕스 툴킷
• Redux DevTools
• 잊지말자 프론트엔드 클린코드

 

🔥그래서 해보는 정리

1. 데이터 구조에도 설계가 필요하다

생각해보면 자바로 프로젝트 할 때도 설계가 거의 개발이랑 맞먹게 걸렸었는데 크게 다를리가 없겠지..!

예를들면 저번 과제 리뷰인데, 사용자 등급이 있어서 각 등급별로 접근할 수 있는 게시판이 다른 경우에

위와 같이 access(접근할 수 있는 페이지)를 하나하나 적어주지 않고

해당 유저의 권한 level만 전달한 후 그에 따른 접근 가능 메뉴 데이터를 따로 관리해야 한다!

 

 

2. CSS에서 할 수 있는 건 CSS에서 

// 내용 생략
              if (summary.length > 200) {
                return summary.substring(0, 200) + '...';
// 내용 생략

과거의 나는 그랬습니다..😂 (슬픈 예감은 빗겨가지 않음ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ)

 

// 내용 생략
summary.length !== 0 ? summary : SUMMARY_NOT_EXIST

ellipsis와 관계없지만 고치고 싶으니 삼항연산자로 바꿔줍니다.

 /* css */
  
  .movie__summary {
    max-width: 80%;
    margin-bottom: 0.7rem;
    /* 글자수 제한 관련 */
    overflow: hidden;
    text-overflow: ellipsis; /* ... 을 표시함 */
    display: -webkit-box; /* 유연한 높이 증가를 위해 플렉스 박스 형태로 전환*/
    -webkit-box-orient: vertical; /* 플렉스 박스의 방향 설정 */
    word-wrap: break-word; /* 잘라버릴 글자를 단어 단위로 */
    -webkit-line-clamp: 4; /* 보여줄 줄의 갯수 */
    line-height: 1.7rem; /* 한 줄의 높이 */
    height: calc(1.7rem * 4); /* 총 높이 = 줄의 갯수 x 줄 높이 */
  }

그리고 여러 줄 글자 제한에 꼭 필요한건 width, height이다! 

scss를 사용하면 /* 글자수 제한 관련 */ 주석 밑부분을 @mixin으로 등록해서 사용해도 된다.

 

 

3. 컴포넌트 내 변수 위치

이건 첫번째 과제 할 때 느낀점과도 연결되는 부분이라고 생각한다.

코드 막 짜지 말기, 보기 좋은 코드 짜기, 왜 그렇게 짰는지 물어보면 이유를 말할 수 있을 정도로 생각하기

이건 미래의 나를 위해서도 내 코드를 읽을 다른 사람들을 위해서도 꼭!

 

컴포넌트 내에서도 가독성을 위해서 순서를 지켜서 적어주면 좋다고 한다.

1. import 순서도 경로 또는 연관에 따라 묶어주기, 필요할 경우 줄바꿈 등으로 가독성 확보하기
2. propType
3. 컴포넌트 정의
4. Styled Component
5. 간단한 상수 설정
6. 해당 컴포넌트에서만 사용할 함수

1. import도 '이 파일에서는 어떤 것들이 필요하구나' 하고 알 수 있도록 적어주어야 한다.
  - node modules
  - utils
  - 멀리 있는 컴포넌트
  - 근처에 있는 컴포넌트
  - style 관련
2. ts를 안 쓰면 적어주면 좋다.
  - 타입 오류 방지
  - 어떤 형식의 값을 관리하는지 한 눈에 파악 가능 (없으면 코드 다 읽어봐야 함)
3. 컴포넌트가 한 눈에 들어오도록 작성해주기.
4. 위와 같은 이유로 styled component는 컴포넌트 다음에 정의하기.
5. 간단한 상수, 간단한 data 등, 혹시 data가 객체에 너무 길면 외부 파일로 분리하기!
6. 공통으로 사용하는 utils성 함수는 밖으로 빼주기.

 

 

4. 조건부 렌더링, 삼항연산자 그만 사랑하자

아직도 if문을 너무너무 좋아하는 나지만(😭) 이제 삼항연산자와 and연산자를 사랑하도록 노력해봐야겠다.

하지만! 삼항연산자도 만능이 아니다! 너무 복잡해지면 알아보기 힘들기 때문!

false 일 때 null을 내보내면 &&조건으로 바꿔서 생각해보기, 혹은 조건부 렌더링이 정말 필요한지 다시 생각해보기.

 

 

5. lodash의 uniqBy

💡Lodash란?
js 유틸리티 라이브러리. array, collection, date, number, object 등이 있으며, 데이터를 쉽게 다룰 수 있도록 도와준다. 특히 배열 안의 객체들의 값을 핸들링 할 때 유용한데, 중복제거나 특정 값만 추출하기 등이 많이 쓰인다고 한다. 

그 중 uniqBy는 특정 값을 기준으로 고유한 값만 가져올 때 쓰인다.

uniqBy(데이터, 기준 값)

이번 과제에서는 items를 'id'값으로 확인해서 중복이 있으면 제외하고 화면에 출력해주는 부분이 있었다.

 

 

6. 리덕스 툴킷

리덕스 툴킷(Redux Toolkit)은 리덕스의 공식 개발 도구이다. https://redux-toolkit.js.org/

리덕스가 좋기는 한데 코드의 양이 mobx에 비해 많고 복잡한 단점이 생겨서 툴킷이 나왔다고 한다. (리덕스 알못이라 여기서부터 혼란이 생겼다...)

툴킷의 장점

- 툴킷을 사용하면 action type이나 action creator를 따로 생성하지 않아도 된다.

- 미들웨어 추가가 편리하다.

- immer가 내장되어 있어 mutable 객체를 사용해도 된다.

- redux-thunk가 내장되어 있어 비동기를 지원한다.

- 타입스크립트 지원이 잘 된다

 

얼른 리덕스 인강 듣고 와야겠다....😭😭😭

 

 

7. Redux DevTools

이번 과제를 하면서 알게 된 크롬확장 프로그램. (링크는 여기!)

이렇게 어떤 값들이 들어왔는지 한눈에 알 수 있다!! console.log로 하나하나 다 찍어보지 않아도.. 된다..!👍

 

 

8. 잊지말자 프론트엔드 클린코드

🙋‍♀️들어가기 전에!
클린코드 == 원하는 로직을 빠르게 찾을 수 있는 코드
 != 짧은 코드

토스의 진유림님의 클린코드 작성 방법! 다른 영상도 몇 개 봤었는데 볼 때 마다 말씀을 너무 잘하셔서 감탄하게 된다.

예리멘토님께서 수업시간에 말씀해주신 내용과 함께 정리하자면....

 

◾ 변수 

a. 의미있고 발음하기 쉬운 변수명 사용하기

b. 동일한 유형의 변수에 동일한 어휘를 사용하기 

 

◾ 함수

a. 함수 인자는 2개 이하가 좋음

b. es6의 비구조화 구문을 사용하는 것이 좋음

    - 그 함수의 시그니쳐(인자의 타입, 반환되는 값의 타입 등)를 볼 때 어떤 속성이 사용되는지 즉시 알 수 있음

    - 함수에 전달된 인수 객체의 지정된 기본 타입 값을 복제하며, 이는 사이드이펙트를 방지함

    - Linter를 사용하면, 사용하지 않은 인자에 대해 경고해주거나 비구조화 없이 코드를 짤 수 없게 할 수 있음

// good
function createMenu({ title, body, buttonText, cancellable }) {
  // ...
}

createMenu({
  title: 'Foo',
  body: 'Bar',
  buttonText: 'Baz',
  cancellable: true
});

// bad
function createMenu(title, body, buttonText, cancellable) {
  // ...
}

c. 함수는 하나의 행동만 해야 함 (매우매우매우 중요)

    - 함수가 하나 이상의 행동을 하면 작성하기도, 테스트하기도, 이해하기도 어렵다.

//good
function emailClients(clients) { // 이메일을 보내는 함수
  clients
    .filter(isClientActive)
    .forEach(email);
}

function isClientActive(client) { // 활성화 된 고객을 찾는 함수
  const clientRecord = database.lookup(client);
  return clientRecord.isActive();
}


//bad
function emailClients(clients) { // 함수 이름에는 email을 보낸다고 했는데..?
  clients.forEach(client => {  
    const clientRecord = database.lookup(client);
    if (clientRecord.isActive()) { // 고객중에서 활성화 된 고객을 찾는 기능도 있고?
      email(client);		// 이메일 보내는 기능도 있다?!
    }
  });
}

d. 함수는 단일 행동을 추상화 해야 함

    - 추상화 : 핵심만 남기고 상대적으로 덜 중요한 디테일은 숨기기

    - 단일 책임 원칙에 의거해서 함수는 꼭 하나의 일만 해야 함!
    - 함수 이름만 보더라도 어떤 일을 하는지 바로 알 수 있도록 해야 함

e. 매개변수로 플래그 사용하지 말기

//good
function createFile(name) {
  fs.create(name);
}

function createTempFile(name) {
  createFile(`./temp/${name}`);
}

//bad
function createFile(name, temp) { // temp로 갈리게 되는데 이런 경우에는 함수를 따로 작성하자
  if (temp) {
    fs.create(`./temp/${name}`); 
  } else {
    fs.create(name);
  }
}

f. 전역함수 사용하지 말기

    - 한때 유행했던 스타일이지만, 다른 라이브러리와 충돌이 일어날 수 있기 때문에 위험!

g. 주석 없이 코드로 말해라!

    - 나 혼자 공부하기위해 프로젝트를 클론한 뒤 깃을 끊고 한줄한줄 주석을 달면서 공부하는건 물론 가능! (환영!)

    - 하지만 제출(배포?)하는 프로젝트에는 주석 없어도 다른 사람들이 이해할 수 있도록 신경써서 작성하기

 

 

🚀과제 후기

어렵다.. 너무어렵다...ㅠㅠ 코드를 짜는것도 아직 기어가는 수준인데 다른 사람의 코드를 보고 고친다는 것..... 리덕스 공부의 필요성을 또 느꼈다 이거정말 더이상 미룰 수 없다.. 당장 시작해야만한다... 짝님들한테 코드 어떻게 보고 계시냐고 여쭤보고 최대한 비슷하게 이해하려고 노력했던 것 같다. 그리고 겹치는 부분을 찾아오면 괜히 반갑고.. 괜히 동질감 느끼고.. 내적친밀감 또 쌓이고.. 그랬다. 게더에서 계속 코드 같이 보면서 얘기하고 수정했는데 두분 다 유쾌하시고 잘 모르는 부분 물어보면 친절하게 알려주셔서 넘 감사했다. 

그리고 내가 원하는바를 확실하게 말할 수 있도록 기초지식을 키워야겠다고 느꼈다. 아 그거를 이렇게해서 저쪽에서... 가 아니고. 어떤 데이터를 어디에서 어디로 어떻게 넘기는지! 확실하게! 설명할 수 있도록! 노력해야겠다. 내가 이상하게 말해도 찰떡같이 해석해서 수정사항을 반영해주신 이번 짝님들에게 감사인사를 올리며 이번 후기는 마무리....... 열심히하자! 

 

 

👀참고 (감사합니다!)

https://junistory.blogspot.com/2017/06/css-ellipsis.html

CSS에서 ellipsis('...')를 처리하는 방법

https://webdir.tistory.com/483

CSS로 글자 자르기 - 한 줄, 여러 줄

https://webisfree.com/2020-09-17/lodash-uniqby()-%EB%A9%94%EC%86%8C%EB%93%9C-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0 

lodash uniqBy() 메소드 알아보기

https://blog.rhostem.com/posts/2020-03-04-redux-toolkits

Redux Toolkit을 활용한 React 상태 관리

https://medium.com/@caffeinick/es6-syntax-destructuring-assignment-9f37cb5817cf

ES6 Syntax — Destructuring Assignment

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters

Rest parameters - JavaScript | MDN