⛏️
공부방
  • README.md
  • 프로젝트
    • ft_transcendence
      • 설계
        • 0. 프론트 디자인
        • 1. BackboneJS 뷰 객체
        • 2. API 설계
        • 3. 레일즈 라우팅 구현
        • 4. DB 설계
        • 5. 채널 설계
    • slab-saver
    • react-payment
  • 공부
    • HTML, CSS
      • GRID
      • emmet
      • position
      • CSS Unit
        • 단위 정리
        • 기준을 정해보자
        • em의 정확한 기준은 뭐야?
      • flex
      • NAVBAR 실습
      • 유튜브 화면 만들어보기
    • SQL
      • 이론
        • 1강 데이터베이스
        • 2강 다양한 데이터 베이스
        • 3강 데이터베이스 서버
      • 명령어
        • DB 관리
        • TABLE 관리
        • Constraints
        • SQL 명령어 - 1
        • SQL 명령어 - 2
        • SQL 명령어 - 3
        • SQL 명령어 - 4
        • SQL 명령어 - 5
    • Ruby
      • 루비 객체와 클래스
      • 곡괭이
        • Chapter2. Ruby.new
        • Chapter3. 클래스, 객체, 변수
        • Chapter4. 컨테이너, 블록, 반복자
        • Chapter5. 기능 공유하기
        • Chapter6. 표준 타입
        • Chapter8. 메서드 파헤치기
    • Python
      • 유용한 링크
    • RubyOnRails
      • 아직 정리하지 못한 것들
        • RSPEC 을 이용한 테스트 완전 자동화
        • 레일즈 이니셜라이징 과정
        • 액션케이블 구체적으로 정리하기
        • 웹팩으로 자바스크립트 모듈 관리하기
      • ACTIVE JOB
        • 액티브잡의 기본
        • 실전! 액티브 잡을 이용한 스케쥴링
        • 서버를 껏다 키면 스케쥴링 된 이벤트가 사라진다!
      • ACTION CABLE
        • 액션케이블 Consumer를 이용해서 문제 해결
        • 액션케이블 연결 순서
      • ACTIVE STORAGE
      • 모델
        • validation
          • seeds 데이터 validation 스킵
          • validation 검사가 save, update, create 모든 경우에 일어난다
          • validator 클래스
          • 커스텀Validation
          • validates format(정규표현식)
        • 액티브레코드 find의 다양한 활용
        • 한 레코드에 동시 접속 막자!! with_lock
        • 레일즈 where 사용법
        • 레일즈에서 모델 관련 이슈
        • 모델이름바꿀때명심할것
        • 모델의 includes 메서드
        • 연관 모델을 다른 이름으로 설정하고 가져오기
      • 기본 상식
        • form으로 전달되는 params를 분석해보자
        • StrongParameter 쿼리 배열 받기
        • view helper로 디버깅 하는 방법
        • css 파일을 수정했는데 적용이 안된다?
        • StrongParameter 일반데이터와 객체 데이터 한번에 받기
        • wrap-parameter body가 두 번씩 날라오는 이유
        • 컬렉션 map에서 요소 스킵하는법
        • CASE를 이용해서 정렬(일반적인 정렬 X)
        • 문자열(정규표현식)
        • TIME ZONE 설정하기
        • 커스텀exception
      • RSPEC으로 모델 테스트하기
      • 한 눈에 읽는 루비 온 레일즈
      • Perfect RubyOnRails
        • Chapter1. 소개
        • Chapter2. RubyOnRails 기본
        • Chapter3. 스캐폴딩
        • Chapter7. 라우팅
        • Chapter8. 테스트
    • Javascript
      • var, let, const 차이
      • 브라우저 동작 원리
      • 디바운싱과 쓰로틀링
      • Tagged Template Literal(styled-components)
      • IntersectionObserver 를 사용해서 스크롤 이벤트의 부하 줄여주기
      • EVENT LOOP
        • 자바스크립트에서 어떻게 비동기적인 실행이 가능한걸까?
        • 이벤트 루프의 동작
        • setTimeout이 실행되면 어떤 동작이 일어날까?
        • 블록은 실행이 보장된다
        • 콜스택에 있는 블록이 보장된다는 점을 이용해서 브라우저 죽이기
        • setTimeout 무한반복으로 브라우저는 죽을까?
        • Promise 무한반복으로는 브라우저를 죽일 수 있을까?
        • RAF는 그럼 뭐야?
      • forEach는 반복도중 멈출 방법이 throw 밖에 없다!
      • 임시
        • 정리할 것 목록
          • 자바스크립트 기본 문법
        • 이벤트 임시 정리
      • 유용한 링크
      • arrow function 을 이용한 bind 이슈 해결
      • preventDefault - passive
      • CRITICAL-RENDERING-PATH
      • setInterval에 클로져 개념 사용하기
      • 오디오 문제 이슈
      • 자바스크립트의 식과 문
        • 식과 문이란 무엇인가...
        • 식
          • 1. 기본값과 래퍼객체
          • 2. 참조값과 가비지컬렉팅
        • 식을 조금 더 자세히 알아보자
      • prototype, [[Prototype]] 차이
      • export, import 학습
      • ESlint
      • 아주아주기본
        • Chatper1. 기본
        • Chapter2. 타입
        • Chapter3. 연산자
        • Chapter4. 제어문
        • Chapter5. 배열
        • Chapter6. 함수
        • Chapter7-1. 객체
        • Chapter7-2. 객체
        • Chapter8. 표준객체
        • Chapter9. DOM
      • 이벤트 위임
      • 이벤트가 버블링 되서 root 까지 가다보면... 부모의 부모의 ... 모든 click 이벤트를 발동시키는거 아니야?
      • classList
    • BackboneJS
      • Backbone Model 프로토타입에 메서드 구현하기
      • BackboneJS의 각 요소의 역할과 책임을 확실히 이해하자
      • Window 이벤트를 listenTo로 감시하기
      • 뷰 자신이 자신을 지워야 할 때를 감지하려면 어떻게 해야하는가?
      • 백본 VIEW의 remove와 jquery의 remove 는 다르다!
      • 백본 컬렉션 URL에 쿼리 붙이기
      • index.html.erb와 BackboneJS의 결합
      • 백본 모델과 컬렉션에서 fetch 를 통해 JSON 가져오기!
      • 모델은 urlRoot, 컬렉션은 url
      • ISSUE
      • Absolute Beginner
        • Part1
        • Part2
        • Part3
        • Part4
    • 문제풀이
      • 01. 유효한 팰린드롬(leetcode: 125)
      • 02. 문자열 뒤집기(leetcode: 344)
      • 03. 로그파일 재정렬(leetcode 937)
      • 04. 가장 흔한 단어(leetcode: 819)
      • 05. 그룹 애너그램(leetcode: 49)
      • 06. 가장 긴 팰린드롬 문자열(leetcode: 5)
      • 07. 두 수의 합(leetcode: 1)
      • 08. 빗물 트래핑
      • 09. 세 수의 합(leetcode: 15)
    • BlackCoffeeStudy
      • level1
        • 1주차
    • express
      • Untitled
      • 구글 애널리틱스 연결하기
      • passport를 활용한 로그인
      • express-init 명령어 사용
      • ec2와 DBeaver
      • mariadb 설치
      • sequelize 설치 및 사용법
        • sequelize 설치
        • sequelize-cli 사용법
        • 모델 간 연관관계 맺기
        • Hook 사용하기
      • express-ejs-layout 활용하기
      • Bootstrap
      • npm install로 설치한 모듈 ejs에서 사용하기
      • 미들웨어
    • cypress
      • window.alert 테스트는 어떻게 하지?
      • 상수를 어디에 저장할건가?
      • before()와 beforeEach()
    • aws
      • aws로 프로젝트를 배포해보자!
      • nginx로 리버스프록시 서버를 만들자
      • github actions 로 푸쉬되면 자동으로 업데이트 하는 기능 만들어보기
    • react
      • Drag & Drop 를 이용해서 리스트 요소 순서 바꾸기
      • CRA에서 CRACO 사용하지 않고 절대경로 import(NODE_PATH)
      • useEffect내에서 state의 dependency 문제
      • IntersectionObserverAPI로 무한스크롤 구현
      • react-testing-library
        • 기본
        • react-router-dom 에서의 에러
        • event 발생시키기
        • Integration testing하기
        • async하게 렌더링 되는 요소 잡기
        • Mocking 하기
      • CRA로 만든 앱에서 절대경로로 import 해오기(alias하기)
      • 커스텀 훅 만들기
    • 타입스크립트
      • 조건부타입 (Conditional types)
      • Generics
      • Keyof 타입 오퍼레이터
      • Indexed Access Types
      • 타입 챌린지
        • easy
          • 00. Awaited
          • 01. Concat
          • 02. Exclude
          • 03. First Of Array
          • 04. If
          • 05. Includes
          • 06. Pick
          • 07. Readonly
          • 08. Length
          • 09. Tuple to Object
        • mediun
          • 01. Absolute
    • Firebase
      • 파이어스토어 규칙
    • 기타
      • 협업 프로세스
      • UUID
      • 구글애널리틱스 설치하기
      • 드림코딩 강의
        • 포트폴리오
          • CSS
            • nth-child
            • CSS 팁
          • 자바스크립트
            • 1. 스크롤에 따른 navbar 의 색 변경하기
            • 2. navbar 버튼을 누르면 해당 페이지로 스크롤링 되게 만들자
            • 3. 스크롤 다운 하면 arrow-up 버튼 나오게 하기
            • 4. project 필터링 구현
            • 5. project 필터링에 transition 효과 넣기
      • GIT
        • 기본 사용법 정리
        • git remote update - remote 브랜치 가져오기
  • 기타
    • 이것저것
      • 독서
        • 클린코드
          • Chapter0. 나는 왜 클린코드 책을 읽는가?
          • Chapter1. 클린코드
          • Chapter2. 의미있는 이름
          • Chapter3. 함수
          • Chapter4. 주석
          • Chapter5. 형식 맞추기
      • 용어
      • IDE
        • RubyMine
          • 실전이 중요!
          • 1. Editor Basic
          • 2. Navigation
          • 3. Completion
          • 4. Refactoring
          • 5. Code Assistance
      • MAC에서 살아남기
        • Alfred - Spotlight 업그레이드
        • Vimium
        • BetterTouchTool - 트랙패드
        • 구름 입력기 - ESC, `
        • Spectacle - 화면 분할
    • 원티드 프리온보딩
      • 1주차
        • 월요일
        • 목요일
      • 2주차
      • 3주차
      • 4주차
      • 5주차
      • 6주차
    • 일기장
      • 2020
        • December
          • 20201208(화)
          • 20201209(수)
          • 20201210(목)
          • 20201211(금)
          • 20201214(월)
          • 20201215(화)
          • 20201216(수)
          • 20201217(목)
          • 20201218(금)
          • 20201219(토)
          • 20201221(월)
          • 20201222(화)
          • 20201223(수)
          • 20201224(목)
          • 20201226(토)
          • 20201228(월)
          • 20201229(화)
          • 20201230(수)
          • 20201231(목)
      • 2021
        • January
          • 20210101(금)
          • 20210102(토)
          • 20210105(화)
          • 20210106(수)
          • 20210107(목)
          • 20210108(금)
          • 20210109(토)
          • 20210112(화)
          • 20210113(수)
          • 20210114(목)
          • 20210115(금)
          • 20210117(일)
          • 20210118(월)
          • 20210119(화)
          • 20210120(수)
          • 20210121(목)
          • 20210125(월)
          • 20210126(화)
          • 20210127(수)
          • 20210128(목)
          • 20210129(금)
        • February
          • 20210201(월)
          • 20210202(화)
          • 20210203(수)
          • 20210204(목)
          • 20210205(금)
          • 20210207(일)
          • 20210208(월)
          • 20210209(화)
          • 20210217(수)
          • 20210218(목)
          • 20210219(금)
          • 20210220(토)
          • 20210222(월)
          • 20210223(화)
          • 20210224(수)
          • 20210226(금)
          • 20210228(일)
        • March
          • 20210302(화)
          • 20210303(수)
          • 20210304(목)
          • 20210305(금)
          • 20210306(토)
          • 20210308(월)
          • 20210309(화)
          • 20210310(수)
          • 20210311(목)
          • 20210312(금)
          • 20210313(토)
          • 20210315(월)
          • 20210316(화)
          • 20210317(수)
          • 20210318(목)
          • 20210319(금)
          • 20210322(월)
          • 20210323(화)
          • 20210324(수)
          • 20210325(목)
          • 20210327(토)
          • 20210329(월)
          • 20210330(화)
          • 20210331(수)
        • April
          • 20210406(화)
          • 20210407(수)
          • 20210408(목)
          • 20210409(금)
          • 20210410(토)
          • 20210412(월)
          • 20210413(화)
          • 20210414(수)
          • 20210415(목)
          • 20210416(금)
          • 20210417(토)
          • 20210419(월)
          • 20210420(화)
          • 20210421(수)
          • 20210422(목)
        • July
          • 20210728(수)
Powered by GitBook
On this page
  • 5.0 형식 맞추기
  • 5.1 형식을 맞추는 목적
  • 5.2 적절한 행 길이를 유지하라
  • 5.2.0 적절한 행길이를 유지하라
  • 5.2.1 신문 기사처럼 작성하라
  • 5.2.2 개념은 빈 행으로 분리하라
  • 5.2.3 세로 밀집도
  • 5.2.4 수직 거리
  • 5.2.5 변수 선언
  • 5.2.6 인스턴스 변수
  • 5.2.7 종속 함수
  • 5.3 가로 형식 맞추기
  • 5.3.0 가로 형식 맞추기
  • 5.3.1 가로 공백과 밀집도
  • 5.3.2 가로 정렬
  • 5.4 팀 규칙

Was this helpful?

  1. 기타
  2. 이것저것
  3. 독서
  4. 클린코드

Chapter5. 형식 맞추기

PreviousChapter4. 주석Next용어

Last updated 4 years ago

Was this helpful?

5.0 형식 맞추기

  • 프로그래머라면 형식을 깔끔하게 맞춰 코드를 짜야 한다. 코드 형식을 맞추기 위한 간단한 규칙을 정하고 그 규칙을 착실히 따라야 한다. 필요하다면 규칙을 자동으로 적용하는 도구를 활용한다.

5.1 형식을 맞추는 목적

프로그래머의 일차적인 의무는 의사소통 이다.

  • 코드의 형식은 중요하다. 코드 형식은 의사소통의 일환이다. 그리고 이 의사소통은 프로그래머의 일차적인 의무다.

    • 실행되는 코드 를 만드는게 프로그래머의 일차적인 의무라 여길지도 있다.. 하지만 이제는 아니라는 것을 우리는 안다.

  • 오늘 구현한 코드의 가독성은 앞으로 바뀔 코드의 품질에 지대한 영향을 미친다. 반대로 오늘 코드를 막무가내로 작성하면 미래는 없다....

    • [깨진 유리창의 법칙]()

  • 맨 처음 잡아놓은 구현 스타일과 가독성 수준은 유지보수 용이성과 확정성에 계속해서 영향을 미친다. 원래 코드는 사라질지라도 개발자의 ㅅ타일과 규율은 사라지지 않는다. 그렇다면 원활한 소통을 장려하는 코드 형식 은 무엇일까?

5.2 적절한 행 길이를 유지하라

5.2.0 적절한 행길이를 유지하라

  • 몇 개의 주요한 프로젝트를 확인한 결과 대부분의 평균 파일 크기는 64줄 이었다. 매우 큰 프로젝트 소스 파일 또한 500줄을 넘지 않았고 심지어 대부분이 200줄 미만이었다.

  • 이 결과로 우리는 200 줄 미만의 파일로도 대규모 프로젝트를 만들 수 있다는 것을 알았다.

  • 반드시 지킬 규칙은 아니지만, 일반적으로 작은 파일 이 이해하기 쉽다.

5.2.1 신문 기사처럼 작성하라

  • 좋은 기사를 생각해보자. 독자는 표제를 보고 기사를 읽을지 말지 결정한다. 그리고 첫 문단은 전체 기사 내용을 요약한다. 세세한 사실은 숨기고 커다란 그림을 보여준다. 쭉 읽으면서 내려가면 세세한 사실이 드러난다.

  • 소스 파일도 이와 비슷하게 작성한다.

    • 이름은 간단하면서도 설명적으로 짓는다.

    • 이름만 보고도 올바른 모듈을 살펴보고 있는지 아닌지를 판단할 정도로 신경써서 짓는다.

    • 소스 파일 첫 부분은 고차원 개념과 알고리즘을 설명한다.

    • 아래로 내려갈수록 의도를 세세하기 묘사한다.

    • 마지막에는 가장 저차원 함수와 세부 내역이 나온다.

5.2.2 개념은 빈 행으로 분리하라

생각해보면 빈 행을 사용할 정도로 함수를 길게 만들면 조금 그렇지 않을까?

  • 거의 모든 코드는 왼쪽에서 오른쪽으로 그리고 위에서 아래로 읽는다.

  • 글을 쓸 때, 우리는 읽기 좋게 하기 위해 들여 쓰기 라는 것을 한다. 그리고 이 들여 쓰기 의 타이밍은 너무 중요하다. 아마 대부분이 알고 있을 것이다.

  • 코드에서도 이 들여 쓰기는 너무나 중요하다. (지금 말하는 들여쓰기는 파이썬의 indent 같은게 아닌 빈 행을 말함)

  • 특히 코드에서는 새로운 개념 에 대한 내용을 작성할 때 들여쓰기를 한다.

  • 그렇게 함으로써 독자는 이전까지 읽던 내용을 정리하고 새로운 내용을 시작할 수 있을 것이다.

5.2.3 세로 밀집도

  • 세로 여백이 개념을 분리한다면 세로 밀집도는 연관성 을 의미한다.

  • 즉, 서로 밀접한 코드행은 세로로 가까이 놓여야 한다는 뜻.

5.2.4 수직 거리

  • 코드를 분석할 때 이 함수, 저 함수 왔다갔다 하는 경험은 누구나 있을 것이다. 그리고 이런 코드는 이해하는데 혼란만 주게된다.

  • 서로 밀접한 개념은 세로로 가까이 두어야 한다.

    • 물론 두 개념이 서로 다른 파일에 속한다면 규칙이 통하지 않는다. 하지만 타당한 근거가 없다면 밀접한 개념의 함수는 같은 파일안에 속해야한다.

5.2.5 변수 선언

  • 변수는 사용하는 위치에 최대한 가까이 선언한다.

    • 42에서는 C 스타일을 따라서 인자는 함수의 시작 부분에 선언했지만, 이제는 사용부에 인자를 선언해서 사용하는 습관을 들이도록 하자.

5.2.6 인스턴스 변수

  • 인스턴스 변수는 클래스 맨 처음에 선언한다.

5.2.7 종속 함수

  • 한 함수가 다른 함수를 호출한다면 두 함수는 세로로 가까이 배치한다.

  • 또한 가능하다면 호출하는 함수를 호출되는 함수보다 먼저 배치한다.

    • 즉, 고수준의 함수를 위에 저수준의 함수를 아래에 두라는 것.

5.3 가로 형식 맞추기

5.3.0 가로 형식 맞추기

  • 한 행은 가로로 얼마나 길어야 적당할까? 프로젝트 조사 결과 평균은 45줄이었다.

  • 일반적으로 옛날에는 80자 제한을 두었지만 현재는 100줄부터 120줄까지로 제한하는 경우가 많다.

5.3.1 가로 공백과 밀집도

  • 가로로는 공백을 사용해 밀접한 개념과 느슨한 개념을 표현한다. 예를 들면 func(params) 처럼 함수 이름과 이어지는 괄호 사이에는 공백을 넣지 않는다. 왜냐하면 함수와 인수는 서로 밀접한 관계가 있기 때문이다. 반대로 return (a) 에서는 return 키워드와 a 사이에 공백을 주었다. 이 공백을 이용해 리턴되는 값 자체를 강조하기 위함이다.

5.3.2 가로 정렬

  • 가로 정렬은 별로 유용하지 못하다.

    • 42스타일에서는 가로 정렬을 필수로 지키게 한다.

  • testStrucureVariable    var;
    int                                        a;
    char                                    b;
  • 가로 정렬이라는건 위와 같은 코드를 말한다.

  • 이렇게 하게 되면 중대한 결함을 놓치게 된다고 저자는 말한다. 하지만 난 이게 더 좋은걸..?

5.4 팀 규칙

  • 모든 프로그래머는 자신이 선호하는 규칙이 있다. 하지만 팀에 속한다면 자신이 선호해야 할 규칙은 바로 팀 규칙 이다.

  • 팀은 한 가지 규칙 에 합의 해야 한다. 그리고 모든 팀원은 그 규칙을 따라야 한다. 그래야 소프트웨어가 일관적인 스타일을 보이게 된다.

https://namu.wiki/w/%EA%B9%A8%EC%A7%84%20%EC%9C%A0%EB%A6%AC%EC%B0%BD%20%EC%9D%B4%EB%A1%A0