브라우저에서 기본적으로 API를 요청 할 때에는 브라우저의 현재 주소와 API 의 주소의 도메인이 일치해야만 데이터를 접근 할 수 있게 되어 있습니다. 만약 다른 도메인에서 API를 요청해서 사용 할 수 있게 해주려면 CORS 설정이 필요합니다. 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다. json-server 로 만든 서버의 경우엔 모든 도메인을 허용해주는 CORS 규칙이 적용되어..

과제1 webpack dev server의 proxy 기능을 사용해 우회하여 응답을 받아오기 package.json // api/packge.json .... }, "proxy" : "http://localhost:3080" } BookService.js 기존의 fetch, 혹은 axios를 통해 요청하던 부분에서 도메인 부분을 제거하여주니 CORS 에러를 해결됨 // my-app/services/BookService.js export const getAllBooks = async () => { const response = await fetch('/api/books'); return await response.json(); } export const createBook = async (data) => ..

배포 자동화란? 배포 자동화란 한번의 클릭 혹은 명령어 입력을 통해 전체 배포 과정을 자동으로 진행하는 것을 뜻한다. 배포 자동화가 왜 필요할까? 수동적이고 반복적인 배포 과정을 자동화함으로써 시간이 절약됨 휴먼 에러(Human Error)를 방지 CI/CD란? "CI"는 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration)을 의미하고, "CD"는 지속적인 서비스 제공(Continuous Delivery) 및/또는 지속적인 배포(Continuous Deployment)를 의미한다. CI/CD의 단계 CI (Continuous Integration) CI/CD의 "CI"는 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration)을 의미한다..

요구분석 및 시스템 명세 작성 : 문제분석 단계라고도 하며, 개발할 소프트웨어의 기능과 제약조건, 목표 등을 사용자와 함께 정확히 정의하는 단계입니다. 개발하고자 하는 소프트웨어의 성격을 정확히 이해하여 이를 토대로 개발 방법과 필요한 자원 및 예산 예측 후 요구명세를 작성합니다. 설계 : 설계단계에서는 앞서 정의한 기능을 실제로 수행하기 위한 방법을 논리적으로 결정합니다. 크게 시스템, 프로그램, UI(User Interface) 설계로 나뉘며, 시스템 구조설계는 시스템을 구성하는 내부 프로그램이나 모듈 간의 관계와 구조를 설계하고, 프로그램설계는 프로그램 내의 각 모듈에서의 처리 절차나 알고리즘을 설계합니다. UI(User Interface) 설계는 사용자 인터페이스 설계로, 사용자가 시스템을 사용하..

Lighthouse란? Google Lighthouse는 웹 페이지의 품질을 감사하고 개선하기 위한 오픈 소스 도구입니다. 웹 사이트의 성능, 접근성, 모범 사례 및 검색 엔진 최적화(SEO) 메트릭을 측정하기 위한 일련의 자동화된 테스트를 제공합니다. Lighthouse를 사용하여 사용자 경험과 웹사이트 성능에 영향을 미치는 문제를 식별할 수 있습니다. Lighthouse에서 제공하는 제안을 처리함으로써 웹사이트 소유자는 웹사이트의 로딩 속도, 접근성 및 전반적인 품질을 개선하여 사용자 참여도를 높이고 검색 엔진 순위를 높이고 궁극적으로 더 많은 비즈니스 성공을 거둘 수 있습니다. Google Lighthouse는 웹 페이지의 품질을 검사하고 개선하는 오픈 소스 도구입니다. 이 도구는 웹 사이트의 성능..