웹 어플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 한다. (두 URL의 프로토콜, 호스트, 포트가 같아야 동일 출처) 따라서 서버와 클라이언트의 포트가 다를 경우 CORS 정책을 우회하는 작업이 필요하다. 1. 서버에서는 클라이언트의 도메인이 접근하는 것을 허용하고, 2. 클라이언트에서는 클라 측 도메인이 아닌 백엔드 측 도메인으로 요청을 보내줘야한다. 1. Back-end / SpringBoot에서 @CrossOrigin 어노테이션을 사용하여 모든 도메인에 대해 접속을 허용함 package io.jejewn.controller; import org.springframework.web.bind.a..

SPA 방식에서는 모든 페이지가 하나의 URL을 가질 수 있으나 하나의 페이지 안에서 이렇게 모든 동작이 일어난다면 브라우저의 북마크 기능이나, 뒤로 가기 혹은 앞으로 가기 기능을 이용하지 못하기에 불편한 점이 있다. 이런 문제를 해결할 수 있도록 SPA를 유지하면서도, 페이지(코드)별로 URL을 부여할 수 있는 기술이 React Router이다. Route 길, 경로라는 의미를 지니고 있는 단어, 서울에서 부산으로 가기 위한 여러 갈래가 있듯이 네트워크 상에서도 데이터 패킷이 목적까지 가기 위한 여러 라우트(경로)들이 존재한다. Router 라우터는 데이터패킷이 출발지에서 목적지까지 이동하기 위한 라우터를 찾고, 데이터 패킷도 어떤 라우트(경로)로 전송할 것인지 정하는 역할을 한다. Routing 라우..

목적은 규모있는 공공데이터(CSV 또는 json)를 이용한 데이터 시각화였는데, 라이브러리는 3가지 정도를 보았다. 1. armChart (https://www.amcharts.com/demos/) 사이트 들어가보면 Demos가 시각화부터 애니메이션까지 매우 잘 되어있다. 그러나 대용량 데이터 처리에는 다른 것이 적합할 것 같아서 사용하지 않았다. 간단한 json으로 만들었으면 이것을 썼을듯..? 2. D3 (https://observablehq.com/@d3/gallery) 리서치했을 때 블로그에서 가장 자주 보이던 라이브러리. 인터페이스 세련미 넘친다. 다음 프로젝트에 D3를 이용한 데이터 시각화 넣고 싶을 정도로.. 그런데 이번에는 실제로 3-4시간 동안 D3로 코드 작업을 하다보니 작업하고 있는 ..

가격을 컴포넌트라 칭하는 이유는 만들 때 보통 폰트와 다른 규격화를 했기 때문이다...... 나만 아는 디테일..... 가격의 경우 나열된 숫자가 하나의 묶음으로 보일 수 있도록 보통 글자보다 자간을 더 좁게 주었다. (보통 글자는 letter-spacing: -0.01em;) 가격 중요하니 딱 잘 보이면 좋겠어서 font-weight는 700으로 주었다. .price-12 .price-20 .price-32 { font-weight: 700; letter-spacing: -0.02em; font-family: "Tahoma"; line-height: 1; } 가격 뒤에 붙는 단위인 "원"의 경우 속성이 다르므로 숫자와 다른 폰트를 적용한다. .currency { font-family: "Noto San..

하단에 댓글 쓰는 컴포넌트 구현 import React, { useState, useRef } from 'react'; import '../css/comment.css'; function Commentwrite({onCreate}) { const contentInput = useRef(); const authorInput = localStorage.getItem('authId'); const [state, setState] = useState({ author:authorInput, content: "", rating: "", }); const handleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, }); }; c..

마크업 하면서 제작해둔 컴포넌트였는데..... 데이터 넣으면서 리팩토링했다. 만드는 순서는 1. 별 한개를 만든다. 2. item의 별점을 props로 받는 별의 리스트를 만든다. 별 한개 만들기 import { useState } from 'react'; function Star({ selected = false }) { return ( {selected ? () : ()} ) }; export default Star; Start 컴포넌트의 기본값으로 들어가는 props는 false다. 별 모양의 아이콘 폰트를 2가지의 경우로 만들고(선택했을 때 / 선택하지 않았을 때) 들어오는 props가 true일 경우에 선택했을 경우의 UI를 노출한다. 아이템의 별점을 props로 받는 별의 리스트 import ..