IT
IT 및 일상을 공유합니다.
TypeScript(타입스크립트) Express API 서버 - 기본 설정
이전 포스팅에서는 Express Server와 Typescript 설정에 관해 기본적인 환경설정하는 방법을 보여드렸습니다. 이번에는 전체적인 폴더 구조를 잡고, 서버에서 에러추적을 위한 로그설정에 관해서 잠깐 설정법과 구현된 내용을 해보려고 합니다. TypeScript(타입스크립트) Express API 서버 - 환경셋팅 Express API 서버 구현에 대해 타입스크립트로 개발해 보는 것이 추후에 좋을 거 같아. 공부하거나 구현했던 내용들을 정리해 보려고 합니다. 중복되는 거나 기본적인 패키지 설치에 대해서는 생략 stack94.tistory.com 1. 폴더 구조 구성 폴더구조에 대해서 간단히 설명해 보면. 전체적으로 데이터베이스 관련과, 타입, API, 컨트롤러 부분으로 분리한 구성내용입니다. 폴더..
[Nuxt] 구글시트(google sheet)를 이용한 다국어(i18n) 자동화 처리
🔑 개요 국제화를 고려한 웹 애플리케이션을 구현하기 위해, 국제화 처리 모듈을 사용하여 구현한 예시를 입니다. 기본적인 nuxt-i18n 모듈만 사용한 방법과 public-google-sheets-parser 라이브러리를 기반으로 한 nuxt-google-sheets-parser 모듈을 사용하여 자동화 처리한 방법을 설명합니다. 🔑 nuxt-i18n 참고문서) nuxt-i18n Introduction i18n (Internationalization) for your Nuxt project i18n.nuxtjs.org 1. package install npm install @nuxtjs/i18n 2. nuxt.config.js 설정 modules: [ [ '@nuxtjs/i18n', { // 대응할 언어들..
TypeScript(타입스크립트) Express API 서버 - 환경셋팅
Express API 서버 구현에 대해 타입스크립트로 개발해 보는 것이 추후에 좋을 거 같아. 공부하거나 구현했던 내용들을 정리해 보려고 합니다. 중복되는 거나 기본적인 패키지 설치에 대해서는 생략할 부분은 생략할 예정이에요! 🔑 TypeScript + Express 환경설정 시작! 1. packages.json 파일 생성 npm init 2. 필수 구성 요소 설치 ● express, @types/express, typescript, ts-node, nodemon 가 가장 기본적인 필수 라이브러리입니다. ※ 추후 기능구현에 필요한 구성요소 이므로 전부 설치해봅니다. ( 위에 필수 구성요소 말고 필요 없는 라이브러리는 삭제하셔도 됩니다.) .... "dependencies": { "bcrypt": "^5...
[Nuxt] 구글 로그인
기존에 사용하던 웹용 구글 로그인 라이브러리가 중 2023년 3월 31일 일자로 중단될 예정이라 새로운 웹용 Google ID 서비스 솔루션 을 사용하여 진행해 보기로 한다. 기존 웹용 Google 로그인 문서 웹 앱에 Google 로그인 통합 | Authentication | Google Developers 이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 웹 앱에 Google 로그인 통합 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. developers.google.com 새롭게 적용된 Google 로그인 문서 Google JavaScript API로 로그인 참조 | Authentication | G..
집에서 홈서버 구축해보자 - 3 (우분투 설치 및 SSH, 공유기 포트 포워딩)
우분투 설치 1. 우분투 iso 파일 다운로드 Download Ubuntu Desktop | Download | Ubuntu Ubuntu is an open source software operating system that runs from the desktop, to the cloud, to all your internet connected things. ubuntu.com 위에 링크로 들어가서 우분투 데스크톱을 다운로드하시면 됩니다. (저는 22.04.01 LTS 버전으로 설치했습니다.) ※ 서버용 설치하여 구성해도 되지만 연습용으로 웹서버를 구성하는 것이기 때문에 간편하게 GUI로 볼 수 있는 데스크톱 버전으로 다운로드합니다. 2. Rufus 다운로드 Rufus - 간편하게 부팅 가능한 USB 드..
집에서 홈서버 구축해보자 - 2 (도메인 구매 및 설정)
도메인 구매 웹을 넘어 클라우드로. 가비아 그룹웨어부터 멀티클라우드까지 하나의 클라우드 허브 www.gabia.com 홈서버를 구축하고 개발 프로젝트를 배포하기 위해선 도메인을 필수로 구매해야 한다. 주요 도메인 (com , co.kr , kr) 기준으로 설명합니다. 1. 가비아 국내 도메인 1위로써 이벤트 할인 행사를 많이 하므로 추천 (현재 홈서버 도메인은 가비아에서 구매하도록 하겠습니다.) 위에 주요 도메인 가격대가 대략 13000원에서 크게 3만 원 이하로 보입니다. 우선 배포하고자 할 프로젝트가 본인이 연습하고 개발 내용을 배포하기 위함이면 주요 도메인을 구매하기에는 너무 비쌉니다..ㅠ (개인적인 생각!) 이러한 이벤트 및 브랜드 도메인 (xyz, shop, site) 카테고리에서 500원에서 ..
집에서 홈서버 구축해보자 - 1
개요 웹 개발자로 회사업무와 개인 프로젝트를 진행하면서 여러 호스팅 업체의 서버와 아마존 프리티어, 구글 클라우드, 네이버 클라우드 ... 등등 사용하면서 무료버전을 다 사용하면.. 내돈 써서 해야되고... (당연하지만..) github io 나 netlify등 뭔가 무료로 배포할수 있지만..!! 나만의 서버의 배포를 하고싶단 생각을 했습니다.🤔 홈서버 구축을 위해서는 다양하게 공부 해야되는 것과 홈서버다 보니 우리집 네트워크 보안도 신경 써야합니다. 그럼에도 불구하고.. 공부하며, 자신의 학습과 개인 작업물들을 배포하고 관리하기위해🥳 집에서 홈서버 구축을 진행해보도록 하겠습니다. 하드웨어 집에서 홈서버를 구축하는데 어떠한 장비가 필요하냐? (나도 잘모르지만.. 적당한거?)😐 게이밍용이나 영상작업용 같은..
[Node.js] Express 환경 설정 및 로그 설정하기(winston,morgan)
환경변수 config 설정 애플리케이션이 실행될 때 특정 값을 넘길수 있는 변수 설정을 하기 위해 ※env 폴더안에 개발, 배포 파일을 만들어줍니다. PORT = 5000 //서버 포트 LOG_LEVEL = silly //winston(로그기록) 레벨 단위 MYSQL_HOST = localhost // mysql DB HOST MYSQL_USER = root // mysql USER MYSQL_PASSWORD = admin // mysql password MYSQL_DATABASE = testDB // mysql dataBase 위 내용은 각자 설정에 따라 다릅니다 본인의 설정에 맞게 적어줍니다. env 환경변수 설정이 완료되었다면, config 폴더에 index.js 파일을 만들어줍니다. ES6 기준으..
[Node.js] Express 시작하기
1. Express 설치법 express-generator express --force --view pug npm install express -save 의 명령어로 express가 설치되어있다는 전제로 위의 명령어를 입력하면 express 프로젝트 기본 형식을 만들어줍니다. (폴더 만들고 셋팅하기 귀찮으니... 위에 명령어로 한 번에 만들어주자) 2. Express 폴더 구조 위에 이미지처럼 폴더 구성하여 진행할 예정입니다. ├─api /*Rest API 관련 폴더*/ │ └─routes /*라우터 폴더*/ │ └─middleware /*미들웨어 폴더*/ ├─config /*env 관련 및 설정 폴더*/ ├─controller /*DB모델에 대한 컨트롤러 폴더 (ex 회원가입..)*/ ├─env /*e..
[Nuxt] 카카오 로그인 Nuxt 설정 및 카카오 정보 발급 - ②(END)
Nuxt 카카오 로그인 설정 및 카카오 정보 발급 Nuxt 프로젝트를 하나 만들어주자. npx create-nuxt-app create-nuxt-app v3.4.0 ✨ Generating Nuxt.js project in test # 프로젝트명 입력 ? Project name: (test) # 프로그래밍 언어 선택 ? Programming language: (Use arrow keys) > JavaScript TypeScript # 패키지 매니저 선택 ? Package manager: (Use arrow keys) > Yarn Npm # UI 프레임워크 선택 ? UI framework: (Use arrow keys) > None Ant Design Vue Bootstrap Vue Buefy Bulma C..
[Nuxt] 카카오 로그인 OAuth 신청 및 설정 - ①
Nuxt + express로 카카오로그인 자료가 많이 없어 개발하면서 내용 정리한다. ※ 추후에 다시 설명하지만 현재 설명하는 방식은 Nuxt에서 전부 처리하고 서버로 필요한 정보를 보내는 방식이다. 1. 인가코드를 받기 2. Nuxt에서 인가코드로 엑세스토큰 받기 3. 엑세스 토큰으로 유저정보 조회하기 4. 조회된 유저정보에서 필요한 정보 (ex 닉네임,이메일,id... 등) 서버로 보내어 저장하기 카카오 로그인 OAuth 신청 카카오 개발자 계정과 애플리케이션 등록이 필요하다. https://developers.kakao.com 에 접속하여 계정과 애플리케이션을 생성해보자. Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구..
젠킨스(Jenkins) 설치
🥳젠킨스(Jenkins) 설치 방법 로컬 환경안에 jenkins를 설치하는것보다. docker container를 사용하는것이 관리하기 편할 것이라고 생각됨. docker-compose 를 사용하며 , image는 jenkins/jenkins:lts 를 사용 docker-compose 내용 구성 로컬환경 적당한 곳에 mkdir jenkins 폴더 생성 cd jenkins -> code . (비주얼코드실행) docker-compose.yml 파일생성 version: '3' services: jenkins: image: jenkins/jenkins:lts container_name: jenkins_cicd restart: always volumes: - /var/run/docker.sock:/var/run/..