남잭슨의 개발 블로그

Vite로 개발할 때는 API가 잘 되는데 배포하자 CORS 오류가 난다면, 개발 중 사용한 프록시와 배포 후 실제 요청 주소부터 비교하세요. 그다음 API 응답의 Access-Control-Allow-Origin이 배포한 화면의 출처와 맞는지 확인합니다. 이 헤더는 API 서버가 돌려주는 응답에 있어야 합니다. 프런트엔드 요청에 같은 이름의 헤더를 추가해도 허용되는 것은 아닙니다. MDN 응답 헤더 설명먼저 볼 세 가지Console 오류에 CORS가 명시되어 있는가?Network의 실제 API 주소가 개발할 때와 어떻게 다른가?OPTIONS와 실제 요청의 응답에 필요한 허용 헤더가 각각 있는가?이 글은 브라우저의 fetch로 JSON API를 읽는 상황을 다룹니다. 특정 서버 제품의 설정 파일을 그대로..

Vite에서 환경변수가 undefined라면 이름·읽는 코드·빌드 시점을 순서대로 확인하세요. 기본 설정의 브라우저 코드에서는 VITE_로 시작하는 값을 import.meta.env.VITE_API_URL처럼 읽습니다. 배포 서비스에 값을 추가했더라도 이미 만든 정적 파일은 바뀌지 않으므로, 설정을 반영한 새 빌드가 필요합니다.이 글은 React 등과 함께 쓰는 일반적인 Vite 클라이언트 앱을 대상으로 합니다. 서버에서 실행하는 코드, SSR 프레임워크, envPrefix나 런타임 설정을 따로 바꾼 프로젝트는 규칙을 추가로 확인해야 합니다. Vite 8.3.5의 작은 예제에서 이름 누락, 파일 우선순위, 재빌드 전후를 직접 비교했습니다.1. 이름과 읽는 코드를 한 쌍으로 맞추기AI가 만든 코드에 API..

인증서 파일의 만료일은 openssl x509 -in certificate.pem -noout -dates로 확인합니다. 적용 도메인은 여기에 -ext subjectAltName을 붙여 확인하세요. 다만 새 인증서 파일을 받았다는 사실과, 사이트가 그 인증서를 제공한다는 사실은 별개입니다. 갱신 후에도 경고가 남는다면 실제 접속 주소의 인증서까지 비교해야 합니다.이 글은 HTTPS 인증서의 기간·도메인·적용 여부를 나누어 확인하는 안내입니다. macOS의 OpenSSL 4.0.3으로 파일 검사 명령을 재현했습니다. 명령 예시는 macOS·Linux 계열 셸 기준이며, 먼저 openssl version을 확인하세요. LibreSSL이나 이전 버전에서는 지원 옵션과 출력이 다를 수 있습니다.1. 가지고 있는..

Vite로 실행한 화면이 PC에서는 열리는데 휴대폰에서 접속되지 않는다면, 먼저 서버의 --host 설정과 휴대폰에 입력한 주소를 확인하세요. package.json의 dev 명령이 vite인 프로젝트라면 아래 순서로 시작할 수 있습니다. PC와 휴대폰을 기기끼리 통신할 수 있는 같은 로컬 네트워크에 연결합니다. 집에서는 같은 Wi-Fi 공유기로 연결해 확인할 수 있습니다. 기존 개발 서버를 종료하고, 프로젝트 폴더에서 아래 명령을 실행합니다. 터미널에 표시된 Network 주소 중 현재 연결한 네트워크의 주소를 휴대폰에서 엽니다. npm run dev -- --host 0.0.0.0 휴대폰에는 localhost나 0.0.0.0 대신 http://192.168.0.10:5173..

2019/03/31 - [Android] - [Android Jetpack] AAC Navigation Component - 1. Navigation 소개,구성 및 개요 , BackStack관리 2019/08/14 - [Android] - [Android Jetpack] AAC Navigation Component -2. SafeArgs & Deeplink & Action 2019/08/18 - [Android] - [Android Jetpack] AAC Navigation Component -3. NavigationUI & Animation/Transition 먼저 위에 글들을 먼저 참고해주세요! 이번글에는 2.1.0에 추가된 내용들인 ViewModel NavGraph Scope, Modularizin..