[7팀 양창훈] Chapter 2-1. 클린코드와 리팩토링

[yangchanghun]

과제 체크포인트

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

기본과제

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

심화과제

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

과제 셀프회고

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

변수명을 일관되게 하려고 노력했지만 변수명을 이렇게 짓는게 맞나 라는 생각이 들어 다른 분들거를 참고하고 다른 분들은 왜 이렇게 짓지? 라는 의문점과 나는 왜 이렇게 변수명을 생각못하지 라는 생각이 겹치고 겹쳐 멘탈이 나가 다른 거부터 하자 하고 변수명을 제대로 짓지는 못한거같습니다. 신경 쓰려고했지만..,,;;;;
또한 함수분리를 최대한으로 하여 단일책임원칙을 지키려 해봤지만 매개변수와 함수가 어디서 오고 가는지 헷갈리는 부분들이 많았습니다. 그래도 최대한 분리해보고 테스트를 돌렸지만 테스트가 실패하여 분리도 제대로 못하였습니다. 신경 스려고했지만..!! ㅠ

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

변수명이나, 경로설정,함수분리 등에 있어서 불필요한 시간을 소비하고 집중도도 많이 떨어지게 된거같습니다. 다음 부터는 이런부분에선 ai를 활용하여 초기에 라인을 잡고 시작하면 좋을 거 같다는 생각이 듭니다.

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

제가 협업 프로젝트에대한 경험이 없어서 그러는데 실제 큰프로젝트에선 무조건 한개의 함수안에서 한개의 책임만을 가지게 하나요? 아니면 상황에 따라 다르게 구현 할까요?~

[yangchanghun]

저는 완성도가 너무 부족해서 단일책임원칙이나 등등 잘 된게없어서 소개할만한게 없고 궁금한점 적어봤습니다.

다른 분들 변수명이나 함수명 지을때 어떤식으로 짓나요? 혹은 ai한테 지어달라할때 뭐라고 어떤식으로 물어보면서 지어달라고 하는지 궁금합니다.

함수분리 할때 매개변수 전달하고 받을때 import export 안헷갈리나 궁금합니다 .

[geonhwiii]

저는 저희 컨벤션할때 맞춘 내용들이랑 비슷해요.

그리고, 최대한 사용하는 컴포넌트나 함수들은 파일 근처에 위치시키려고 노력하는 것 같아요.

/screens/ui/home.tsx
/screens/ui/home.header.tsx

이상한 예시지만 전 이런 느낌으로 개발하는 것 같아요~ㅋㅋㅋ

그렇게 되면, 파일을 불러오거나 읽으러 갈떄도 많은 폴더를 참조하지 않아서 관리하기 쉬운거 같아요~!

[esoby]

저도 변수명 함수명 컴포넌트명에 대한 고민이 늘 많은데요 ..

말씀대로 다른 파일에서 import 하려는데 기억이 안 나면 막 찾으러 돌아가야 하잖아요
그래서 조금 길어지더라도 많은 내용을 담아서 의미를 좀 명확히 하려는 편인 것 같아요!

그리고 이름 짓기가 너무 애매하고 어려운 녀석이다? 이름이 너무너무 길어진다? 싶으면 코드를 잘못 짰는지 돌아봅니다 ........... 💦

[eveneul]

저는 저희 컨벤션할때 맞춘 내용들이랑 비슷해요.

그리고, 최대한 사용하는 컴포넌트나 함수들은 파일 근처에 위치시키려고 노력하는 것 같아요.

/screens/ui/home.tsx
/screens/ui/home.header.tsx

이상한 예시지만 전 이런 느낌으로 개발하는 것 같아요~ㅋㅋㅋ

그렇게 되면, 파일을 불러오거나 읽으러 갈떄도 많은 폴더를 참조하지 않아서 관리하기 쉬운거 같아요~!

오~ 리믹스 같아요

[eveneul]

command + k 딸깍. 이러이러한 기능 만들 건데 이름 만들어 줘.

하지만.. 저는 사실 함수, 변수 이름 짓는 거 좋아해요. create, render, on, handle 등 다양하게 씁니다.
어떤 경우 변수명을 짓는 게 어려우세요? 예시를 알려 주시면 알잘딱깔센하게 의견을 내 보겠습니다.

[nimusmix]

저는 함수가 하고자 하는 동작을 변수명에 넣으려고 하는 편입니다!
의외로 이러면 단일 책임의 원칙도 잘 지켜지는 효과가 있더라구요?!

간단하게 예를 들자면 랜덤한 책을 하나 가져와서 그 책을 추천하고, 그 책의 recommend 를 true로 변경해야 하는 상황이 있다고 했을 때,
랜덤한 책을 가져오는 함수를 getRandomBook 이라고 지으면 저기 안에서는 진짜 랜덤한 책을 가져오기만 해야 하고,
recommend까지 하려면 함수 이름이 getRandomBookAndRecommend 이런 식으로 구구절절 해야 하니까

예시가 이상한데 무슨 뜻인지 아시겠지요?!!

---

함수분리 할때 매개변수 전달하고 받을때 import export 안헷갈리나 궁금합니다 .

요것은 무슨 뜻인지 모르겠어요!

[Elli-Lee]

저도 저희 페어 4팀 컨벤션 회의때 맞췄던 방향으로 변수명 함수명 지었습니다!
컨벤션이 있으니까 오히려 변수명, 함수명 지을 때 고민이 쪼금 덜 한것 같더라구요..!

[yangchanghun]

저는 함수가 하고자 하는 동작을 변수명에 넣으려고 하는 편입니다! 의외로 이러면 단일 책임의 원칙도 잘 지켜지는 효과가 있더라구요?!

간단하게 예를 들자면 랜덤한 책을 하나 가져와서 그 책을 추천하고, 그 책의 recommend 를 true로 변경해야 하는 상황이 있다고 했을 때, 랜덤한 책을 가져오는 함수를 getRandomBook 이라고 지으면 저기 안에서는 진짜 랜덤한 책을 가져오기만 해야 하고, recommend까지 하려면 함수 이름이 getRandomBookAndRecommend 이런 식으로 구구절절 해야 하니까

예시가 이상한데 무슨 뜻인지 아시겠지요?!!

함수분리 할때 매개변수 전달하고 받을때 import export 안헷갈리나 궁금합니다 .

요것은 무슨 뜻인지 모르겠어요!

예시 좋은거같습니다 감사합니다!

[yangchanghun]

command + k 딸깍. 이러이러한 기능 만들 건데 이름 만들어 줘.

하지만.. 저는 사실 함수, 변수 이름 짓는 거 좋아해요. create, render, on, handle 등 다양하게 씁니다. 어떤 경우 변수명을 짓는 게 어려우세요? 예시를 알려 주시면 알잘딱깔센하게 의견을 내 보겠습니다.

급 생각하려니까 떠오르는게 없네여 후에 변수명 짓기 어려울때 있으면 여쭤보겠슴다 감삼당 ㅎ_ㅎ

[BangDori]

@yangchanghun

안녕하세요 창훈님~~ 이번주 과제 쉽지 않으셨을텐데, 포기하지않고 끝까지 하신다구 고생많으셨습니다!

명명(변수명, 함수명 등)에 대해 고민이 되시는 것 같아서 이에 대한 제 의견을 한 번 달아보겠습니다ㅎㅎ

변수명? 함수명? 그거 어떻게 하는데

변수명을 일관되게 하려고 노력했지만 변수명을 이렇게 짓는게 맞나 라는 생각이 들어 다른 분들거를 참고하고 다른 분들은 왜 이렇게 짓지? 라는 의문점과 나는 왜 이렇게 변수명을 생각못하지 라는 생각이 겹치고 겹쳐 멘탈이 나가 다른 거부터 하자 하고 변수명을 제대로 짓지는 못한거같습니다. 신경 쓰려고했지만..,,;;;;

제 기준에서는 창훈님은 본인이 생각하시는 것보다 훨씬 변수명을 잘 짓고 계세요! 너무 자책하지 않으셔도 됩니다 😊

예를 들어, 남겨주신 의미 없는 변수명 바꾸는중... 커밋을 보면서 오히려 저는 명명이 굉장히 명확하다고 느꼈습니다.

  {
    id: PRODUCTS.KEYBOARD,
    name: '버그 없애는 키보드',
--    val: 10000,
--    originalVal: 10000,
--    q: 50,
++  discountedPrice: 10000,
++  originalPrice: 10000,
++  quantity: 50,
    onSale: false,
    suggestSale: false,
  },

저였다면 그냥 originalValue, value 정도로 작성했을 것 같은데, 창훈님은 단순한 숫자 값이 아니라 이 값이 무엇을 의미하는지를 요구사항 기반으로 명확히 표현해주셨어요. 그래서 코드를 처음 본 저도 이게 할인된 금액이구나, 원래 금액이구나, 수량이구나를 바로 알 수 있었던 것 같아요. (저는 깜빡하고 이번 과제에서 고치지 못했네요.. ㅠ)

창훈님이 어떤 부분에서 아쉽게 느끼셨는지를 정확히 알 수 없지만, 지금처럼 요구사항을 기반으로 "이 값이 어떤 의미를 가지는가?"를 중심으로 변수명을 고민하신다면 충분히 잘하고 계신 거라고 생각해요. 그리고 이 과정에서 길고 구체적인 이름을 사용하는 건 전혀 문제가 되지 않구요!

간단한 예를 들자면, 제거된 속성이라는 의미를 담고 싶을 때 단순히 removedProperty라고 하면 “어디에서 제거된 건데?” 같은 의문이 들 수 있죠. 그럴 땐 removedPropertyOnProductOption 같이 조금 길더라도 더 명확한 이름을 붙이는 것도 좋은 방법이에요. 이처럼 컨텍스트를 포함한 명명이 오히려 협업에서는 더 강력하게 작동해요!

사실 저도 변수명 짓는 거 어려워서 늘 고민하거든요 ㅋㅋ 그래서 창훈님처럼 고민하면서 이름 짓는 것 자체가 이미 좋은 방향이라고 생각해요.

Tip

중요한 건? 자신감 잃지 않기! 다음주부터 같이 클린코드 스터디 하면서 함께 화이팅해봐요!!@@

[yangchanghun]

와우 답변감사합니다 병준님 요새 병준님 덕분에 많은내용도 배우고 자신감 많이 차는거 같네여 ㅎ_ㅎ 감삼다!