et cetera
-
Javascript Visualized: Javascript Engineet cetera/TIL 2021. 11. 27. 18:29
■ Javascript Engine HTML 파서는 source(src)가 있는 script 태그를 만나게 된다. 이 때, source의 코드는 네트워크, 캐시, 서비스 워커 등을 통해 로드된다. 날아오는 응답은 요청된 script가 바이트 스트림으로 변환된 형태. 바이트 스트림이 다운되면서, 바이트 스트림 디코더가 이를 디코딩(해석)한다. 바이트 스트림 디코더는 해석된 바이트 스트림으로부터 토큰을 생성한다. 자바스크립트 엔진은 두 개의 파서를 사용한다. parser와 pre-parser. parser는 지금 바로 사용되는 코드를, pre-parser는 나중에 필요한 코드를 각각 다룸으로써 지금 당장 사용되지 않는 코드를 파싱하는 것을 최대한 피하기 위함. (버튼을 클릭했을 때 동작하는 함수같은 것들은,..
-
Javascript Visualized: Event Loop, Hoisting, Scope Chainet cetera/TIL 2021. 11. 27. 18:26
■ Event Loop setTimeout(() => { ... }, 1000)은 Web API 쓰레드에서 1000ms 타이머 실행이 끝난 후에 바로 실행되는 게 아니다. 1000ms 후에 단순히 setTimeout의 콜백 함수가 task queue에 추가되는 것 뿐이다. task queue는 대기열이므로 해당 콜백 함수는 대기열이 끝나고 자신의 차례가 될 때까지 기다려야한다. call stack이 비어있으면 task queue에 있던 콜백 함수들이 하나씩 event loop에 의해 call stack으로 이동한다. ✨♻️ JavaScript Visualized: Event Loop Oh boi the event loop. It’s one of those things that every JavaScrip..
-
모바일에서 Webpack-dev-server에 접근하지 못하는 문제et cetera/Trouble Shooting 2021. 9. 30. 19:54
■ 상황 Webpack-dev-server에서 돌리는 로컬 서버에 모바일 기기로 접근할 수 있다고 해서, 나도 시도를 해봤는데 접속이 되지 않았다. 참고로 Windows 10을 사용하고 있는 상황. ■ 상세 현재 사용중인 Wi-fi의 속성 탭으로 들어가서 네트워크 프로필을 개인으로 설정해주면 된다. 내 경우에는 네트워크 프로필이 공용으로 설정되어 있었기 때문에(왜 그랬지?) 안되고 있었던 것. ■ 비고 모바일 반응형 UI를 구현할 때 맨날 개발자 도구에서 확인하기만 했는데, 실제로 모바일로 접속해야 알 수 있는 문제들이 제법 있더라. 그래서 모바일에서 프로젝트를 구동해야 할 필요성을 느꼈고, 마침 모바일에서 webpack-dev-server에 접근할 수 있다는 얘기를 듣고 시도해보았다. webpack.c..
-
Webpack cli가 종료되지 않는 문제et cetera/Trouble Shooting 2021. 9. 24. 18:41
■ 상황 Webpack에다가 플러그인을 몇 개 추가해주고 나서 빌드를 수행했는데, ('npm run build' 같은 스크립트를 통해 빌드를 수행했다) 빌드가 완료된 이후에도 터미널이 원래대로 되돌아오지 않았다. 즉, 빌드가 완료되었다는 메시지가 떴는데도 Webpack의 수행이 종료되지 않았다. ■ 상세 원인은 바로 WebpackBundleAnalyzer였다. WebpackBundleAnalyzer를 서버 모드로 수행하고 있어서, 빌드가 완료된 이후에도 Bundle 결과를 보여주기 위해 계속해서 서버를 돌리고 있었던 것. 결과적으로, WebpackBundleAnalyzer를 development 모드일 때만 실행하게 함으로써 문제가 해결되었다. 다른 해결 방법으로는 서버 모드 말고 html 파일을 생성하..
-
Palantir 에 대해 알아보자!et cetera/Investments 2021. 6. 26. 00:39
최근, 몰아치는 미션들로 인해 상당히 고통스러운 나날들을 보내고 있다. 마치 누군가가 마구마구 집어던지는 미션들에 흠씬 두들겨 맞는 느낌이랄까. 그래서 포스팅 빈도도 점점 줄어들고 있었는데, 드디어 마땅한 타이밍을 찾았다. 페어들과 함께 마지막 미션 1단계 기능 구현을 마치고 리팩토링을 하고 있는데, 생각하던 것처럼 쉽게쉽게 되질 않는다. 그래서 굉장한 스트레스를 받고 있다. 몇시간 째 코드를 휘적휘적거리다가, 두뇌 환기를 위해 오랜만에 프로그래밍과 관련 없는 포스팅을 하기로 했다. 주제로 다룰 기업은 바로 '팔란티어(Palantir Technologies)'이다. 우테코 크루중에 나와 함께 팔란티어에 물려 있는(...) 크루가 있는데, 그 친구에게 물어보니 아직 기업에 대해 따로 알아보진 않은 것 같아..
-
fetch API 사용 시 headers가 비어있는 문제et cetera/Trouble Shooting 2021. 6. 11. 18:46
■ 상황 장바구니 미션에서, fetch API를 사용해서 장바구니에 상품을 추가했다. 상품을 추가하고나면 cart_id가 response headers의 location에 담겨서 날아오게끔 API가 구현되어 있었다. 그래서 response를 그대로 console.log 찍어봤는데, headers 안에 아무것도 들어있지 않았다. 하지만 다른 크루들의 결과물을 보니, axios의 response headers에는 원하는 값이 담겨져 있었다. fetch(API_URL.CART, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ product_id: product.product_id, }), }) ...
-
자동차 경주 게임 미션 공통 피드백(2)et cetera/TIL 2021. 4. 16. 02:19
■ 도메인 로직에 포함할 것과 포함하지 않을 것 export class Car { constructor(name) { this.name = name; this.forwardCount = 0; } ... getRandomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } } 해당 도메인과 직접적인 관련이 있는 로직이 아니라면 꼭 그 도메인의 메서드로 넣을 필요가 없다. 위 예시의 경우, 랜덤 숫자를 산출하는 메서드가 자동차 클래스 내에서 사용될 순 있겠지만 직접적인 관련이 있다고 보기에는 어렵기 때문에, 굳이 자동차 클래스 내부에 위치해 있을 필요는 없음. 추가로, 메서드에 꼭 this가 사용되어야 하는 건 아니지만 ..