[위메이드] 소스코드 제출

안녕하세요.

위메이드 프론트엔드 지원자 정도영입니다.

 

제 코드 스타일을 가장 잘 보여드릴 수 있는 링크는 아래와 같습니다.

https://github.com/Pre-Team-10/pre-onboarding-8th-3-10/blob/main/src/utils/cache.ts

GitHub - Pre-Team-10/pre-onboarding-8th-3-10

 

위의 링크의 코드는 긴 코드는 아니지만 제 스타일을 가장 잘 압축하여 보여드릴 수 있는 하나의 코드 파일이라고 생각하여 선정하였습니다.

본 코드를 통해서 제 코드 스타일을 말씀드리겠습니다.

 

1. class를 사용한 모듈화

 제가 먼저 말씀드리고싶은 저의 코드 스타일 주제는 비즈니스 로직의 모듈화입니다. 본 링크의 코드처럼 저는 class를 사용해서 응집도가 높은 비즈니스 로직들을 하나의 class 내 메소드로 묶어 작성하는 것을 선호합니다. 그 이유는 하나의 관심사에 따라서 class를 작성하면 다른 동료들이 제가 작성한 코드를 확인하는데도 용이할 뿐만 아니라 유지보수도 간편하기 때문입니다. 또한, 외부에서 호출할 필요 없이 해당 비즈니스 로직 내부에서만 호출될 함수들은 class 내부에서 private으로 설정하여 외부에서 아예 접근할 수 없도록 강제할 수 있습니다.

 따라서, 이런 방식으로 모듈화를 구현해놓으면 개발자들이 방대한 메소드들 중에 특정 메소드를 잘못 선택, 호출하여 버그가 발생하는 것을 막을 수 있는, 캡슐화라는 이점 또한 추가적으로 존재하기 때문에 저는 이러한 방향으로 비즈니스 로직을 설계하는 원칙을 따르고 있습니다. 추가적으로 class를 제작하기 전에는 먼저 Interface를 구현하고 해당 인터페이스에서 어떠한 것들이 구현될 것인지 추상화 작업을 먼저 해놓음으로서 즉흥적인 기능 개발이 아닌 단계적인 기능 개발을 하려고 노력합니다. 

 

2. async, await를 사용한 동기처리

 그 다음에 말씀드리고 싶은 저의 코드 스타일은 async, await 키워드의 사용입니다. 자바스크립트에서 비동기를 처리하는 패턴인 promise는 아주 많이 쓰이고 있습니다. 이 promise는 then 메소드를 사용할 수 있고, 이 메소드를 통해서 이 promise 객체가 fullfilled 상태일 시 해당 결과처리를 할 수 있습니다. 이 패턴은 아주 간편하나 이 then 메소드에서 또다시 promise가 사용되는 일이 발생하면 then 메소드의 중첩화가 일어나 코드가 직관적이지 않고 동료들이 코드를 파악하는데 어려움이 있을 수 있습니다.

 따라서 저는 이 promise가 사용되는 코드들의 동기적인 처리를 위해서 async, await 을 주로 사용합니다. await를 사용하면 then 메소드의 중첩을 제거할 수 있으며 코드의 흐름이 일관성있게 아래에서 밑으로 흐르므로 가독성 또한 뛰어나기때문에 저는 then메소드 보다 async, await를 선호합니다.

 그러나 해당 promise의 객체가 결과를 반환하는데 걸리는 시간이 길어 사용자에게 불편함을 줄 수 있을 정도라고 예상된다면  코드의 순서를 동기적으로 지정하는 것이 오히려 역효과일 수 있다고 생각합니다. 따라서, 이러한 경우에는 then 메소드를 사용하여 다른 코드들이 먼저 실행될 수 있도록 비동기처리를 수행하는 식으로 항상 상황에 맞는 코드를 만들도록 고려하고 있습니다.

 

3. enum, as const를 사용한 상수화

export enum CacheError {
  QUOTA_EXCEEDED = "QuotaExceededError",
  DOM = "DOMException",
}

private async saveSearchedSickListInCacheStorage() {
  try {
    await this.sickCache?.add(this.requestURL);
  } catch (e) {
    const { name: errorName } = e as Error;
    if (
      errorName === CacheError.QUOTA_EXCEEDED ||
      errorName === CacheError.DOM
    ) {
      await this.sickCache?.delete(CACHE_NAME);
      this.makeCacheStorage();
    }
  }
}

 

 또한, 저는 항상 비슷한 관심사를 가진 변수 및 자주 반복되는 변수들은 항상 상수화를 통하여 재사용성을 고려하고 버그를 최대한 제거하려고 노력합니다. 프론트엔드 개발자는 html 파일에서 class 이름을 다양한 태그노드에 재사용하거나 http 응답 에러 상태, 메세지 등을 전달받아 처리를 해야할 때 동일한 string, number 값을 반복적으로 사용하게 됩니다. 이런 경우에는 해당 string, number 값이 필요할 때마다 반복적으로 입력하는 것이 아니라 enum 또는, as const 키워드를 사용하여 재사용될 변수들을 하나의 자료형으로 응집시킨 후 상황에 맞게 재사용하는 것이 효과적일 것입니다.

 이러한 습관은 사소하지만 결과적으로는 하나의 프로젝트를 만들어나가는데 버그발생 확률을 크게 줄일 수 있는 요소라고 생각합니다. 따라서, 이러한 코드 스타일을 지켜나가면서 개발을 하고있습니다.

 

4. 올바른 변수, 함수이름 작성

 협업에서 가장 중요한 태도는 이 변수와 함수가 무엇을 나타내고 어떤 동작을 하는지 명확하게 그 식별자의 이름을 작성하는 것이라고 생각합니다. 이는 단순히 동료가 코드의 내용을 이해하는데 드는 에너지를 아낄 수 있게함과 동시에, 자신이 작성한 코드도 몇 주 후면 잘 기억이 나지 않는 경우가 많기 때문에 이러한 상황을 방지할 수 있다는 장점 역시 존재합니다.

 따라서, 저는 함수나 변수의 이름이 조금 길어진다 하더라도 최대한 그 요소가 무엇을 의미하는지 나타내어 가독성이 좋은 코드를 설계하고자 합니다.

 

5. 하나의 함수는 한가지 일만 한다는 원칙 중시

https://github.com/jdy8739/chatting-app/blob/main/chatting-app/utils/socket.ts

GitHub - jdy8739/chatting-app

 위 코드파일은 제가 개인프로젝트로 제작했던 웹채팅 어플리케이션에서 socket 통신을 구현하는 코드입니다. 위의 코드의 함수들은 각각 서버에 socket 통신 연결, 해제, 메세지 보내기, 특정 url의 채팅방 이벤트 구독하기 등 다양한 기능들을 수행합니다.

 이 함수 코드들은 하나의 함수 내부에서 함께 작성되어 구현할 수도 있었습니다. 그러나, 항상 코드를 유연하고 재사용 가능하게 작성하기 위해서는 각 함수가 하나의 기능만 수행하도록하며 입력받는 인자의 수도 최소화해야 한다는 원칙을 따르고자 하였기 때문에, 위처럼 세부적으로 기능에 따라 함수들을 모두 분리하였으며 입력받는 인자의 수 역시 최대한 줄이고자 하였습니다.

 이 코드들은 class를 사용한 모듈작성 패턴에 익숙해지기 전에 작성한 코드이기 때문에, 인스턴스를 통한 메소드화를 시키진 않았지만 추후에 비슷한 비즈니스 로직을 설계할 때는 이러한 함수들을 하나의 관심사를 가진 class로 응집하여 작성하고자합니다.

 

이상 저의 코드 스타일을 명확하게 보여드릴 수 있는 스타일을 말씀드렸습니다.

앞으로도 계속 공부하고 배워나가면서 협업에 유리하고 가독성을 높일 수 있는 스타일을 추가적으로 습득하고자 합니다.

 

읽어주셔서 감사합니다. :)