본문 바로가기

FE/배포

FE/배포 CORS 에러가 나는 이유 / Proxy * CORS 에러가 나는 이유 * CORS 정책을 우회하는 Proxy 사용법 - Webpack dev server에서 제공하는 proxy - React 라이브러리인 http-proxy-middleware가 제공하는 proxy CORS 정책이 필요한 이유 브라우저에서 기본적으로 API를 요청할 때에, 브라우저의 현재 주소와 API의 주소의 도메인이 일치해야만 데이터를 접근할 수 있다. 만약 다른 도메인에서 API를 요청해서 사용할 수 있게 해 주려면 CORS 설정이 필요하다. CORS 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록..
FE/배포 GitHub Action을 이용하여 S3에 파일 올리기 Github Actions를 통한 배포 Flow (클라이언트) 이번 클라이언트 배포는 간단하게 3가지 단계로 나뉜다. Source: Github reference 브랜치에 코드가 커밋되면 Build: github acitons의 YAML 파일에 적힌 명령어를 토대로 Webpack을 이용해 빌드를 하고 Deploy: github acitons의 YAML 파일에 적힌 명령어를 토대로 s3로 빌드 결과를 업로드한다. Github Actions는 프론트엔드 개발자의 반복적이고 번거로운 작업들을 자동화해준다. 빌드 자동화: GitHub Actions를 사용하여 프론트엔드 애플리케이션의 빌드 작업을 자동화할 수 있다. 예를 들어, 코드가 푸시되거나 머지될 때 자동으로 빌드가 실행되도록 설정할 수 있다. 이를 통해 ..
FE/배포 CI/CD 파이프라인 * CI/CD 용어의 의미 - CI/CD를 꾀할 수 있는 각 단계 별 설명 * CI/CD 파이프라인 - CI/CD 파이프라인의 구성 요소와 장점 CI/CD란 개발을 하다 보면 코드를 치는 것 외에 다른 일련의 작업의 자동화가 필수임을 인지하게 된다. CI/CD의 "CI"는 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration)을 의미한다. CI를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 리포지토리에 통합되므로 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있다. CI/CD의 "CD"는 지속적인 서비스 제공(Continuous Delivery)..
FE/배포 DevOps * 개발 프로세스의 발전 - 전통적인 개발 프로세스에 도입된 테스트 - 모던 개발 프로세스 - SaaS * DevOps - DevOps 특징과 사례 개발 프로세스란 소프트웨어 시스템이나 애플리케이션 개발 및 유지보수할 목적으로 수행되는 활동의 절차를 뜻한다. 개발 프로세스의 목적은 개발에 대한 전체적인 가이드라인을 제공하는 데에 있다. 절차가 있는 개발과 그렇지 않은 개발은 큰 차이가 있을 것이다. 개발 프로세스의 발전 개발 프로세스 소프트웨어 개발 프로세스 모델은 소프트웨어 개발 생명주기(SDLC, Software Develpment Life Cycle)를 기반으로 만들어졌다. 요구분석 및 시스템 명세 작성 : 문제분석 단계라고도 하며, 개발할 소프트웨어의 기능과 제약조건, 목표 등을 사용자와 함께 정..
⬆︎

728x90