전체 글
[Nuxt] click outside element
@click=""으로 클릭했을 때의 함수 실행이 가능하지만, 해당 element 외부를 클릭했을 때, 실행이 가능한 함수가 필요해서 찾아보았다. vue-click-outside 라는 라이브러리가 있었고 사용법은 간단하다. https://www.npmjs.com/package/vue-click-outside vue-click-outside ClickOutside directive for Vue. Latest version: 1.1.0, last published: 2 years ago. Start using vue-click-outside in your project by running `npm i vue-click-outside`. There are 220 other projects in the npm ..
CSR, SSR 이란? (Client-Side-Rendering, Server-Side-Rendering)
렌더링 (Rendering) 웹 페이지를 접속할 때, 그 페이지를 화면에 그려주는 것 MPA(Multi Page Application) 과 SPA(Single Page Application) MPA는 다수의 페이지로 구성되어 요청마다 정해진 페이지를 반환하는 방식이라고 한다. 반면, SPA는 단일 페이지로 구성되어 해당 페이지 자체에서 요청에 따라 화면을 재구성한다고 한다. MPA는 SSR의 방식으로, SPA는 CSR 방식으로 HTML을 렌더링한다. 하지만 MPA = SSR / SPA = CSR 는 아니라고 한다. MAP와 SPA는 웹 어플리케이션을 구성하는 형태이고 SSR과 CSR은 렌더링 방식이다. SSR (Server-Side-Rendering) 페이지 렌더링 할 때마다 서버에 새로운 페이지에 대한..
Nuxt3 사용법 (프로젝트 생성 및 디렉토리 구조)
현재 맡은 프로젝트들이 모두 Nuxt2를 사용하고 있다. Nuxt3는 글 작성일 기준, RC 버전으로 출시되어 있는데 언젠가는 마이그레이션이 필요할 것 같아서 공식 문서를 보고 틈틈이 공부해보려고 한다. Prerequisites Node.js (버전 14.16이거나 16.11이상으로!) VS Code Volar Extension (VS Code에서 Vue Language Features (Volar), TypeScript Vue Plugin (Volar) 설치) 프로젝트 생성 터미널에서 아래의 명령어로 프로젝트를 생성한다. (Nuxt2 프로젝트를 생성할 때보다 훨씬 빠르고 간단하더라구요) npx nuxi init [앱 이름 ex.nuxt-app] Nuxt2와 다르게 pages나 middleware등의 디..
nuxt.config.js에서 NODE_ENV 사용법
env란 환경변수처럼 key value 형태의 변수라고 할 수 있고, Node.js기반에서 사용할 수 있다고 한다 변수를 사용함으로써 조금 더 보안성이 있는 코드 작성이 가능하다고 한다 NODE_ENV NODE_ENV를 배포 모드와 개발 모드 두 가지로 나누어 사용할 수 있다 production 파일 캐싱, 에러 메시지 감추기 등 배포에 적합환 환경 설정 development 파일 캐싱 방지, 디버깅을 위한 상세한 에러 메시지 보이기 등 개발에 도움을 줄 수 있는 환경으로 설정 nuxt.config.js에서 사용하는 방법 export default { env: { baseUrl: process.env.NODE_ENV === 'production' ? 'https://app.co.kr' : 'http://..
Nuxt.js 프로젝트 생성
프로젝트 생성 터미널에서 다음의 명령어를 입력한다. yarn create nuxt-app 아래와 같이 설정했는데 기본 설정 되어 있는 것으로 모두 선택했다. 프로젝트 실행 프로젝트를 열고 아래의 명령어로 실행하면 된다. yarn dev localhost:3000으로 접속하면 아래의 화면이 뜨고 프로젝트가 잘 생성된 것을 확인할 수 있다.
토스페이먼츠 연동 계약
토스페이먼츠 Docs PG사 선정 후, 토스페이먼츠의 Documentation에서 빌링 관련 부분을 보며 공부를 해 보았다. 친절한 문서에 감사함을 느꼈다🙂 https://docs.tosspayments.com/ 토스페이먼츠 결제 연동 문서 온라인 비즈니스의 성공, 토스페이먼츠가 도울게요. docs.tosspayments.com 서비스에 적용할 기능 1. 빌링 (카드 정기 결제) ➡️ 카드 등록과 동시에 1회차 결제 진행 현 상황에서는 클라이언트에서 카드정보 입력하는 결제창이 뜨지 않고 API로만 빌링이 작동하도록 설계하고 구현해 보았다. 구현에 관련된 글은 따로 작성 후 이곳에 첨부할 예정이다. 서비스 신청 개발 테스트를 진행 후, 결제 서비스 신청하기를 진행했다. 이런 저런 정보를 입력 후(사업자등록..
결제 시스템 PG사 선정 과정 기록
결제 시스템 프로젝트 결제 시스템이 따로 없이 꽤 많은 수고를 거듭해 결제를 진행하고 있는 기존의 방식에서 온라인 결제를 통한 사용자 편의를 증진시키기 위해 결제 시스템 프로젝트가 시작됐다 나는 결제 시스템 프로젝트의 DIR을 맡았다 결제 정산 프로세스 결제 정산 프로세스에 대해 찾아보니 아래와 같은 방식으로 흐름이 진행되는 것 같다 PG사와 VAN사에 대해 토스페이먼츠피드를 보고 공부했는데 정리한 내용은 이곳에서 볼 수 있다 VAN사 PG사 공부 VAN의 개념과 역할 incredible-larkspur-091.notion.site PG사 선정 토스페이먼츠도 PG사 이고, 이 글을 읽고 나서 PG사를 토스페이먼츠로 제안해야겠다고 생각했다. (사실 사심 가득, 나는 토스에 오랜 팬이다. ㅎㅎ) 전자결제서비..