제목: 모던 자바스크립트 Deep Dive저자: 이웅모카테고리: Javascript날짜: 2024/04/23 다시 정립한 기본변수 이름을 비롯한 모든 식별자(변수, 함수, 클래스 등)는 실행 컨텍스트에 등록된다.실행 컨텍스트란 엔진이 소스코드를 평가하고 실행하기 위한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역.JS 엔진은 실행 컨텍스트를 통해 식별자와 스코프를 관리한다.변수 이름과 값은 실행 컨텍스트 내에 Key:Value 형태로 관리된다.모든 식별자의 선언은 호이스팅된다. 런타임 이전에 평가 과정을 거치기 때문console.log(score); // undefinedscore = 80;var score;const score = 80; // 'score' is not defined, 'le..
MacOS Sonoma가 Release되었다. 슬슬 많은 맥 유저분들이 Sonoma로 업데이트를 하실 텐데, 개발자 분들 중 Mac을 사용한지 얼마 안되신 분들은 업데이트 하자마자 Terminal에서 Git 명령어가 먹지 않는다거나 VSCode같은 에디터에서 플러그인이 동작하지 않아 당황하시는 분들이 있을 것 같다. MacOS 업데이트 후 Terminal에서 Git 명령어를 입력하면 아마 아래의 에러메세지를 마주할 것이다. xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun 나도 처음에 당..
불과 세 달 전 커리어 2년차 회고록을 포스팅하였다. 그 이후로 이 짧은 시간 동안 회고할 게 있을까 싶었지만 스스로 워낙 역동적인 시간을 보냈고 삶도 꽤 달라진 것 같아 회고를 해보고자 한다. 🪫 개인적인 이슈로 인한 무기력증 7월 말 쯤. 마음에 무리가 가는 이벤트가 발생했다. 워낙 개인적인 일이라 이 블로그에 적는 건 TMI 인 듯 하고, 개발자로 일하면서 개인적인 이슈로 컨디션이 저하되는 경우는 분명이 있을 거기에 개인적인 이슈 정도로만 언급하겠다. 그냥 동종업계에 이 사람은 힘들 때 이런 식으로 커리어를 유지해왔구나 정도로 봐주면 좋을 것 같다🙂. 이후 2~3개월 간 몸이 절전모드에 들어간 느낌이었다. 잠이 많아지고, 평소에 즐겨하던 취미생활을 찾지 않게되었으며 운동 등의 자기관리도 놔버렸다. ..
👋 개요 사내 디자인 시스템을 프론트엔드에 적용시키기 위한 작업 중 디자인 토큰을 github에서 contents API를 통해 json 파일을 다운로드해야 하는 상황이 생겼다. (회사에서 메인 git 저장소로 github을 사용하지 않으나, 디자이너 분이 사용하기에 figma와의 연동이 가장 좋아 토큰을 github에서 관리하기로 했다.) 그냥 간단한 script를 짜서 돌리면 되겠다고 생각하고 typescript로 작성 후 이를 컴파일 없이 실행시키기 위해 ts-node를 설치하여 해당 .ts 파일을 실행시켰다. $ ts-node scripts/getToken.ts 🚨 으아아 공습경보! 공습경보! TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file exten..
👋 개요 사내 기능 개발 중, 영상 재생과 동시에 Sync에 맞게 지도에 현재 재생 위치를 나타내달라는 요구사항이 있었다. 데이터 엔지니어 동료 분이 한 번 테스트를 거쳤고 제한적으로 Gopro 영상에서는 GPS 데이터를 추출할 수 있음을 확인해 주셨다. 관련 블로그의 글이 있어 해당 아티클을 읽고 위치를 추출해 보았다. https://www.trekview.org/blog/2022/gopro-telemetry-exporter-getting-started/ Getting started with GoPro Telemetry to parse GPMD A more comprehensive alternative to exiftool when working with GPMD. www.trekview.org 영어로..
👋 개요 사내 디자인 시스템을 프론트엔드에 적용시키기 위한 작업을 하고 있었다. 디자인 토큰을 통해 전체적인 스타일 적용은 끝난 상태였고(이 부분은 나중에 정리하여 공유할 예정이다.) UI 테스트를 위해 Storybook을 설정 후 서버를 실행시키니 다음의 에러가 발생하였다. var stringWidth = require('string-width') ^ Error [ERR_REQUIRE_ESM]: require() of ES Module /.../node_modules/string-width/index.js from /.../node_modules/wide-align/align.js not supported. Instead change the require of index.js in /.../node_m..
Unknown property 'css' found eslint(react/no-unknown-property) eslint에서 preset으로 eslint-config-airbnb를 사용하는 경우 'react/no-unknown-property' 룰이 기본적으로 활성화 되어있다. 해당 룰 참조: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md 기본적으로 css props는 jsx props에 존재하지않는 plugin props 같은 존재이기 때문에 @emotion/react 를 사용하여 jsx element에 css props를 전달하는 경우 eslint rule에 걸리게 된다. ..
👋 개요 Webpack v4로 구성되어있던 기존 프로젝트를 Vite로 Migration을 진행하는 과정에서 해당 에러가 발생하였다. TS2786: 'Example'은(는) JSX 구성 요소로 사용할 수 없습니다. TS2786: 'Example' cannot be used as a JSX component 당시 개발 환경은 다음과 같다. ⚒️ 개발환경 vite 4 typescript 5 react 17 react-dom 17 💻 시도 처음에 react package에서 type을 못가져오는 것 같아서 tsconfig의 paths 값을 만져주었다.(vite.config.ts의 resolve.alias 값도 만져주었다.) 특정 부분에서는 해결되었으나 react와의 의존성이 있는 다른 라이브러리에서 같은 에러가..
👋 개요 얼마 전 어떤 회사의 코딩 테스트를 보게 되었다. 꽤나 큰 회사였는데, 보통 다른 국내 기업에서 진행했던 코딩 테스트 플랫폼과는 달리 코딜리티(Codility)라는 플랫폼에서 진행했다. 처음 이용해본 플랫폼이라 당황스러웠던 점도 있고 신기했던 점도 있어 이 부분을 공유해보고자 글을 작성한다. Codility 플랫폼 자체 특징과 해당 기업 코테 방식의 특징이 중구난방으로 섞여 설명될 것이다. 이 점 양해 부탁드린다. 또한 기업 정보는 공개하지 못하는 점도 양해 부탁드린다. 🎯 특징 1. 영어다. 처음 사용해보다 보니 튜토리얼을 좀 열심히 둘러봤다. IDE 자체는 다른 플랫폼과 다를 게 없다. 좌측에 문제가 있었고 우측에 IDE가 있어 문제를 풀면 되는 UI 였다. 문제 간 이동도 자유로웠다. 근데..
7월 초, 어쩌다보니 친구와 무작정 즉흥으로 코타키나발루 여행을 떠나게 됐다. (여행을 이륙 24시간 전에 결정했다ㅎ. 99% J에게는 꿈만 같았던 일) 계획에 없던 여행이라 이 지출에 대한 타당한 이유가 필요했고, 내 커리어 2년을 스스로 축하하는 의미를 갖고 갔다 오기로 했다. 이 글은 그 코타키나발루로 향하는 비행기 안에서 주저리주저리 적은 회고록이다. 📉 개발자 호황기에서 불황기로 2019년 7월 15일, 지금 회사에 프론트엔드 신입 개발자로 입사를 했다. 구직활동을 하던 때를 설명하자면 나는 4학년 막학기를 마치고 코스모스 졸업을 앞둔 상태에서 6월부터 본격적인 구직활동에 들어섰다. 그 때는 확실히 지원자 입장에서 지원할만 한 회사들(참고로 나는 어느 정도 규모와 회사만의 상품 및 서비스를 갖고..
