There are 74 posts.

첫삽은 아득하지만 말야

2023-07-23

지난 주말 고향 익산에 기록적인 폭우가 쏟아졌다. 논에 흘러내린 빗물이 논이 가둘 수 있는 물의 양보다 많아 논둑 위로 넘쳤다. 상대적으로 약한 지반은 넘치는 물의 무게를 견디지 못하고 금세 무너졌다. 무너져 내린 쪽으로 물길이 열렸고 급물살에 둑을 지탱하던 흙이 떠내려와 논 아래 수로를 메웠다. 수로가 막히자 빗물은 흙이 가득찬 수로를 넘어 둑 아래 논…

reflection

log

Excess Property Check, Typescript Structural Typing의 예외

2023-07-18

타입스크립트의 구조적 타이핑(Structural Typing) 타입스크립트의 구조적 타이핑 (Structural Typing)은 프로그래밍에서 타입 호환성이나 타입 검사 방식을 결정하는 방식이다. 구조적 타이핑 (Structural Typing)는 값의 형태에 따라 타입을 결정한다. 즉, 타입을 체크할 때 타입의 이름이나 선언 방식이 아닌 그 구조를 확인…

typescript

Structural-Typing

excess-property-check

interface의 union과 never 타입을 활용하여 서로 의존적인 prop을 가진 interface 정의하기

2023-06-19

서로 의존적인 필드를 가진 란? 와 이라는 prop을 가진 인터페이스가 있다고 하자. 가 인 경우 는 여야 한다. 가 인 경우 는 여야 한다. 하나의 property의 상태가 다른 property의 결과에 영향을 미친다. 이런 경우 서로 의존적인 필드가 있다고 말한다. 사내의 리엑트 컴포넌트의 를 정의중에 이런 의존적인 field를 …

typescript는 never를 어떻게 다루고 있는가?

2023-06-04

배경 Design system 컴포넌트들의 기본 Props을 정의하려 한다. 새로 만들 design system은 하게 설계하고자 한다. 확정된 경우가 아니면 별도의 스타일을 가지지 않고, 컴포넌트의 역할과 기능만 정의한 다. 필요한 경우 아주 기본적인 스타일을 기본으로 제공하지만, 쉽게 override할 수 있어야 한다. 전략은 스타일에 대한 유연성…

typescript

never

conditional-type

point free in functional programming

2023-05-21

배경 함수형에 대한 블로그 글을 찾아 보던 중 pointfree-javascript 라는 글을 접하게 되었다. 기존의 경험을 통해서 유추해봐도 의미를 알기 어려웠다. point free 란 무엇인지 알아보기 위해 글을 정리했다. 첫인상 해당 글상서는 함수 조합(compose)을 하면 함수가 smaller(작게 쪼개고), generic(잘 추상화되고), r…

functional-programming

git rebase --onto 옵션 그리고 PR 쪼개기의 기술

2023-05-07

배경 코드량이 길고 고려해야 할 컨텍스트가 많으면 리뷰가 부담스럽다. 인간의 뇌는 한정된 자원을 가지고 집중할 수 있는데, 길고 컨텍스트가 많은 코드는 인지부하를 일으킨다.(에서 나온 내용) 목적이 분명하고 짧은 코드 일 수록 리뷰어가 알아야할 컨텍스트의 범위가 한정되고 리뷰 자체에 집중할 수 있는 여력이 생긴다. 따라서 PR을 잘개 쪼깨면 리뷰어가 보다…

git

github

pull-request

protected branch에 sementic-release/git을 적용할때 발생하는 이슈

2023-04-09

배경 ci 에서 를 사용해 버전에 대한 태그를 생성하고 해당 내용을 main branch에 하는 step이 있다. 이 step의 결과물로 아래 표시된 커밋이 main branch에 생성된다. image-20230409224855473 이 역할을 하는 package가 인데, 파일에 아래와 같이 정의하면 위와 같이 동작한다. image-20230409…

packages

sementic-release

issue

Next.js 에서 router.query 사용시 type 정의해서 사용하기

2023-03-12

Code 코드는 링크의 샌드박스에서 확인하실 수 있습니다. Background nextjs 에서 pathParam 과 queryParam 값에 접근 하고자 한다. URI는 다음과 같다. pathParam과 queryParam에 접근하는 코드는 다음과 같다. pathParam 인 와 queryParam 인 는 아래와 같은 타입으로 추론된다. image…

next.js

react

webpack 으로 번들링된 파일에서 에러가 날때 원인 파악하기

2023-02-11

배경 현재 웹 프레임웍으로 생산되는 대다수의 코드는 , 등의 번들러에 의해 번들된 파일로 서빙된다. 번들된 파일에서 에러가 나는 경우 을 이용해서 파악할 수 있지만, 환경의 경우 을 함께 동반하지 않는 경우가 많고, 또 코드의 경우는 하나의 파일에 여러 라이브러리 소스가 엮여 있기 때문에 어떤 라이브러리가 문제가 되는지 파악하기 더 어렵다. 아래 …

javascript

webpack

issue

P-iknow(피아노)의 코드스쿼드 회고

2020-06-27

codesquad logo 2019년 그리고 29살, 퍼포먼스 마케터였던 필자는 프론트엔드 개발자로 커리어를 시작하기로 마음먹었다. 그 결심으로 코드스쿼드라는 소프트웨어 교육기관에서 6개월(2019년 4월~9월)간 교육을 받았다. 이 글은 치열했던 그 기간에 대한 회고다. (사실 이 회고는 코드 스쿼드 수강 이후 계속해서 내용을 보강하다 8개월이 지나 공…

review

Nodejs, path module, dirname, filename 에 대해 톺아보기

2020-03-22

Nodejs 들어가며 웹펙을 입문하려 할 때 처음 마주하게 되는게 entry, output 옵션이고, entry, output 옵션을 설정할 때 나 이 쓰이는 것을 볼 수 있다. 필자를 포함한 입문자들은 대충 경로를 설정하는 구나 하고 넘어가는데(필자만 그런것인가?), 나중에 웹펙을 직접 설정해가며 커스텀 해야할 순간이 오면 해당 내용을 제대로 알아야…

node

path

webpack

Error: getaddrinfo ENOTFOUND localhost

2020-03-21

이슈 으로 정적 사이트 블로그의 dev server를 실행시켰는데, 계속적으로 라는 오류가 발생한다. Error: getaddrinfo ENOTFOUND localhost error-log image 해결 라는 키워드로 구글링을 해보니 파일의 내용에 문제가 있을 거라는 이야기를 찾았다. 명령으로 host 파일을 열어보았다 /env/host ima…

javascript

node

issue

React에서 api 로 전달되는 텍스트의 개행 처리하기

2020-03-15

react-logo 이슈 리엑트로 서비스를 운영할 때 api 에서 전달되는 텍스트가 길어서 특정 부분에 개행을 해야하는 경우가 있다. api 로 전달되는 텍스트 이기에 텍스트 중간에 태그 등의 강제 개행 태그를 추가할 수도 없다. 이럴때 어떻게 해야할까? 해결 html-react-parser 를 활용하면 이런 문제를 해결할 수 있다. api로 전달되는 …

React

front-end

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…

speech-bubble

css

ESModule 확장자(.js) 쓰지 않았을 때 404 Not Found 오류

2020-01-31

이슈 별도의 번들링 없이 을 사용해 할때 확장자를 쓰지 않으면 에러가 발생한다. 평소 환경에서 번들링을 통해 을 사용할 때는 확장자 없이 를 했기에 문제가 있다고 생각했다. 코드 샘플 html js 에러 화면 Imgur 해결 확장자를 예측하고 붙여주는 일은 사실 모듈 번들러의 일이었다. 브라우저는 상대경로를 통해() 절대 경로를 만들기는 하지만, …

javascript

피아노(p-iknow)의 2019년 회고

2019-12-31

Imgur "기록하고 회고한다. 회고를 반영한다. 이것이 내가 자라는 방식이다." 3년 전부터 나를 이렇게 설명하곤 했다. 이제까지의 수많은 회고가 현재의 나를 지탱하고 있다. 회고는 성장의 큰 자양분이 되었다. 올해도 회고로 마무리한다. "공시생 → 디지털 마케터 → 드디어 프론트엔드 개발자" 2016년 11월, 6개월간 준비하던 지역인재 추천 전형 준…

log

leetcode - 209. Minimum Size Subarray Sum with JS

2019-12-11

Problem Imgur 문제 링크 풀이 값을 가장 큰 값으로 초기화해서 0 이 나올 경우에 대비한다. 모든 요소를 더했을 때의 값이 인자 보다 작은 경우에는 0을 리턴하도록 하기 위함이다. 여기서 대신에 을 값을 사용해도 무관하다. 의 값이 와 같거나 클때까지 각 요소를 에 더한다. 문 안에서는 res 값을 재설정 한다. 이때 부터 리턴 …

algorithm

programmers

programmers - 문자열 내 p와 y의 개수 with JS

2019-11-22

Problem image 출저: 프로그래머스 Solve 문자열 내에 특정 문자의 갯수를 구하는 함수 함수의 두 번째 인자는 로 해당 인덱스 부터 문자를 탐색한다. 이를 아래 처럼 활용하면 하나의 문자열에 특정 문자가 몇번 포함되어 있는지 파악할 수 있다. 전체 풀이

algorithm

programmers

programmers - 문자열 내 마음대로 정하기 with JS

2019-11-21

Problem image 출저: 프로그래머스 Solve 내 풀이 What I learned 문자열의 정렬 함수 구성 문자열의 경우 대소 비교를 통해 Boolean 값으로 변환한 뒤 해당 Boolean 을 피연자로 활용한다. Boolean type 에 뺄셈을 하면 Boolean 은 각각 0 과 1 로 암묵적 형변환이 일어난다. 는 아래와 같이 평가될 …

algorithm

programmers