NestJS + Vue.js 에서 GET 배열 쿼리 안전하게 처리하는 법 (axios + qs + 커스텀 Pipe)개발하다 보면, 게시글을 태그 배열로 검색하는 기능이 필요할 때가 있다.예를 들어 프론트에서 스킬 ID 배열 [1, 2, 3]을 쿼리로 넘기고, 백엔드에서는 해당 태그들이 포함된 게시글을 조회하는 상황.근데 이게 의외로 그냥 axios로 보내면 제대로 안 먹힌다.게다가 NestJS 쪽에서도 쿼리 파라미터가 배열인지 아닌지 헷갈려 한다.그래서 오늘은 해당 상황을 바탕으로, 프론트에서는 배열을 올바르게 전송하는 방법백엔드에서는 배열을 안전하게 파싱하는 방법이걸 어떻게 해결했는지 정리해보자.😵 문제 상황프론트에서 아래처럼 요청했는데…GET /post?tagGroup=1&tagGroup=2&ta..
[Vue] Vue-multiselect UI 커스텀 하기
공식 문서https://vue-multiselect.js.org/ Vue-Multiselect | Vue Select Library.Probably the most complete selecting solution for Vue.js, without jQuery.vue-multiselect.js.org참고 프로젝트https://github.com/jungyr98/devcollab GitHub - jungyr98/devcollab: 개발자들을 위한 협업 게시판 및 실시간 채팅 플랫폼개발자들을 위한 협업 게시판 및 실시간 채팅 플랫폼. Contribute to jungyr98/devcollab development by creating an account on GitHub.github.com 개발자 커뮤니..
[TypeScript] OpenAPI Generator 적용하기
" data-og-host="openapi-generator.tech" data-og-source-url="https://openapi-generator.tech/" data-og-url="https://openapi-generator.tech/" data-og-image="https://blog.kakaocdn.net/dna/ePXme/hyYca3IblK/AAAAAAAAAAAAAAAAAAAAAKDFJSyrgcQE5kUY9rA-d66t_O9Jhh8TWPQFqdy9XnBM/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=JakYqDvXYWmu64ianNvfBAArGHU%3D from OpenAPI Generator | OpenAPI GeneratorDescription will go into a meta tag in openapi-generator.tech 1. openapi-gene..
[React] env 파일 생성하기
env란?환경 변수 파일을 의미하고, 중요한 key 값이나 DB 비밀번호 등 보안이 필요한 특정 값을 변수에 담아어플리케이션에서 활용할 수 있도록 해주는 설정 파일이다.1. 루트 디렉토리에 .env 파일 생성 후 .gitignore 파일에 .env 추가 하기2. 환경 변수 생성하기REACT_APP_{변수명} 형식 및 대문자로 작성 하는 규칙이 있으므로 참고하자. 3. 환경 변수 사용하기사용하려는 컴포넌트에서 process.env.REACT_APP_{변수명} 으로 접근이 가능하다. 환경 변수가 정상적으로 적용 됨을 확인할 수 있다.
[React] antd Table 스크롤 자동 설정하기
antd 를 이용한 채팅방 개발 중 스크롤 조정이 필요해졌다.채팅 박스 내에 말풍선이 많아져 일정 높이를 넘길 경우 가장 하단의 말풍선을 볼 수 있도록 해야했다.나는 태그의 row 추가 방식으로 말풍선을 추가하고 있었고, 그래서 Table 스크롤을 조정했다. 1. React.useRef 훅을 사용하여 Table 컴포넌트에 대한 참조를 생성하기아래 코드는 Table 컴포넌트의 ref 속성 타입을 사용하여 tblRef라는 참조를 생성한다. 이를 통해 Table 컴포넌트의 하위 DOM 요소나 React 인스턴스에 직접 접근할 수 있게 된다.const tblRef: Parameters[0]["ref"] = React.useRef(null);- tblRef: 생성된 참조의 이름.- Parameters[0]["..
[Node.js] 윈도우 PowerShell 에서 Node.js 쉽게 설치하기
1. 다운로드 사이트 접속https://nodejs.org/en/download/package-manager Node.js — Download Node.js®Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. PowerShell 에서 fnm 다운로드fnm을 설치하면 fnm 명령어로 빠르게 node.js를 다운로드 받을 수 있다.# installs fnm (Fast Node Manager)winget install Schniz.fnm 3. PowerShell 프로필 변경~\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1** 만약 해당 프로필 파일..
[vscode] 윈도우 Visual Studio Code 설치하기
1. vscode 다운로드 사이트https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, WindowsVisual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.code.visualstudio.com 2. Windows - System Installer x64 다운..
ax5ui-grid 사용해보기
ax5ui-grid document ax5ui / ax5ui-grid : Basic ax5ui.axisj.com ax5ui-grid란? "그리드"는 구성을 위해 제공되는 다양한 옵션과 함께 데이터를 테이블 형식으로 표시합니다. table 태그만 주구장창 사용하다가, 엄청난 신세계를 발견했다. 그리드는 컬럼명과 json 데이터의 key 값만 맞춰주면 데이터가 테이블 형식으로 표현된다. 위의 ax5ui-grid Basic 페이지에 올라와 있는 테스트 코드만 이용해서 테이블을 만들어봤다. 페이지 내에 그리드 스타일 시트 및 스크립트 파일 포함 시키기 html 테이블로 만들었을 때에 비해 엄청나게 줄어든 코드를 볼 수 있다. js 그리드 생성 후 실행 화면 기본으로 제공하는 디자인부터 매우 깔끔하고, 제공하는 ..