차근차근

맥에서 인텔리제이 툴을 사용하는 도중 왼쪽 클릭이 안되는 경우가 빈번하게 발생하여 이 글을 작성하게 되었다. 해당 문제는 한글 키로 설정된 상태에서 인텔리제이 툴을 벗어나게 되면 발생되고, 인텔리제이 툴을 재시작하면 해결할 수 있지만 이 방법은 너무 번거로워 다른 방법을 찾아보게 되었다. 찾아본 해결방법은 아주 간단하다. 바로 "한영키" 버튼을 누르면 된다!

Nuxt3로 개발한 프로젝트를 빌드하니 이미지 사이즈가 1.5GB가 되었다. Nginx로만 빌드하면 이미지 사이즈가 200MB 이지만, 난 SSR을 사용해야하기 때문에 Node로 말아주는 작업이 필요하였고, 그 결과 이미지 사이즈가 1.5GB가 되었다. 사이즈가 너무 크면 빌드할 때 문제가 될 수 있으니 이미지 사이즈를 줄여보자! 1. Node 버전 변경 node:18 버전 -> node:18-alpine으로 변경 Dockerfile // Before FROM node:18 // After FROM node:18-alpine 2. .dockerignore 추가 Docker에서 제외되어도 되는 폴더, 파일 제외 .dockerignore node_modules .nuxt .git dist 3. Docker ..

Docker Desktop이 유료화되면서 회사에서 무료로 사용할 수 없어졌기 때문에 대체할 수 있는 Rancher Desktop을 설치해보자. 환경 Mac M3 1. Docker Client 설치 $ brew install docker docker-compose 2. Rancher Desktop 설치 링크: https://rancherdesktop.io/ Rancher Desktop by SUSE Simple Application Configuration Through a user-friendly Preferences dialog, you can easily configure different parts of the application: Configure to auto start Rancher Desk..

윈도우 환경에서 NODE_ENV를 사용하게 되면 아래와 같은 오류가 발생한다. // 영어 'NODE_ENV' is not recognized as an internal or external command, operable program or batch file. // 한글 'NODE_ENV'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. win-node-env를 설치하면 해결된다. $ npm install -g win-node-env

SEO(검색 엔진 최적화)란? Search Engine Optimization 검색 엔진이 이해하기 쉽도록 홈페이지의 구조와 페이지를 개발하여 검색 결과 상위에 노출될 수 있도록 하는 작업 SEO를 위한 작업 1. Http보단 Https를 사용 구글의 경우 Https 보안 프로토콜을 더 선호하여 1%에 해당하는 랭킹 가산점을 부여 2. 메타 태그 태그: 검색 엔진에 검색했을 때 노출되는 제목으로, 너무 긴 텍스트를 사용하거나 단일한 제목을 사용하지 않도록 유의 태그: 웹 페이지의 설명을 요약한 한 두 줄의 문장으로, 대부분의 유저가 메타 디스크립션을 보고 해당 웹 페이지에 자신이 찾고 있는 정보가 담겨있는지를 판단하므로 중요 태그: 웹 페이지 별 검색 로봇의 접근 여부를 설정할 때 활용하는 태그 태그: ..

상태 코드란? 클라이언트와 서버 간의 통신 상태를 나타내는 일련의 표준화된 코드 모음이다. 클라이언트는 요청에 대한 성공, 실패에 대한 피드백을 상태 코드를 통해 알 수 있다. 상태 코드는 세 자리의 숫자로 만들어져 있고, 각 첫 번째 자리의 수로 그룹을 구분할 수 있다. 상태 코드 설명 1xx(정보) 요청을 받았으며 프로세스를 계속 진행합니다. 2xx(성공) 요청을 성공적으로 받았으며 인식했고 수용하였습니다. 3xx(리다이렉션) 요청 완료를 위해 추가 작업 조치가 필요합니다. 4xx(클라이언트 오류) 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다. 5xx(서버 오류) 서버가 명백히 유효한 요청에 대한 충족을 실패했습니다. 1XX 서버가 요청을 받았으며, 서버에 연결된 클라이언트는 작업을 계속하라..

OAuth란? 제 3의 서비스에 계정 관리를 맡기는 방식 네이버로 로그인하기, 구글로 로그인하기, 페이스북으로 로그인하기... 용어 리소스 오너(resource owner): 자신의 정보를 사용하도록 인증 서버에 허가하는 주체로, 서비스를 이용하는 사용자가 해당 리소스 서버(resource server): 리소스 오너의 정보를 가지며 보호하는 주체를 의미. 네이버, 구글, 페이스북이 리소스 서버에 해당 인증 서버(authorization server): 클라이언트에게 리소스 오너의 정보에 접근할 수 있는 토큰을 발급하는 역할 클라이언트 애플리케이션(client application): 인증 서버에게 인증을 받고 리소스 오너의 리소스를 사용하는 주체로, 지금 만들고 있는 서비스가 해당 권한 부여 코드 승인..

curl 명령어나 postman 같은 프로그램을 사용하여도 되지만 VSCode에서 rest client 확장프로그램을 설치하여 api 호출을 해보자 설치 mongoose를 이용한 crud 코드 const express = require("express"); const bodyParser = require("body-parser"); const mongoose = require("mongoose"); const Person = require("./person-model"); mongoose.set("strictQuery", false); const app = express(); app.use(bodyParser.json()); app.listen(3000, () => { console.log("Server..

멀티레포란? 여러 저장소를 관리하는 방식 독립된 애플리케이션이나 다른 프로젝트와 직접적인 종속성이 없음 코드 재사용이 쉽지 않아 중복 코드 사용의 가능성이 높음 버전 연동 깨질 가능성이 있음 모노레포란? 하나의 저장소에서 여러 개의 프로젝트를 관리하는 방식 NPM 배포 없이 프로젝트 간의 코드 공유가 가능 통합된 버전 관리 코드 공유와 재사용 용이 무분별한 의존성 연결 가능 예시 하나의 저장소에서 packages로 감싸고 api, back, front로 분리 공통으로 사용할 설정은 프로젝트 루트에서 관리 프로젝트 루트의 tsconfig,json { "compilerOptions": { "target": "es2021", "esModuleInterop": true }, "references": [ { "p..

CSP(Cloud Service Provider) - 클라우드 서비스 제공 업체 - 자체 데이터 센터를 가상화한 네트워크, 스토리지 등을 제공 - AWS, GCP, Azure ... MSP(Managed Service Provider) - 클라우드 도입에 필요한 컨설팅, 운영, 기술을 제공하는 업체 - CSP와 고객을 연결하는 역할 - 메가존, 베스핀 글로벌, 삼성 SDS ...