안녕하세요 코드종님! 코드리뷰 부탁해드려도 될까요?

코드 좀 봐주세요 코드종
#1

github: https://github.com/oct-sky-out/Interactive-Javascript/tree/Color-Picker-Project/JS/RGBColorPicker

작품 URL : https://oct-sky-out.github.io/Interactive-Javascript/html/RGBColorPicker.html
(미디어 쿼리는 적용못했습니다 ㅠㅠ 다음에 시간내서 꼭 모바일 이용 가능하도록 제작해놓겠습니다ㅠㅠ)

9월달에 만든 순수 js를 이용해서 dom제어를 하는
컬러피커 미니 프로젝트를 제작해보았습니다.

주변에 코드 리뷰 해줄분이 없었는데, 이번 기회에 한번 다른분에게 평가받아보고싶었습니다!!

코드종님께서는 개인적으로 어떠셨고, 또 제가 고쳐야 할 점에 대한 피드백을 받고싶어 부탁드려보아요!

처음으로 이 프로젝트에 주석도 달아도보았고, 개인적으로 고칠 부분, 코드중복 부분에 대한 리팩토링을 해보았는데 혹시나 타인의 시선에서는 다르게 인식하는 관점이나 함수 명, 코드 스타일에 대한 부분, 내가 작성한 주석을 다른 개발자가 보고 이해할 수 있도록 하는 작문능력(?)등을 통해서
클린코드 작성 하는 방법을 차차 배워 나가보고싶습니다!

감사합니다!! 잘 부탁드립니다!!

(코드종님 뿐만 아니라 다른 분께서도 이 게시물을 보시고, 깃헙에 들어가셔서 코드리뷰를 남겨주시면 겸허히 받들겠습니다!)

좋아요 1
#2

안녕하세요~ 질문 남겨주셔서 감사합니다. :+1: :pray:

별도의 라이브러리를 사용하지 않고 브라우저에서 기본 제공하는 JS범위 내에서 구현한 프로젝트는 정말 오랜만에 보내요. 그렇게 코딩해본지가 너무 오래전이라서 관련된 제 지삭은 너무 구식일 수 있겠습니다. :slight_smile: 이 점 감안하고 제 피드백을 봐주세요~ ㅎ

그래도 관련해서 코드를 일부 살펴보고 피드백 드립니다. 작은 사항일지 몰라도 도움이 되길 바라는 마음에 남겨봅니다. :smile:

주석 관련

처음 주석을 남겨보셨다고 했는데 꼼꼼히 단 주석이 인상적이네요. :+1:
주석의 형식은 문서화 도구(예 JSDoc)를 통해 쉽게 문서화 될 수 있도록 그런 도구의 형식을 참고하면 좋습니다. 그런 차원에서

/** @module color/mixer */

/** The name of the module. */
export const name = 'mixer';

/** The most recent blended color. */
export var lastColor = null;

/**
 * Blend two colors together.
 * @param {string} color1 - The first color, in hexadecimal format.
 * @param {string} color2 - The second color, in hexadecimal format.
 * @return {string} The blended color.
 */
export function blend(color1, color2) {}

// convert color to array of RGB values (0-255)
function rgbify(color) {}

export {
    /**
     * Get the red, green, and blue values of a color.
     * @function
     * @param {string} color - A color, in hexadecimal format.
     * @returns {Array.<number>} An array of the red, green, and blue values,
     * each ranging from 0 to 255.
     */
    rgbify as toRgb
}

기타

  • 함수 이름이나 파일 이름의 경우 대문자로 시작하는 경우는 앞에 new를 붙여서 사용하거나 React 컴포넌트 같은 경우에 사용하는게 일반적입니다. 따라서 이런 경우가 아닌데 일반 함수를 대문자로 시작하거나 파일명이 대문자를 사용하면 다른 사람들이 헷갈릴 수 있습니다.
  • 코드 전체를 제가 꼼꼼하게 살펴보진 못했는데 다른 내용들은 고민되었던 부분이 있으면 알려주세요.그 부분을 따로 살펴보겠습니다.

도움이 되었길 바래요~. 제가 쓴 내용중에 잘못되었거나 더 나은 방법을 알고 계신 분들은 댓글로 알려주세요.

그럼 오늘도 즐거운 코딩하세요~

좋아요 1
#3

감사합니다 덕분에 주석 관련, 파일 이름에 관한 일반적인 네이밍 컨벤션에 대해서도 알게되었네요 좋은 피드백 감사합니다!!

좋아요 1