본문 바로가기

전체 글

 (152)
Vue3 Options API vs Composition API Vue3에서 애플리케이션을 만들 수 있는 방법은 크게 두 가지가 있습니다. 하나는 Vue2에서 사용해왔던 Options API를 사용하는 방법과 다른 하나는 Vue3에서 새롭게 등장한 Composition API 입니다. 기존 Vue2에서는 SFC(Single File Component) 구조로 Options API를 사용해 직관적으로 코드를 개발해 왔습니다. 이는 개발할 때 고민을 덜 하게 되어 편하지만 컴포넌트의 크기가 커졌을 때 유지보수가 어려워진다는 문제를 야기했습니다. 예를 들어, Options API로 개발한 파일 탐색기 소스를 관심사에 따라 색칠하면 아래와 같이 됩니다. 색깔별로 같은 관심사인데, 한 로직을 따라가려면 스크롤을 위아래로 이동하면서 읽어야 하기 때문에 가독성이 좋지 않습니다. ..
vue-cli(v5) 설치 및 프로젝트 구조 정리 목차 VueJS 설치 프로젝트 생성 프로젝트 구조 1. VueJS 설치 VueJS를 설치하는 방법은 두 가지인데요, vue를 직접 설치하거나, @vue/cli를 설치하는 방법입니다. 두 방법의 차이는 다음과 같습니다. vue: VueJS를 직접 설치하는 방법으로, 간단하고 빠른 방법이지만 프로젝트 세팅을 직접 해야 합니다. @vue/cli: 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜을 수 있습니다. https://simplevue.gitbook.io/intro/01.-vue-cli 아래 명령어로 vue-..
Vue.js란? - 2023년 Vue.js의 장점과 단점 이 글은 아래 글을 번역한 글입니다. https://www.trio.dev/blog/why-use-vue-js What Is Vue.js? The Pros and Cons of Vue.js in 2023 - Trio Developers Vue.js is a JavaScript framework for building user interfaces (UIs) and single-page applications (SPAs). Find out more about Vue.js and how it works! www.trio.dev Vue.js란 무엇일까요? '점진적(Progressive)' 프레임워크라고 하는 Vue.js는 추가적인 기능들을 점진적으로 채택하는 디자인 철학으로 유명합니다. '점진적 프레임워크'라는..
[NextJS] OAuth 2.0 구글 로그인 API 적용하기 배경 최근 소셜(간편) 로그인은 대부분의 서비스의 필수 기능이 되었습니다. 회원가입 절차가 간단해지고, 사용자가 서비스에 접근하기 쉬워지기 때문에 유저 확보의 장점만 보더라도 개발하지 않을 이유가 없게 된 것이죠. 이러한 로그인은 SSO(Single Sign on)라는 이름으로 불리기도 하는데요, 구글을 예로 들면, 구글 로그인을 한 번 하면, 구글의 여러 서비스에서 따로 로그인 할 필요 없이 구글의 서비스를 이용할 수 있다는 점을 들 수 있습니다. 이러한 로그인은 구글 뿐만 아니라, 페이스북, 네이버, 카카오톡 등의 서비스에서 제공하고 있습니다. SSO는 인증(Authentication)과 인가(Authorization)와 관련이 있는데요, 인증은 로그인과 같이 사용자를 인증하는 과정이며, 인가는 어느..
GKE Nginx Ingress 환경에서 socket.io가 동작하지 않음 개발환경 플랫폼: GCP/GKE 백엔드: NestJS 프런트: NextJS 소켓 라이브러리: socket.io 문제 정의 socket.io를 사용한 채팅 서비스가 로컬에선 동작하지만, 쿠버네티스에 배포하면 동작하지 않음 원인 Ingress에 웹소켓 관련 설정이 따로 필요 해결 기존에 사용하던 GCE Ingress Controller는 웹소켓 관련 설정이 지원되지 않아 보였고, 자료도 찾을 수 없었음 리서치 해보니 Nginx Ingress Controller는 자료가 많았기에 교체하기로 결정(추가적으로 SSL 인증서 발급 작업 필요) 상세 내용 백엔드인 Nest에선 아래와 같이 구성했습니다. @WebSocketGateway({ namespace: 'chat', cors: { origin: '*', },..
[NestJS] 채팅 구현하기(with ReactJS) 배경 Web 환경에서 실시간 채팅을 구현하려면 클라이언트와 서버가 양방향 통신을 할 수 있어야 합니다. 따라서, 이 글에선 클라이언트가 서버로 요청을 보내는 단방향 프로토콜인 HTTP 대신, WebSocket 프로토콜을 사용하여 채팅을 구현하는 방법을 소개합니다. 단방향 vs 양방향 HTTP는 단방향 네트워크 프로토콜로 설계되었습니다. 클라이언트와 서버가 연결이 성립된 후, 클라이언트가 서버에게 요청을 보내고, 서버가 클라이언트에게 응답을 하면 연결이 종료됩니다. 여기서 주목할 점은 요청은 항상 클라이언트가 하고, 응답은 항상 서버가 한다는 점입니다. 이런 일방적인 프로세스를 단방향이라고 합니다. 라디오를 예로 들 수 있는데요, 라디오를 들으려면 우리는 라디오를 켭니다(요청). 라디오가 켜지면 해당 주파..
[NestJS] 스케줄러로 반복 작업 설정하기 배경 웹 서비스를 만들 때 특정 시간에 특정 작업 반복이 필요한 경우가 있습니다. 예를 들어, 쇼핑몰을 만든다고 할 때 배송이 완료된 후 일정 시간 뒤 자동으로 구매 확정으로 상태를 변경해준다든지의 작업이 예입니다. NestJS에서는 이러한 반복적 배치 작업을 스케줄러로 구현할 수 있습니다. 또한 특정 이벤트가 발생했을 때 작업을 실행하게 해주는 커스텀 프로바이더라는 것도 존재합니다. 이 글에선 반복적 작업이 목적이기 때문에 스케줄러를 사용해서 구현하려고 합니다. 1. 패키지 설치 필요한 패키지를 설치합니다. npm install --save @nestjs/schedule npm install --save-dev @types/cron 2. app.module.ts 앱에 스케줄 모듈을 import 해줍니다..
[TypeORM] addSelect() 결과를 Entity에 매핑하기 TypeORM은 NodeJS 환경에서 ORM 아키텍쳐를 구현할 수 있게 해주는 유용한 모듈입니다. 하지만 특정 상황에서 지원이 되지 않는 기능들이 있어서 곤란한 상황이 발생하는 경우가 많습니다. 이번에 처한 곤란한 상황은 아래와 같았습니다. const qb = this.dataSource.manager .createQueryBuilder(Users, 'u') .addSelect((qb) => qb.select('COALESCE(ROUND(AVG(ur.rate), 1), 0)').from(UserReview, 'ur'), 'userRate') .getMany(); 위와 같이 사용자의 리뷰 평점을 User 엔티티에 매핑해주고 싶은데, addSelect를 사용하면 엔티티에 매핑이 되지 않습니다. addSele..

티스토리툴바