문제 상황: S3 + CloudFront로 배포 시 403 / 404 에러 발생React 프로젝트를 S3 + CloudFront 조합으로 배포했는데, 루트 경로 /는 잘 열리지만, 사용자가 브라우저 주소창에 다음과 같은 경로를 직접 입력하거나 새로고침을 하면 에러가 발생한다.예시)https://cocomu.co.kr/loginhttps://cocomu.co.kr/abouthttps://cocomu.co.kr/user/123발생하는 에러❌ 403 Forbidden❌ 404 Not Found 원인: SPA와 정적 서버의 라우팅 방식 차이React는 대표적인 SPA(Single Page Application) 라이브러리이다.SPA는 단 하나의 HTML 파일(index.html)을 기반으로 동작하고, 모든 페이..

아이디어의 시작개발을 하면서 가끔 실없는 생각을 하곤 했다.“한국어가 전 세계 공통어라면, 코딩도 한국어로 하면 얼마나 좋을까.”“최소한 에러 메시지라도 한국어로 떴으면 좋겠는데...” 그러던 중, 코코무 프로젝트를 진행하면서 팀원들과 주고받은 무심한 한마디가 머릿속에 깊이 남게 되었다. 개발 중에는 늘 다음과 같은 흐름을 반복한다.에러 발생 → 원인 검색 or GPT에게 질문 → 수정 우리 팀도 이 루틴 속에서 개발을 이어가고 있었고, 어느 날 팀원 중 한 명이 툭 던지듯 말했다."에러 뜨면 콘솔 아래에 GPT가 자동으로 분석해서 알려주면 좋을 것 같지않아요? 귀찮게 복붙도 안해도 되고.." 그때는 모두가 농담처럼 웃고 넘겼지만, 나는 계속해서 그 말이 머리에 맴돌았다. 생각해보면, 에러 메시지가 영어..

시작하며코코무 팀에서는 격일로 디스코드에 스크럼 알림을 보내고, 그 메시지에 팀원들이 스레드로 스크럼을 작성하는 방식으로 협업을 이어가고 있었다.이 알림은 팀원 한 분이 수동으로 직접 작성하고 있었는데, 매번 직접 시간을 맞춰 알림을 올리는 게 번거롭고 귀찮을 뿐만 아니라, 때로는 바쁜 일정 때문에 잊어버리는 일도 종종 생겼다. 그래서 자연스럽게, “이걸 왜 사람이 직접 하지?”라는 생각이 들었고, 그 수고를 덜어줄 자동 알림 봇을 직접 만들게 되었다. 초기 세팅하기디스코드 봇을 만들고 실행하기 위해서는, 이 봇이 누구의 소유인지를 디스코드 측에 등록하는 과정이 필요하다.이를 위해 디스코드 개발자 포털에서 봇의 Token(토큰)을 발급받아 코드에 입력해야 한다. 먼저 아래 링크에 접속해 개발자 포털로 이..

Vite를 이용해 프로젝트를 빌드하고 배포한 후, 실행해보니 ReferenceError가 발생했다.Uncaught ReferenceError: Cannot access '_u' before initialization at vendor-C-CSqHJx.js:9:18050  개발자 도구의 Sources 탭에서 vendor-C-CSqHJx.js:9:18050 위치로 이동해 오류를 확인해보니..  useInsertionEffect에서 에러가 발생하고 있었다. 일단 ReferenceError 에러란게 보통 let 또는 const 로 선언한 변수의 코드가 실행되기 전에 해당 변수를 사용했을 때 생기는 오류라고 알고있었다. 그래서 이 에러도 그런 비슷한게 아닐까.. 하고 추측하며 useInsertionEffec..

React Native 프로젝트에서 특정 화면을 렌더링하던 중 이상한 오류 메시지를 마주하게 되었다. Error while updating property 'borderTopLeftRadius' of a view managed by: RCTImageViewjava.lang.String cannot be cast to java.lang.Double 이 오류 메시지를 보니, borderTopLeftRadius 속성에 숫자(Double) 타입 값이 전달되어야 하는데, 문자열(String) 값이 전달되었기 때문에 발생한 오류로 보였다.그런데 문제는… 코드 어디에서도 borderTopLeftRadius 속성을 직접 사용한 적이 없다는 것이었다. 도대체 왜 이런 오류가 발생한 걸까? 🤔 문제 원인 분석에러 메시지..

이번에는 github actions로 CICD를 적용하는 과정에서 발생한 문제를 공유하려고 한다. 프로젝트 배포를 위해 AWS EC2 인스턴스를 사용하고 있으며, GitHub Actions로 SSH를 통해 EC2 서버에 연결한 뒤 빌드 및 배포를 자동화하고 있다.하지만 이 과정에서 환경변수가 제대로 적용되지 않아 발생한 문제를 겪었고, 이를 해결하는 방법을 찾는 데 시간이 좀 걸렸다.같은 문제로 고민하는 분들이 있다면 이 글이 도움이 되었으면 좋겠다. 😊 프로젝트 환경 및 배포 방식토큰 값 같은 민감한 정보를 보안상 환경 변수로 관리하는 것이 좋기 때문에 application.yml에 아래와 같이 환경 변수를 설정하였다.jwt: access: secret: ${JWT_SECRET_KEY} ..

API 설계 시 처음 가졌던 고민처음 API를 설계할 때, 유저의 정보(User ID)를 프론트엔드에 넘겨주는 것은 보안적으로 위험할 수 있다고 판단했다.그래서 프론트엔드에서는 유저 정보를 받지 않고, 백엔드에서 토큰을 이용해 본인 여부를 확인하고 필요한 결과만 반환하는 방식으로 설계했다. 예를 들어, 게시글 수정이나 삭제 시, 유저가 해당 게시글의 작성자인지 확인하는 로직은 프론트엔드가 아닌 백엔드에서 처리하도록 했다.이렇게 하면 프론트엔드 측에서 유저 정보를 직접 다루지 않기 때문에 보안적으로 더 안전하다고 생각했기 때문이다.  회원가입 API를 설계하며 발견한 코드와 RESTful 원칙회원가입 API를 구현하던 중, 여러 자료를 찾아보고 깃허브 프로젝트 레포를 보다가 다음과 같은 코드를 발견했다.@..

에러 발생 ( MAC ) React-Native 프로젝트를 실행시키려고 했는데 no connected devices 에러가 떴다. Android 빌드 또는 실행 과정에서 ADB가 연결된 디바이스를 감지하지 못해 발생한 일인 것 같아 찾아보니 환경변수가 초기화 되어있었다. 환경변수 설정터미널에서 아래 명령어를 입력하여 환경 변수를 설정한다.export ANDROID_HOME=$HOME/Library/Android/sdkexport PATH=$PATH:$ANDROID_HOME/emulatorexport PATH=$PATH:$ANDROID_HOME/platform-toolsANDROID_HOME: Android SDK가 설치된 디렉토리를 지정한다.macOS에서는 기본적으로 ~/Library/Android/sd..