첫삽은 아득하지만 말야
2023-07-23
지난 주말 고향 익산에 기록적인 폭우가 쏟아졌다. 논에 흘러내린 빗물이 논이 가둘 수 있는 물의 양보다 많아 논둑 위로 넘쳤다. 상대적으로 약한 지반은 넘치는 물의 무게를 견디지 못하고 금세 무너졌다. 무너져 내린 쪽으로 물길이 열렸고 급물살에 둑을 지탱하던 흙이 떠내려와 논 아래 수로를 메웠다. 수로가 막히자 빗물은 흙이 가득찬 수로를 넘어 둑 아래 논…
Excess Property Check, Typescript Structural Typing의 예외
2023-07-18
타입스크립트의 구조적 타이핑(Structural Typing) 타입스크립트의 구조적 타이핑 (Structural Typing)은 프로그래밍에서 타입 호환성이나 타입 검사 방식을 결정하는 방식이다. 구조적 타이핑 (Structural Typing)는 값의 형태에 따라 타입을 결정한다. 즉, 타입을 체크할 때 타입의 이름이나 선언 방식이 아닌 그 구조를 확인…
interface의 union과 never 타입을 활용하여 서로 의존적인 prop을 가진 interface 정의하기
2023-06-19
서로 의존적인 필드를 가진 란? 와 이라는 prop을 가진 인터페이스가 있다고 하자. 가 인 경우 는 여야 한다. 가 인 경우 는 여야 한다. 하나의 property의 상태가 다른 property의 결과에 영향을 미친다. 이런 경우 서로 의존적인 필드가 있다고 말한다. 사내의 리엑트 컴포넌트의 를 정의중에 이런 의존적인 field를 …
typescript는 never를 어떻게 다루고 있는가?
2023-06-04
배경 Design system 컴포넌트들의 기본 Props을 정의하려 한다. 새로 만들 design system은 하게 설계하고자 한다. 확정된 경우가 아니면 별도의 스타일을 가지지 않고, 컴포넌트의 역할과 기능만 정의한 다. 필요한 경우 아주 기본적인 스타일을 기본으로 제공하지만, 쉽게 override할 수 있어야 한다. 전략은 스타일에 대한 유연성…
point free in functional programming
2023-05-21
배경 함수형에 대한 블로그 글을 찾아 보던 중 pointfree-javascript 라는 글을 접하게 되었다. 기존의 경험을 통해서 유추해봐도 의미를 알기 어려웠다. point free 란 무엇인지 알아보기 위해 글을 정리했다. 첫인상 해당 글상서는 함수 조합(compose)을 하면 함수가 smaller(작게 쪼개고), generic(잘 추상화되고), r…
git rebase --onto 옵션 그리고 PR 쪼개기의 기술
2023-05-07
배경 코드량이 길고 고려해야 할 컨텍스트가 많으면 리뷰가 부담스럽다. 인간의 뇌는 한정된 자원을 가지고 집중할 수 있는데, 길고 컨텍스트가 많은 코드는 인지부하를 일으킨다.(에서 나온 내용) 목적이 분명하고 짧은 코드 일 수록 리뷰어가 알아야할 컨텍스트의 범위가 한정되고 리뷰 자체에 집중할 수 있는 여력이 생긴다. 따라서 PR을 잘개 쪼깨면 리뷰어가 보다…
protected branch에 sementic-release/git을 적용할때 발생하는 이슈
2023-04-09
배경 ci 에서 를 사용해 버전에 대한 태그를 생성하고 해당 내용을 main branch에 하는 step이 있다. 이 step의 결과물로 아래 표시된 커밋이 main branch에 생성된다. image-20230409224855473 이 역할을 하는 package가 인데, 파일에 아래와 같이 정의하면 위와 같이 동작한다. image-20230409…
Next.js 에서 router.query 사용시 type 정의해서 사용하기
2023-03-12
Code 코드는 링크의 샌드박스에서 확인하실 수 있습니다. Background nextjs 에서 pathParam 과 queryParam 값에 접근 하고자 한다. URI는 다음과 같다. pathParam과 queryParam에 접근하는 코드는 다음과 같다. pathParam 인 와 queryParam 인 는 아래와 같은 타입으로 추론된다. image…
webpack 으로 번들링된 파일에서 에러가 날때 원인 파악하기
2023-02-11
배경 현재 웹 프레임웍으로 생산되는 대다수의 코드는 , 등의 번들러에 의해 번들된 파일로 서빙된다. 번들된 파일에서 에러가 나는 경우 을 이용해서 파악할 수 있지만, 환경의 경우 을 함께 동반하지 않는 경우가 많고, 또 코드의 경우는 하나의 파일에 여러 라이브러리 소스가 엮여 있기 때문에 어떤 라이브러리가 문제가 되는지 파악하기 더 어렵다. 아래 …
P-iknow(피아노)의 코드스쿼드 회고
2020-06-27
codesquad logo 2019년 그리고 29살, 퍼포먼스 마케터였던 필자는 프론트엔드 개발자로 커리어를 시작하기로 마음먹었다. 그 결심으로 코드스쿼드라는 소프트웨어 교육기관에서 6개월(2019년 4월~9월)간 교육을 받았다. 이 글은 치열했던 그 기간에 대한 회고다. (사실 이 회고는 코드 스쿼드 수강 이후 계속해서 내용을 보강하다 8개월이 지나 공…
Nodejs, path module, __dirname, __filename 에 대해 톺아보기
2020-03-22
Nodejs 들어가며 웹펙을 입문하려 할 때 처음 마주하게 되는게 entry, output 옵션이고, entry, output 옵션을 설정할 때 나 이 쓰이는 것을 볼 수 있다. 필자를 포함한 입문자들은 대충 경로를 설정하는 구나 하고 넘어가는데(필자만 그런것인가?), 나중에 웹펙을 직접 설정해가며 커스텀 해야할 순간이 오면 해당 내용을 제대로 알아야…
Error: getaddrinfo ENOTFOUND localhost
2020-03-21
이슈 으로 정적 사이트 블로그의 dev server를 실행시켰는데, 계속적으로 라는 오류가 발생한다. Error: getaddrinfo ENOTFOUND localhost error-log image 해결 라는 키워드로 구글링을 해보니 파일의 내용에 문제가 있을 거라는 이야기를 찾았다. 명령으로 host 파일을 열어보았다 /env/host ima…
React에서 api 로 전달되는 텍스트의 개행 처리하기
2020-03-15
react-logo 이슈 리엑트로 서비스를 운영할 때 api 에서 전달되는 텍스트가 길어서 특정 부분에 개행을 해야하는 경우가 있다. api 로 전달되는 텍스트 이기에 텍스트 중간에 태그 등의 강제 개행 태그를 추가할 수도 없다. 이럴때 어떻게 해야할까? 해결 html-react-parser 를 활용하면 이런 문제를 해결할 수 있다. api로 전달되는 …
vscode, private field(#)를 오류로 인식하지 않게 만들기
2020-02-12
vscode logo 이슈 vscode-private-field-error 에서 제공되는 내부의 를 사용해 를 작성하고 있다. 에디터로 를 사용하는데 키워드에 라는 오류가 표기 된다. 어떻게 하면 vscode 가 해당 키워드를 오류로 인식하지 않을까? 원인 해당 오류의 원인은 vscode 가 내부적으로 지원하는 타입스크립트 parser가 esnex…
CSS로 Speech Bubble(말풍선) UI 만들기
2020-02-09
TLDR 디자인 요구 사항 중 speech bubble ui가 있어서 이를 CSS 로 어떻게 구현하는지 원리를 파악해보았다. css 속성 중 , , 가 활용되며 해당 속성에 대한 이해가 있어야 이 글을 소화할 수 있다. 관련 Codepen 정리 Speech Bubble 에서 꼭지(triangle) 그리는 법 speech bubble 의 div 의 posi…
ESModule 확장자(.js) 쓰지 않았을 때 404 Not Found 오류
2020-01-31
이슈 별도의 번들링 없이 을 사용해 할때 확장자를 쓰지 않으면 에러가 발생한다. 평소 환경에서 번들링을 통해 을 사용할 때는 확장자 없이 를 했기에 문제가 있다고 생각했다. 코드 샘플 html js 에러 화면 Imgur 해결 확장자를 예측하고 붙여주는 일은 사실 모듈 번들러의 일이었다. 브라우저는 상대경로를 통해() 절대 경로를 만들기는 하지만, …
피아노(p-iknow)의 2019년 회고
2019-12-31
Imgur "기록하고 회고한다. 회고를 반영한다. 이것이 내가 자라는 방식이다." 3년 전부터 나를 이렇게 설명하곤 했다. 이제까지의 수많은 회고가 현재의 나를 지탱하고 있다. 회고는 성장의 큰 자양분이 되었다. 올해도 회고로 마무리한다. "공시생 → 디지털 마케터 → 드디어 프론트엔드 개발자" 2016년 11월, 6개월간 준비하던 지역인재 추천 전형 준…
JS split 적용시 구분자도 결과에 포함시키기
2019-11-10
들어가며 SNS 서비스를 만드는 중, 게시글 콘텐츠에 가 있을 경우 해당 해쉬태그를 링크로 만들어야 했다. 그렇게 문자열에서 해쉬태그를 추출해야 하는 미션을 얻게 되어 해당 블로그를 작성하게 되었다. 이 글에서는 메소드를 사용할 때 인자로 전달되는 구분자를 결과에 포함시키는 방법에 대해 다룬다. 미션 문자열에서 로 된 해쉬태그를 추출하여 링크로 변환…
passport, localStrategy의 동작에 대해 이해하기
2019-11-07
들어가며 프론트 개발을 공부하다 처음으로 백엔드 코드를 작성하기 시작했다. 로그인을 구현하기 위해 passport 를 사용해야 했다. 가려진 부분이 많아 해당 패키지를 이용할 때 무슨 일이 일어나는지 알수가 없었다. 필자 처럼 passport 의 마법 같은 인증 로직 처리에 당황할 사람들을 위해 아래에 passport local 전략에 대해 정리했다. 참…
vscode 에서 ES module debug 하기
2019-09-22
vscode logo TLDR vscode 내부의 launch.json 설정을 통해 es moudle 기반의 js 파일을 디버깅할 수 있다. 참고로 필자는 맥북 환경에서 테스트 했으므로 windows 이용자의 경우 path 관련 부분이 달라 동일하게 작동하지 않을 가능성이 높다. 이슈 자바스크립트 알고리즘 코드 샘플의 모듈이 common.js 스펙이 아닌…