분류 전체보기
IT 및 일상을 공유합니다.
[docker] 도커 정상 동작 확인 - 기본 명령어
[docker] 도커란 무엇인가? - windows 설치 방법 이번 포스팅에서는 도커에 관한 설명과 윈도우 환경에서 별도의 가상 머신(VM) 없이 "Docker Desktop" 으로 설치하는 방법을 정리하겠습니다. Docker 란? 리눅스 응용 프로그램을 소프트웨어 컨테이너 stack94.tistory.com 이전 포스팅에서 토커에 대한 기본적인 개념과 Windows에서 설치하는 방법을 정리해 봤습니다. 이번 포스팅에서는 도커 설치에 이어서 도커가 정상 동작하는지 확인하는 간단한 기본 명령어를 정리해보고자 합니다. 도커 정상 동작 확인 docker login (도커 계정 로그인) UserName , Password 입력 Docker Desktop에 로그인이 되어있으면 "docker login" 입력만으로..
[docker] 도커란 무엇인가? - windows 설치 방법
이번 포스팅에서는 도커에 관한 설명과 윈도우 환경에서 별도의 가상 머신(VM) 없이 "Docker Desktop" 으로 설치하는 방법을 정리하겠습니다. Docker 란? 리눅스 응용 프로그램을 소프트웨어 컨테이너 안에 배치하는 일을 해주는 자동화 오픈 소스입니다. 도커는 일반적으로 도커 엔진 혹은 도커에 관련된 모든 프로젝트를 말합니다. Docker Engine 이란? Docker Engine은 컨테이너를 생성하고 관리하며 제어할 수 있게 다양한 기능을 제공하는 도커의 프로젝트입니다. Docker Daemon, REST API, API를 통해 도커 데몬과 통신하는 CLI로 모듈식으로 구성되어 있습니다. Docker Container (도커 컨테이너) 도커를 사용하면 애플리케이션을 모든 종속성과 함께 컨테..
[WebGL] 웹 브라우저 환경(Nuxt,React) 에서 WebGl 연결 - 3
[WebGL] 웹 브라우저 환경(Nuxt,React) 에서 WebGl 연결 - 2 [WebGL] 웹 브라우저 환경(Nuxt,React) 에서 WebGl 연결 - 1 Unity WebGL 이란? Unity 콘텐츠를 HTML5 기술과 WebGL 렌더링 API를 사용하여 웹 브라우저에서 실행하는 기술. 간단하게 Unity 빌드 옵션을 사용하여 java stack94.tistory.com 이전 포스팅에 이어서 Nuxt 유니티에 대한 양방향 통신에 대해서 설명을 이어가겠습니다. Nuxt 에서 Unity 이벤트(함수) 실행하기 이전 포스팅에서 만들어준 EditorViewer 컴포넌트를 다시 확인해서 버튼과 화면을 같이 보기 위해 canvas width 값을 줄여줍니다. 1900px -> 800px Web(Nuxt)..
[Nuxt] Axios 와 Proxy 사용 방법 (CORS)
이번 포스팅은 NuxtJS에서 Axios 구성과 Proxy 설정 방법에 대해서 설명해보려고 합니다. 회사에서 백엔드와 작업할때 CORS 문제와 API 작업에서 삽질했던 부분을 정리하고자 합니다. CORS 란? Cross Origin Resource Sharing의 약자로, 현재 웹페이지 도메인에서 다른 웹페이지 도메인으로 리소스가 요청되는 경우를 말한다. HTTP , HTTPS 와 같은 프로토콜이 다른경우 domainA.com과 domainB.com처럼 도메인이 다른 경우 8080 포트와 3000 포트처럼 다른 경우 이처럼 Cross-Origin 이란 위 3가지 중 한 가지라도 다른 경우를 말합니다. CORS가 없이 모든 곳에서 데이터를 요청할 수 있으면, 다른 사이트에서 본인이 개발한 사이트를 흉내 낼..
[WebGL] 웹 브라우저 환경(Nuxt,React) 에서 WebGl 연결 - 2
[WebGL] 웹 브라우저 환경(Nuxt,React) 에서 WebGl 연결 - 1 Unity WebGL 이란? Unity 콘텐츠를 HTML5 기술과 WebGL 렌더링 API를 사용하여 웹 브라우저에서 실행하는 기술. 간단하게 Unity 빌드 옵션을 사용하여 javascript 프로그램으로 퍼블리싱 할 수 있다. WebGL에서 stack94.tistory.com 이전 포스팅에 이어서 WebGL 프로젝트 빌드와 Nuxt 프로젝트 페이지 화면에 띄우는 방법을 설명하겠습니다. WebGL 프로젝트 빌드 파일 구성 Build 폴더 파일 구성 [ExampleBuild]는 타깃 빌드 폴더의 이름을 나타냅니다. 글자색으로 채워진 Build 파일로 웹브라우저에 연결합니다. (나머지 파일은 일단 사용하지 않음) 파일 이름 ..
[WebGL] 웹 브라우저 환경(Nuxt,React) 에서 WebGl 연결 - 1
Unity WebGL 이란? Unity 콘텐츠를 HTML5 기술과 WebGL 렌더링 API를 사용하여 웹 브라우저에서 실행하는 기술. 간단하게 Unity 빌드 옵션을 사용하여 javascript 프로그램으로 퍼블리싱 할 수 있다. WebGL에서 실행하려면 모든 코드가 javascript여야 하며, 콘텐츠 대부분이 주요 데스크톱 브라우저의 최신 버전에서 지원됩니다. 각 브라우저에서 제공하는 지원 수준의 차이 가 있고, 현재 모바일 디바이스를 지원하지 않습니다. Unity가 설치되어 있는 가정하에 Nuxt 프레임워크 환경에서 Unity Webgl 콘텐츠를 띄워보는 것을 설명드리겠습니다. React도 환경이 잘 구축되어 있기 때문에 React에서도 간단하게 보여드리겠습니다. 1. 환경구성 이름 버전 Nuxt ..
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원에서 ..