https://developer.mozilla.org/ko/docs/Web/HTTP/CORS 교차 출처 리소스 공유 (CORS) 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라 developer.mozilla.org Same-Origin Policy(동일 출저 정책): 요청을 보내는 쪽과 받는 쪽의 출저가 같아야 접근이 가능한 정책 -http, https 동일 -도메인 동일 -포트 동일 프로젝트에서 React와 Spring Boot를 연동해야 했기에, 개발 단계에서 포트 번호가 달라 위의 정책을 따르지 못하는 상황이 발생하였..

프로젝트에 FCM을 사용하면서 local 환경 외에서는 https를 사용해야하는 상황이 일어났다. https 사용을 위해서는 SSL(Secure Sockets Layer, SSL) 인증서에 의해 보안이 증명된 페이지여야 하기 때문에 SSL 인증서 발급이 필요하다. 또 인증서 발급을 위해선 도메인이 필요하다. 따라서 HTTPS를 사용하기 위해선 도메인과 SSL 인증서가 필요하다고 보면 되겠다. SSL 인증서는 렛츠인크립트를 포함하여 다양한 무료 인증서 발급 서비스를 통해 발급 받을 수 있다. 도메인 또한 무료도메인을 제공해주는 여러 서비스 사이트가 있기 때문에 걱정이 없다. (다만, 무료 서비스이므로 빠른 서비스는 기대하지 말도록 하자) 사용된 서비스 사이트 도메인 : 내도메인.한국 인증서: ZeroSSL..

Webpack -다양한 컴포넌트를 모듈화 시킨 후 이곳저곳 export, import하는 리액트 특성에 따라 서로 간의 의존성을 괄리하는 것이 매우 중요하다. Webpack에 제공해야 할 정보 -Application 시작 포인트 OR root 역할의 Javascript -어떤 방법으로 코드를 변경할 것인지 -어떤 위치로 변경된 코드를 위치시킬 것인지

JSX(Javascript Syntax eXtension) -리액트에서 element(요소)를 만들어내는 것 -중괄호를 사용해 자바스크립트 표현을 포함시킬 수 있음 -JSX 자식을 포함할 수 있음 //compo_test.js ​ export const user = { firstName: '클레이튼', lastName: '커쇼' } ​ export function printFullName(user){ return user.firstName + user.lastName } 출처: https://kim6394.tistory.com/116?category=681336 [Gyoogle (규글)] //index.js import React from 'react' import ReactDOM from 'react-d..

React 커맨드 사용 1. ReactDOM.render(displayResult, root) displayResult : 나타낼 결과 root : 나타낼 위치(id) React.createElement(tag, attribute, content) tag: html 태그(h1,a태그 등) state: attribute: 속성(a태그 href) content: 표시할 컨텐츠("hello react") ​ ​ ​ ​ ​ 출처: https://kim6394.tistory.com/111?category=681336 [Gyoogle (규글)]

포트폴리오를 위해 캡스톤 디자인 프로젝트에 사용될 프론트엔드 라이브러리 기존 모델 1 방식에서 MVC 모델 2 패턴으로 처음 만들어질 프로젝트 MVC 모델 2 패턴이란 Model (Java Beans Class) View (JSP) Control(Servlet) 으로 로직과 디스플레이를 구분한 형태이다. React -페이스북이 만든 Javascript Library 오픈소스 프로젝트(프레임워크 X). -Front-end 에 사용됨. -컴포넌트 형식 구현. 재사용이 가능. Virtual DOM -Real DOM 대신 Virtual DOM을 이용한 후 최종 단계에 Real DOM에 반영 -과정의 반복을 줄여줌 -SPA(Single Page Application)에서 다수 DOM 조작을 효율적으로 하기 위해 ..