📖 들어가며 React + Typescript 환경에서 React Testing library와 jest를 이용해서 테스트 코드 작성에 대해서 공부하려는 도중에 오류가 발생했고, 결과적으로 해결하기 위해 해야 할 것은 별 거 아니었지만 힘들게(?) 해결 방안을 찾아서 기록을 해두려고 한다. 1. 문제 발생 CRA typescript로 패키지들을 설치하고 난 후에 npm test 명령어를 통해서 기본적으로 작성되어 있는 테스트 코드들이 잘 실행이 되는지 확인을 해봤다. 하지만 ReactDOM.render is no longer supported in React 18 오류가 발생했다. 테스트 코드 자체는 PASS가 되면서 잘 실행이 되었지만 위와 같은 오류 메시지가 매우 신경 쓰였다. 2. 발생 원인 Rea..

클린 코드 읽으며 뼈맞았던 내용 중 3가지 진리 를 고르고, 진리를 따르는 예시 총 3가지를 만들기. 진리 1. try/catch 블록을 별도 함수로 뽑아내는 편이 좋다. (p.58) 무엇을 고쳤는가? 😂 Before const saveAsImageHandler = async () => { const target = document.getElementById('content'); if (!target) return alert('결과 저장에 실패했습니다.'); alert( '새로운 창이 열리면\nPC에서는 우클릭 -> 이미지 저장하기\n모바일은 이미지를 꾹 눌러주세요!\n*새로운 창이 안 열린다면 팝업을 해제해주세요*' ); try { const canvas = await html2canvas(target..

Day 20, 21 🔖 오늘 읽은 범위 : 10장 클래스(p.172 ~ p.192) 😃 책에서 기억하고 싶은 내용 클래스를 만들 때 첫번째 규칙은 크기다. 클래스는 작아야 한다. 두 번째 규칙도 크기다. 더 작아야 한다.(p.172) 클래스 설명은 만일("if"), 그리고("and"), -(하)며("or), 하지만("but")을 사용하지 않고서 25단어 내외로 가능해야 한다.(p.175) 단일 책임 원칙은 클래스나 모듈을 변경할 이유가 하나, 단 하나뿐이어야 한다는 원칙이다.(p.175) 관심사를 분리하는 작업은 프로그램만이 아니라 프로그래밍 활동에서도 마찬가지로 중요하다.(p.176) "도구 상자를 어떻게 관리하고 싶은가? 작은 서랍을 많이 두고 기능과 이름이 명확한 컴포넌트를 나눠 넣고 싶은가? 아니..

📖 들어가며 DFS 깊이 우선 탐색 알고리즘을 사용하는 프로그래머스 '타겟 넘버' 문제 풀이를 해보겠다. ❓ 문제 문제 설명 n개의 음이 아닌 정수들이 있습니다. 이 정수들을 순서를 바꾸지 않고 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 [1, 1, 1, 1, 1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 있습니다. -1+1+1+1+1 = 3 +1-1+1+1+1 = 3 +1+1-1+1+1 = 3 +1+1+1-1+1 = 3 +1+1+1+1-1 = 3 사용할 수 있는 숫자가 담긴 배열 numbers, 타겟 넘버 target이 매개변수로 주어질 때 숫자를 적절히 더하고 빼서 타겟 넘버를 만드는 방법의 수를 return 하도록 solution 함수를 작성해주세요. 제한 사항 주어지는 숫..

Day 17, 18 🔖 오늘 읽은 범위 : 9장 단위 테스트(p.153 ~ p.170) 😃 책에서 기억하고 싶은 내용 TDD 법칙 세 가지(p.155) 첫째 법칙: 실패하는 단위 테스트를 작성할 때까지 실제 코드를 작성하지 않는다. 둘째 법칙: 컴파일은 실패하지 않으면서 실행이 실패하는 정도로만 단위 테스트를 작성한다. 셋째 법칙: 현재 실패하는 테스트를 통과할 정도로만 실제 코드를 작성한다. 테스트 코드가 복잡할수록 실제 코드를 짜는 시간보다 테스트 케이스를 추가하는 시간이 더 걸리기 십상이다. 실제 코드를 변경해 기존 테스트 케이스가 실패하기 시작하면, 지저분한 코드로 인해, 실패하는 테스트 케이스를 점점 통과시키기 어려워진다.(p.156) 테스트 코드는 실제 코드 못지않게 중요하다.(p.157) 코..

📚 추천하는 TIL @Flynn 님 링크: Day11 내가 작성했던 Day11의 리팩토링 부분하고 구조 자체는 비슷하지만 내 코드에서 뭐가 좀 더 부족한지 알게 해주었던 Flynn님의 코드였다. 변수명, 함수명, 함수 기능 부분에서 최~대한 명확하게 이름을 짓고 세분화 한 것을 보고 이렇게까지 할 수 있었구나 느꼈던 Flynn님의 코드였다. @친슈 님 링크: Day12 지금까지 읽으면서 개인적으로 제일 어려웠던 부분이 '객체외 자료구조' 부분이었는데 친슈님께서는 세밀하게 코드 부분도 인용하고 정리도 잘 하신 것 같다. @Arthur Coker 님 링크: Day15 '오류 처리'장에서 직접 읽고 자신의 코드를 리팩토링한 것을 작성하고 문제점까지 제시하는 부분이 인상깊었다.

Day 13, 15 🔖 오늘 읽은 범위 : 7장 오류 처리(p.130~p.142) 😃 책에서 기억하고 싶은 내용 깨끗한 코드와 오류 처리는 확실히 연관성이 있다. 상당수 코드 기반은 전적으로 오류 처리 코드에 좌우된다.(p.130) 오류 코드보다 예외를 사용하라.(p.130) 예외가 발생할 코드를 짤 때는 try-catch-finally 문으로 시작하는 편이 낫다. 그러면 try 블록에서 무슨 일이 생기든지 호출자가 기대하는 상태를 정의하기 쉬워진다.(p.131) 오류 메시지에 정보를 담아 예외와 함께 던진다. 실패한 연산과 실패 유형도 언급한다.(p.135) 애플리케이션에서 오류를 정의할 때 프로그래머에게 가장 중요한 관심사는 오류를 잡아내는 방법이 되어야 한다.(p.135) null을 반환하는 코드는..

Day 12 🔖 오늘 읽은 범위 : 6장 객체와 자료구조(p.118~p.128) 😃 책에서 기억하고 싶은 내용 개발자는 객체가 포함하는 자료를 포현할 가장 좋은 방법을 심각하게 고민해야 한다.(p.119) 객체는 추상화 뒤로 자료를 숨긴 채 자료를 다루는 함수만 공개한다.(p.119) 자료 구조는 자료를 그대로 공개하며 별다른 함수는 제공하지 않는다.(p.119) 절차적인 코드는 기존 자료 구조를 변경하지 않으면서 새 함수를 추가하기 쉽다. 반면, 객체 지향 코드는 기존 함수를 변경하지 않으면서 새 클래스를 추가하기 쉽다.(p.122) 절차적인 코드는 새로운 자료 구조를 추가하기 어렵다. 그러려면 모든 함수를 고쳐야 한다. 객체 지향 코드는 새로운 운 함수를 추가하기 어렵다. 그러려면 모든 클래스를 고쳐..

DAY 11 🔖 미션: 더러운 코드를 고치자 💩 더러운 코드 const merry = document.querySelector(".js-clock"); function getClock() { const christmas = new Date("2021, 12, 25"); const date = new Date(); const timeGap = christmas - date; const xDay = Math.floor(timeGap / (1000 * 60 * 60 * 24)); const xHours = Math.floor( (timeGap - xDay * 1000 * 60 * 60 * 24) / (1000 * 60 * 60) ); const xMinutes = Math.floor((timeGap % (60..