6월 3주차 기술 회고

자바스크립트 typeof 의 남용

나는 typeof 를 보통 undefined 를 확인하기 위해서 사용하는 버릇이 있다.

그런데, 다음과 같은 경우에는 typeof 보다 더 좋은 방법이 존재했다.

• Object 에 해당 프로퍼티가 존재하는지 확인할 때
• 함수의 Optional 한 파라미터가 들어왔는지 확인할 때

Object 에 해당 프로퍼티가 존재하는지 확인할 때

const obj = {
  a: 10,
};

object.hasOwnProperty("a"); // true
object.hasOwnProperty("b"); // false

함수의 Optional 한 파라미터가 들어왔는지 확인할 때

function foo(bar) {
  if (typeof bar === "undefined") {
    console.log("default value");
    return;
  }

  console.log(bar);
}

위와 같은 패턴의 자바스크립트 코드가 있다고 가정하면,

function foo(bar = "default value") {
  console.log(bar);
}

이렇게 의도가 명확하게 코드를 변환할 수 있다.

다짐

특별한 목적을 가진 내부 메서드 혹은 기능이 존재한다면, 의도를 명확히 하기 위해 용도가 더 명확히 드러나는 범용적이지 않은 것을 우선으로 사용하는 것이 좋을 것 같다.

자바스크립트 JSDoc 의 이용

JS Doc 은 주석 작성에만 이용되는 것이 아니라, 일반 자바스크립트를 마치 타입스크립트처럼 사용할 수 있도록 도와준다. 평범한 함수를 마치 스펙이 정해진 API 처럼 이용할 수 있게 해준다. 타입이 없는 자바스크립트의 아쉬운 점을 보완해준다.

JS Doc 공식문서 에서 다양한 용례를 확인해볼 수 있다. 현재는 @param, @typedef, @type, @return, @property 정도만 이용하고 있는데, API 에서 가져온 JSON 의 오브젝트 구조 정의 하나만 해도 정말 쓸만하다.

/**
* @typedef {Object} APIResult
* @property {String} status
* @property {OtherType} otherTypeData
**/

위와 같이 APIResult 데이터 타입을 정의해놓으면 Intellij 에서 자바스크립트를 작성할 때 intellisense 가 알아서 완성해주는 부분이 많아져 실수할 확률이 적어진다.

다짐

JSDoc 을 잘 이용해서 미래의 나와 팀원이 헷갈리지 않도록 도와주자.

자바스크립트 Reduce 메서드의 스펙

많이 안쓰다보니 스펙을 까먹었다.

reduce((previousValue, currentValue, currentIndex, array) => { ... }, initialValue);

위와 같은 순으로 이루어져있다.

Reduce 공식문서

자바 버전 제대로 맞추기

자바 프로젝트에서 이용되는 버전을 프로젝트 자바 버전만 맞추기 일쑤였는데, 빌드할 때 이용되는 빌드 도구들 (Maven 혹은 Gradle) 의 자바버전도 같이 맞춰주자.

평소엔 별로 신경을 안썼는데 신경써주자.

next.js 에서 hot reload 가 잘 되지 않던 현상

import 시에 from "..." 하는 부분에서 파일명 대소문자가 틀리면, hot-reload 가 되다 안되다 한다. 아무런 경고성 로그도 없고 될 때도 있고 안 될 때도 있어서 삽질을 엄청 했다.

처음에는 hot-reload 라는 용어 자체도 모르던 상태라 검색도 이상하게 해서 해답을 나~중에 간신히 얻었다.

기능에 대해 최대한 디테일하게 검색 -> 제대로된 용어 파악 -> 용어를 이용해 검색 잘하기 이와 같은 순으로 검색하자. 키워드를 모르면 검색이 불가능하다.

잘 되어야 할 것 같은게 잘 안되면 의심하고 검색하자. 특히 되다가 안 되다가 할 때, 한 90% 확률로 작동한다면 보통 대충 넘어가기 일쑤인데 이럴 때 끝까지 붙잡고 제대로 해결해보며 문제를 찾아보자.

레퍼런스

https://stackoverflow.com/questions/61151505/nextjs-project-is-not-hot-reloading-in-macos