클린 코드 객체와 자료구조 🙌 객체와 자료구조 차이점 👍 👀강의(course)를 예로 든다면... class course { const totalTime; const playTime; const completedPlayTime; } const progressPercent() { const percent = Math.floor((completedPlayTime / totalTime) * 1000) / 10; } 자료구조는 자신이 가지는 그대로를 뜻한다. course(강의)에서는 전체 수강시간, 시청 시간, 완료된 시청 시간 등을 가지는데 이는 자료구조라 할 수 있다. 😄 객체는 데이터 그대로가 아닌 함수를 제공한다. course(강의)에서 수강생의 시청시간, 수강시간은 중요하지 않고 해당 강의의 수강률, ..

클린 코드 형식 맞추기 🙌 형식을 맞추는 목적 다음의 테스트 코드를 살펴보자. 👀 describe('promise', () => { const until = 3; const range = [...Array(until).keys()]; const t = 300; const delay = (t) => new Promise((resolve) => setTimeout(resolve, t)); it('test for promise', async () => { for await (const rangeItem of range) { await delay(t); console.log('a'); await delay(t); console.log('b'); await delay(t); console.log('c'); } c..

클린 코드 주석 🙌 주석을 최대한 쓰지 말자 ⚠️ 주석은 나쁜 코드를 보완하지 못한다. ⚠️ 또한 주석은 방치된다. 😵 // 중복된 상품 선택을 막기 위해 진행중인 A 타입의 상품이 존재하는지 확인한다. if (product && product.state === 'ONGOING' && product.type === 'A') { } 요구 사항이 변경되어 타입과 상관없이 중복 상품 선택을 할 수 없게 한다면?.. 🤔 // 중복된 상품 선택을 막기 위해 진행중인 A 타입의 상품이 존재하는지 확인한다. if (product && product.state === 'ONGOING') { } 주석은 그대로 방치된다면 나중에 해당 코드를 보고 product 자체가 A 타입이구나.. 라는 오해를 만들 수 있고 이는 오류..

클린 코드 함수 🙌 간결한 함수로 작성하자 해당 함수는 다음과 같은 기능을 가지고 있다. 페이지가 테스트 페이지인지 확인한 후 테스트 페이지라면 설정 페이지와 해제 페이지를 넣는다. 테스트 페이지든 아니든 페이지를 HTML로 렌더링하여 리턴한다. 하지만 함수가 길다. 😵 const renderPageWithSetupAndTeardowns = ({ pageData, isSuite }) => { const isTestPage = pageData.hasAttribute('Test'); if (isTestPage) { const testPage = pageData.getWikiPage(); const newPageContent = []; includeSetupPages(testPage, newPageConten..

클린 코드 독서 1일차 🧹 깨끗한 코드 나쁜 코드는 무엇일까? 👎 성능이 나쁜 코드 불필요한 연산이 있어서 개선이 필요한 코드 👎 의미가 모호한 코드 이해하기 어려운 코드 네이밍과 그 내용이 다른 코드 const c = await this.validateCourse(); 함수를 보면 강의에 대해 유효성을 검사하는 것 같다. 어떤 유효성을 검사한 것일까? 🧐 정상적인 강의인지? 수강생이 해당 강의를 봐도 되는지? 수강이 가능한 강의인지? 필수로 봐야 하는 강의 인지? 함수를 봐서는 알 수가 없다. (함수 리팩토링은 다음 장에..) 또한, 이름 c는 아무런 의미도 드러나지 않는다. 의도가 드러나는 이름을 사용하면 코드의 이해와 변경이 쉬워진다. const requiredCourse; //필수강의구나! con..