전체 글 52

[JavaScript] 비동기 처리: `async/await` vs `Promise` 반환 비교

JavaScript에서 비동기 처리를 할 때 흔히 선택하는 방식은 async/await와 Promise를 직접 반환하는 방법입니다. 두 방식은 내부적으로는 같은 Promise 기반이지만, 사용성과 가독성에서 차이가 있습니다. 이번 글에서는 각각의 특징과 차이를 살펴보겠습니다.1. async/await 방식async 키워드를 함수 앞에 붙이면 함수는 항상 Promise를 반환합니다. 함수 내부에서는 await 키워드를 사용해 Promise가 처리될 때까지 기다릴 수 있습니다.async function fetchData() { const response = await fetch('https://api.example.com/data'); const data = await response.json(); r..

카테고리 없음 2025.09.27

[web] Browserslist로 웹 브라우저 지원 범위 관리하기

웹 개발에서 브라우저 호환성은 중요한 문제입니다. 최신 CSS, JavaScript 기능을 사용하면서도 구버전 브라우저 지원을 고려해야 합니다. 이런 상황에서 browserslist를 활용하면 프로젝트의 대상 브라우저를 명확하게 관리할 수 있습니다.Browserslist란?browserslist는 프로젝트에서 지원할 브라우저의 범위를 정의하는 도구입니다.주로 Autoprefixer, Babel, ESLint, Stylelint 등과 함께 사용되어, CSS 전처리, JS 트랜스파일, 코드 린팅 등에서 브라우저 호환성을 자동으로 관리할 수 있습니다.브라우저 버전을 직접 명시하거나점유율, 최신 버전 등을 기준으로 범위를 지정할 수 있습니다.기본 문법 예시터미널에서 바로 쿼리하려면 아래와 같이 작성하면 됩니다...

카테고리 없음 2025.09.27

[Node.js - package.json] 틸트(~), 캐럿(^) 연산자를 이용한 의존성 버전 관리

Node.js 프로젝트에서 package.json의 의존성 버전을 관리할 때 자주 보이는 기호가 있습니다. 바로 틸트(~)와 캐럿(^)인데요, 이들은 패키지 버전을 자동으로 업데이트할 수 있는 범위를 지정하는 역할을 합니다. 또한 이 규칙은 SemVer(Semantic Versioning, 유의적 버전)이라는 버전 관리 체계 위에서 동작합니다.SemVer 기본 구조SemVer은 다음과 같이 메이저.마이너.패치 3단계로 나눕니다.MAJOR.MINOR.PATCH메이저(MAJOR): 하위 호환성이 깨질 수 있는 변경 (예: 1.x.x → 2.0.0)마이너(MINOR): 새로운 기능 추가, 하위 호환 유지 (예: 1.2.x → 1.3.0)패치(PATCH): 버그 수정, 하위 호환 유지 (예: 1.2.3 → 1...

카테고리 없음 2025.09.27

[HTTP] URL에 WWW-Authenticate 인증 정보 포함하기

간혹 페이지에 접근하면 사용자 이름과 비밀번호를 요구하는 사이트가 있다. 서버로부터 수신된 응답에 WWW-Authenticate 헤더가 포함된 경우에 그러한 폼이 표시된다.이러한 사이트에 접근할 때 일반적인 절차는 다음과 같다.페이지 접근 → 사용자명, 비밀번호 입력 → 인증 성공 및 페이지 표시만약 사용자명, 비밀번호를 매번 직접 입력하지 않도록 하기 위해서는 어떻게 해야 하는가?Authorization header를 포함하여 fetch한 뒤에 해당 페이지로 리다이렉트 - 프록시를 이용하거나 서버에 CORS 설정을 하여야 한다.URL에 사용자명, 비밀번호 정보를 포함한다. URL이 "https://mule-heo.tistory.com"이었다면 "https://${username}:${password}@..

구현 2025.04.27

[VS Code] 파일 검색 시 특정 경로의 파일을 제외하는 방법

하나의 프로젝트 안에는 수많은 파일이 존재한다. 외부로부터 제공된 서드 파티 모듈일 수도 있고, 특정 모듈, 에디터에 대한 구성 파일일 수도 있다. 이들 중 대부분은 그저 설치 및 초기 설정을 마친 뒤로는 열어볼 일이 없는 관심사 밖의 파일일 것이다.Ctrl + Shift + F를 누르면 이동되는 검색 탭, Ctrl + P를 누르면 열리는 파일 검색 메뉴로부터 특정 경로에 위치한 파일을 제외하고자 한다. VS Code의 설정을 변경하여 특정 디렉토리가 검색 결과에 포함되지 않도록 변경할 수 있다.로컬 설정VS Code 좌측 하단의 톱니바퀴(manage) - 설정(settings) - 상단 검색 메뉴에 "search exclude" 입력Search:Exclude 항목에 글롭 패턴을 추가한다. (예: **/..

카테고리 없음 2025.04.27

[VS Code] Source Control 메뉴에서 변경사항이 확인되지 않는 문제

문제서브모듈이 포함된 레포지토리의 소스 코드 작업 중 Source Control 탭에서 소스 변경사항을 확인할 수 없습니다.해결아래와 같이 Soucre Control 설정에서 체크 해제된 레포지토리를 다시 체크합니다. Source Control 영역에 직접 커서를 올려야 선택 가능한 메뉴가 표시됩니다.Source Control > View & Sort > Repositories설정을 직접 조작한 적은 없으나 git pull 과정에서 서브모듈 쪽에서 충돌이 발생한 이후 체크가 해제된 것을 보면 버그인 것 같습니다.덧) 현재 git 저장소에 포함된 서브모듈이 없으면 View & Sort 탭에서 Repositories 항목이 표시되지 않습니다.

[Git] 실수로 git stash drop했을 때 되돌리는 방법

잠시 우선 순위가 밀렸던 작업을 처리하기 위해 기분 좋게 커맨드를 입력한다. 머리는 git stash pop...을 생각하고 있으나 손은 git stash drop을 입력하고 엔터를 누른다.머릿속을 스치는 지난 시간의 기억. 철렁 내려앉는 가슴. 실수로 stash 내역을 drop했을 때 복구하는 방법을 공유하고자 합니다. 꼭 실수가 아니더라도 당장 필요하지 않을 것 같아서 과감히 drop했던 변경사항이 나중에 필요해지는 경우도 있을 수 있으니 알고 있으면 나쁘지 않을 것 같습니다.git stash apply git stash drop 명령어를 실행하면 drop된 stash의 해시가 출력됩니다. 이 해시를 그대로 복사해서 git stash apply를 실행시키면 해당 stash에 기록된 변경사항을 적용할 ..

[yarn] Lifecycle Scripts - pre<command>, post<command>가 실행되지 않는 문제

Lifecycle Script란?Lifecycle Script란 특정 커맨드의 실행과 연계하여 전후에 실행되는 스크립트를 의미합니다.개요npm은 특정 스크립트의 실행 전후에 다른 스크립트를 연계하여 사용할 수 있도록 pre, post 스크립트의 작성을 지원하고 있습니다. pre는 실행 시 자동으로 에 앞서 실행되며, post는 실행 시 실행 이후에 실행됩니다.예를 들어, package.json의 scripts 항목을 다음과 같이 작성합니다.{ "scripts": { "prestart": "echo 'start 실행 준비중입니다.'", "start": "node index.js", "poststart": "echo 'start 실행을 완료하였습니다.'" }}// index.jsco..

[npm] 패키지명 없이 'npm install -g'만 실행하면 어떻게 되나요?

실수로 명령어를 전부 적지 않고 "npm install -g"만 입력한 상태로 엔터를 눌렀으나, 하나의 패키지가 설치되었습니다. 이것의 정체가 무엇인지 확인하고 넘어가고자 합니다.결과만 짧게 적자면 현재 작업 디렉토리(CWD)에 package.json이 있는 경우에 해당 패키지를 전역에 설치합니다.npm help installnpm help 를 터미널에 입력하면 터미널로 각 명령어에 대한 문서를 확인할 수 있습니다. 해당 문서에서 손쉽게 원하는 답을 찾을 수 있었습니다.다음은 npm help install 문서의 내용 일부 발췌 • npm install (in a package directory, no arguments): Install the dependencies to the loca..

카테고리 없음 2025.01.01

[JavaScript] Math.hypot()

개요Math.hypot 함수는 가변적인 개수의 number 타입의 값을 인자로 전달받아 다음의 관계를 만족하는 k를 반환한다.\(\sum_{i=1}^{n}v^{2} = k^{2} \)Math.hypot()hypot은 삼각형의 빗변을 의미하는 hypotenuse를 줄인 단어이다. 직각 삼각형의 빗변이 아닌 a, b의 길이를 이용하여 빗변 c의 길이를 구하는 피타고라스 방정식은 다음과 같다.\(a^{2} + b^{2} = c^{2} \)피타고라스 방정식으로부터 생각하면 Math.hypot 함수는 number 타입의 a, b를 전달받아서 c에 해당하는 값을 반환하는 함수이다. 특이한 점으로는 입력할 수 있는 number의 개수가 2개로 고정되어 있지 않다는 점이다.인자를 하나만 입력하면 절댓값 함수인 Math..

카테고리 없음 2024.12.15