Frontend Dev/기타 실습 (3) 썸네일형 리스트형 Proxy 설정해 HTTP 통신하기 ( webpack dev server의 proxy와 React Proxy 사용법 ) 💬 지난글들과 마찬가지로 이번에도 역시 CodeStates 부트캠프 중 실습했던 내용으로 Proxy 설정에 관한 부분이다. Proxy 서버, 언제 사용할 수 있을까? 브라우저에서 기본적으로 API를 요청 할 때에는 브라우저의 현재 주소와 API 주소의 도메인이 일치해야만 데이터에 접근 할 수 있다. 만약 다른 도메인에서 API를 요청해서 사용 할 수 있게 해주려면 CORS 설정이 필요하다. 👩🏻💻 실제 서비스를 개발하며 서버의 API 를 요청해야 할 때, 기본적으로는 localhost:3000 에서 들어오는 것이 차단되기 때문에 서버 쪽에 해당 도메인을 허용하도록 구현을 해야한다. 하지만 CORS 설정을 하는 백엔드 개발자가 바쁘거나, 기능 구현이 당장은 안된다면? 서버에서 뿐만 아니라 클라이언트의 웹.. Github Actions, AWS S3를 사용한 CI/CD 💬 Code States 부트캠프의 막바지에 CI/CD를 위한 Github Action 실습이 있었다. 이전 챕터에서 AWS S3 버킷을 통해 클라이언트 코드를 배포했었고, 이미 배포 준비가 완료된 S3에 Github Action을 통해 파일을 전달하는 것이 이번 실습의 목표였다. 처음이라 너무 헷갈렸는데, 하다보니 흥미가 생겨서 과정을 정리해볼까 한다. 📌 GitHub Actions는 Github가 공식적으로 제공하는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼이다. 🚀 Github Actions를 통한 클라이언트 배포 Flow 1. Source Github 브랜치에 코드가 push (push 뿐만 아니라 다른 이벤트도 가능) 되면 2. Build Github Acitons의.. mkcert 사용법 - 로컬 개발을 위한 HTTPS 환경 만들기 ✏️ 로컬 개발을 위한 HTTPS 환경 만들기 (mkcert 사용법) 1. mkcert를 이용하여 로컬에서 신뢰할 수 있는 인증서 만들기 2. mkcert로 발급받은 인증서를 이용해 HTTPS 서버 구축하기 📌 mkcert: https://github.com/FiloSottile/mkcert 💬 mkcert는 코드스테이츠 프론트엔드 부트캠프 3개월차 쯤, 네트워크 유닛에서 접하게 되었다. 처음 들어보고, 처음 사용해보는거라 너무 헷갈리는데 학습자료를 보고 따라해도 잘 되지 않았다. 구현 도중 발생한 에러의 문제가 무엇인지 모른채 시간을 많이 보내서 과정을 기록해보려 한다. 참고로 MacOS 에서의 사용법만 기록한다. • 참고자료: 코드스테이츠SEB 학습자료, https://web.dev/how-to-us.. 이전 1 다음
