작심삼일 개발이야기

조건부 로직은 프로그램을 복잡하게 만드는 주요 원흉이기도 하다. 조건문 분해하기 조건을 검사하고 그 결과에 따른 동작을 표현하는 코드는 무슨 일이 일어나는지는 이야기해주지만 왜 일어나는지는 말하지 않는다. 거대한 코드 블록을 부위별로 분해하고 의도를 살린 이름의 함수 호출로 바꾸자. 거대한 코드 블록이 주어지면 코드를 부위별로 분해한 다음 의도를 살린 이름의 함수 호출로 바꾸자. // 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..

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

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

리팩토링 정의 리팩토링 → 겉보기 동작은 유지한 채, 이해하기 쉽게 내부 구조를 변경하는 기법 리팩토링 과정에서 발견된 버그는 리팩토링 후에도 남아 있어야 한다. 리팩토링은 코드를 이해하고 수정하기 쉽게 만드는 것이다. 리팩토링을 진행하며 버그를 고치지 말라고 하는데... 눈앞에 버그를 놔두고 지나가야 하는 건가 라는 의문이 든다. 리팩토링 하는 이유 코드만 봐서는 설계를 파악하기 어렵다. 코드량이 줄면 수정하는데 드는 노력은 크게 달라진다. 모든 코드가 언제나 고유한 일을 수행함을 보장한다. 내 의도를 더 명확하게 전달하기 위해 다른 사람을 배려하기 위해서가 아니라 바로 나 자신을 위해 버그를 찾기 쉽다. 기억할 필요가 있는 것들은 최대한 코드에 담아내자 (외부에 담으려 X) 일단 리팩토링을 하는 이유..

JS에서 객체 프로퍼티 접근법은 2가지가 있다. const obj = { a: "A" }; // 마침표 접근법 obj.a; // 대괄호 접근법 obj["a"]; 객체에 값을 수정하거나 추가할 때는 아래의 방법으로 하면 된다. const obj = { a: "A" }; // 수정(마침표 접근법) obj.a = "a"; // 수정(대괄호 접근법) obj["a"] = "a"; // 추가(마침표 접근법) obj.b = "B"; // 추가(대괄호 접근법) obj["b"] = "B"; TS에서는 JS와 같은 방법으로 추가하면 에러가 발생한다. (수정은 괜찮다.) const obj = { a: "A" }; // 추가(마침표 접근법) obj.b = "B"; // 추가(대괄호 접근법) obj["b"] = "B"; Pro..

앞에 작성하지 않는 단원들은 JAVA 친화적으로 너무 보기 싫어서 안 봤다 ㅋㅋ 몰라 마지막 단원으로 17장 읽고 클린 코드는 여기서 마무리! 솔직히 17장만 읽어도 이 책이 어떤 말을 하려는지 알 수 있는 것 같다. 주석 극단적인것 까지는 아니지만 주석은 99% 필요 없다고 생각을 가지고 있다. 물론 이 책을 읽으며 생각이 점점 확고해지지만 확실히 코드를 보다 보면 관리되는 주석을 본 적이 없다. 그럴 바엔 차라리 안 쓰는 게 좋다는 생각이 점점 커지는 중... 부적절한 정보 주석은 코드와 설계에 기술적인 설명을 부연하는 수단이다. 예를 들어, 소스 코드 관리 시스템, 버그 추적 시스템, 이슈 추적 시스템, 기타 기록 관리 시스템에 저장할 정보는 주석으로 적절하지 못하다. 이러한 것들은 git을 이용해..

100번째 글로 뭘 쓸까 하다가 기나긴 추석 연휴도 끝난 겸 기분이 우울하니 오랜만에 일기로 때우기 물론 처음 글 쓸 때처럼 불타오르지는 않지만 개발 블로그를 잊지 않고 쓰려고 노력하고 있다. 벌써 경력 1년 채웠고... 올해도 3달 정도 남았고... 개발실력은 늘지 않는 것 같고... 나만 뒤처지는 느낌 아 모르겠다~ 네 제가 바로 물경력입니다. 200, 300개 꾸준히 글 써야지 ~ 많이 봐주세요 잠들면 출근해야 된다 ㅋㅋ ㅋㅋ ㅋㅋ ㅋㅋ 아 ㅋㅋ ㅋㅋ ㅋㅋ ㅋㅋ 자야지... 추석 때 찍은 달 사진 자랑할게요 (댓글에 소원 적어주시면 이루어집니다. 진짜)