JavaScript32 프로그래밍 (모던 자바스크립트 Deep Dive) 1.1 프로그래밍이란? 프로그래밍은 컴퓨터와의 커뮤니케이션이며 앞서 필요한 것은 아래와 같다. 요구사항 이해한다는 것은 요구사항을 분해 → 정리 → 순서에 맞게 행위 배열하는 것이다. 문제 해결 방안 정의한다는 것은 컴퓨터가 이해할 수 있도록 문제를 설명해야한다. 이때 필요한 것이 컴퓨팅 사고이다. 프로그래밍 내에서 사용될 모든 개념은 논리적으로 설명되어야 한다. 평가 기준이 없는 것은 프로그래밍에서 유의미하지 않다. 1.2 프로그래밍 언어 우리는 컴퓨터에게 문제를 해결하기 위해 명령을 내려야한다. 그때 필요한 언어는 기계어이다. 기계어를 배워 컴퓨터에게 전달하기에는 어려운 일이기 때문에 우리는 프로그래밍 언어를 사용한다. 이는 사람이 이해할 수 있게 약속된 문법의 형태의 인공언어이며 Syntax(문법).. 2024. 4. 15. ESM (ES Module) feat. Vite JS 파일은 브라우저에서 해석될 수 없다. 모듈은 모듈 스코프를, 변수/함수 스코프를 통해 서로의 파일이 오염되지 않도록 하는 장점이 있다. import, export 를 활용한다. ES6부터 모듈 기능을 제공하기 시작했다. 하지면 IE는 여전히 지원하지 않는다. entry 파일을 기준으로 import한 파일들을 찾아가며 의존성 그래프를 그린다. ES module이 동작하려면 브라우저에서 사용가능하도록 module record라는 데이터 구조로 변환해야한다. 이 변환 과정은 ES6 명세가 아닌 HTML 명세를 따라 구문 분석을 한다. (브라우저 한정) 이런 모듈화 작업은 구성 → 인스턴스화 → 평가 단계로 진행된다. 구성단계에서는 로더가 파일을 불러온다. 파일을 모듈 레코드로 구문 분석한다. 로더는 모듈.. 2024. 4. 15. 브라우저 캐시 캐시는 브라우저에서 서버에 최초 요청 이후 로딩을 더 빠르게 하기 위한 장점이 있다. 그러나 요청에 의해 캐시가 저장되면 이후 변경 내용이 있어도, 사용자 브러우저의 캐시에 의해 캐시를 지우기 전까지 변경 내용의 수정이 일어나지 않을 수 있다. 우리는 header의 cache-control 태그를 이용해 max-age 속성으로 캐시의 수명을 지정할 수 있다. 말만 들으면 max-age=60 으로 설정해놓으면 60초 동안 캐싱된 데이터를 사용하고, 그 이후는 캐싱된 데이터를 사용하지 않고 새 응답을 받는 것 같다. (200을 받을 것같으나) 하지만 이것은 명확한 캐시 수명이 아니다. 60초 이후에도 브라우저는 캐싱된 데이터를 확인하며 캐싱된 데이터가 있다면 304 Not Modified 응답을 준다. 결국.. 2024. 4. 15. 엄격하게 commit 하기 (husky, commitlint, lint-staged) Conventional Commit commit 메시지의 규칙 모두 같은 규칙을 사용하며 커밋의 변경 및 수정사항, 기능 구현 등을 명시적으로 표현할 수 있다 커밋을 통한 히스토리도 파악할 수 있다 conventional commit 문서에서 커밋 규칙을 더 자세하게 알 수 있다 husky convential commit을 따르기 위해 node.js 패키지 중 하나인 husky를 사용해 git hooks를 관리할 수 있다 방법 1. husky 설치 npm install --save-dev husky 2. husky 초기화(추천) ./husky/pre-commit을 생성하고, package.json에 prepare 명령어를 추가한다 npx husky init 3. lint-staged 설치 linting .. 2024. 4. 15. nvm을 이용해서 프로젝트 별 node 버전 통일 시키기 nvm? Node.js version manager 의미 그대로 node version을 관리하기 쉽게 제공되는 패키지이다 대표적으로 아래의 명령어가 있다 현재 버전을 포함한 사용가능한 node 목록 $ nvm ls 특정 버전을 설치 $ nvm install {20} 가장 최신 안정화 버전을 설치 $ nvm install --lts 우리가 원하는 것은 버전 통일 javascript는 버전 의존성이 강한 특징을 가지고 있다 프로젝트 별로 버전이 달라서 node 버전을 문서로 관리하고 있다면 아래의 방법이 매우 도움이 될 것이다 .nvmrc nvm 설정 파일 .nvmrc에 해당 프로젝트 버전을 명시한다 명령어를 통해 프로젝트 node 버전으로 변경한다 방법 최상위에 .nvmrc 생성(mac) $ touch .. 2024. 4. 15. npm와 npx, 언제 쓰는거야? npm javascript(Node.js) package manager javascript 개발자가 패키지된 모듈을 쉽게 공유할 수 있도록 돕기 위해 2009년에 오픈 소스 프로젝트로 생성되었다 package를 200만개 이상 보유하고 있는 소프트웨어 레지스트리이다 해당 패키지를 설치하고 사용할 수 있는 커맨드 라인이다 npx javascript(Node.js) package excute 의미론적으로 실행을 하는 커맨드 라인이다 npm 5.2 버전부터 제공되었고, npm과 별개가 아닌 npm에서 제공하는 도구이다 레지스트리에 존재하는 패키지를 설치하지 않아도(npm install) npx를 이용해서 실행할 수 있다. npx를 통해 일회성으로 실행이 가능하다. npx, 왜 나타났나? npm을 이용해서 패키.. 2024. 4. 15. 이전 1 2 3 4 5 6 다음 728x90 반응형
