오늘 작업의 대부분은 어제부터 계속된 작업으로, 단지 내 애플리케이션 경로에 비즈니스 로직을 구현하는 것뿐입니다. 그래서 저는 이에 대한 글을 잠시 쉬고 애플리케이션에서 매우 구체적인 작업을 수행하기 위해 만든 세 가지 함수에 대해 이야기하겠습니다.

유틸리티 폴더란 무엇입니까?

이것은 집을 찾는데 어려움을 겪지만 그것들 없이는 애플리케이션이 작동할 수 없는 모든 작은 기능을 저장하는 디렉토리입니다.

유틸리티 폴더는 많은 애플리케이션의 알려지지 않은 영웅들을 위한 쓰레기장입니다.

몇 줄 이상의 코드가 필요하고 재사용해야 하는 데이터 변환을 수행해야 하는 경우 다음으로 내보낼 수 있는 자체 파일에 해당 데이터를 저장하는 것이 좋습니다. 나머지 신청서를 작성하세요.

그냥 복사해서 붙여넣는 게 어때요? 음, 이는 DRY와 관심사 분리라는 두 가지 프로그래밍 원칙을 위반하는 것입니다.

같은 말을 반복하지 마세요

자신을 반복하는 것은 단조로울 뿐만 아니라 지원서 전반에 걸쳐 충분히 수행했다면 변경하는 것도 부담스럽습니다. 오늘 비가 올 확률을 계산하는 알고리즘을 상상해 보세요.

사람들이 어떻게 하는지 모르기 때문에 예시를 보여드릴 수는 없습니다. 그러나 이 계산에 액세스해야 하는 여러 위치의 코드 전체에서 이 모든 것을 복사하면 Very Smart Scientific Weather Committee가 새롭고 더 정확한 알고리즘을 가지고 돌아올 때 매우 당황하게 될 것입니다.

코드의 재사용된 부분을 가져와서 한 곳에서 업데이트되는 동시에 여러 곳에서 사용할 수 있도록 패키징하는 방법을 찾으세요.

내 utils 폴더에 있는 모든 기능은 내 애플리케이션 전반에 걸쳐 여러 곳에서 사용됩니다!

우려사항의 분리

프로그래머로서 우리는 다양한 일을 수행하는 함수를 만들고 싶지 않습니다. 우리는 모두 한 가지 일을 하는 많은 함수를 갖고 싶어합니다. 왜? 글쎄요, 이러한 기능을 더 재사용 가능하게 만듭니다!

이것이 utils 폴더와 무슨 관련이 있나요? 글쎄요, 제가 다루려고 하는 함수는 실제로 getRoastsById와 같은 함수 내에 자리를 차지하지 않습니다. 왜냐하면 그것이 수행하는 작업이 아니기 때문입니다! 우리가 뭔가 다른 일을 해야 할 때, 우리는 그것을 위한 함수를 만들어야 합니다. 그러나 해당 기능에 대한 논리적인 위치가 없을 경우 "도우미"이기 때문에 이를 utils 디렉토리에 저장합니다!

내 유틸리티 폴더

지금까지 세 가지 사용자 정의 유틸리티가 있습니다:

• 삽입문
• 업데이트문
• objectKeysToCamel

그들의 이름으로 그들이 무엇을 하는지 분명해지길 바라지만, 그들이 해결하는 문제와 그들이 어떻게 작동하는지 간략하게 공유하겠습니다.

insert문

문제: 내 응용 프로그램의 다양한 서비스에서 데이터베이스에 대한 INSERT 쿼리를 수행해야 합니다. 이러한 명령문에서는 1) 열 이름과 2) 값을 명시적으로 나열해야 합니다. 각 경로에서 이러한 내용을 입력할 필요가 없으므로 이를 수행하는 함수를 만들었습니다.

Input: 이 함수는 데이터베이스의 테이블 이름과 일치하는 문자열인 table과 사용자가 데이터베이스에 추가하려는 모델을 나타내는 Javascript 객체인 obj라는 두 개의 매개변수를 사용합니다.

출력: 1) 자리 표시자 값이 포함된 INSERT 문자열 형식의 속성과 2) 매개변수화된 쿼리에 사용할 값의 배열이 포함된 개체입니다.

const { snakeCase } = require('change-case-commonjs');

function insertStatement(table, obj) {
  const keys = Object.keys(obj);
  const values = Object.values(obj);

  let statement = `INSERT INTO ${table} (`;

  // Add snake_case keys to the statement
  const keyString = keys.map((key, i) => snakeCase(key)).join(', ');
  statement  = `${keyString}) VALUES (`;

  // Add placeholders for the values
  const placeholders = keys.map((_, i) => `$${i   1}`).join(', ');
  statement  = `${placeholders}) RETURNING *;`;

  // Return the query string and the values array
  return {
    text: statement,
    values: values
  };
}

module.exports = insertStatement;

업데이트문

문제: INSERT 문과 유사하게 UPDATE 문에서는 쿼리에 열 이름과 값을 모두 명시적으로 명시해야 합니다. 이 구문은 INSERT 문과 다릅니다. 조건부 논리를 통해 DatabaseQueryGenerator 함수를 생성할 수 있었지만 이 역시 관심사 분리를 위반하는 것 같습니다. 원하는 쿼리 종류를 결정하거나 이를 기반으로 구문을 생성하는 것과 같은 기능이 있습니까?

입력: 이 함수는 세 개의 매개변수를 사용합니다. obj는 업데이트된 레코드를 나타내는 JavaScript 개체입니다. table , 데이터베이스의 테이블과 일치해야 하는 문자열입니다. id , 새 정보로 업데이트할 레코드와 일치하는 정수입니다.

출력: 1) 자리 표시자 값이 포함된 UPDATE 문자열 형식의 속성과 2) 매개변수화된 쿼리에 사용할 값의 배열이 포함된 개체입니다.

const { snakeCase } = require('change-case-commonjs');

function updateStatement(obj, table, id) {
  const keys = Object.keys(obj);
  const values = Object.values(obj);
  let statement = `UPDATE ${table} SET `;

  keys.forEach((key, index) => {
    statement  = `${snakeCase(key)} = $${index   1}, `;
  });

  // Remove the last comma and space
  statement = statement.slice(0, -2);

  // Determine the correct ID column based on the table
  const idColumn = table === 'users' ? 'username' : table === 'roasts' ? 'roast_id' : '';

  // Finalize the statement with the WHERE clause
  statement  = ` WHERE ${idColumn} = $${keys.length   1} RETURNING *;`;

  return {
    text: statement,
    values: [...values, id]
  };
}

module.exports = updateStatement

objectKeysToCamel

문제: 데이터베이스 스타일이 JavaScript 스타일과 다릅니다. 그러나 나는 어느 쪽이든 타협할 생각이 없습니다. 내 JS 파일에서 내 명명 규칙은 camelCase를 사용하지만 내 데이터베이스에서는 snake_case를 사용합니다. 반환된 개체의 모든 속성 이름은 동일하지만 형식이 다릅니다. 이 사례 표준을 유지하려면 snake_case를 사용하여 JS의 속성에 액세스해야 하지만 이것이 마음에 들지 않습니다.

입력: 이 함수는 키가 camelCase 형식으로 변환되어야 하는 obj JavaScript 객체인 하나의 매개변수만 사용합니다.

출력: camelCase 형식의 키가 있는 동일한 객체입니다.

const { camelCase } = require('change-case-commonjs');

function objectKeysToCamel(obj) {
  // Extract the keys and values
  const keys = Object.keys(obj);
  const values = Object.values(obj);
  let camel = {}

  // Change the formatting of each key, assigning it the proper value
  keys.forEach((key, i) => {
    const camelKey = camelCase(key);
    camel[camelKey] = values[i]
  })

  // Return the new object
  return camel;
}

module.exports = objectKeysToCamel;

프로젝트 확인

변경 사항을 확인하고, 로컬에서 포크 및 실행하거나, 코드 변경을 제안하려면 여기 GitHub 저장소 링크를 참조하세요.

https://github.com/nmiller15/roast

프런트엔드 애플리케이션이 현재 Netlify에 배포되었습니다! 일부 기능을 살펴보고 실제로 작동하는 모습을 보려면 아래 모바일 장치에서 확인하세요.

https://knowyourhomeroast.netlify.app

참고: 이 배포에는 백엔드 API가 없으므로 계정과 로스트는 실제로 세션 사이 어디에도 저장되지 않습니다.