Skip to content

[8팀 김민지] Chapter 2-1. 클린코드와 리팩토링 #49

Open
annkimm wants to merge 21 commits intohanghae-plus:mainfrom
annkimm:main
Open

[8팀 김민지] Chapter 2-1. 클린코드와 리팩토링 #49
annkimm wants to merge 21 commits intohanghae-plus:mainfrom
annkimm:main

Conversation

@annkimm
Copy link

@annkimm annkimm commented Jul 30, 2025

배포 링크

https://annkimm.github.io/front_6th_chapter2-1/

과제 체크포인트

기본과제

  • 코드가 Prettier를 통해 일관된 포맷팅이 적용되어 있는가?
  • 적절한 줄바꿈과 주석을 사용하여 코드의 논리적 단위를 명확히 구분했는가?
  • 변수명과 함수명이 그 역할을 명확히 나타내며, 일관된 네이밍 규칙을 따르는가?
  • 매직 넘버와 문자열을 의미 있는 상수로 추출했는가?
  • 중복 코드를 제거하고 재사용 가능한 형태로 리팩토링했는가?
  • 함수가 단일 책임 원칙을 따르며, 한 가지 작업만 수행하는가?
  • 조건문과 반복문이 간결하고 명확한가? 복잡한 조건을 함수로 추출했는가?
  • 코드의 배치가 의존성과 실행 흐름에 따라 논리적으로 구성되어 있는가?
  • 연관된 코드를 의미 있는 함수나 모듈로 그룹화했는가?
  • ES6+ 문법을 활용하여 코드를 더 간결하고 명확하게 작성했는가?
  • 전역 상태와 부수 효과(side effects)를 최소화했는가?
  • 에러 처리와 예외 상황을 명확히 고려하고 처리했는가?
  • 코드 자체가 자기 문서화되어 있어, 주석 없이도 의도를 파악할 수 있는가?
  • 비즈니스 로직과 UI 로직이 적절히 분리되어 있는가?
  • 코드의 각 부분이 테스트 가능하도록 구조화되어 있는가?
  • 성능 개선을 위해 불필요한 연산이나 렌더링을 제거했는가?
  • 새로운 기능 추가나 변경이 기존 코드에 미치는 영향을 최소화했는가?
  • 코드 리뷰를 통해 다른 개발자들의 피드백을 반영하고 개선했는가?
  • (핵심!) 리팩토링 시 기존 기능을 그대로 유지하면서 점진적으로 개선했는가?

심화과제

  • 변경한 구조와 코드가 기존의 코드보다 가독성이 높고 이해하기 쉬운가?
  • 변경한 구조와 코드가 기존의 코드보다 기능을 수정하거나 확장하기에 용이한가?
  • 변경한 구조와 코드가 기존의 코드보다 테스트를 하기에 더 용이한가?
  • 변경한 구조와 코드가 기존의 모든 기능은 그대로 유지했는가?
  • (핵심!) 변경한 구조와 코드를 새로운 한번에 새로만들지 않고 점진적으로 개선했는가?

과제 셀프회고

과제 양이 너무 많아서 처음에는 스스로 해보자고 했는데...
중간에 갑자기 fail나기 시작하면 멘붕 시작
원래 Chat GPT 쓰다가 클로드로 갈아타기 시전
아, 클로드 최고... 원하는 바 잘 해주는게 매우 믿음직스럽다.

과제를 하면서 내가 제일 신경 쓴 부분은 무엇인가요?

폴더 구조를 최대한 간단하게 짤 수 있도록 했습니다.
Basic 폴더 구조
스크린샷 2025-08-02 오전 1 39 26

Advanced 폴더 구조
스크린샷 2025-08-02 오전 1 40 14

과제를 다시 해보면 더 잘 할 수 있었겠다 아쉬운 점이 있다면 무엇인가요?

AI 도움 안받아서 다시 해보기, 더 세분화해서 짜보기?
양에 압도돼서 AI 의존도가 올라간 것도 아쉬운 점...
시간이 있다면 좀 나았을지도요.

리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문 편하게 남겨주세요 :)

양은 많은데 중간에 갈아엎어서 너무 시간이 부족해지다보니 AI 의존도가 너무 올라가서 AI가 다해준 것 같습니다.
중간에 갈아엎지 않고 할 수 있는 방법이 있을까요?

Copy link

@unseoJang unseoJang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

민지님 2-1 과제 너무 고생 많으셧습니다...
AI한테 클린코드를 잘 배웟는지 모르겠네요
AI한테 클린코드 진행하고 뒤에 좀 더 민지님이 수정했으면 좋았을텐데...
심화과제는 진행 못해서 아쉬워요....
민지님 꼭 한번 과제 복습해봤으면 좋겠어요

util도 잘 분리 했고 상수화도 너무 잘해주신것같아요
중간중간 함수 구조화도 꼭 한번 상세하게 경험해서 과제를 극단적으로 한번 해봤으면 좋을 것 같아요

이번과제 지수님이 정말 잘 해주셧으니까 꼭 한번 보시고 와 잘했네 하고 그냥 넘어가지 마시고...뭘 잘했지 한번 확인해보는 것도 좋을 것 같아요

2-2 과제도 화이팅입니다!

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

컴포넌트 분리 잘해주셧네요 이대로 심화 할수 있었을 텐데 아쉬워요 ㅜㅜ

function setupRecommendSale() {
const delay = Math.random() * TIMERS.RECOMMEND_SALE_MAX_DELAY

setTimeout(() => {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

delay 로 시간 따로 뺸건 너무 좋네요
안에 세부 내용도 분리 해볼수 있으면 분리하는게 좋아보여요!

}

export function calculateTotalWithDiscounts(cartItems) {
let subtotal = 0

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let 안쓰고 모두 const 로 고쳐보는 것도 고려해보면 좋을 것 같아요

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

상세 주석좀 달아주세용...ㅜㅜ
안에 어떤 역할인지 잘 모르겠네요

중간에 들어간 컴포넌트들도 분리 가능할것같아요

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

비즈니스 로직은 확실히 보이는데 let중복 할당 제거 및 나머지 함수들의 조건 분리 분기 시켜줄수 있고 단순화 시켜서 한 함수에 많은 책임을 갖지 않게 하는 부분도 고려해보면 좋을 것 같아요

// 수량 보너스
if (totalQuantity >= 30) {
finalPoints += POINTS.BONUS.BULK_30
pointsDetail.push('대량구매(30개+) +100p')

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이런 string 도 상수화 하면 좋을 것 같아요

import { initializeProducts } from '../data/products.js'

// 전역 상태
let state = {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const 로 바꿔서 내부 필드 초기화 유지시키는 쪽도 고려해봐야 할 것 같아요

if (element) element.classList.toggle('hidden')
}

export function initializeDOMElements() {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

상수화 잘 해주셧네요

return `₩${Math.round(price).toLocaleString()}`
}

export function formatDiscountRate(rate) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이렇게 계산식 util 로 뺸건 잘햇네요

@ckdwns9121
Copy link
Member

민지님 한주간 고생많으셨어요 ..!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants