notion에 기록해둔 react 배포 과정을 복습하면서 블로그에 정리해보기로 했다 (정답이 아니니 참고만!) 이전 프로젝트는 서버가 cent os 또는 window였는데 이번 서버는 우분투였고 react프로젝트를 cra가 아닌 vite로 생성했다 os에 따라 아파치 설정파일이 꽤 달라서 많이 검색해서 찾아본거같다 1. react 프로젝트 build 하기 버전 참고 "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "vite": "^2.9.5" 터미널에서 npm run build 또는 vite build 명령어로 build를 하면 프로젝트 폴더의 dist 폴더에 html 파일과 assets 폴더가 생기게 된다 (cra로 생성할 경우 build 폴더 안..
Trouble Shooting
Trouble 기본적인 로그인과 회원정보, todo리스트 기능을 끝내고 게시판 기능을 시작했다 그런데 이미지가 들어가는 게시판은 어떻게 해야할지 감이 잡히지 않았다. 이미지를 등록한다고해도 글씨 사이사이에 들어가는 이미지 순서는 어떻게 해야하며 글 수정으로 이미지가 삭제라도 된다면? 여기서 문제는 1. 이미지를 등록할때 한꺼번에 받아야할지 아니면 깃허브나 노션에 이미지 올릴때처럼 이미지 1개를 올리자마자 url로 변경이 되게 할지 2. 글자 사이사이의 이미지 url을 그대로 텍스트로 db에 저장하고 내보내면 제대로 프론트단에 나올지 3. 2번 처럼 글자 사이사이에 url이 있으면 글쓰는 중에 이미지를 지우거나, 나중에 글을 수정할 때나 글을 삭제할 때 s3 버킷에서 이미지 삭제는 어떻게 할것인가? Sol..
Trouble 처음 do it commit프로젝트가 시작할때 백엔드 기술스택은 마이바티스였지만 JPA를 할줄아는 새로운 백엔드 팀원이 들어오면서 스택이 JPA로 바뀌었다. 작년에 JPA 스터디를 하면서 조금 공부하다가 높은 러닝커브에 gg를 쳤었지만 꼭 배우고 싶은 기술스택이였기에 잘되었다고 생각했다. 하지만 역시나 기본적인 Entity클래스를 만드는것부터 쉽지않았다. member Entity안에 interestTechSet이라는 set 타입의 컬럼이 있다. JPA의 LAZY와 EAGER의 차이가 단순하게 LAZY -> 따로 get을 해야 가져오는것. 성능에 좋음. EAGER -> 항상 가져오는것. 이정도만 알고 있었기에 잘 모르지만 LAZY를 쓰고 싶긴 했다.🤣 하지만 설정하고 member를 조회했을때..
Trouble 로그인을 하고 닉네임 등 정보수정을 하고 수정 api를 요청 했을 때 Method Put is not allowed by Access-Control-Allow-Methods in preflight response. 에러가 나타났다. Solution preflight이란? 미리 보내는것, 사전 전달 기본적으로 브라우저는 cross-origin 요청을 전송하기 전에 OPTIONS 메소드로 preflight를 전송한다. 이때 Response로 Access-Control-Allow-Origin과 Access-Control-Allow-Methods가 넘어오는데 이는 서버에서 어떤 origin과 어떤 method를 허용하는지 브라우저에게 알려주는 역할을 한다. CORS를 지원하기 위해 REST API..