반응형
Jake Seo
제이크서 위키 블로그
Jake Seo
전체 방문자
오늘
어제
  • 분류 전체보기 (715)
    • 일상, 일기 (0)
    • 백준 문제풀이 (1)
    • 릿코드 문제풀이 (2)
    • 알고리즘 이론 (10)
      • 기본 이론 (2)
      • 배열과 문자열 (8)
    • 데이터베이스 (15)
      • Planet Scale (1)
      • MSSQL (9)
      • 디비 기본 개념 (1)
      • SQLite 직접 만들어보기 (4)
    • 보안 (7)
    • 설계 (1)
    • 네트워크 (17)
      • HTTP (9)
      • OSI Layers (5)
    • 회고 (31)
      • 연간 회고 (2)
      • 주간 회고 (29)
    • 인프라 (52)
      • 도커 (12)
      • AWS (9)
      • 용어 (21)
      • 웹 성능 (1)
      • 대규모 서비스를 지탱하는 기술 (9)
    • 깃 (7)
    • 빌드 도구 (7)
      • 메이븐 (6)
      • 그레이들 (0)
    • Java (135)
      • 이펙티브 자바 (73)
      • 자바 API (4)
      • 자바 잡지식 (30)
      • 자바 디자인 패턴 (21)
      • 톰캣 (Tomcat) (7)
    • 프레임워크 (64)
      • next.js (14)
      • 스프링 프레임워크 (28)
      • 토비의 스프링 (6)
      • 스프링 부트 (3)
      • JPA (Java Persistence API) (5)
      • Nest.js (8)
    • 프론트엔드 (48)
      • 다크모드 (1)
      • 노드 패키지 관리 매니저 (3)
      • CSS (19)
      • Web API (11)
      • tailwind-css (1)
      • React (5)
      • React 새 공식문서 요약 (1)
      • HTML (Markup Language) (5)
    • 자바스크립트 (108)
      • 모던 자바스크립트 (31)
      • 개념 (31)
      • 정규표현식 (5)
      • 코드 스니펫 (1)
      • 라이브러리 (6)
      • 인터뷰 (24)
      • 웹개발자를 위한 자바스크립트의 모든 것 (6)
      • 팁 (2)
    • Typescript (49)
    • 리눅스와 유닉스 (10)
    • Computer Science (1)
      • Compiler (1)
    • IDE (3)
      • VSCODE (1)
      • IntelliJ (2)
    • 세미나 & 컨퍼런스 (1)
    • 용어 (개발용어) (16)
      • 함수형 프로그래밍 용어들 (1)
    • ORM (2)
      • Prisma (2)
    • NODEJS (2)
    • cypress (1)
    • 리액트 네이티브 (React Native) (31)
    • 러스트 (Rust) (15)
    • 코틀린 (Kotlin) (4)
      • 자바에서 코틀린으로 (4)
    • 정규표현식 (3)
    • 구글 애널리틱스 (GA) (1)
    • SEO (2)
    • UML (2)
    • 맛탐험 (2)
    • 리팩토링 (1)
    • 서평 (2)
    • 소프트웨어 공학 (18)
      • 테스팅 (16)
      • 개발 프로세스 (1)
    • 교육학 (1)
    • 삶의 지혜, 통찰 (1)
    • Chat GPT (2)
    • 쉘스크립트 (1)
    • 컴파일 (2)
    • Dart (12)
    • 코드팩토리의 플러터 프로그래밍 (4)
    • 플러터 (17)
    • 안드로이드 스튜디오 (1)
    • 윈도우즈 (1)
    • 잡다한 백엔드 지식 (1)
    • 디자인 패턴 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • item8
  • 객체복사
  • 외래키 제약조건
  • NEXT JS
  • Next.js
  • 슬로우 쿼리
  • 참조 해제
  • 자바스크립트
  • Java
  • 이펙티브 자바 item9
  • 이펙티브 자바
  • 이펙티브자바
  • prerendering
  • MSSQL
  • 스프링 검증
  • 서버리스 컴퓨팅
  • bean Validation
  • 플라이웨이트패턴
  • 싱글톤 패턴
  • 자바 검증
  • item9
  • 메이븐 골
  • next js app
  • 싱글톤
  • 빈 검증
  • 러스트
  • 싱글턴
  • 팩터리 메서드 패턴
  • 프로그래머의 뇌
  • Pre-rendering
  • 자바 디자인패턴
  • pnpm
  • 메이븐 페이즈
  • 자바
  • 디자인패턴
  • serverless computing
  • 자바스크립트 인터뷰
  • 토비의 스프링
  • item7
  • 자료구조
  • 메이븐 라이프사이클
  • 자바스크립트 면접
  • Javadoc 자바독 자바주석 주석 Comment
  • try-with-resources
  • 도커공식문서
  • 작업기억공간
  • rust
  • 느린 쿼리
  • 추상 팩터리 패턴
  • 알고리즘

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Jake Seo

제이크서 위키 블로그

자바스크립트 클린코드 원칙 간단 정리
자바스크립트

자바스크립트 클린코드 원칙 간단 정리

2022. 7. 26. 00:41

클린 코드의 특징

  • 응집도, 단일책임, 적당한 추상화를 지키는 코드이다.
  • 찾고 싶은 로직을 빠르게 찾을 수 있는 코드이다.
  • 유지보수 시간을 줄여주는 코드이다.

클린 코드는 짧은 코드가 아니다.

응집도

  • 하나의 목적을 가진 코드가 흩뿌려져 있으면 안 된다.
  • 같은 목적의 코드는 뭉쳐두자.

단일 책임

  • 하나의 함수는 하나의 역할만 해야 한다.
  • 하나의 일을 하는 뚜렷한 함수 이름을 짓자.
  • 함수가 뚱뚱해진다 싶으면 이 함수가 1개 이상의 일을 하고 있는 것은 아닌지 점검해보자.

때때론 함수 이름을 한글로 먼저 지어보고 가장 핵심을 짚는 이름이 무엇인지 고민해보자.

추상화

  • 함수의 세부 구현 단계가 제각각이면 안 된다.
  • 추상화 단계를 조절해 핵심 개념을 필요한 만큼만 노출해야 한다.
  • 너무 추상화 단계가 높아서 보여주어야 할 것을 안보여주는 것도 잘못이다.
    • 당장 몰라도 되는 디테일만 숨기자.
    • 필수적인 핵심 정보는 공개해야 한다.
  • 유연성을 방해할 때는 가끔 추상화를 깨는 행위도 필요하다.
  • 한 페이지 내부에서는 비슷한 추상화 수준을 가져가는 것이 좋다.
    • 코드를 읽는데 사고가 널뛰게 되면 좋지 않다.

해당 페이지의 코드를 빠르게 파악하려면 어떤 것들을 공개해야 하는지 고민해봐야 한다.

선언적 프로그래밍

  • 무엇을 해야할지만 알려주면, 세부 구현은 이미 되어있는 방식
  • '무엇'을 하는 함수인지 빠른 이해가 가능하다.
  • 세부 구현은 안쪽에 뭉쳐둔다.
  • '무엇'만 바꾸어서 쉽게 재사용이 가능하다.

무엇을 해야할지 구체적으로 작성하는 프로그래밍을 명령형 프로그래밍이라고 한다. 선언형 프로그래밍도 내부를 까보면 구체적인 코드를 가진 명령형 프로그래밍이다.

선언형 프로그래밍과 명령형 프로그래밍은 좋고 나쁘고로 구분되는 것이 아니라, 필요에 따라 취사선택할 뿐이다.

액션 아이템

담대하게 기존 코드 수정하기

기존 코드의 구조를 뜯는 것을 두려워해선 안 된다.

큰 그림 보는 연습하기

기능 추가 자체는 클린해도 큰 그림으로는 어지러운 코드일 수가 있다.

팀과 함께 공감대 형성하기

코드에 정답은 없으므로 각자 문제라고 생각하는 부분을 공유해 고쳐보자.

문서로 적어보기

클린 코드란 모호한 개념이므로 글로 적어서 명확하게 만들어보자.

  • 향후 어떤 점에서 위험해질 수 있는지
  • 어떻게 개선할 수 있는지
반응형
저작자표시 비영리 (새창열림)

'자바스크립트' 카테고리의 다른 글

ReferenceError: File is not defined 에러 해결 방법  (0) 2024.05.01
    '자바스크립트' 카테고리의 다른 글
    • ReferenceError: File is not defined 에러 해결 방법
    Jake Seo
    Jake Seo
    ✔ 잘 보셨다면 광고 한번 클릭해주시면 큰 힘이 됩니다. ✔ 댓글로 틀린 부분을 지적해주시면 기분 나빠하지 않고 수정합니다. ✔ 많은 퇴고를 거친 글이 좋은 글이 된다고 생각합니다. ✔ 간결하고 명료하게 사람들을 이해 시키는 것을 목표로 합니다.

    티스토리툴바