728x90
반응형

Frontend/Javascript 5

[Axios] 비동기 통신 라이브러리 인스턴스 활용하기 (ajax)

https://axios-http.com/kr/docs/intro 시작하기 | Axios Docs시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코axios-http.com Axios는 비동기 통신 라이브러리로, 흔히 알고 있는 ajax 기능을 내장하고 있다.Promise 기반으로 javascript에서 제공하는 XMLHttpRequests를 만들어 준다.보통 javascript 프레임워크로 이루어져 있는 Front-End에서 Back-End 서버로 요청을 보낼 때 많이 사용한다. PromisePromise는 java..

Frontend/Javascript 2025.11.12

[node js] 여러 node 버전 사용하기 (nvm)

nvm이란 node version manager이다.한 PC에서 프로젝트를 여러 개 다루다 보면 node버전이 여러 개 필요할 경우가 생긴다.node버전 별로 지원하는 패키지 버전이 다르기 때문이다.그렇다고 최신 node 버전으로 하위 node 버전 프로젝트가 전부 돌아가는 것도 아니다. nvm 설치https://github.com/coreybutler/nvm-windows GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.A node.js version management utility for Windows. Ironically written in Go. - ..

Frontend/Javascript 2025.11.08

[js to Spring] AES-GCM 양방향 암호키 적용하기

이전 프로젝트에서는 AES-CBC를 이용해 양방향 암호키를 적용했었다.신규 프로젝트에서는 AES-GCM으로 양방향 암호키를 적용하도록 변경하였는데,이전에 사용했던 라이브러리가 CryptoJS였는데, CryptoJS에서는 AES-GCM 방식을 지원하지 않아 window.crypto를 사용하기로 하였다.AES-GCM 암호화AES는 세계적으로 가장 많이 사용되는 대칭키 암호화 알고리즘이다.AES-CBC 방식은 암호화 키에 IV를 추가해서 암호화 키를 유추할 수 없게 보완한 방식이다.허나 이 또한 병렬처리가 불가능하여 CBC방식을 보완해 병렬처리가 가능하게 만든 게 GCM 방식이다.window.crypto.subtle은 local환경이 아니라면 반드시 https에서만 동작한다.https://developer.m..

Frontend/Javascript 2025.10.13

[vite] localhost 환경에서 https 적용하기 (Window mkcert)

현 프로젝트에서 로그인 로직을 만들 때 AccessToken, RefreshToken 두 가지 토큰을 사용하는 방식으로, 그중 RefreshToken은 HTTP-Only Cookie의 형태로 주고받도록 설계했다.현 프로젝트 MSA 환경에서는 UI 서버의 도메인과 Gateway 서버의 도메인이 서로 달라서 SameSite 옵션을 반드시 'None'으로 설정해야만 했다.여기서 문제는 HTTP-Only Cookie는 SameSite = 'None'일 경우에는 반드시 secure = true로 해주어야 했다.즉 https 환경에서만 쿠키를 주고 받을 수 있는 것이다.개발서버와 양산서버는 당연하게도 https가 적용이 되어있어 구현 자체는 문제가 되지 않았다.그래도 로컬 환경에서 RefreshToken이 적용이 ..

Frontend/Javascript 2025.10.01

[javascript] Audio 한 가지의 소리만 출력하기 (Singleton 패턴)

프로젝트에서 오디오를 재생시키던 페이지들이 몇몇 존재했다.큰 문제는 아니였으나, 특정 상황에서 오디오가 몇번 불리게 되면 소리가 겹치거나 제대로 재생이 되지 않던 현상이 있었다.해당 페이지들은 PC와 바코드 기기를 연결해서 바코드를 찍었을 때 들어온 값에 따라 오디오 소리를 출력하는 페이지였다.(사실 요구사항이 왔던 것은 아니고 당시 일이 없어서 주섬주섬 찾아서 해결했다)그래서 이에 대한 해결방법을 고민하다가 java 공부하던 시절 배웠던 싱글톤 패턴이 기억이 나서 적용하면 해결될거라 생각해 바로 구현해보았다. type TAudioName = 'error' | 'success' | 'null';type audioPath = { path: string;}const AudioSet: Record = { er..

Frontend/Javascript 2025.09.26