IntelliJ Honey Tips 4 - 필수!(feat. 협업하기 위한 셋업)

개발에 대한 포스팅이 꽤나 늦었다 ㅎㅎ

회사에서 이리 치이고 저리 치이고 야근도 한다고!

 

자, 우리 개발자들은 다른 사람의 코드를 보기도 하고 내가 수정하기도 하고, 내가 만든 코드를 다른 사람이 보게 된다

면접때 면접관이 중요하게 보는 포인트 중에 하나는 팀프로젝트 경험이 있는가(취준생인 경우), 회사를 다녀본 경우는 다른 팀원들과 소통의 오류를 겪었을 때 어떻게 해결했는가?(이직인 경우) 이다

 

이 두 질문의 Main Context는 협업이다!

코드레벨에서의 협업은 Git Commit Message Convention, Camel/Kebab/Pascal Case Convention, variable Convention, JavaDoc작성, Hard Wrap(IDEA), ESLint or TSLint, Pretteir(프론트엔드의 경우), Java-Google-Style/Java-Naver-Style(백엔드의 경우)를 적용한다

 

내가 회사생활을 하면서 했던 협업을 위한 셋업, 주의점 등에 대해 포스팅을 해볼까 한다

 

1. 코드를 작성할때는 가독성 있게

- 가독성 있는 클래스명/변수명/메서드명

만약에 나는 신입이고, 클래스명들을 보니 xxxDTO, xxxDAO이런식으로 작성되어있다고 치자

나는 취준생때 xxxDto 혹은 xxxReq/xxxRes 이런식으로 작성을 했었다고 치자

그럼 회사에 들어가면 어떤 룰을 따라야할까?

나만의 마이웨이로 가려면 일단 짬을 채우고 인정을 받고, 어나운스먼트를 하고 건의와 회의를 거쳐서 전사에 모든 개발자가 나의 방식을 쓸 수 있도록 하는것이다

이렇게하기까지는 시간이 걸리고, 내 방식이 무조건 옳은 것도 아니기때문에 일단 회사의 방식을 따르자

단순히 Dto DTO처럼 조금의 차이라도 백엔드개발자입장에서는 되게 신경쓰이고 짜증날수도 있는 부분이다

 

- 관련 있는 { }

a.

if () {
 code
} else {
 code
}

b.

if () return;
code

c.

if () {
 code
} 
else {
 code
}

어떤 코드가 이뻐보이는가?

혹자는 early return을 여러번 시키고, 로직을 그 아래 작성하라고 한다(알고리즘 문제를 풀때 쓰임)

근데 개인적으로는 c가 제일 깔끔하다

만약에 내 관심사가 if 내부라면 if { } 안에만 보면 되고, 반대로 else if나 else라면 그쪽의 { }만 보면 된다

다만 a와 다른 점은 줄 바꿈으로 인해 좀 더 눈에 보기 편해졌다는 것이다

기본적으로 if else 만 개행으로 나타내줘도 다른 사람이 내 코드를 읽기에 편하게 느낄 것이다

또 유의미한 코드 단위별로 개행을 꼭 해주자

무조건 라인 수를 짧게 짠다고 실력있는 개발자, 좋은 코드는 아니다

협업을 할때는 다른 사람이 내 코드를 참고할 수도 있고, 몇개월 뒤의 내가 봤을 때도 이해하기 쉽게 작성해야한다

 

+

코드를 작성해놓고 주석으로 disable 시키면서 하는 습관은 실수를 유발 할 수 있다

그냥 쓰이지 않는 코드는 즉각으로 지우자

어차피 다 로컬 파일 히스토리에 남게된다(일부러 Invalidate Caches)에서 로컬 히스토리를 다 날리지 않는 이상

파일 우클릭에서 Local History -> Show History으로 기록을 볼 수 있다

2.

Rest api call => Kebab Case(e.g: GET /block-user)

Class => Pascal Case(e.g: UserRegistrationReq)

Variable => Camel case(e.g: aggregationResult or aggResult)

 

3.  JavaDoc 작성

JavaDoc을 작성해두면, 호출해서 사용하는 시점에 이 메서드나, 코드가 무슨 역할을 하는지 Quick View로 볼 수 있다

메서드 작성 시점에 메서드명 위에서 /** 를 입력하고 엔터를 치면 입력 포맷이 만들어진다

    /**
     * 로깅된 데이터 페이징 조회
     * @param pageable      pageable
     * @param loggedId      Object 검색 대상 log Id
     * @param searchMap     {@link Map}{@literal <}{@link String },{@link String }> 검색 조건 입력시 필드 정보
     * @return Object       검색 결과 데이터(페이징 된)
     */
    Page<LogginDataDto> getLoggingData(
        Pageable pageable,
        ObjectId loggedId,
        Map<String, String> searchMap
    );

자 이렇게 작성해두고, 인텔리제이에서 자바독쪽에서 contorl + option + Q를 누르면 자바독의 축약형을 볼 수 있다

추가로 중요한 속성에는 html Tag의 font color로 강조 인자를 지정할 수도 있고, enum에도 javadoc을 달아두면, @link enum#값

으로 doc의 내용을 볼 수 있다

예시

    /**
     * 로깅된 데이터 페이징 조회
     * @param pageable      pageable
     * @param loggedId      <font color="red">Object 검색 대상 log Id</font>
     * @param searchMap     {@link Map}{@literal <}{@link String },{@link String }> 검색 조건 입력시 필드 정보
     * @param color         {@link COLOR#RED}: 빨간색 / {@link COLOR#BLUE}: 파란색
     * @return Object       검색 결과 데이터(페이징 된)
     */
    Page<LoggingDataDto> getLoggingData(
        Pageable pageable,
        ObjectId loggedId,
        COLOR color,
        Map<String, String> searchMap
    );
}

enum COLOR {
    /**
     * 빨강색이 들어갑니다
     */
    RED,
    /**
     * 파란색이 들어갑니다
     */
    BLUE
}

@link 태그 효과

보통 @link나 @see를 이용한다고 한다

저렇게 현재 프로젝트 객체와 연결해놓으면 이넘을 만들때 난독화느낌으로 어렵게 되어있어도 이넘 위에 javadoc만 달려있다면 코드를 만들때 도움을 받을 수 있다

그리고 //빨강색이 들어갑니다 이런식으로 작성하면 javadoc에서 참조를 못한다

코드 줄 수가 길어지더라도 /** ~ */ 로 들어가는 javadoc을 만드는 습관을 기르자. 참고로 Jsdoc도 있다(이건 Js like Ts 느낌)

일반 //주석은 적용 안되는 모습

결과적으로 위에는 인터페이스였고, 아래의 사진은 구현체이다

인터페이스에 주석을 잘 달아뒀기 때문에 무슨 인자가 무슨 역할을 하는지 설명을 볼 수 있다

여담으로 시니어가 인터페이스에 Javadoc을 이쁘게 달아주고, 푸시해놓고 새로 들어온 신입한테 이거 구현해봐라~ 설명은 잘 되어있어

이렇게 업무를 알려줄수도있을거다(이런경우 //TODO 혹은 //FIXME를 붙여놓으면 인텔리제이 탭에서 빠르게 찾을 수 있음)

결과물

4. Hard Wrap 설정

Hard Wrap

Hard Wrap이란 줄바꿈이 될 위치를 말한다

만약에 저 회색 줄이 밑도끝도없이 길다면 모든 코드를 1줄로 작성해도 규칙을 어기지 않는것이니깐

적당한 선에서 다음 줄로 넘겨주자

기본 설정은 120이고 밑에서 추가로 말할 코드 스타일을 적용하면 ... 구글기준은 100이다

회사에 따라 80 ~ 140 정도를 왔다갔다 하는 것 같다

설정법은 맥 기준 command + , 를 누르고 Code Style 탭에 들어가서 Hard wrap at을 변경해주면 된다

저 수치가 변경되고 코드 정리 단축키 option + command + L 키를 눌러주면 알아서 개행이 안된다

추가로 옵션을 건드려줘야 한다

Code Style -> Java로 들어와서 2개 옵션을 바꿔줘야 한다 타이핑을 할때 저 하드랩을 넘어가면 개행을 자동으로 해주겠다는 옵션에 Yes로 바꿔주고, 오른쪽 마진을 넘지 않도록 보증한다는 옵션만 킨 경우에 위에서 말한  option + command + L 코드 정리 키를 눌러주면

알아서 개행이 된다

 

5. 전체 코드 수정 키는 유의해서 사용하기

가끔 가다 내가 아닌 다른 사람들이 다른 변수명 또는 인자마다 여러 줄로 써놓던가 그런 경우가 있다.

주니어의 기준에서는 왜? 인자 3개면 2줄로 정리되는데 굳이 4줄이나 쓸 필요 있나..?해서 바꿀 수 있다

이렇게 말이다.. 그리고 코드 인덴테이션이 정리가 안되어있다고 한개의 파일을 전부 다 option + command + L 키를 눌러서 정리하곤 한다

깃 기록에는 내가 다 수정하거나 만든 코드라고 나오겠지...

그!러!나! 시니어분들이 저렇게 여러 줄로 쓰거나 인덴테이션 규칙을 몰라서 안맞춰서 쓰지는 않는다. 물론 실수를 하는 경우도 있겠지만 대부분은 이유가 있어서 그렇게 작성한 것이다

그러니깐 원래 만들어져 있던 파일 또는 클래스에 내가 추가를 하는 경우라면, 전체 포맷팅 단축키보다는 내가 만든 코드만 선택해서 정리되게 하자! (이거 없이 위에 hard wrap 옵션 키면 상관없다)

그럼 내가 만든 코드만 정리하는 건 어떻게 할수있냐..?

이렇게 줄을 선택한 다음, 아까 포맷 정리 키에서 shift키만 추가로 눌러주면 된다

shift + option + command + L

그러면 

이런 옵션이 나오는데, 내가 선택한 부분만 리포맷팅 할거다~ 라고 하고 Run을 누르면 다른 사람들이 작성한 코드를 자동으로 정리 안해주고, 내가 추가하거나 변경한 부분만 정리해준다

사연 없는 코드는 없다.. 다른 예민한 개발자의 코드 포맷팅을 바꾸기보단 내가 작성한 코드만 정리해보는건 어떨까..!

 

6. 구글 코드 스타일/네이버 코드 스타일을 적용하기

약간 logback 설정하는거랑 아주 쬐끔 비슷하다

xml 파일들로 설정을 하는건데..

- 구글 스타일 코드

스타일 설명

https://google.github.io/styleguide/javaguide.html

Google Java Style Guide

깃헙(파일)

https://github.com/google/styleguide

GitHub - google/styleguide: Style guides for Google-originated open-source projects

우리가 필요한건 여기서 intelliJ-java-google-style.xml파일이다

파일을 누르고 Raw를 클릭하고 컨트롤+A혹은 커맨드+A 키로 전체 복사를 해서 인텔리제이에 특정 폴더에 파일을 만들어서 붙여넣자

러

전체 복사

나같은경우는 misc폴더 내부에 셋팅 파일들을 넣어줬다

참고로 misc는 기타 잡다한 이런 뜻이다

폴더명은 자기 마음이다

이제 너무 익숙한 설정 단축키를 눌러서(커맨드 + ,) Code Style에 가보면 GoogleStyle이 추가되어 있을것이다

이것으로 설정하고 5번 셋팅 단축키를 입력하면 얘네 입맛대로 코드 파일이 포맷팅된다

 

- 네이버 스타일 코드

스타일 설명

https://naver.github.io/hackday-conventions-java/#_intellij

캠퍼스 핵데이 Java 코딩 컨벤션

깃헙(파일)

https://github.com/naver/hackday-conventions-java/blob/master/rule-config/naver-intellij-formatter.xml

GitHub - naver/hackday-conventions-java: 캠퍼스 핵데이 Java 코딩 컨벤션

얘도 구글과 똑같이.. 인텔리제이에 파일을 추가하고

이 옵션으로 네이버 설정 xml파일을 가져와야 한다(구글과 다르게 하나 더 해줘야함)

그럼 내 프로젝트에 구글 설정, 네이버 설정이 들어가 있을 것이다

뭐 입맛에 맞는거 쓰면 된다~!

 

7. 사용하지 않는 import는 바로 지워지도록, import 문은 상대경로가 아닌 절대경로로 변경

저 설정들을 체크해주면 사용하지 않는 import문은 회색으로도 안나오고 바로 삭제해준다(회사에서 인텔리제이로 타입스크립트를 작성하기에 아래도 설정.. 보통은 자바쪽만 설정하면 됨)

사용하지 않는 Optional

설정을 바꾸자마자 정리된 임포트문

참고로 임포트문 정리 단축키는 control + option + o이다

현재 사용하지 않는 임포트문이 없다고 알려준다

 

또한 타입스크립트에서 ../../../.. 처럼 상대경로로 import를 지정하게되면 나중에 IDEA에서 변경하는게 아닌, 사람이 어떤 폴더구조를 직접 변경하면 프로젝트가 다 꼬인다

그렇기때문에 @ 경로 혹은 절대경로로 나오게 해야 안전하다

여기 체크

@는 의무적인게 아니라고 한다

저 설정을 체크하면 ../.. 를 타고 가지 않고, 절대경로로 import를 하게 된다

 

8. 현재 열린 파일이 있는 위치를 프로젝트 탐색기에서 표시하기

앵귤러같은 경우는 위처럼 컴포넌트 단위로 캡슐화가 잘 되어있다(css or scss-스타일링, html-화면단 혹은 디렉티브, ts-로직)

이게 파일이나 폴더가 적을때는 상관이 없지만, 컴포넌트나 모듈이 많아지면 우측에 내가 보고 있는 에디터 파일이 왼쪽에 프로젝트 탐색기에 어딨는지 찾는데 한세월 걸릴 때가 있다

나는 단축키를 추가해서 사용하고 있다

command + 1 / esc는 단순히 에디터와 프로젝트 파일 셀렉터를 오가는 단축키이지만, 저 단축키를 추가해놓고 사용해보면

(나같은 경우는 control + command + 1)

닫혀있던 servers폴더가 열리면서 현재 typescript파일이 위치한 곳을 알려준다

자바 파일도 마찬가지이다

현재 열린 파일은 MflixService.java, 좌측에 보면 대부분 다 닫혀있다

나는 이 서비스 파일이 위치한 곳을 알고싶다..

그럴때 이 단축키를 입력하면 아~ 바로 알려준다

이건 이 파일을 찾고싶다기보다 보통 관련성이 있는 파일들을 패키지에 묶어두는데, 상위 패키지로 이동해서 다른 파일을 찾을때 유용하다

 

9. 현재 열린 파일 오른쪽에 창분할해서 추가하기

이건 보통 800줄정도가 넘어가는 동일 파일 내, 혹은 다른 파일의 소스코드를 참조해서 새롭게 코드를 만들거나, 위의 코드랑 매치해서 다른 곳은 없나 찾아볼때 유용하다

보통은 파일에서 마우스 우클릭으로 Split Right을 눌러서 파일을 분할하지만, 나같은 경우 단축키로 추가해놨다

control + shift + command + ->

를 누르면 바로 우측에 현재 파일이 창 분할되서 열리게 된다

커맨드 + 1키 두번 눌러서 탐색기 창을 닫고 이렇게 풀 화면으로 우측은 참고하고 싶은 코드 위치, 좌측은 우측을 참고해서 만들 코드 위치..

로 해서 같은 파일 내, 혹은 다른 파일 내에서 비교해서 찾는다

단축키만 설정해놔도 빠른 코딩이 가능하다

 

10. 파일을 직접 에디터창으로 열지않고 탐색기에서 코드 살피기

이쯤되면 Command + 1 (윈도우는 Alt + 1)키가 프로젝트 파일 선택창으로 커서를 이동하는 단축키라는 것을 알것이다

자, 커서를 방향키로 움직이다가 안에 소스를 보고싶은 파일에서 스페이스를 누르면, 굳이 에디터로 열 것 없이 파일 내용이 바로 보이게 된다

뷰 모드

ESC키를 누르면 창이 닫히게 된다

자주 사용하지는 않는데 가끔 유용하게 사용한다..!

 

+ 

그리고 맥 사용자라면 인텔리제이 프로젝트가 여러개가 새 창으로 열렸을 때 미션 컨트롤로 이렇게 밀어서 볼텐데,,

인텔리제이가 열린 창에서 컨트롤 방향키 아래키를 누르면 여러개의 인텔리제이에서 선택할 수 있다

나름 이거 너무 개꿀인듯

트랙패드 쓰고 마우스 있지만 키보드로 익히자 대부분을 !

ㅋㅋㅋㅋㅋㅋ 또 추가로 하면

마지막에서 너무 불편하게 하는걸 알려준거같다

Command + ` (~) 이 단축키를 누르면 켜진 창 내에서 다른 화면으로 간다

만약에 엑셀을 여러개 켜놨다거나 같은 크롬창인데 새 창으로 열었다 하면

다른 창전환이 된다 이말이다!!

위에 알려준 방법보다 커맨드 ₩를 활용하자..ㅠ