작심삼일 개발이야기

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

이 글은 클린 코드를 읽고 좋은 구절들을 기록하거나 느낀 점을 기록하는 글입니다. 깨끗한 코드란? 비야네 스트롭스트룹 (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..

리액트로 프로젝트를 진행 중 동작에는 아무 문제가 없었지만 콘솔 창에는 Warning이 생긴 걸 발견했다. Warning: Cannot update a component(`Transaction`) while rendering a different component (`OrderingCompanySelectModal`). To locate the bas setSTate() call inside `OrderingCompanySelectModal`, follow the stack trace as described in .... 버전 16.13.0에서 추가되었다고 검색결과 알게 되었다. 다른 구성 요소에서 렌더링하는 동안 setState를 호출하면? 경고가 표시된다고 리액트 공식문서에 적혀있다. (번역기를 돌려..

이 글은 Yuri Lee 님의 글을 참고하여 작성하였습니다. Request 객체는 3개의 메소드를 가지고 있다. param query body param 주소에 포함된 변수를 담는다. https://choisuhyeok.tistory.com/11 이라는 주소가 있다면 11를 담는다. query 주소 제일 바깥 ? 이후의 변수를 담는다. https://choisuhyeok.tistory.com/post?q=javascript 이라는 주소가 있다면 javascript를 담는다. body XML, JSON, Multi Form 등의 데이터를 담는다. 주소창에서 확인할 수 없다.

이 글은 mia님의 블로그를 참고하여 작성한 글입니다. React Router를 이용하면 3가지 props를 전달받는다. location 현재 경로에 대한 정보와, URL에 대한 정보를 가지고 있다. match 어떤 라우트에 매칭 되었는지에 대한 정보가 있고 prarams에 대한 정보를 가지고 있다. history push, replace로 앞 뒤 페이지를 이동과 다른 페이지로 이동할 수 있다.