본문 바로가기

전체 글

 (171)
바벨 설정 파일 정리 웹팩을 쓰면서 트랜스 파일러로 바벨을 사용하고 있다.이 때 바벨 사용법과 설정 정보를 정리함. 1. 의존성 설치개발 시 빌드 의존성으로 다음을 설치한다.npm install -D @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react babel-loader 런타임 의존성으로 다음을 설치한다.npm install @babel/runtime core-js@babel/coreBabel의 엔진. babelrc를 불러와 트랜스 파일링 작업을 실행하고 코드를 만드는 본체babel-loaderWebpack과 Babel을 연결해주는 중간자.Webpack 실행 시 파일을 babel-loader를 통해 @babel/core에서 실행..
[vite] vite의 기본 타입스크립트 설정에 대해 (tsc composite build) 작성 배경vite 프로젝트를 세팅하고 있었다.vite 홈페이지의 설명을 따라 init을 실행하고 생성된 프로젝트를 실행하니 타입스크립트가 세팅되어 있었다. 여기서 궁금한 게 있었다. 1. package.json에서 npm run build 커맨드는 "tsc -b && vite build" 로 설정되어 있다.그런데 왜 tsc -b 일까.tsc 컴파일링은 "tsc" 만 해도 되는데 말이다.2. 1에 대한 궁금증으로 인해 npm run build 커맨드를 "tsc && vite build" 로 바꿔보았다.그러자 소스 코드에 있던 타입 에러가 나오지 않았다. 왜 이런 차이가 생긴 걸까. 원인 분석tsc -b에 대해tsc -b가 뭘까.콘솔에 $ npx tsc -help 를 입력하면 다음 같이 소개한다. ts..
node 프로젝트의 플래그 변수로 NODE_ENV를 쓰지 않는 걸 추천함 원래 나는 사내 node 프로젝트에서 로컬 환경 실행이나 사내 서버, 운영 서버 등 서로 다른 환경에서 실행하기 위해 NODE_ENV를 플래그 변수로 사용했다.로컬 환경이라면 NODE_ENV='local'사내 테스트 서버라면 NODE_ENV='development'운영 서버라면 NODE_ENV='production' 을 주는 방식이다.그러던 중 프로젝트를 모노 레포로 전환하며 관리 도구로 lerna를 사용했고, 이 과정에서 NODE_ENV 가 문제가 되어 더 이상 노드 런타임 실행의 분기처리에 이 변수를 사용하지 않으려 한다. 1. lerna가 무엇인가?lerna는 모노 레포 프로젝트의 관리 도구이다.모노 레포 프로젝트란 독립적으로 패키지 관리, 빌드 및 실행되는 프로젝트를 하나의 레포지토리로 통합한 것..
모듈과 컴포넌트의 차이 이해하기 (정적 소스 vs 런타임) 컴포넌트와 모듈은 소스 코드를 리팩토링하고 소프트웨어 아키텍처를 설계할 때 범용적으로 많이 사용되는 용어다. 나는 이 두가지가 표면 상 비슷하여 지금까지 구분 없이 사용했다. 하지만, 최근 설계 업무에 들어가며 이 둘을 구분해 사용하는 글들을 접했다. 그래서 이번 기회에 이 둘이 어떻게 다른지 확인해보려 한다. 인터넷에서 둘의 차이를 설명한 몇 가지 글을 접했는데, 그럼에도 둘의 차이에 대한 막연함을 느꼈다. 그래서 내용을 보충해서 적었다. 모듈과 컴포넌트의 공통점표면 상으로 둘은 코드를 역할, 기능, 의존성에 따라 묶은 것으로 동일해 보인다.여기서 응집성 있는 로직들은 하나로 묶어주고, 결합도를 낮춰야 하는 로직들은 서로 분리한다.모듈이나 컴포넌트나 기능을 추상화하고 분할하는 설계에서의 최소 단위다. ..
자바스크립트에서 재귀와 반복의 차이, 최적화 방법 재귀와 반복의 차이자바스크립트에서는 반복 작업을 구현하기 위해 재귀 함수나 반복문을 사용할 수 있다.재귀 함수는 함수 내부에서 자기 자신을 재호출하는 방식이고, 반복문은 for, while 예약어를 이용하여 반복문 블럭 내 작업을 반복한다. 둘 다 특정 작업이 일정한 종료 조건에 도달할 때 까지 진행한다는 점에서 유사해 보인다.그러면 차이는 어떤 걸까. 콜 스택 사용 재귀 함수는 호출되는 함수들이 종료 조건에 도달하지 않으면 어떻게 될까?2,3번째 함수들이 콜스택에 쌓인 채로 4,5,6..n번째까지 재귀로 호출되는 함수들은 종료되지 않은 채 다음 함수가 호출되어 콜스택에 추가된다. 종료조건을 만나서 정상적으로 종료되거나 콜스택 초과 에러가 나기 전까지는 계속 콜스택에 함수들이 추가된다. 반면 반복문은 함..
[디자인패턴] 선언적 프로그래밍이 뭔지 잘 모르겠어서 좀 더 구체적으로 적어보기(추상화, 명령형 프로그래밍, OOP) 글을 작성한 배경 선언적 프로그래밍(declarative programming, 이하 DP)을 알려주는 좋은 글은 많다. 대표적인 웹 프론트엔드 기술 블로그를 운영하는 토스만 봐도 선언적 프로그래밍 글이 있어서 비전공자인 내가 봐도 이해할 수 있다.(링크 - 토스. 선언적인 코드 작성하기) 이런 글들은 DP를 다음 같이 설명한다.프로그램이 어떻게(how)해야하는지 보단 무엇을(what)하는지 설명대표적인 예시로는 자바스크립트에서는 고차 함수(map, filter, reduce 등), html, css반복 작업으로 선언적, 명령적 코드를 비교한다면,for, while문은 명령적임 = 반복작업 수행을 위해 반복 절차 구현을 위한 변수 i, i값 증가(i++), 반복문 탈출 조건(i 즉, 어떻게 작업을 구현할..
[git] 처음부터 다루는 git 실무 사용법 정리 - 5. 공유 레포지토리 전략: 서브트리(subtree) 서브트리(subtree)는 저장소 내에 다른 저장소를 추가하는 방식 중 하나입니다. 언제 사용하는가: 공유 모듈 구축하기사내 프로젝트로 모놀리틱이 아닌 멀티 레포 구조를 구축해야 했던 경험이 있었습니다. 웹 프론트엔드 앱이었는데, 발주사는 모놀리틱 구조가 아닌 micro-frontend 아키텍처(이하, mfa)를 요구했습니다. 이 구조는 앱을 복수의 분리된 앱으로 분할한 후, 클라이언트 단에서 하나의 앱으로 통합하는 구조입니다.이 때문에, 3~4개의 도메인을 각각 별개의 프로젝트로 분할하였습니다. 문제는, 이들 간에 공통으로 쓰는 모듈이 몇 가지 있었습니다. 전역 상태라던지, UI 컴포넌트, 상태를 구독하는 클래스, 이들의 타입을 정의한 파일입니다. 과거에도 프로젝트 간에 공유하는 모듈을 만든 적이 있..
<숫자는 거짓말을 한다> 알베르트 카이도 (데이터와 차트에서 진실을 가려내는 방법) 책을 읽기 전 나의 문제 의식공공의제에 대한 우리의 정치적 논의에서 서로가 지지하는 당의 입장을 내려놓고, 의제를 벗어난 도덕적 비난을 유보하고 토론을 할 수 있을까.난 이 부분에 대한 이상적인 답, 우리가 달성한다면 위 문제를 해결할 방안으로서 수치적 해석을 얘기한 적 있다. https://chartist1206.tistory.com/288 바츨라프 스밀" data-og-description="초 가공 정보 시대: 수치적 해석에서 편익 분석, 그리고 악마화까지두 농부가 새벽부터 각자의 밭을 갈고 있었다. 정오 무렵, 그들은 허리를 피고 숨을 고르며 자신의 밭을 바라보았다. 둘 다 같" data-og-host="chartist1206.tistory.com" data-og-source-url="https:..

티스토리툴바