작심삼일 개발이야기

이 글은 클린 코드를 읽고 좋은 구절들을 기록하거나 느낀 점을 기록하는 글입니다. 프로그래머라면 형식을 깔끔하게 맞춰 코드를 짜야한다. 간단한 규칙을 정하고 모두가 그 규칙을 따라야 한다. 필요하다면 규칙을 자동으로 적용하는 도구를 활용한다. 나는 개발할 때 vscode를 사용하며 extension(확장) 도구로서 eslint, prettier 등 여러 확장 도구를 사용한다. 이런 도구를 사용하면 설정해둔 설정 값으로 파일을 저장할 때마다 자동으로 정렬을 해주기 때문이다. 그래서 그런지 이번 5장은 크게 와닿는 게 없게 느껴졌다. 글을 이해하지 못한 걸까? 그건 아니었으면 좋겠다. 한마디로 정리하자면 규칙을 정해 코드를 알아보기 쉽게 작성하자 인 것 같다. 맞는 말이다. 따닥따닥 붙어있는 코드를 보면 어..

이 글은 클린 코드를 읽고 좋은 구절들을 기록하거나 느낀 점을 기록하는 글입니다. 주석은 나쁜 코드를 보완하지 못한다. 코드를 작성하다 주석을 사용할 때는 다른 사람 또는 내가 코드를 볼 때 알아보기 힘들 거 같다고 예상이 들면 주로 주석을 작성한다. 사실 이건 주석으로 때우려고 하지 말고 코드를 고쳐야 하는 것이 맞다 하지만 역시 주석을 달고 도망가버리곤 했다.. 좋은 주석 TODO 주석 가끔 코드를 보다보면 //TODO 주석을 본 적이 있다. 말 그대로 필요하지만 당장 구현하기 어려운 일들을 기술하는 주석이다. 더 이상 필요 없는 기능을 삭제하라거나 더 좋은 이름을 생각해달라는 부탁 앞으로 어떻게 고쳐야 한다는 주의 등에 유용하다. 나쁜 주석 대다수의 주석들이 나쁜 주석들이다. 물론 아닌 사람도 있겠..

이 글은 클린 코드를 읽고 좋은 구절들을 기록하거나 느낀 점을 기록하는 글입니다. 작게 만들어라 함수를 만드는 첫째 규칙은 작게 만드는 것이다. 책에서는 이 말에 대한 증거나 자료를 제시하기 어렵다고 했다. 작가의 지금까지 경험과 시행착오를 바탕으로 작은 함수가 좋다고 말한다. 물론 나도 이 말에 동의한다. 함수가 길어지고 커지면 파악하는데 많은 시간이 걸리고 크기가 크다는 건 여러 동작을 하는 확률이 높아지기 때문에 작게 만드는 것이 좋다고 생각한다. 한 가지만 해라 함수는 한 가지를 해야 한다. 그 한 가지를 잘 해야 한다. 그 한 가지만을 해야 한다. 함수 당 추상화 수준은 하나로 한 함수에서 추상화 수준을 섞으면 코드를 일는 사람이 헷갈린다. 하지만 더 심각한 것은 근본 개념과 세부사항을 뒤섞기 ..

이 글은 클린 코드를 읽고 좋은 구절들을 기록하거나 느낀 점을 기록하는 글입니다. 의도를 분명히 밝혀라 좋은 이름을 지으려면 시간이 걸리지만 좋은 이름으로 절약하는 시간이 훨씬 더 많다. 개발을 하다 보면 함수의 이름이나 변수의 이름만 보고 어떤 동작을 할 것인지 예측을 할 수 있을 때가 종종 있다. 이런 상황에서는 코드를 읽는 것이 즐거워지지만 반대의 상황이 생긴다면 이름만 봐도 코드를 읽고 싶어지지 않는다. 한 번 겪어보면 변수 명의 중요성을 깨달을 수 있는 것 같다. 자신의 기억력을 자랑하지 마라 개발하는 순간에는 모두 좋은 이름이라고 생각해서 사용하지만 시간이 흐른 뒤 다시 코드를 보게 되었을 때 한참을 생각했던 경험들이 다들 있을 것이다. 분명 작명할 때는 절대 까먹지 않겠지 라는 생각으로 만들..

이 글은 클린 코드를 읽고 좋은 구절들을 기록하거나 느낀 점을 기록하는 글입니다. 깨끗한 코드란? 비야네 스트롭스트룹 (C++ 창시자이자 The C++ Programming Language저자) 우아하고 효율적인 코드를 좋아한다. 논리가 간단해야 버그가 숨어들지 못하며 의존성을 최대한 줄여야 유지보수가 쉬워진다. 그래디 부치 (Object Oriented Analysis and Disign with Application 저자) 깨끗한 코드는 단순하고 직접적이다. 잘 쓴 문장처럼 읽힌다. 결코 설계자의 의도를 숨기지 않는다. 오히려 명쾌한 추상화와 단순 하한 제어문으로 가득하다. 데이브 토마스 (OTI창립자이자 이클립스 전략의 대부) 깨끗한 코드는 작성자가 아닌 사람도 읽기 쉽고 고치기 쉽다. 깨끗한 코드..

keyof 연산자를 object에 사용하면 object가 가지고 있는 모든 key값을 union type으로 합쳐서 내보내 준다. object에 들어있는 key를 사용해서 새로운 타입을 만들 때 사용하는 연산자이다. interface Car { name: string; price: number; } type CarKeys = keyof Car; let carPrice :CarKeys = 'price'; let carName :Carkeys = 'name'; let carName2 :Carkeys = 'namename'; // 'price' or 'name' 만 가능하다. keyof 연산자를 사용하면 Car 객체 안의 key 값이 Type이 된다. 그래서 'price' 또는 'name' 은 사용되지만 'n..

이렇게 input을 사용해서 숫자만 입력받으려고 했는데 테스트 결과 e, +, -도 입력이 가능하다는 것을 알게 되었다... 진짜 생각지도 못했는데 뭔가 새롭게 발견해서 신기하다 그래서 js를 이용해서 정규식으로 숫자만 받기로 했다 하하 아래의 코드는 숫자만 입력받는 정규식 export const checkOnlyNumber = (string) => { const check = /[^0-9]/g; // 숫자가 아닌 문자열을 선택하는 정규식 string = string.replace(check, ""); // 원래 문자열에서 숫자가 아닌 모든 문자열을 빈 문자로 변경 return string; };

declare를 사용하면 이미 정의된 변수나 함수를 재정의 할 수 있으며 당연히 타입도 재정의가 가능하다. 예를 들어서 // html 파일에서 두개의 js파일을 첨부한 상황 // b.ts파일에서 변환된 js 파일 // a.js let age = 27; // b.js console.log( age + 1 ); 이렇게 실행한다면 콘솔 창에 28이 실행이 된다. 하지만 b.ts에서는 age라는 변수가 정의되지 않았다고 에러가 발생한다. 이럴 때 declare를 사용하면 에러를 해결할 수 있다. (재정의를 하는 것) // b.ts declare let age :number; console.log(age + 1); 더보기 tsconfig.json 안에 allowJs옵션을 true로 사용하게 되면 js파일도 타입 ..

localStorage와 sessionStorage는 웹 브라우저에 데이터를 저장할 수 있다. 위 사진은 크롬 브라우저의 개발자 도구의 화면이다. 애플리케이션 탭을 클릭하게 되면 localStorage(로컬 스토리지) sessionStorage(세션 스토리지)를 확인할 수 있다. 물론 데이터 삭제도 가능하다. 추가는 잘 모르겠다... (가능하면 알려주세요) 페이지를 새로 고침 하거나 브라우저를 다시 실행해도 데이터가 사라지지 않고 남아있다. 물론 localStorage와 sessionStorage 둘 다 그렇다는 건 아니다. 여기서 상황에 맞게 사용해야 한다. 가장 큰 차이점은 브라우저를 다시 실행했을 때 데이터가 남아있냐 없냐 차이다. 브라우저를 다시 실행하면 localStorage는 데이터가 남아있고..

axios를 이용해서 api통신을 한 뒤 응답받은 데이터의 확장자명이 .xlsx 였다... 엑셀파일을 다운로드하는 기능을 구현해야했다. 거의 하루가 꼬박걸려서 구글링하고 찾아보고 시도했었지만 파일을 다운로드까지 가능했지만 엑셀 파일 데이터가 깨져서 보이지 않거나 [Object][object] 였던가.. 이런식으로 보이게 되었다 어쨋든 기능 구현은 성공했으니 메모도 할겸 끄적끄적해봐야겠다. axios 요청 후 받은 응답 헤더를 네트워크 창을 통해서 본 정보이다. 위 사진에서 보이는 것처럼 Content-Dispostion은 .xlsx이며 Content-Type은 .sheet이다. console.log로 받아온 데이터를 보면 아래처럼 이상한 글자가 나온다... PK jA‹S‘ÛÀ Y
ð[Conten..