작심삼일 개발이야기

2022년 12월 30일을 마지막으로 2023년 첫 블로깅이다. 처음엔 올해 독서 스터디를 다시 시작하면 작성해야지 하다가 팀원들의 사정으로 스터디가 중단되었고, 새롭게 시작한 사이드 프로젝트를 완성하고 작성해야지 하다가 거의 6개월째 사이드 프로젝트 한다는 핑계로 작성을 미루고 미루다가 지금까지 와버렸다. 처음 블로그를 시작하며 글의 퀄리티는 신경 쓰지 않고 글 개수에 집착을 하며 마구잡이로 작성했었다. 그렇게 글을 적다 보니 어느 순간 이게 맞나?라는 생각이 들었다. 뭔가 남들에게 보여주기에 부끄러움도 느꼈었다. 그러다 보니 더더욱 글 작성을 피했던 것 같다. 사이드 프로젝트를 진행하며 필요한 정보를 얻기 위해 구글링을 하며 여러 블로그를 찾던 중 마음에 드는 글을 발견했었다. 즐겨찾기까지 하며 참고..

자바스크립트는 덕 타이핑 기반이다. 어떤 함수의 매개변수 값을 모두 가지고 있다면 어떻게 생기던 상관없이 사용한다. interface Person { name: string; age: number; } const me = { name: "수혁", age: 27, gender: "M" }; const introduce = (p: Person) => { alert(`내 이름은 ${p.name}입니다. 나이는 ${p.age}입니다.`); }; introduce(me); me라는 객체는 Person의 type보다 gender라는 타입을 더 가지고 있지만 introduce 함수를 실행하는 것에 대한 아무런 문제가 없다. 함수를 만들 때 매개변수의 타입에 적혀있는 것들만 사용될 것이라고 생각한다. 이러한 타입을 '..

리팩토링 2판을 다 읽었다. 100% 완독은 아니지만 내가 생각했던 목표를 이룬 것 같아서 뿌듯하다. 책을 읽으면서 나름 정리했는데 요기서 볼 수 있다. https://choisuhyeok.tistory.com/category/%EC%8A%A4%ED%84%B0%EB%94%94/%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81%202%ED%8C%90 '스터디/리팩토링 2판' 카테고리의 글 목록 개발 공부도 하고 일기도 쓰고 뭐.. choisuhyeok.tistory.com 10월에 시작해서 12월에 끝나 거의 2달 정도 걸린 것 같은데 스터디를 하지 않았다면 이것마저 하지 못했을 것 같다. 처음 이 책을 읽기 시작했을 때부터 오늘까지 참 클린 코드랑 겹친다는 생각이 든다. 클린 코드는 뭔가..

질의 함수와 변경 함수 분리하기 외부에서 관찰할 수 있는 겉보기 부수효과(사이드 이펙트)가 전혀 없이 값을 반환해주는 함수를 추구해야 한다. 함수가 사이드 이팩트가 있다는 것은 한 가지 일을 하기로 했는데 여러 가지 일을 하는 것이다. // before // 아래의 함수는 이름처럼 2가지 일을한다. (부수효과는 아니다) function totalOutstandingAndSendBill() { const result = customer.invoices.reduce( (total, each) => each.amount + total, 0); sendBill(); return result; } // after function totalOutstanding() { return customer.invoices.r..

조건부 로직은 프로그램을 복잡하게 만드는 주요 원흉이기도 하다. 조건문 분해하기 조건을 검사하고 그 결과에 따른 동작을 표현하는 코드는 무슨 일이 일어나는지는 이야기해주지만 왜 일어나는지는 말하지 않는다. 거대한 코드 블록을 부위별로 분해하고 의도를 살린 이름의 함수 호출로 바꾸자. 거대한 코드 블록이 주어지면 코드를 부위별로 분해한 다음 의도를 살린 이름의 함수 호출로 바꾸자. // before if (!date.isBefore(plan.summerStart) && !date.isAfter(plan.summerEnd)) { charge = quantity * plan.summerRate; } else { charge = quantity * plan.regularRate + plan.regularServ..

🔍 해당 라이브러리를 선택한 이유 1. 글 좌우 정렬 2. 폰트 변경 3. 이미지 첨부 4. 텍스트 컬러 변경 위 4가지가 필요한 기능이었다. 많이 사용한다고 들었던 TOAST UI Editor를 사용하려 했으나 1번 요구사항이 만족하지 못해 다른 editor를 찾아보게 되었다. 여러 에디터가 존재했지만 해당 sundeditor는 위의 모든 요구사항을 충족하고, issue를 등록하면 빠르게 대답해주어서 맘에 들었다. 🔍 설치 및 버전 $ npm install --save suneditor suneditor-react "suneditor": "^2.44.3", "suneditor-react": "^3.4.1", 🔍 초기 렌더링 import React, { useRef } from "react"; impor..

이번 장은 데이터 구조에 집중한 리팩토링이다. 변수 쪼개기 역할이 둘 이상인 변수는 쪼개야 한다. 역할 하나당 변수 하나다. function distanceTravelled(scenario, time) { let result; let acc = scenario.primaryForce / scenario.mass; // 가속도(a) = 힘(F) / 질량(m) let primaryTime = Math.main(time, scenario.delay); result = 0.5 * acc * primaryTime * primaryTime; // 전파된 거리 let secondaryTime = time - scenario.delay; if (secondaryTime > 0) { // 두 번째 힘을 반영해 다시 계산..

기본형을 객체로 바꾸기 처음에는 단순한 문자열로 시작해서 나중에는 포맷팅, 특별한 동작이 추가되는 등 중복 코드가 늘어나고 사용할 때마다 드는 노력도 늘어난다. 출력 이상의 기능이 필요해지는 순간 클래스를 정의하면 좋다. 클래스로 집중시켜 놓으면 관련된 로직을 한 곳에서 관리할 수 있으면 중복된 코드를 처리할 수 있다. // before class Order { constructor(data){ this.priority = data.priority; } } highPriorityCount = orders.filter (o => "high" === o.priority || "rush" === o.priority).length; // after class Order { constructor(data){ th..

함수 추출하기 코드 조각을 찾아 무슨 일을 하는지 파악한 다음, 독립된 함수로 추출하고 목적에 맞는 이름을 붙인다. 코드를 언제 독립된 함수로 묶어야 할지에 관한 의견은 많다. 길이, 반복되는 횟수 등등 많지만 ‘목적과 구현을 분리’하는 방식이 가장 합리적으로 보인다. 코드를 보고 무슨 일을 하는지 파악하는 데 한참이 걸리면 함수로 추출한 뒤 걸맞은 이름을 짓는다. 함수를 새로 만들고 목적을 잘 드러내는 이름을 붙인다(’어떻게’가 아닌 ‘무엇을’ 하는지) 추출할 코드를 원본 함수에서 복사하여 새 함수에 붙여넣는다. 추출한 코드 중 원본 함수의 지역 변수를 참조하거나 추출한 함수의 유효 범위를 벗어나는 변수는 없는지 검사한다. 있다면 매개변수로 전달한다. 변수를 다 처리했다면 컴파일한다. 원본 함수에서 추..

리팩토링을 언제 멈춰야 하는지를 판단하는 정확한 기준은 제시하지 않을 것이다. 왜냐하면 숙련된 사람의 직관만큼 정확한 기준은 없기 때문이다. 아래의 소제목들은 피해야 하는 것들이다. 기이한 이름 이름만 보고도 무슨 일을 하고 어떻게 사용해야 하는지 명확히 할 수 있도록 짓는다. 이름만 보고도 동작을 유추할 수 있다면 코드 파악하는 시간을 많이 줄일 수 있다. 그리고 코드를 읽는 사람이 코드에 더 신뢰성을 가질 수도 있다. 중복 코드 똑같은 코드 구조가 여러 곳에서 반복된다면 하나로 통합하자. 중복 코드는 그 순간 편하겠지만 수정으로 들어가는 순간 지옥길 시작이다.. 긴 함수 긴 함수보다 짧은 함수가 코드를 이해하는데 더욱 도움이 된다. 짧은 함수로 구성된 코드를 이해하기 쉽게 만드는 가장 확실한 방법은 ..