윈도우에서는 문제가 없었으나,맥에서는 숫자키를 꾹 눌렀을 때 11111111 처럼 연속으로 입력되지 않고 한 번만 입력되는 경우가 있다.특히 금액 입력, 테스트 데이터 입력, 반복 입력 작업을 해야 할 때 꽤 불편하기 때문에 이 글을 작성하게 되었다. 원인맥의 기본 설정 때문이다.맥은 기본적으로 키를 길게 눌렀을 때, 반복 입력이 아닌 특수문자 선택 기능이 동작하면서 입력이 멈춰버린다. 해결 방법터미널에서 아래 명령어를 실행!defaults write -g ApplePressAndHoldEnabled -bool false 명령어를 실행했는데도 바로 적용이 안된다면 실행중인 앱을 재시작 해보자.(여전히 안된다면 재부팅...) 추가 설정반복 키 입력을 더 빠르게 하고싶다면 시스템설정>키보드 에서 키반복..
문제 상황로컬에서 프론트엔드 개발할 때 localhost:8080으로 실행되는데,백엔드 API가 특정 서브 도메인(예를 들어 test.kr)에서만 호출을 허용하는 경우가 있음// localhost:8080에서 호출 시 CORS 에러 또는 거부됨fetch('https://api.test.kr/users')// hjkang.test.kr에서 호출해야 함fetch('https://api.test.kr/users') 따라서 Nginx를 이용하여 localhost:8080 -> 일치하는 서브도메인으로 설정한 후 api를 호출하도록 설정 필요 설치1. Nginx 설치 (Mac 기준)# 설치brew install nginx# 설치 확인nginx -v 2. /etc/hosts 에 서브도메인 등록sudo vi /et..
CORS란?Cross-Origin Resource Sharing - 다른 출처의 리소스를 공유하는 것을 브라우저가 막는 보안 정책 출처(Origin)란?- 프로토콜, 도메인, 포트 세 가지 중 하나라도 다른 경우 다른 출처https://example.com:3000/api/users└─┬─┘ └────┬────┘ └┬┘프로토콜 도메인 포트 왜 CORS 에러가 날까?- CORS는 브라우저의 정책으로, Postman이나 서버에서는 문제 없이 동작// 브라우저에서 실행fetch('https://api.example.com/data') .then(res => res.json()) .then(console.log);// CORS 에러!// Access to fetch at 'https://api...
증상Mac에서 IntelliJ를 사용하다가 갑자기 마우스 왼쪽 클릭이 먹통되는 현상 발생- 코드 편집 중 커서 이동 안 됨- 메뉴 클릭 안 됨- 탭 전환 안 됨- 트랙패드/마우스는 정상이지만 IntelliJ 에서만 클릭이 안 됨 발생 조건1. 한글 입력 상태에서 IntelliJ 를 사용 중2. IntelliJ 창을 벗어나 다른 앱으로 이동3. 다시 IntelliJ로 돌아왔을 때 발생 원인Mac의 한글 입력기와 JetBrains IDE 간의 입력 포커스 충돌로 추정된다고 한다.한글 입력 모드가 활성화 된 상태에서 창 전환이 발생하면, IDE가 입력 이벤트를 제대로 처리하지 못하는 것을 보인다. 해결 방법 (매우 간단!!)- 한영키 누르기- 영문 모드로 코딩하기
문제 상황Nuxt3 프로젝트를 Docker로 배포하기 위해 이미지를 빌드했더니 이미지 사이즈가 1.5GB라는 거대한 사이즈가 나왔다.. 비교- Nginx 정적 빌드: ~200MB- Node SSR 빌드: ~1.5GB SSR을 사용해야 하므로 Node 환경이 필수인데, 이미지 크기가 너무 크면 아래와 같은 문제가 생긴다.- 빌드 시간 증가- 배포 시간 증가- 저장 공간 낭비 이미지 크기 최적화1. Node 버전 변경node:18 버전 -> node:18-alpine으로 변경 Dockerfile// AS-ISFROM node:18// TO-BEFROM node:18-alpine 크기 비교Image크기node:18~900MBnode:18-slim~240MBnode:18-alpine~180MB 2. .do..
Docker Desktop 대체 (MAC)
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..
문제 상황Windows 환경에서 npm scripts를 실행할 때 다음과 같은 오류가 발생# 영어 오류 메시지'NODE_ENV' is not recognized as an internal or external command,operable program or batch file.# 한글 오류 메시지'NODE_ENV'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. 해결 방법1. win-node-env 설치 (가장 간단!)npm install -g win-node-env 2. cross-env 사용- Windows, Mac, Linux 모두 지원- 프로젝트별로 관리 가능- 팀 협업 시 환경 통일npm install --save-dev cross-env{ "script..
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): 인증 서버에게 인증을 받고 리소스 오너의 리소스를 사용하는 주체로, 지금 만들고 있는 서비스가 해당 권한 부여 코드 승인..