javascript4 Refactoring 2판 3장 리팩터링을 언제 시작하고 언제 그만할지를 판단하는 일은 리팩터링의 작동 원리를 아는 것 못지않게 중요합니다. 이 장에서는 리팩터링하면 해결할 수 있는 문제의 징후를 제시할 뿐 이런 일들을 언제 해야하는지는 제시하지 않습니다. 즉, 인스턴스 변수는 몇 개가 적당한지와 같은 것들은 각자 경험을 통해 감을 키워야한다고 합니다. 기이한 이름(Mysterious Name) 코드는 단순하고 명료하게 작성해야 한다. 함수, 모듈, 변수, 클래스 등은 그 이름만 보고도 각각 어떻게 사용되는지 혹은 어떻게 사용해야 하는지 명확히 알 수 있도록 해야합니다. 중복 코드(Duplicated Code) 똑같은 코드 구조가 여러 곳에서 반복된다면 하나로 통합하여 더 나은 프로그램을 만들 수 있다. 예시를 들어보겠습니다. 한 클래.. 2023. 8. 29. TypeScript의 구조적 타이핑과 Brading TypeScript의 타입 체크는 구조적(structural) 시스템을 따릅니다. 이는 아래와 같은 신기한(?) 특징을 가집니다. interface Foo { a: number } interface Bar { a: number b: string } const foo: Foo = { a: 3, b: 'b' } as Bar위 코드는 Foo에 Bar를 할당하고 있습니다. Bar에는 Foo와는 다르게 추가적으로 b가 존재합니다. 그런데도 위 코드는 정상 동작합니다. 이러한 이유는 TypeScript가 구조적 시스템을 따르기 때문입니다. Foo가 되기 위해서는 a: number만 있으면 되고, 이는 Bar도 만족하기 때문에 위 코드가 정상 동작하는 것입니다. 즉, 구조적으로 타입이 맞기만 하면, 이.. 2023. 8. 23. 리팩터링 2판 1장 최근 개발을 진행하면서 어떻게하면 더 효율적인 코드를 만들 수 있을까 생각해봤어요. 그러던중 이 분야에서는 리팩터링 책이 유명하다는 것을 듣고 읽어보며 따로 정리도 해보려고 해요. 그럼 이제 시작할까요? 오늘은 1장 리팩터링: 첫 번째 예시 파트를 시작해볼게요. 1장 리팩터링: 첫 번째 예시 이번 장은 첫 번째 장이라서 그런지 예시를 통해 설명하는 경향이 있어요. 전반적으로 이 책의 뒷부분에서 사용되는 여러 기법들을 전체적인 관점에서 설명해주고 있어요. 그래서 전체적으로 어떤 방식으로 리팩터링을 진행해야하는지 알아보는데 주의를 집중하는게 좋다고 판단했어요. 그럼 이제 시작해볼까요? 먼저 리팩터링이란 '프로그램이 새로운 기능을 추가하기에 편한 구조가 되게끔 먼저 기능을 추가하기 쉬운 형태로 변경하는.. 2023. 6. 1. React 상에서 컨디션 렌더링을 위해 사용하는 "&&" 에 대한건 안녕하세요. 오늘은 React에서 조건에 따라 렌더링을 다르게하고 싶을 때 사용하는 "&&" 연산자를 알아보고 올바른 조건 렌더링(conditional rendering) 작성법을 알아보겠습니다. 우리는 React 애플리케이션을 보면서 props와 state에 따라 component를 조건부 렌더링하는 방법에 대해서 알고 있습니다. 보통 "&&" 연산자를 많이 사용하실 겁니다. 하지만 아시는 분은 아시겠지만 "&&" 연산자를 사용하면 원치않는 UI 버그를 발견할 수 있습니다. 이제 아래에서 좀 더 자세히 살펴보겠습니다. 전통적으로 "&&" 연산자를 사용하는 방법에 대해 먼저 알아볼까용? function ExampleComponent({ condition }) { return ( Example {condi.. 2022. 12. 19. 이전 1 다음 반응형
