9가지 확장가능한 JavaScript 코드

* 이 글은 9 Tips for Writing Scalable JavaScript Code을 번역하였습니다.

9 Tips for Writing Scalable JavaScript Code

시작부터 당신의 프로젝트를 확장할 준비를 해야 합니다.

---

언젠가는 프로젝트는 성장할 것이고, 여기에 좋은 소식과 나쁜 소식이 있습니다.

 

나쁜 소식은 당신의 코드베이스들을 제어할 수 없게 될 것이고 결국에는 바구니 안에 쓰레기처럼 던져버릴 것입니다. 그리고 시작하겠죠. 처음부터 새로운 코딩을요. 당신은 그리고는, 이번만큼은 좋은 코드가 나오기를 희망할 것입니다. 똑같은 사고방식으로는 전혀 바뀔 수 없습니다. 

 

하지만 감사하게도 좋은 소식은 아래의 글을 읽은 누군가는 나쁜 소식으로부터 벗어날 수 있다는 것입니다. 시작해봅시다. 

---

 1. Use Design Patterns 

 재 사용측면에서의 문제점을 해결하고 싶다면, 디자인 패턴에 대해 시간을 한 번 쏟아보세요.

 

디자인 패턴은 코딩에서 공통의 문제를 풀 수 있는 하나의 템플릿입니다. 이것은 잘 작동하며 검증 된 해결책이므로, 새로운 해결책을 마련하기 위해 시간을 낭비할 필요가 없습니다. 

 

공부하세요. 그리고 개발자로써 쉬운 삶을 선택하여 코딩하세요 .

 

 

웹 개발자가 알아야 할 7가지 디자인 패턴

7 JavaScript Design Patterns Every Developer Should Know

 

2. Separate Your Code 

 한 공간에 모든 타입의 코드를 섞어 쓰지마세요. 무조건 이것들을 분리해야합니다. 예를 들어 logic, view, data 가 해당 되겠네요. MVC 같은 아키텍쳐를 사용하여 당신의 코드 베이스를 정리하세요. 분리된 코드는 지저분한 코드보다 항상 제어하기 쉽습니다. 

 

함수를 작성할 때도 같은 사고 방식을 적용해야합니다. 간략하게 말하자면, 하나의 함수의 모든 기능을 담지마세요.

항상 명심하세요. 하나의 함수는 하나의 Mission이 주어져야 합니다. 

 

3. Build Modules 

모듈을 사용하는 것은 코드를 분리하는 것과 같은 맥락이지만, 한가지 다른 부분이 있습니다. 

 

모듈은 관련있는 코드들만을 그룹화하는 하나의 공간입니다. 예를 들면 인증을 처리하려는 모든 함수는 별도의 모듈에 배치되어야합니다. 인증을 처리하는 모듈을 구현해 봅시다. 

function validate(username, password) {
  // validate data
}
function login(username, password) {
  // login
}
function logout() {
  // logout
}
module.exports = {
  validate,
  login,
  logout
}

어딘가에서 이 기능을 쓰고 싶을 때는 어떻게 해야할까요. 아래의 코드를 보시죠. 

const { validate, login, logout } = require(‘./AuthorizationModule’)
validate(‘amy’, 123);
login(‘amy’, 123);
logout();

이러한 방법은 구조화된 당신의 코드를 유지할 수 있을 것입니다. 

 

4. Keep Your Files Small Even Tiny

 파일을 쪼개는 것은 쉽고 빠르게 내가 원하는 코드를 찾을 수 있다는 것입니다. 

 

커다란 파일에서는 이러한 일들(쉽고 빠르게 코드를 찾는 일)이 굉장히 복잡합니다. 저는 때때로 커다란 파일을 가지고 일을 해보았습니다. 10,000 줄 정도의 코드 라인이 있는 커다란 파일이었죠. 믿겨지십니까? 엄청나게 큰 로직들이 뭉탱이로 놓여있었고, 이것들은 제게 커다란 스트레스를 주었습니다.

 

저는 500줄 정도의 코드 라인이 있는 파일을 선호합니다. 이것은 저만의 규칙입니다. 이 이상으로 많아지는 경우, 새로운 파일로 분리를 시킵니다. 관련있는 로직들을 하나의 모듈로 묶어서 사용하는 것도 하나의 방법입니다. 

 

만약 당신이 이미 이런 일들을 행하고 있다면, 당신에게 칭찬해주세요. 그러한 코드들은 오랜시간 지속될 것이고, 잘 구조화 될 것입니다. 

 

5. Prefer Promise & Async/Await Over Callbacks 

기술적으로, 콜백은 많은 도움을 줍니다. 그러나 때때로 콜백은 콜백 Hell과 같은 다수의 콜백들이 중첩된 레벨에서는 고통의 원인이 됩니다. 게다가 굉장히 못생긴 코드가 됩니다. 당신은 가독성을 위해서는 이러한 구조를 될 수 있으면 지양해야 합니다. 

 

콜백 대신 사용하세요.  async/await 

중첩된 콜백은 생각의 자연스러운 흐름을 파괴합니다. 반면 async/await 는 그러한 흐름을 유지시키죠. 단순하게 말하면, async/await은 비동기 코드를 동기적으로 작성할 수 있는 기능을 제공합니다. 그렇기에 async/await 는 코드를 더욱 아름다고 가독성이 좋도록 만들어 줍니다. 

 

콜백 예시는 다음과 같습니다. 

function getBook(bookId, callback) {
  setTimeout(() => {
    let book = {
      title: ‘JavaScript’,
      authorId: ‘123’
    }
  
    callback(book);
  }, 500);
}

function getAuthor(authorId, callback) {
  setTimeout(() => {
    let author = {
      name: ‘Amy’,
      age: 28
    }
    callback(author);
  }, 500);
}

function fetchData() {
  // This will reach the hell level if having more callbacks. I keep it simple for example
 
  getBook(2020, book => {
    getAuthor(book.authorId, author => {
      console.log(author);
    })
  });
}

fetchData(); // { name: ‘Amy’, age: 28 }

아래 코드는 콜백을 더욱 아름답게 만들어 보았습니다. 

function getBook(bookId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let book = {
        title: ‘JavaScript’,
        authorId: ‘123’
      }
    
      resolve(book);
    }, 500);
  });
}

function getAuthor(authorId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let author = {
        name: ‘Amy’,
        age: 28
      }
      resolve(author);
    }, 500);
  });
}

async function fetchData() {
  let book = await getBook(2020);
  let author = await getAuthor(book.authorId);
  console.log(author)
}

fetchData(); // { name: ‘Amy’, age: 28 }

 

6. Destructuring

 ES6에는 놀라운 기능이 많이 있습니다. Destructuring 은 그 중 하나입니다. 

 

이 기능을 사용하면 개체에서 특정 필드를 추출하고, 필요한 사용을 위해 변수에 할당 할 수 있습니다. 

let person = {
  name: ‘Amy’,
  age: 28,
  job: ‘Entrepreneur’
};

let { name, age, job } = person;
console.log(name, age, job); // Amy 28 Entrepreneur

당신이 Destructuring을 사용한다면, 코드의 가독성은 올라갈 것입니다. this.person.name과도 같은 코드를 이제는 더 이상 사용하지 않아도 됩니다. 대신, name이라는 하나의 변수를 사용하면 됩니다. 중첩된 속성은 더 이상 없습니다. 오히려 동료들은 어떤 변수를 당신이 사용하고 있는지 더 확실하게 알 수 있을 것입니다. 

5 Ways to Make the Most of Destructuring in JavaScript to Write Cleaner Code

 

7. Initiate Default Values 

 기본 값이 함수 매개 변수에 대한 구조화와 함께 제공되는 경우 이는 매우 센세이션 하였습니다. 

 

자바스크립트에서 어떠한 데이터 타입을 인자로 넣어줘야 하는 지 아는 것은 매우 힘든 일입니다. 기본 값은 함수에 전달할 수 있는 데이터의 예를 제공하므로 많은 도움을 줍니다. 

 

매우 자주 우리는 인자의 값이 정의되었는지 아닌지에 대한 부분을 체크해야 했습니다. 만약 당신이 기본 값을 함수의 인자에 적용하였다면, 정의에 관한 체크는 더 이상하지 않아도 됩니다. 

 

8. Decorate Your Code Using Prettier and ESLint 

 팀의 각 팀원들은 자신만의 코딩 스타일을 가지고 있습니다. 프로젝트를 견고하게 그리고 확장이 가능하게 유지 하기 위해선 모든 팀원들과 당신은 하나의 코드 스타일을 고수해야 할 것입니다. 

 

ESLInt와 Prettier가 이를 만들어 줄 것입니다. 

 

ESLint는 제한된 코딩 스타일의 기본 규칙을 만들어 줍니다. 또한 당신이 니즈에 맞게 규칙을 만들 수 있고, 수정할 수 있습니다. 

Prettier는 자동적으로 당신의 코드를 정리하여 일관성을 유지시킵니다. 당신은 코드를 format하는 것은 Prettier에게 맡기고, 오직 좋은 코드를 만드는 것에만 집중하면 됩니다.  

 

이러한 도구를 사용하여 작업을 자동으로 수행하고, 더 중요한 작업에 의미있는 시간을 투자하세요. 

 

9. Define Multiple Parameters Rather Than One Object Parameter

 함수를 만들때를 보면, 두 가지 성향으로 나뉘어 개발을 하는 개발자를 볼 수 있습니다. 

 

첫 번째는 다음과 같습니다. 

function showProduct(name, price, description) {
  console.log(name, price, description);
}

두 번째는 다음과 같습니다.

function showProduct(product) {
  console.log(product.name, product.price, product.description);
}

당신은 어떤 타입으로 함수를 만드시나요? 

 

처음 보면, 두 번째가 긴 리스트 형식의 파라미터를 작성하지 않아도 되어 편리하게 사용할 수 있을 것으로 생각됩니다. 

그러나 답은 다음과 같습니다. 

첫 번째가 더욱 직관적입니다. 당신은 함수의 무엇을 전달해야 하는지 확실하게 알 수 있습니다. 

 

만약 당신이 하나의 객체를 파라미터로 전달한다면, 때론 당신은 객체 내부에 필요한 속성 값의 유무를 알 수 없을지도 모릅니다. 

 

그러나 이러한 규칙은 매번 사용되는 것은 아닙니다. 만약 4개 이상의 인자 값을 받아야하는 함수를 만들었다면, 4개의 인자 값을 하나의 객체로 만드세요. 

Conclusion 

 확장 가능한 코드 작성이라는 주제는 필요합니다. 코드를 많이 작성할수록 코딩 기술이 향상되는 것은 당연하죠. 지금까지 작성한 내용은 제가 지금까지 매일매일 사용하는 팁입니다. 이는 확장성과 일관성 있는 코드를 작성하는데 많은 도움을 줍니다. 

 

긴 글 읽어주셔서 감사합니다. 

---

< 참고자료 >

 

[사이트] #medium

https://javascript.plainenglish.io/9-tips-for-writing-scalable-javascript-code-e6bcfc791882

9 Tips for Writing Scalable JavaScript Code

9 Tips for Writing Scalable JavaScript Code end