🌟 한글명언 OPEN API 기술설명서본 문서는 한글명언 OPEN API 프로젝트의 전반적인 시스템 구성, 사용 기술(버전 포함), 모듈별 역할, 실행 방법, 배포 환경, 관련 링크 정보 및 CI/CD 파이프라인 설정에 관한 설명서입니다.1. 개요api key나 복잡한 인증 필요없이 한글로 번역한 명언을 받아볼 수 있는 OPEN API 서비스 구현2. 관련 링크 📑아래는 프로젝트와 관련된 다양한 링크 정보입니다.API 문서: https://quote.aleph.kr/api-docs/(API 문서 페이지)관리자 페이지: https://quote.aleph.kr/admin(관리자 전용 명언 관리 페이지)깃허브: https://github.com/Aleph-Kim/korean-quote(프로젝트 소스 코드..

한글명언 OPEN API 기술 설명서

🌟 한글명언 OPEN API 기술설명서본 문서는 한글명언 OPEN API 프로젝트의 전반적인 시스템 구성, 사용 기술(버전 포함), 모듈별 역할, 실행 방법, 배포 환경, 관련 링크 정보 및 CI/CD 파이프라인 설정에 관한 설명서입니다.1. 개요api key나 복잡한 인증 필요없이 한글로 번역한 명언을 받아볼 수 있는 OPEN API 서비스 구현2. 관련 링크 📑아래는 프로젝트와 관련된 다양한 링크 정보입니다.API 문서: https://quote.aleph.kr/api-docs/(API 문서 페이지)관리자 페이지: https://quote.aleph.kr/admin(관리자 전용 명언 관리 페이지)깃허브: https://github.com/Aleph-Kim/korean-quote(프로젝트 소스 코드..

2025.02.04

개요open api 프로젝트를 진행하던 중 api 문서를 만들 차례가 다가왔고, swagger의 끔찍한 ui를 피하기 위해 어떤 라이브러리를 사용할까 고민하다 apiDoc이라는 간단한 api 문서 생성 라이브러리를 찾아 사용하게 되었다.apiDoc 공식 Live Demo프로젝트 구조project/├── doc/│ ├── assets/│ └── index.html├── src/│ ├── controllers/│ │ └── userController.js│ └── routes/│ └── userRoutes.js├── app.js├── .gitignore├── apidoc.json└── package.jsonapiDoc 사용법1. 라이브러리 설치npm install --save..

개요vue로 포트폴리오 프로젝트 진행 중 특정 클래스들을 추가하는 코드를 별도의 데이터 파일로 관리했더니 해당 클래스의 빌드가 정상적으로 이루어지지 않는 오류가 발생했다.해결방법// tailwind.config.jsmodule.exports = { ... safelist: [ 'text-gray-500', // 미리 빌드하고 싶은 클래스 { pattern: /bg-(red|blue|green)-(100|200|500)/, // 정규식을 사용하여 여러 클래스 포함 variants: ['hover', 'focus'], // 변형 클래스 포함 (예: hover:bg-red-500) }, ], ...}

설명하기에 앞서🎉 본 글에서 제공하는 모든 내용은 저작권법에 의하여 보호받는 저작물이지만 이에 대한 무단 복제 및 배포를 환영합니다. 🎉  Aleph Kim's Portfolio Website🖥️ 프로젝트 소개Aleph Kim의 포트폴리오 웹사이트는 개발자의 역량과 프로젝트를 효과적으로 소개하기 위해 제작된 개인 웹사이트입니다.이 프로젝트는 데이터와 UI를 철저히 분리하여 사용자에게 커스터마이징과 확장성을 극대화할 수 있도록 제작하였습니다.🚀 주요 강점: 데이터 분리 구조이 웹사이트는 데이터를 독립적으로 관리하는 구조를 채택하여 개발, 유지보수, 확장성에서 많은 이점을 제공합니다.🛠️ 사용 기술Frontend: Vue.js (컴포넌트 기반 설계)Styling: Tailwind CSS (유틸리티 ..

개요프로젝트 진행 중 스크롤 애니메이션을 추가해보려 관련 라이브러리를 찾아보았다.이 글은 vue.js 3버전에서 AOS라는 라이브러리를 사용법하는 방법에 대한 글이다.설치npm install aos@2.3.4 # 마지막 정식 배포 버전이 2.3.4버전이다main.js 수정import { createApp } from 'vue';import App from './App.vue';import AOS from 'aos';import 'aos/dist/aos.css';// Vue 앱 생성const app = createApp(App);// AOS 초기화app.mount('#app');AOS.init();사용 예시 나타날때 올라오는 요소참고aos 다양한 효과 demoaos 공식 github

개요처음으로 컴포넌트 라이브러리를 사용하지 않고 다크모드를 구현하려니 수많은 난관을 만나게 되었다. 다음에는 이번처럼 헤매지 않기 위해 기록해두려 한다.코드tailwind.config.jsclass="dark:text-white"와 같이 다크모드일 경우 스타일 요소를 지정하기 위한 설정module.exports = { purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], darkMode: 'selector', // 3.4.1 버전 이후일 경우 darkMode: 'class'..

개요express.js 프로젝트 진행 중 모델 인스턴스 validation을 일일히 작성해주는게 귀찮아 공통으로 처리하는 작업을 진행했다.프로젝트 디렉토리 구조project├── app.js├── middlewares│ └── beforeValidateHandler.js└── config └── db.jsmiddlewares/beforeValidateHandler.jsconst { ValidationError } = require('sequelize');/** * 모델 인스턴스 validation * * @param {Object} entity - 검증할 모델 인스턴스 * @throws {ValidationError} 속성 규칙에 따라 필드 값이 유효하지 않은 경우 예외 발생 */functi..

개요express 개발 세팅을 하던 중 핫리로드 기능을 추가하려 했는데 최신 글은 없는 것 같아 포스팅하게 되었다.spring에 비해 express는 확실히 자료가 너무 적어 매번 애를 먹는 것 같다...핫리로드 기능 패키지는 nodemon을 사용했다.핫빌드 / 핫리로드란?핫빌드 (Hot Build): 코드 변경 시 전체 애플리케이션을 다시 빌드하여 반영. 주로 백엔드 또는 빌드 도구에서 사용.핫리로딩 (Hot Reloading): 코드 변경 시 변경된 부분만 즉시 반영. 주로 프론트엔드 개발에서 사용하며, 애플리케이션 상태가 유지됨.내가 작업한 부분은 핫리로드다.하지만 제목에 핫빌드도 써두어야 검색 유입이 늘어날 것 같아 핫빌드도 써두었다. ㅎㅎ ^^프로젝트 디렉토리 구조project├── docker..