2023-02-11
배경 현재 웹 프레임웍으로 생산되는 대다수의 코드는 , 등의 번들러에 의해 번들된 파일로 서빙된다. 번들된 파일에서 에러가 나는 경우 을 이용해서 파악할 수 있지만, 환경의 경우 을 함께 동반하지 않는 경우가 많고, 또 코드의 경우는 하나의 파일에 여러 라이브러리 소스가 엮여 있기 때문에 어떤 라이브러리가 문제가 되는지 파악하기 더 어렵다. 아래 …
2020-03-21
이슈 으로 정적 사이트 블로그의 dev server를 실행시켰는데, 계속적으로 라는 오류가 발생한다. Error: getaddrinfo ENOTFOUND localhost error-log image 해결 라는 키워드로 구글링을 해보니 파일의 내용에 문제가 있을 거라는 이야기를 찾았다. 명령으로 host 파일을 열어보았다 /env/host ima…
2020-02-12
vscode logo 이슈 vscode-private-field-error 에서 제공되는 내부의 를 사용해 를 작성하고 있다. 에디터로 를 사용하는데 키워드에 라는 오류가 표기 된다. 어떻게 하면 vscode 가 해당 키워드를 오류로 인식하지 않을까? 원인 해당 오류의 원인은 vscode 가 내부적으로 지원하는 타입스크립트 parser가 esnex…
2020-01-31
이슈 별도의 번들링 없이 을 사용해 할때 확장자를 쓰지 않으면 에러가 발생한다. 평소 환경에서 번들링을 통해 을 사용할 때는 확장자 없이 를 했기에 문제가 있다고 생각했다. 코드 샘플 html js 에러 화면 Imgur 해결 확장자를 예측하고 붙여주는 일은 사실 모듈 번들러의 일이었다. 브라우저는 상대경로를 통해() 절대 경로를 만들기는 하지만, …
2019-11-10
들어가며 SNS 서비스를 만드는 중, 게시글 콘텐츠에 가 있을 경우 해당 해쉬태그를 링크로 만들어야 했다. 그렇게 문자열에서 해쉬태그를 추출해야 하는 미션을 얻게 되어 해당 블로그를 작성하게 되었다. 이 글에서는 메소드를 사용할 때 인자로 전달되는 구분자를 결과에 포함시키는 방법에 대해 다룬다. 미션 문자열에서 로 된 해쉬태그를 추출하여 링크로 변환…
2019-09-22
vscode logo TLDR vscode 내부의 launch.json 설정을 통해 es moudle 기반의 js 파일을 디버깅할 수 있다. 참고로 필자는 맥북 환경에서 테스트 했으므로 windows 이용자의 경우 path 관련 부분이 달라 동일하게 작동하지 않을 가능성이 높다. 이슈 자바스크립트 알고리즘 코드 샘플의 모듈이 common.js 스펙이 아닌…
2019-09-09
TLDR 은 는 3 이지만 비어있는 배열을 리턴한다. 해당 리턴값은 비어있기 때문에 배열이 가진 메소드를 사용할 수 없다. (iterable 하지 않다.) 에서 apply 메소드는 두번째 인자로 배열을 받고, 해당 배열을 spread 하여 실행한다. 결국 각 인덱스의 값이 인 길이 3의 배열이 만들어진다. Array(3) 길이 값만 존재하는 빈배…
2019-09-02
들어가며 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다 문법 배열의 변경을 시작할 인덱스다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정된다(array.length). 음수인 경우 배열의 끝에서부터 요소를 센다. (원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 번째 인덱…
2019-07-30
들어가며 알고리즘 풀때 메소드를 가끔 써봤다. 이번에 vanila JS로 검색 자동완성 라이브러리 만들 때, 자동완성 문자열 중 쿼리 부분을 으로 감싸기 위해 replace를 적극적으로 사용할 일이 있어 다시 공부하게 되었다. 공부하며 알게 된 점을 정리했다. String.prototype.replace() 는 뭐하는 메소드인가? replace() 메…
2019-07-26
TLDR Vanila JS로 검색 자동완성 라이브러리를 만든다. 코드의 재사용을 고려하여 객체를 설계했고 설계과정에서 MVC 패턴을 적용했다. 사용자와 성능을 고려하여 debounce, throttle 등의 프론트엔드 에서의 UI 제어 기술을 사용하였다. CSS 와 소스 데이터를 import 하는 부분은 범용성(db, json) 을 위해 추가적으로 수정이…
2019-07-24
TLDR webpack 을 통해 번들링한 React 활용 TODO 어플을 로드했다. CSS 가 미적용 된 상태로 DOM 컨텐츠가 로드되는 이슈가 있다. 알고보니 CSS Loader 의 sourceMap 옵션 을 켜둔 것이 원인이었다. 해당 옵션을 끄면 이슈가 해결된다. 1. 이슈 webpack 을 통해 번들링한 React 활용 TODO 어플을 로드했다.…
2019-07-24
이슈 검색창에 단어를 입력하면 검색 자동완성 이벤트가 발동해 검색어 목록을 보여준다. 리스팅 된 검색어로 검색을 하기 위해 클릭을 했는데 click 이벤트가 발동하지 않는다. 어떻게 된걸까? mouse event와 blur 이벤트의 순서에 대해 이해하면 원인을 알 수 있다. mousedown, mouseup, click & blur 이벤트 순서에 대해 알…
2019-07-12
TLDR Vanila JS로 carousel 라이브러리를 만든다. 코드의 재사용을 고려하여 객체를 설계했고 설계과정에서 obbserver 패턴을 적용했다. template literal을 활용하여 ejs, pug 등의 라이브러리 없이 templating을 경험해 본다. 브라우저 캐쉬 전략을 경험해 본다. 1. template literal 활용과 함수로직…
2019-06-30
js-custom-promise TLDR; 이 글을 통해 프로미스 패턴의 동작 원리와 순서에 대해 이해할 수 있다. 프로미스를 만들며 this, closer, arrow function, bind 개념에 대해 이해할 수 있다. 프로미스를 말하면서 마이크로 테스크 큐를 빼놓을 수 없지만 프로미스의 동작에 보다 집중하기 위해 여기에서 다루지 않았다. 전체 코…
2019-05-24
들어가며 Code Signal의 BoxBlur 라는 문제를 풀었다. 문제는 아래와 같다. image 코드 시그널은 문제를 풀고 난 뒤 다른 사람의 코드를 볼 수 있다. 코드는 따봉(추천)을 많이 받은순으로 나열되고, 따봉을 많이 받은 코드는 좋은 풀이(?)라는 간접적 증거이기에 나는 그 코드를 참고해서 풀이의 의도를 훔치려는 노력을 한다. 보통은 끙끙대도…
2019-05-24
들어가며 destructing assignment 가 ES6 에 추가되었다는데.. JS를 시작한지 얼마안된 사람들은 도대체 그 기능을 어디다 써야 하는지 알수가 없다. 사실 대다수의 새로운 기술은 다량의 삽질과 고통을 줄이기 위해 탄생되었다. 그래서 어떤 기술에 대한 이해를 위해 일정량의 고통이 필요하다. 나 같은 초보자의 경우 기술이 없었다면 있었을 고…