프로그래밍 메모장

개발하다보면 시간이 지나면서 라이브러리가 deprecated되고, 라이브러리 버전업 및 마이그레이션을 해야하는 경우가 생기는데요. 또한, 디자인 시스템을 만들면서 기능 및 인터페이스가 deprecated 되거나 변경되는 케이스가 존재했는데 그때를 위한 좋은 라이브러릴 하나 찾아서 공유해봅니다. 1. jscodeshift란 무엇인가? jscodeshift는 Facebook(현 Meta)에서 개발한 JavaScript 코드베이스 변환 도구입니다. 이 도구는 Abstract Syntax Tree(AST)를 사용하여 코드의 구조를 이해하고, 필요한 변환을 자동으로 수행할 수 있게 해줍니다. (위 그림을 보시면 좀 무서울수도 있는데  codemod Studio나 chatgpt를 사용하시면 손쉽게 사용 가능합니다...

사내 배포용으로 라이브러리를 개발 중인데 처음 보는 이상한 오류가 떴다. 모노레포 storybook-docs 레포에서 빌드된 tttable(임시 작명이라 가명임;;) 레포의 index.js를 required 하면 오류가 나는것 평소에 commonjs와 esm, amd 등이 뭔지 헷갈려서 이참에 정리겸 간단하게 요약해본다. CommonJS(CJS)란? // 모듈 정의 const circle = require('./circle.js'); const radius = 5; console.log(`반지름 ${radius}인 원의 넓이: ${circle.area(radius)}`); console.log(`반지름 ${radius}인 원의 둘레: ${circle.circumference(radius)}`); Java..

요즘 모노레포를 사용하기 위해서 turbo repo를 사용하면서 궁합이 좋은 패키지 매니저인 pnpm을 사용해보고 있다. 몇주간 사용하며 느낀 점들을 간단히 공유한다. pnpm을 선택한 이유 npm과 Yarn은 복잡하게 얽힌 dependency들을 단일 루트 하에 위치시키며(Hoisting) 라이브러리의 packages.json에 명시된 dependencies들을 몰래 최상위로 호이스팅 시킨다. 그 과정에서 packages.json에 명시되지 않은 라이브러리를 사용 가능한데 이를 유령 의존성(phantom dependency)이라 부른다. 실제로 turborepo에서 yarn을 사용해본 결과 jest를 모노레포 A에서만 깔았는데 모노레포 B에서도 사용할 수 있었다. 사실 jest는 별 문제가 되지 않지만..

*틀린 부분 있으면 피드백 주시면 감사하겠습니다~ async/await를 쓸줄은 아는데 정확히 어떻게 동작하는지 애매하게 알고 있어서 작성해봅니다. 동작 원리 const a = () => { console.log("a 시작"); b(); console.log("a 끝"); }; const b = async () => { console.log("b 시작"); await c(); console.log("b 끝"); }; const c = async () => { console.log("c 시작"); await d(); console.log("c 끝"); }; const d = () => { console.log("d") }; a(); 출처 : https://velog.io/@jjunyjjuny/JavaScr..

SPA(Single Page Application)이란? 과거에는 웹 페이지를 클릭하면 하나의 문서를 전달하고, 같은 하이퍼 링크를 누르면 새로운 페이지를 서버에서 전송받아 보여주고는 했습니다. 즉, 새로운 페이지를 요청할때마다 정적 리소스가 다운로드 되고 (새로운) 전체 페이지가 전부 다 렌더링 됩니다. SPA는 기존 방식과 달리 웹 페이지에 필요한 리소스(HTML,CSS,JS)를 한번에 다 다운로드 받은 뒤 새로운 페이지 요청이 있을 경우 페이지 갱신에 필요한 데이터만 서버에서 전달받아 페이지를 갱신하는 방식(AJAX)으로 구현이 가능합니다. 즉, 빈 도화지(HTML)에 그림(JS로 동적 렌더링)을 그리는 식으로 작동합니다. JS로 간단하게 구현해봅시다. 폴더 구조 └─src | ├─pages | |..

ES6에서 도입된 제너레이터(Generator) 함수는 이터러블을 생성하는 함수이다. 제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 간편하게 이터러블을 구현할 수 있다. 기존 Symbol iterator 로 피보나치 수열 구현 function fibonacci(maxi) { let [first, second] = [0,1]; return { [Symbol.iterator](){return this;}, next() { [first, second] = [second, first+second]; return {value: first, done : first>=maxi}; } } } const Fibo = fibonacci(1000); while(true){ const {..

*잘못된 부분이 있으면 피드백 주시면 빠르게 수정하겠습니다! ES5까지는 변수를 선언하는 방법은 var 밖에 없었습니다. 다만 변수의 유효범위를 설정하는데 어려움을 겪어서 ES6 이후 지역변수를 다루기 위해서 let, const가 등장하게 됩니다. ​ (var는 추가적으로 블록 스코프가 아닌 '함수 스코프' 개념을 따릅니다.) 자세한건 아래 링크를 참고하세요. https://poiemaweb.com/js-scope Scope | PoiemaWeb 스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙으로 자바스크립트는 이 규칙대로 식별자를 찾는다. poiemaweb.com 호이스팅 JavaScript에서 코드..

*잘못된 부분이 있으면 피드백 주시면 감사하겠습니다! 자바스크립트에서 타이머 이벤트를 쓸 수 있는 방법으로는 setTimeout, setInterval 두가지가 있다. 이 함수들이 어떻게 비동기를 지원할까? 자바스크립트는 단일 쓰레드 기반의 언어이지만 이벤트 루프를 사용해서 동시성을 지원할 수 있다. 타이머를 실행시키면 Web API에서 타이머의 기한이 끝날때까지 대기하다가 테스크 큐로 들어오게 된다. 콜스택이 비었다면 테스크 큐에서 테스크를 가져와 실행한다. 이 말이 무엇인가를 다시 풀어써보기로 하자. 우선 Web API가 뭔지부터 알아야 할것 같다. Web API 와 Javascript 런타임 런타임이란 해당 프로그램 언어가 작성된 코드가 구동되는 환경을 뜻하고, 웹 브라우저나 Node.js 가 대표..