728x90 반응형 Codestates FE11 [Codestates FE] proxy 1. CORS 에러를 해결하는 방법 1 모든 도메인을 허용해서는 안되고, 특정 도메인을 허용하도록 구현해야 한다. 프론트엔드 개발자가 백엔드 개발자에게 프론트엔드 개발 서버 도메인을 허용해달라고 요청하고, 백엔드 개발자는 응답 헤더에 필요한 값들을 담아서 전달해줘야 한다. 서버에서 적절한 응답 헤더를 받지 못하면 브라우저에서 에러가 발생하기 때문이다. 2. CORS 에러를 해결하는 방법 2 - Proxy 1번 방법은 정석적인 방법이다. 그러나 위의 방법 없이, React 라이브러리, 혹은 Webpack Dev Server에서 제공하는 proxy 기능을 사용하면 CORS 정책을 우회할 수 있다. 별도의 응답 헤더를 받을 필요 없이 브라우저는 React 앱으로 데이터를 요청하고, 해당 요청을 백엔드로 전달한.. 2023. 6. 7. [Codestates FE] Typescript 1. Typescript란? TypeScript는 마이크로소프트에서 개발한 JavaScript의 상위 집합 언어로, JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어이다. 기존 JavaScript는 함수와 변수의 타입을 명시적으로 지정하지 않아도 동작하는 경우가 많았고, 그 부분을 보완하여 런타임 에러를 최소화 시킨다. TypesScript를 사용하면 코드의 가독성을 높일 수 있고, 타입을 명시함으로써 코드의 의도 또한 명확해지기 때문에 다른 개발자가 코드를 이해하고 수정하기 쉬워지며, 런타임 에러를 미리 방지할 수 있기 때문에 유지보수성 또한 높아진다. 2. Typescript의 타입 Boolean(불리언) 타입 가장 기본적인 데이터 타입, 참(t.. 2023. 5. 30. [Codestates FE] 블로깅 챌린지 3주차 - 네트워크 계층 모델 네트워크 계층 모델 1. OSI 7계층 모델 OSI 7계층 모델은 네트워크를 이루고 있는 구성요소들을 7단계로 나누고, 각 계층의 표준을 정했다. 목적 : 표준화를 통해 포트, 프로토콜의 호환 문제를 해결하고, 네트워크 시스템에서 일어나는 일을 해당 계층 모델을 이용해 쉽게 설명할 수 있다. 또한 네트워크 관리자가 문제가 발생했을 때 이것이 물리적인 문제인지, 응용 프로그램과 관련이 있는지 등 원인이 어디에 있는지 범위를 좁혀 문제를 쉽게 파악할 수 있다. 데이터를 전송하는 쪽은 데이터를 보내기 위해 상위 계층에서 하위 계층으로 데이터를 전달한다. 이때 데이터를 상대방에게 보낼 때 각 계층에서 필요한 정보를 데이터에 추가하는데 이 정보를 헤더라고 한다. 그리고 이렇게 헤더를 붙여나가는 것을 캡슐화라고 한.. 2023. 5. 5. [Codestates FE] 블로깅 챌린지 2주차 - Redux 리덕스란 ? 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태값을 전달하거나 업데이트할 수 있다. 리덕스 라이브러리는 전역 상태를 관리할 때 굉장히 효과적이다. 물론 리덕스를 사용하는 것이 해결책은 아니지만, 프로젝트의 규모가 클 경우 체계적으로 상태를 관리할 수 있는 리덕스 라이브러리를 사용하는 것이 좋다. 코드의 유지보수성도 높여주고 작업 효율도 극대화해주며 아주 편리한 개발자 도구도 지원하고 미들웨어라는 기능을 제공해 비동기 작업을 훨씬 효율적으로 관리할 수 있다. 1. 액션 상태에 어.. 2023. 4. 28. [Codestates FE] S3U4 - Redux Redux의 데이터 흐름, FLUX 패턴 Redux 전역 상태를 관리해주는 상태 관련 라이브러리이다. Flux Pattern MVC 패턴의 문제를 해결하기 위해 Facebook이 발표한 Flux Pattern은 Action, Dispatcher, Store, View 순서로 동작하는 단방향 데이터 흐름을 가진 디자인 패턴이다. Client-Side 웹 애플리케이션을 만들기 위해 사용하는 디자인 패턴으로, 데이터 변화를 훨씬 예측하기 쉽게 만든다. Redux가 상태 관리하는 순서 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됨 이 Action 객체는 Dispatch 함수의 인자로 전달됨 Dispatch 함수는 Action 객체를 Reducer 함수로 전.. 2023. 4. 24. [Codestates FE] 블로깅 챌린지 1주차 - CORS 🖌 velog에 CORS라는 검색으로 포스트를 찾으면 약 6126개의 포스트가 나온다. 기본적인 개념이긴 하지만, 개발을 시작한 사람이라면 누구나 만나봤을 개념이다. 대학교 3학년 때, React.js와 Node.js로 프로젝트를 진행했었는데 개발 경험이 전무했던 우리 팀은 이게 뭔지도 몰랐다. 그저 구글에 에러 메시지를 검색해서 StackOverflow에 계신 많은 전문가분들의 도움을 받곤 했다. Proxy 등의 방법으로 해결해본 경험은 몇 번 있지만, 기술 면접을 위해 개념부터 탄탄하게 정리하고자 한다. SOP의 탄생 클라이언트는 브라우저를 통해 URL 주소로 누군가가 만들어 놓은 웹사이트를 이용했다. 누구나 데이터를 요청하고 응답할 수 있었다. 하지만 이러한 방식은 보안의 문제점이 존재한다. 해커가.. 2023. 4. 21. 이전 1 2 다음 728x90 반응형