입문

이 기사WESEEK Advent Calendar 202022일째 보도입니다.
저는 2020년 7월부터 WESEEK 주식회사에서 실습하고 있는 일반대학 4학년 학생입니다.인턴은 GROWI.클라우드라는 SaaS 서비스를 개발 중입니다.
실습을 시작하기 전에는 기본적으로 혼자 공부하기 때문에 코드를 본 적이 없다.실습을 시작한 후 코드 평론에서 욕을 먹었습니다. 독학으로 얻기 어려운 지식을 얻었기 때문에 이 지식을 똑똑히 알고 싶어서 이 글을 썼습니다.
이 글에서 언어와 틀을 가리지 않고 통용적으로 실천할 수 있다는 점에 대해 초급과 초급 두 부분으로 구성된 평론을 정리하고자 합니다.코드로 설명하는 부분에 대해 저는 자바스크립트로 설명했지만 어려운 것을 쓰지 않았기 때문에 자바스크립트를 접촉한 적이 없는 사람이라도 이해할 수 있습니다.

초급

정말 막 들어갔을 때 코드를 썼는데 드디어 움직여서 코드 이전의 일을 완전히 안심하고 했다.(지금도 가끔 이렇게 해요.)

임무 중 분배를 잊지 마세요

코드와 무관한 댓글을 삭제합니다

지난번 논평에서 지적한 내용을 수정하고 잊지 마세요

ci 통과 여부 확인 후 댓글 의뢰

현장에서 원격 데이터 라이브러리로 미루면 자동 테스트가 거의 다 도망갈 것 같으니 테스트가 끝난 후에 평론을 의뢰할 때까지 냉정하게 기다려야 한다

마술 번호와 마술 단어를 사용하지 않습니다

유당함과 유당함 주의.

기본적으로 변수명과 방법명은 카멜 상자로 쓰여 있다

단순하지만 의외로 잊기 쉬우니 주의하세요!

초급

읽을 수 있는 코드의 관점에서 보면 대체적으로 군더더기로 나눌 수 있는지 아니면 이해하기 어렵지 않은지 두 가지로 나눌 수 있다.처음에는 많은 댓글이 와서 힘들었지만 지금은 이해하기 쉬운 코드를 짧게 써서 기쁩니다.

여분 변수 정의

예를 들어, 다음 글쓰기는 이중화됩니다.자바스크립트를 미리 준비하는 방법을 사용하면 가독성이 높고 짧게 쓸 수 있습니다.
중복 사례

const members = [{name:'kenta',age:21},{name:'naomi',age:15},{name:'shigeru',age:34}]
const adultMembers = [];

people.forEach( member => {
  if ( member.age >== 20) {
    adultMembers.push(member);
  }
});

위의 코드는 다음과 같이 고칠 수 있다.
좋은 예.

const members = [{name:'kenta',age:21},{name:'naomi',age:15},{name:'shigeru',age:34}]

const adultMembers = members.filter( => {
  return member.age >== 20;
});

이렇게 하면 몇 줄의 코드를 짧게 쓸 수 있다.그리고 filter 방법을 사용하면 코드에 조건에 맞는 요소를 추출하여 이런 정보를 처리하고 가독성도 높아진다.
또한 맵과reduce를 적극적으로 사용해도 더 좋은 코드를 쓸 수 있다.나는 ForEach가 최종 수단이라고 생각한다.

SQL 및 API를 너무 많이 사용합니다.

프로젝트에서 많은 SQL 및 API를 실행합니다.SQL 쿼리를 두드릴수록 DB에 대한 문의가 많아지고 API를 두드릴수록 처리가 무거워집니다.나는 이런 처리가 가능한 한 적기를 바란다.

전제 조건

Organization과 사용자는 1: 많은 관계입니다

프로세스

중복 사례

アクティブな組織を全て取ってくる(SQLクエリ一回目)

条件に合致する組織を抽出

抽出した組織のユーザを全て取得(SQLクエリ二回目)

다음 절차로 변경하여 SQL 조회 횟수를 줄일 수 있습니다.
좋은 예.

組織を紐づくユーザとも含めて全て取ってくる(SQLクエリ一回目)

条件に合致する組織を抽出

抽出した組織のユーザを全て取得(SQLクエリ叩かないでmapメソッドなどで取ってこれる)

이번에는 간단한 예입니다. 아마도 당신은 SQL의 한 번이 많아도 그렇게 큰 변화가 없을 것이라고 생각할 것입니다.그러나 이런 한 번 한 번의 처리가 가벼워지는 것은 전체 항목에 큰 영향을 미칠 수 있으므로 조회 횟수를 최대한 줄여야 한다.

같은 처리를 여러 번 너무 많이 썼어요.

서로 다른 파일에 같은 처리를 여러 번 썼을 때 스스로 유틸리티 폴더를 만드는 등 공통된 방법을 만들어 보자.전체 항목의 코드량이 감소하고 가독성이 높아진다.
스스로 논리를 쓰려고 노력했지만 실제로는 다른 멤버들이 유틸리티를 위해 방법을 준비해 놓은 것을 필요로 하지 않은 적이 몇 번 있었다.자기가 쓰기 전에 없어진 걸 확인해야지.

ifelse가 아니라 세 가지 연산자가 안 좋아요?

조건 브랜치 정보
중복 사례

let sentense;

if(age >== 20){
    sentense = 'お酒が飲めます';
}
else{
    sentense = 'お酒が飲めません';
}

ifelse의 조건 지점은 참고 연산자로 다음과 같이 쓸 수 있습니다.
좋은 예.

const sentense = age >= 20 ? 'お酒が飲めます' : 'お酒が飲めません';

이렇게 한 줄만 쓰면 된다.그러나 세 가지 산자 중 세 가지 산자 같은 이른바 세 가지 산자의 끼워넣기가 되면 확실히 짧아지지만 가독성이 현저히 떨어지기 때문에 사용하지 않는 것이 좋다.나는 가독성과 이해하기 쉬운 균형을 고려하면서 코드를 쓰고 싶다.
자바스크립트에서 세 가지 연산자 외에 조건을 산뜻하게 하는 방법이 많기 때문에 끊임없이 채택해야 한다.
그 중에서 논리 연산자는 비교적 많이 사용된다.
참고 자료
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_Operators
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
다음 코드는 다음과 같습니다.
중복 사례

let databaseUrl

if(process.env.MONGO_URL){
    databaseUrl = process.env.MONGO_URL;
}
else{
    databaseUrl = 'https://databaseurl';
}

아래처럼 유창하게 쓸 수 있다.
좋은 예.

const databaseUrl = process.env.MONGO_URL || 'mongodb://mongo:27017/'

언뜻 보니 datavaseUrl에 진위값이 있는 것 같지만 실제로는 프로세스입니다.env.MONGO_URL이 있으면 이 값을 되돌려줍니다. 그렇지 않으면'mongodb://mongo:27017/의 논리.편하죠!
다른 거 또 &??사용으로 유창한 코드를 쓸 수 있으니 꼭 사용하세요.

조건식에 부정적인 뜻을 넣지 마라

아래와 같이 조건식에 부정을 넣으면 독자들에게 매우 이해하기 어려운 코드다.
이해하기 어려운 예

if(!flag){
    console.log('条件１')
}else{
    console.log('条件2')
}

아래와 같이 개작하면 가독성이 높은 코드입니다.
좋은 예.

if(flag){
    console.log('条件2')
}else{
    console.log('条件１')
}

도저히 이해하기 어려운 기술에 대해서 댓글을 달아보도록 하겠습니다.

변수명과 방법명을 이해하기 쉽게 쓰고, 이해하기 쉬운 코드를 쓰고, 어려운 논리를 쓸 때도 어쨌든 이해하기 어렵다.그럴 때는 적극적으로 댓글을 써야 한다.안 쓰는 것보다 절대 잘 쓰는 것 같아서 (댓글을 너무 많이 써서 지적받은 적이 거의 없다) 적극적으로 코드에 남겨 두세요.

총결산

위에서 열거한 점들은 의외로 많은 평론을 받았고 제가 공부만 하면 절대 눈치채지 못할 것을 알려주었기 때문에 현장에서 문질러지는 중요성을 매일 느낄 수 있었습니다.
그리고 댓글과는 상관없지만 팀에서 무엇을 했는지, 실제로 서비스를 누가 사용했는지는 즐겁다.앞으로도 즐기면서 열심히 하고 싶어요.
※ 이 기사는이것은 2020/12/22에 투고한 보도의 전재이다.
Tips wiki는 IT 기업의 기술 정보와 프로젝트 정보를 공개했습니다.

참고 자료