> 웹 프론트엔드 > JS 튜토리얼 > [Roast: Day - 내 `utils` 폴더

[Roast: Day - 내 `utils` 폴더

WBOY
풀어 주다: 2024-08-05 15:48:59
원래의
432명이 탐색했습니다.

[Roast: Day  - My `utils` Folder

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

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

이것은 집을 찾는 데 어려움을 겪지만 그것들 없이는 애플리케이션이 살아갈 수 없는 모든 작은 기능을 넣는 디렉토리입니다.

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

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

그냥 복사해서 붙여넣으면 어떨까요? 음, 이는 두 가지 프로그래밍 원칙, 즉 DRY와 관심사 분리를 위반하는 것입니다.

같은 말을 반복하지 마세요

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

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

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

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

우려사항의 분리

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

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

내 유틸리티 폴더

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

  • insertStatement
  • 업데이트문
  • objectKeysToCamel

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

insert문

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

입력: 이 함수는 두 개의 매개변수, 즉 데이터베이스의 테이블 이름과 일치하는 문자열인 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

Problem: The style of my database is different from the style of my JavaScript. However, I'm not willing to compromise in either area. In my JS files, my naming convention uses camelCase, where in my database it uses snake_case. All property names of returned objects are the same, but formatted differently. To maintain this case standard, I would have to access properties in my JS using snake_case, but I don't like this.

Input: The function takes only one parameter, an obj JavaScript object that should have its keys transformed into camelCase formatting.

Output: The same object, with camelCase formatted keys.

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;
로그인 후 복사

Check Out the Project

If you want to keep up with the changes, fork and run locally, or even suggest code changes, here’s a link to the GitHub repo!

https://github.com/nmiller15/roast

The frontend application is currently deployed on Netlify! If you want to mess around with some features and see it in action, view it on a mobile device below.

https://knowyourhomeroast.netlify.app

Note: This deployment has no backend api, so accounts and roasts are not actually saved anywhere between sessions.

위 내용은 [Roast: Day - 내 `utils` 폴더의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿