2020-07-10

우아한테크캠프 8일차 #

코드리뷰 #

node 로 백엔드를 하다보면 shared 폴더를 만들고 환경을 잘 갖추고 백과 프론트가 공유하기도 한다.

• HTML은 구조

  • p 태그를 쓸 때는 paragraph인지

  • 글자를 크게하자 하고 h3를 쓰면 안된다.

  • list 태그 → 다음 홈페이지의 뉴스 리스트

• CSS는 스타일

프로젝트 구조 #

CSS, JS를 분리하는 경향

현대의 프레임워크는 컴포넌트 별로, 다른 방식으로 모으기도 함.

개발할 땐 항상 나눠서

소프트웨어가 항상 변경된다는 가정을 하고 개발하라. 서비스 코드가 변경이 된다.

좋은 코드를 만드는 방법, 변경이 용이한 코드. 변경을 했을 때 다른 코드에 영향을주지 않는 코드

변경될 때 영향을 덜 주고 수정도 쉽게 되고 기능도 추가되고 ...

나눠서 역할별로

CSS 공통 부분 > Global, common ...

모든 리팩토링은 중복부터

• JS 파일 자체는 모듈이기 때문에, is 등이 들어가면 어색해보일 수 있다.

매직넘버를 없애라 - 코드에서 숫자, 문자열을 쓸 때 분리해라.

JS에서 CSS를 조작할 일이 있을 때 → classList에 remove, add, toggle 등으로 조작한다. 스타일을 직접 조작하지 않음.

• 유지보수가 가능한 코드

• 가독성이 좋은 코드

• 테스트가 쉬운 코드

• 역할이 명확한 함수

• 접근할 일이 많으면 변수에 담아서

• 이벤트를 어디서 등록해야 할까?

• 조건도 함수로 나눠라

캠프의 목적 #

• 어떻게 모듈화를 잘할까

• 어떻게 변경이 용이한 코드를 만들까

• 프레임워크를 써도 모듈화가 자동으로 되는게 아니다

변수명 #

• 오픈소스를 자주 보면 도움이 된다.

• 좋은 회사면 동작하는 서비스 소스를 볼 수 있다

나만의 유틸리티를 만들어가는 걸 해보세요.

• 함수를 범용적으로

• 인풋이 있고 아웃풋이 있는 것이 테스트가 편한 코드

찾아보기 #

• setInterval 단점

• 왜 setTimeout을 재귀적으로 사용하는지

• ES 모듈

• 렌더링을 자주 일으키지 말아라

• 함수가 짧아서 좋다

• 과도할 정도로 나누는게 낫다

ES 모듈 #

• 프론트에서도 import export를 사용할 수 있다.

• 모듈 관리는 의존성 관리이다.

util은 범용성 있는 것, 비즈니스 로직과 무관한

백엔드에서 매직넘버를 사용하면 크리티컬한 이슈가 생긴다.

회원가입 로그인

→ 클라이언트에서 validation, 서버에서 validation을 해줘야 한다.

도구를 이해하고 써야한다.

aspective-oriented programming #

실제로 중요한건 유지 보수, hotfix가 자주 일어난다.