전체 글(120)
-
[React] React Router DOM
SPA 방식에서는 모든 페이지가 하나의 URL을 가질 수 있으나 하나의 페이지 안에서 이렇게 모든 동작이 일어난다면 브라우저의 북마크 기능이나, 뒤로 가기 혹은 앞으로 가기 기능을 이용하지 못하기에 불편한 점이 있다. 이런 문제를 해결할 수 있도록 SPA를 유지하면서도, 페이지(코드)별로 URL을 부여할 수 있는 기술이 React Router이다. Route 길, 경로라는 의미를 지니고 있는 단어, 서울에서 부산으로 가기 위한 여러 갈래가 있듯이 네트워크 상에서도 데이터 패킷이 목적까지 가기 위한 여러 라우트(경로)들이 존재한다. Router 라우터는 데이터패킷이 출발지에서 목적지까지 이동하기 위한 라우터를 찾고, 데이터 패킷도 어떤 라우트(경로)로 전송할 것인지 정하는 역할을 한다. Routing 라우..
2022.08.27 -
[React] 라이브러리를 사용한 데이터 시각화(armChart, D3, Recharts)
목적은 규모있는 공공데이터(CSV 또는 json)를 이용한 데이터 시각화였는데, 라이브러리는 3가지 정도를 보았다. 1. armChart (https://www.amcharts.com/demos/) 사이트 들어가보면 Demos가 시각화부터 애니메이션까지 매우 잘 되어있다. 그러나 대용량 데이터 처리에는 다른 것이 적합할 것 같아서 사용하지 않았다. 간단한 json으로 만들었으면 이것을 썼을듯..? 2. D3 (https://observablehq.com/@d3/gallery) 리서치했을 때 블로그에서 가장 자주 보이던 라이브러리. 인터페이스 세련미 넘친다. 다음 프로젝트에 D3를 이용한 데이터 시각화 넣고 싶을 정도로.. 그런데 이번에는 실제로 3-4시간 동안 D3로 코드 작업을 하다보니 작업하고 있는 ..
2022.08.27 -
[React] 가격 컴포넌트(가격 표시 UI) 만들기
가격을 컴포넌트라 칭하는 이유는 만들 때 보통 폰트와 다른 규격화를 했기 때문이다...... 나만 아는 디테일..... 가격의 경우 나열된 숫자가 하나의 묶음으로 보일 수 있도록 보통 글자보다 자간을 더 좁게 주었다. (보통 글자는 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..
2022.08.25 -
[JQuery] 간단한 슬라이더 구현 코드
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"});..
2022.08.23 -
[React] 댓글 기능 구현
하단에 댓글 쓰는 컴포넌트 구현 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..
2022.08.23 -
[React] 별점 컴포넌트 만들기
마크업 하면서 제작해둔 컴포넌트였는데..... 데이터 넣으면서 리팩토링했다. 만드는 순서는 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 ..
2022.08.21