[TIL] JS - 반복문, 디버깅, 코딩 스타일 (+테크니컬 라이팅 특강)

오늘 코드스테이츠에서 네이버 스마트 에디터 리드 우상훈님께서 진행하신 개발자가 알려주는 테크니컬 라이팅 특강을 들었다. 개발자로서 테크니컬 라이팅을 하는 것은 평소 쓰던 글과는 접근법이 다를 거라고 생각해서 어떤지 알고 싶었던 차라 흥미로운 강의였다.

테크니컬 라이팅이란 특정 사람을 대상으로 특정 목적을 가지고 정확한 기술 정보를 전달하는 글쓰기를 말한다. 테크니컬 라이팅을 위한 팁들과 관련된 유용한 레퍼런스들도 소개해 주셨다. 일반 글쓰기와 달리 테크니컬 라이팅을 할 때는 다음 사항들을 염두에 두고 글을 써야 한다.

1. 정량적 표현
2. 사실만 다루기
3. 정확한 용어와 문법 사용
   • MS 용어 검색 : 외래어로 된 기술 용어를 한국어로 옮길 때 참고
4. 사용자가 쉽게 정보를 검색할 수 있도록 도움
5. 주제를 쉽게 이해할 수 있도록 적절한 시각자료(그림, 다이어그램 등) 사용
   • Cloudcraft : AWS 다이어그램 툴
   • Datawrapper : 다이어그램 관련 블로그

Today I Learned

반복문 (Loop Statement)

• 주어 조건이 true인 경우 코드 블럭을 실행하며 조건식이 false가 될 때까지 반복한다.

• for (초기화; 조건식; 증감문) {
    // 조건식이 true인 경우 실행
  }

• while (조건식) {
    // 조건식이 true인 경우 실행
    // 증감문
  }
  // 초기화가 필요없는 경우 while문을 사용 할 수 있다
  
  // while 무한 루프
  while (true) {
    // if (조건식) break;를 사용하여 무한 루프에서 빠져나올 수 있다
  }

• do {
    // 실행할 코드 블럭
    // 증감문
  } while (조건식)
  // do...while문은 우선 코드 블록을 실행한 후 조건식을 평가한다

디버깅 (Debugging)

• 디버깅 이란 버그(bug, 프로그램 상의 오류)가 발생한 경우, 그 위치를 파악하고 제거하기 위해 소스 코드를 수정하는 것을 말한다.
  • 문법적 오류 (Syntax Error) : 컴파일 과정에서 파악 가능
  • 논리적 오류 (Logical Error) : 문법적으로는 문제가 없으나 실행 결과에 문제가 있는 경
    • 논리적 오류가 발생했을 때 대처
      1. 단서 확보 & 단서 분석
      2. 가설 선정 : 한 번에 한 개의 가설 또는 여러 개의 경우 서로 독립적인 가설
      3. 가설 검증
• 디버깅은 주로 IDE에서 제공해주는 디버깅 툴을 사용해 소스코드를 한 줄씩 실행해가며 각 실행 단계에서 어떤 일이 발생하는지 추적하는 형태로 이루어진다.

코딩 스타일 (Coding Style)

• 코딩 스타일에 무조건 따라야 하는 규칙은 없지만, 일반적인 코딩 컨벤션을 지켜주면 가독성이 좋아진다. 가독성이 높은 코드를 작성하면 다른 개발자들이 코드를 보고 쉽게 이해할 수 있으며 코드에 에러가 있는 경우 더 쉽게 발견할 수 있다.
• 중요한 것은 여러 코딩 스타일을 섞어 쓰지 않고 일관성을 유지하는 것이다.
• Linter를 사용하면 자동으로 스타일 체크를 받을 수 있다. (ESLint)

// 1. Naming ----------
let score = 90; // 변수명은 가능한 그 값의 의미가 반영된 단어로 표현
let scores = [70, 85, 90]; // data collection의 변수명은 복수 명사
let isStudent = true; // boolean의 변수명은 앞에 is/are/has를 붙임
let MAX_SCORE = 100; // 상수의 변수명은 UPPER_SNAKE_CASE
function printName() {
  // 함수 이름은 get, make, apply 등의 동사로 시작
}
class Student() {
  // 클래스 이름은 PascalCase
}

// 2. Indentation & Line Break ----------
function getRectangleArea(width, height) {
  // 가로 들여쓰기 : 스페이스 2개 (탭보다는 스페이스 권장)
	return width * height;
};

function printRectangleInfo(width, height) {
  let area = getRectangleArea(width, height);
  console.log(`Width: ${width}\nHeight: ${height}\nArea: ${area}`);
};

if (
  userPosition === 'faculty member' &&
  userPermissionLevel === 'FULL CONTROL' &&
  userStatus !== 'working from home'
  // 가로길이(최대 80~120자)가 너무 길다면 여러 줄로 나누어 작성하는 것이 좋음
) {
  alert('Welcome!');
} else {
  alert('Access Denied');
} 
// 세로 들여쓰기 : 논리 블록 사이에 빈 줄을 넣어 코드 분리

// 3. Punctuation ----------
let name = 'Alex'; // 모든 구문의 끝에 세미콜론을 쓰는 것이 좋음
let occupation = 'developer'; // 문자열 표기 시 작은 따옴표 권장

if (occupation === 'student') {
  console.log(`${name} is a student.`);
} else {
  console.log(`${name} is not a student.`);
} // if, for, while문 끝에는 세미콜론을 쓰지 않음

let greet = function(message, name) { // 콤마 사이는 한 칸 띄어 씀
  alert(message + ' ' + name); // 연산자 사이는 한 칸 띄어 씀
}; // 함수 표현식의 끝에는 세미콜론을 씀