회사 업무 중 iframe의 사용법이 쉽지는 않았기도 하고 외부 페이지가 가진 자체적인 이슈도 있어 반응형 대응을 하기에 난이도가 좀 있었기 때문에 문제 해결 과정을 다시 한번 정리해보고자 한다. 최선의 방법은 아니었지만 직면했던 상황에서 최대한 할 수 있는 대처를 했으며 공부가 많이 되었다. 크리티컬한 이슈는 아래 세 가지였다. 1) 영역 삽입했을 시 상단부 이미지에만 테두리 생기는 현상이 있었음 문제 원인 : 외부 url을 iframe에 노출시켰을 시 상단 이미지 2개가 일정 width를 넘어가면 (694px 추정ㅠㅠ) 여백이 생겼다.모든 이미지가 동일한 상태면 처리가 쉬웠을 것 같은데 url 페이지 하단 삽입 이미지들은 또 반응형이 되어있고...... 해결 방법 : d a. iframe 프로퍼티로 ..

웹 어플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 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..

HTML CSS .main-slider { position: absolute; top:100px; height: 300px; width: 1200px; overflow: hidden; } .main-slider > a { position:absolute; top:0; left:0; overflow: hidden; } .main-slider img { width: 100%; height: 100%; } JS window.onload = function(){ console.log("연결확인"); start(); } var imgs = 2; var now = 0; function start(){ $(".main-slider>a").eq(0).siblings().animate({width:"-1200px"});..