jtwjs Dev Wiki
  • DEV_ROAD
    • 💪🏻 생존하기
    • Week 1
      • 개발 환경 세팅
      • 타입스크립트
      • 리엑트
      • Testing Library
      • Parcel & ESLint
    • Week 2
      • JSX
      • Virtual DOM
    • Week 3
      • React Component
      • React State
    • Week 4
      • Express
      • Fetch API & CORS
      • React Hook
      • useRef & Custom Hook
    • Week 5
      • TDD
      • React Testing Library
      • MSW
      • Playwrite
      • Snapshot
    • Week 6
      • Separtion of Concerns
      • Principle
      • DI, (Dependency Injection)
      • Reflect-metadata
      • TSyringe
      • External Store
      • Follow Redux
      • usestore-ts
      • useSyncExternalStore
    • Week 7
      • Routing
      • Routes
      • Router
      • Navigation
    • Week 8
      • Design System
      • Style Basics
      • CSS-in-JS
      • Styled-Components
      • Global Style & Theme
    • Week 9
      • 개발하기 전 준비
      • 상품 목록 페이지
      • 상품 상세 페이지
      • 장바구니 페이지
    • Week 10
      • 로그인
      • 로그아웃
      • 회원가입
      • 주문 목록 & 주문 상세
    • Week 11
      • 배송 정보 입력
      • 포트원 결제 요청
      • 배송 및 결제 정보 전달
    • Week 12
      • 관리자 웹사이트개발시작
  • DEV_NOTE
    • TypeScript
      • 기본적 문법
        • Enum
        • 다형성
          • Untitled
        • 구조적 타이핑
        • 제너릭 타입
        • 컨디셔널 타입
        • 함수 메서드 타이핑
        • infer로 타입스크립트의 추론 직접 활용
        • 재귀 타입
        • 템플릿 리터럴 타입
        • 추가적인 타입 검사 satisfies 연산자
        • 타입스크립트 건망증
        • 원시 자료형에도 브랜딩 기법 사용 가능
        • 타입 좁히기
        • 유용한 타입 만들기
        • 데코레이터 함수
        • 앰비언트 선언도 선언 병합이 된다.
        • 앰비언트 선언도 선언병합이 된다.
    • Testing
      • Unit Testing
      • 단위 테스트의 두 분파
      • 좋은 단위 테스트를 구성하는 4대 요소
      • 테스트 대역과 식별할 수 있는 동작
      • 단위 테스트 스타일
      • 가치 있는 단위 테스트를 위한 리팩토링
      • 통합 테스트
      • Cross Browsing Testing
      • 기능 테스트 종류
      • React Testing Pattern
      • 프론트엔드 테스트 입문
        • 테스트 범위
        • 단위 테스트 검증
        • Mock
        • UI 컴포넌트 테스트
        • 테스트 커버리지
        • 웹 통합 테스트
        • MSW
        • 스토리북
        • 시각적 회귀 테스트
        • E2E 테스트
        • Github Actions 설정
        • 깃허브 액션에서 E2E
      • 시프트 레프트
        • 테스트 기본중의 기본
        • 단위 테스트
        • 코드 복잡도
        • 리팩터링
        • 코드 리뷰
        • 통합 테스트 패턴
        • 시스템 테스트의 자동화
        • 탐색적 테스트
      • Test Tip
      • vitest
      • playwright
      • Test Data Generator
      • MSW
    • Algorithm
      • coding test
      • Data Structure
    • Next.js
      • Data Fetching
      • Hydration
      • Next 13
      • Optimization
      • Next 15
    • Tailwind
      • Tailwind CSS
      • Theme
      • Directives
      • Tool
      • Design System
    • Storybook
      • Storybook
      • CSF3
      • CDD
      • Headless Component
    • Funtional Programming
      • 함수형 프로그래밍
      • 참조 투명성
      • 부수효과
      • 함수 합성
      • 제너릭 타입 활용하기
      • 암묵적 입출력
      • 액션과 계산, 데이터
      • 계층형 설계
      • 호출 그래프
      • 함수형 설계
      • 불변성
      • 일급 함수
      • 함수형 도구
    • Git
      • Github Actions
      • Conflict
      • Branch 전략
    • Contents Format
      • Audio
    • 3D Graphic
      • 3D keyword
      • Three.js
      • Geometry
      • Material
      • Light
      • Camera
      • Decal
      • Rotation
      • Text
      • Shadow
      • Fog
      • Post Processing
      • Animation
      • Math
        • Vector Space
        • 벡터의 연산
        • 회전 계산
      • 3D 컨텐츠가 만들어지는 과정
      • R3F
      • Env
      • Scene
      • Transform
      • R3F
      • Interaction & Raycast
      • Rendering Algorithnm
      • Blender
      • Blender
    • Accessibility
      • 접근성이란
    • Interactive Web
      • Parallax
      • Canvas
      • requestAnimationFrame
      • Effect
      • HSL
      • React.js + Canvas
      • Matter.js
    • AWS
      • DevOps
      • Amplify
      • S3
      • 클라우드 컴퓨팅
        • 온프레미스와 클라우드
        • 클라우드 도입효과
        • 클라우드 컴퓨팅의 범위
        • 컴퓨팅 옵션
          • EC2 - Virtual Machin
          • ECS, EKS - Container
          • Lambda - Serverless
        • 네트워크 가상화
        • 스토리지
        • 데이터베이스
        • 데이터 수집
        • 머신 러닝 영역
        • IoT 영역
        • 블록체인 영역
      • 클라우드 아키텍처 설계
    • Network
      • Web Server & WAS
    • System Design
      • System Design
      • Component
      • 의존성을 배제한 개발
      • Error Handling
      • Architecture
        • 모노로틱 아키텍처
        • Clean Architecture
        • Layered Architecture
        • 이벤트 기반 아키텍처
      • 상황을 파악하는 메타인지
      • 중복 문제 해결하기
      • Monorepo Arhitecture
        • 모노레포 운영과 트러블슈팅
        • Module Federation
      • 코드 병목지점
      • API 대응
      • 공통 코드
      • Infra 구축
      • 모듈 기반의 개발 방식
      • Design System
        • 최소 수준의 아키텍처 설정
        • 더 효율적인 디자인시스템 만들기
        • 디자인 시스템과 UI 라이브러리 목적
        • 디자인 토큰
      • 효율적인 업무
        • 업무 프로세스 병목 파악
      • Clean Code
      • Design Pattern
        • CQRS Pattern
        • Strangler Fig Pattern
        • 데코레이터 패턴
        • 커맨드 패턴
        • 전략 패턴
        • 옵저버 패턴
      • A/B 테스팅
      • 대규모 리엑트 웹앱 개발
        • 복잡성 관리
        • 모듈성
        • 성능
        • 디자인 시스템
        • 데이터 패칭
        • 상태 관리
        • 국제화
        • 코드 조직화하기
        • 개인화 A/B 테스팅
        • 확장 가능한 웹 아키텍처
        • 테스팅
        • 툴링
        • 기술적 마이그레이션
        • 타입스크립트
        • 라우팅
        • 사용자 중심 API 디자인
        • 리액트 미래
    • Performance
      • React DevTools
      • Component 최적화
      • Page Load
      • API
    • MFA
      • MSA
      • MFA 도입하기
      • Monorepo
        • Monorepo Tool
        • Yarn Berry Workspace
        • Turborepo
      • MFA Composition
      • SPA 통합
      • Design System
      • Package Manager
        • Yarn
        • pnpm
      • Transpiler & Bundler
        • Babel
        • Rollup
        • esbuild
        • swc
        • Webpack
        • Vite
      • 분해와 통합을 위한 여러 기술 비교
    • State Management
      • Zustand
    • React v18
      • Automatic batching
      • Suspense
      • Transition
    • SEO
      • Search Engine Optimization
      • Open Graph Element
      • Metadata
    • FE Develop
      • Scrubbing
      • Clipboard
    • Refactoring
      • 리팩토링 깊게 들여다보기
      • 긴 코드 조각내기
      • 타입 코드 처리하기
      • 유사한 코드 융합하기
      • 데이터 보호
      • 코드 추가 및 제거
    • OAuth 2.0
    • Analytics
      • Mixpanel
    • ETC
      • VSCode
    • React Hook In Action
      • useContext & Provider
      • 커스텀 훅
      • 코드 분할하기 with Suspense, lazy
      • Suspense와 이미지 적재하기
      • useTransition, uesDeferredValue
      • SuspenseList
Powered by GitBook
On this page
  • 코드 제거의 미학
  • 복잡성을 제거하기 위한 코드 제거
  • 레거시 코드
  • 코드 추가에 대한 두려움 떨쳐내기
  • 불확실성 받아들이기: 위험 감수
  • 가면 증후군
  1. DEV_NOTE
  2. Refactoring

코드 추가 및 제거

코드 제거의 미학

코드는 꾸준히 이자를 내야 하는 부채와 같다.

  • 코드가 가치 있다고 느끼게 되는 이유는 생산 비용이 비싸기 때문

  • 코드를 작성하려면 많은 시간을 소비하고 많은 카페인을 섭취해야 한다.

  • 시간이나 노력을 드렸기 때문에 어떤 것에 가치를 부여하는 것을 매몰 비용의 오류(sunk-cost fallacy)라고 한다.

  • 가치는 투자 자체에서 나오는 것이 아닌 투자의 결과에서 나온다.

복잡성을 제거하기 위한 코드 제거

어떤 것을 구현할 때 시스템이 어떻게 동작하는지에 대한 멘탈모델(인식모형)을 구축하고, 이에 영향을 미치도록 변경해야 한다.

  • 복잡성은 도메인 복잡성과 부수적 복잡성 두 유형으로 나뉜다.

    • 도메인 복잡성: 도메인이 기본적으로 가지고 있는 것

    • 부수적 복잡성: 도메인에서 요구하지 않았지만 우연히 추가된 모든 복잡성

부수적 복잡성

기술 부채의 동의어

개발이 더디고 더 어려워지는 원인이 된다.

기술적 무지, 기술적 낭비, 기술적 부채, 기술적 방해물로 네 가지 유형의 부수적인 복잡성이 있다.

  • 기술적 무지: 경험 부족으로 무의식적으로 코드에서 잘못된 결정을 내림으로써 좋지 않은 아키텍처를 만든다.

    • 무지해서 불필요한 결합을 추가하지 않고도 문제를 해결할 수 있는 기술이 부족해서 발생

    • 이 문제의 유일하게 지속 가능한 해결책은 "지속적으로 주의를 기울이는것(투자)" - 애자일 소프트웨어 개발을 위한 선언문

  • 기술적 낭비: 시간 압박으로 코드에 잘못된 결정을 내림으로써 아키텍처가 좋지 않은 결과를 초래하는 것

    • 문제나 모델을 충분히 이해하지 못하기 때문에 테스트나 리팩터링을 건너뛰거나, 기한을 맞추기 위해 프로세스를 우회

    • 이런 나쁜 결정은 의도적인 것

    • 외부 압력으로 인해 더 나은 지식을 거스르는 방향을 선택함

  • 기술적 부채: 일시적으로 차선의 해결책을 선택해서 이익을 얻는 것

    • ex: 적절한 아키텍처 고려 없이 핫픽스를 구현하고 중요 문제를 해결하기 위해 적용한 다음 나중에 적절한 수정을 구현하기 위해 다시 해야할 때

    • 기술적 부채를 발생시키는 것은 전략적인 결정

    • 만료일이 있는한 본질적으로 잘못된 것이 없다

  • 기술적 장애물: 개발을 더디게 만드는 모든 것

    • 문서, 테스트 및 기존 코드 등 모든 범주가 포함됨

    • 무언가를 구축하는데 따르는 부작용

"거기 두어도 아무런 방해가 되지 않는다"라는 말은 모두 거짓말

  • 해결책은 더 이상 삭제할 것이 없을 때까지 가능한 한 많은 것을 삭제하는 것

  • 조금이라도 사용하지 않는 것들은 사라져야 한다.

  • 사용하지 않으면 기능은 퇴화한다.

레거시 코드

수정하기 겁나는 코드 (이 상황은 종종 서커스 팩터의 결과이다.)

서커스 팩터(circus factor) - 버스 또는 로터리 팩터라고도 함

  • 너무 많은 시스템에 대한 지식이 소실되어 개발의 일부가 중단되기 전까지 얼마나 많은 사람이 이탈해서 서커스에 합류해야 하는지를 나타낸다.

  • "시스템을 배포하는 방법은 존밖에 모른다" 는 해당 시스템에 서커스 팩터가 있다고 말한다.

  • 서커스 팩터를 잃는 순간 우리는 건드리기 꺼려지는 미지의 코드, 즉 레거시 코드를 가지게 된다.

스트랭글러 무화과나무 패턴

이 패턴은 기존 나무 줄기에 씨를 뿌리고 자라면서 숙주를 감싸 궁극적으로 숙주 나무를 교살해 죽이는 스트랭글러 무화과나무의 이름을 따서 명명됨

코드 추가에 대한 두려움 떨쳐내기

완벽한 코드에 대한 부담감

  • 코드가 결함을 갖게 되는 방법이 얼마나 많은지를 생각해보자

  • 완벽한 코드라는 것은 완전히 비현실적 목표이다.

  • 성능, 구조, 추상화 수준, 사용의 용이성, 유지보수 비용, 참신함, 창의성, 정확성, 보안 등 많은 고려사항이 '완벽함'에 영향을 미침

  • 이 모든 것을 염두에 두는 것은 불가능하다.

  • 코드를 추가하는 것이 수정하는 것보다 안전하다는 것을 인식하자.

불확실성 받아들이기: 위험 감수

겁을 먹으면 효과적으로 일할 수 없다.

  • 소프트웨어 개발은 도메인을 학습하고 그 지식을 프로그래밍 언어로 코드화하는 것

  • 팀 생산성의 가장 큰 예측 변수는 심리적 안정이다.

    • 팀원들이 서로를 신뢰하고 위험을 감수하는 것이 안전하다고 느껴지는지의 여부

  • 무언가를 시도하기 전 만드는 방법에 대해 토론하거나 설계해야 한다는 강박관념이 들게한다.

    • 이것은 잘못된 것을 만드는 것에 대한 두려움이 제데로 못 만드는 것에 대한 두려움을 압도할 때 나타남

낭비나 위험에 대한 두려움 극복을 위한 사용 시간 비율 지정

  • 이해관계자의 요청에 의해 발생되지 않는 모든 작업을 의미하는 비티켓 작업들을 금요일에 몰아서 하자.

  • 금요일에 개발자들은 실험과 주요 리팩터링을 수행하거나 개발 작업을 자동화하여 품질을 개선하거나 낭비를 줄이기

  • 일상적인 티켓 작업에 활력을 불어넣을 수 있는 변화이기도 하다.

가면 증후군

스스로를 자격이 없는 사람으로 간주하여 누군가 자신을 사기꾼으로 폭로할까봐 두려워 하는 것

  • 자신을 보호하기 위해 코드를 완벽하게 만들려는 마음에 코드를 공개하지 않거나 -> 생산성에 실질적인 영향

  • 사소한 문제에 대해 완벽한 코드를 작성하는 것은 특히 어렵기 때문에 질질 끌거나 대부분의 시간을 허비

  • 개발자는 종종 다른 사람의 코드를 경솔하게 비판한다.

    • "누군가 내 코드에 대해 그런 말을 하고 있나요?"

    • "그 사람이 내 코드를 본다면?", "그가 내 코드를 보고 있는건가?"

    • 이러한 생각은 나를 가면 증후군으로 만들게 한다.

  • "나는 완벽한 코드가 존재한다고 믿지 않는다."

  • "코드에서 가장 안전한 것은 아무것도 변경하지 않는 것임을 상기" -> 수정이 아닌 확장

Previous데이터 보호NextOAuth 2.0

Last updated 9 months ago