브라우저에서 기본적으로 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는 웹 페이지의 품질을 검사하고 개선하는 오픈 소스 도구입니다. 이 도구는 웹 사이트의 성능..

TDD란? TDD (Test-Driven Development)는 소프트웨어 개발 방법론 중 하나입니다. TDD는 개발자가 코드를 작성하기 전에 테스트 케이스를 작성하고, 해당 테스트 케이스를 통과시키는 코드를 작성하는 방법입니다. 이를 통해 개발자는 코드가 정확하게 작동하는지 검증하고, 코드 수정 시 기존 코드가 영향을 받지 않는지 확인할 수 있습니다. Write Failing Test: 실패하는 테스트 코드를 먼저 작성한다. Make Test Pass: 테스트 코드를 성공시키기 위한 실제 코드를 작성한다. Refactor: 중복 코드 제거, 일반화 등의 리팩토링을 수행한다. TDD의 주요 원칙은 다음과 같습니다. 먼저, 개발자는 테스트 케이스를 작성하고, 해당 테스트 케이스가 실패하는 것을 확인합니다..

Custom Hooks란?개발자가 스스로 커스텀한 Hook을 의미하며, 커스텀 훅(Custom Hook)은 함수형 컴포넌트에서 상태 관리 로직을 재사용할 수 있는 JavaScript 함수입니다. 커스텀 훅을 사용하면 컴포넌트 내부의 상태 관리 로직을 추출하여 별도의 함수로 만들어 여러 컴포넌트에서 재사용할 수 있습니다. 커스텀 훅은 고차 컴포넌트(Higher-order Components)나 렌더 프롭(Render Props)을 사용하지 않고도 컴포넌트 간에 기능을 공유하는 방법입니다. 주로, 여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 사용합니다. Custom Hook을 이용한다면 아래의 장점이 있습니다.상태관리 로직의 재..

React는 사용자 인터페이스 구축에 중점을 둔 JavaScript 라이브러리입니다. React의 주요 기능 중 하나는 불필요한 재렌더링을 줄여 렌더링 성능을 최적화하는 기능입니다. React는 메모이제이션이라는 프로세스를 통해 이를 달성합니다. 메모이제이션은 값비싼 함수 호출의 결과를 캐싱하고 동일한 입력이 다시 발생할 때 캐싱된 결과를 반환하는 기술입니다. 메모이제이션은 입력을 기반으로 함수의 결과를 캐싱하는 프로세스입니다. 동일한 입력이 함수에 다시 전달되면 함수를 다시 계산하는 대신 캐시된 결과가 반환됩니다. useMemo를 사용하면 함수의 결과를 메모하고 종속성이 변경될 때만 다시 계산할 수 있습니다 useMemo 이란? useMemo은 특정 값(value)를 재사용하고자 할 때 사용하는 Hoo..