SVG symbol
<symbol><symbol>요소는 템플릿 객체를 정의하는데 사용됩니다. 다수의 <symbol>을 <use>요소로 인스턴스화 할 수 있습니다. <symbol>은 너비와 높이를 바꿀 수 없습니다. viewbox를 작성하면 속성을 변경 할 수 있습니다. 위 코드와 같이 <symbol>태그안에 있
아카이브: 2017
yarn
yarn?yarn이란 페이스북에서 만든 자바스크립트 패키지 매니저입니다. 저는 react에 대해 공부하기 위해 yarn을 설치했습니다. yarn의 장점은 설치 속도가 빠르고 매우 안전하다고 합니다. yarn의 공식 홈페이지에서 더 많은 정보를 확인해보세요. 설치방법1brew install yarn --without-node nvm또는 유사한 것을 사용하는
Warning: Each child in an array or iterator should have a unique "key" prop.
에러의 이유?리엑트는 element가 많을 경우 key값을 주어야합니다. key값은 고유해야합니다.key값이 고유하지 않을 경우 위와 같이 에러가 발생합니다. 해결방법123{movies.map(movie => { return <Movie title={movie.title} poster={movie.p
SVG use
<use><use>태그는 다른 엘리먼트를 참조 할 때 사용합니다. 엘리먼트 내 요소들이 설정되었더라도 참조되는 설정이 바뀌게 되면 바뀐 설정이 적용됩니다. 참조는 xlink:href="#id_name"를 사용하여 링크를 연결합니다.
SVG defs
<defs><defs>요소 내부에서 생성된 객체는 즉시 렌더링되지 않습니다. 랜더링에 영향이 없고 메모리에 저장되어 속도가 빠릅니다. 절대좌표 또는 상대좌표를 사용 할 수 있습니다. 참조하는 곳에 0,0을 작성하고 절대좌표로 작성하면 원하는 곳에 좌표처리가 편합니다. 위 코드와 같이 <g>태그안에 있는 요소들은 랜더링 되지
SVG g
<g>div element와 같은 기능을 한다고 생각하면 됩니다. g에 속한 엘리먼트의 공통 속성을 작성 할 수 있습니다. 각 엘리먼트에 이벤트를 설정하지 않고 <g>에 작성하면 한번에 이벤트 설정이 가능합니다. 시멘틱적으로 하나의 그룹을 만들어 시멘틱을 부여할 때 사용합니다. 위 코드와 같이 <g>안에 모든 stroke는
SVG Polyline
PolylineSVG를 이용하여 꺾은선을 나타낼 수 있습니다. 홈페이지 주식 차트 등 여러 그래프 차트에 사용이 가능합니다. 꺾은선은 선이지만 선 아래쪽을 면으로 인식하여 fill요소를 사용할 수 있습니다. 도형 내부를 체우지 않으려면 fill=none을 사용해야합니다. 속성 이름 값 형태 개요 points <list-of-points>
SVG Polygon
PolygonSVG를 이용하여 다각형을 나타낼 수 있습니다. 속성 이름 값 형태 개요 points <list-of-points> x좌표,y좌표 한 쌍 빈공백 또는 줄바꿈으로 좌표 구분
SVG Ellipse
EllipseSVG를 이용하여 타원형을 그릴 수 있습니다. 속성 이름 값 형태 개요 cx <coordinate> x축 원 중심 좌표 cy <coordinate> y축 원 중심 좌표 rx <length> 반지름 너비 ry <length> 반지름 높이
SVG Circle
CircleSVG를 이용하여 원을 그릴 수 있습니다. 다른 모형에선 좌상단이 좌표의 기준이 되지만 원은 원의 중심이 좌표의 기준이 됩니다. 속성 이름 값 형태 개요 cx <coordinate> x축 원 중심 좌표 cy <coordinate> y축 원 중심 좌표 r <length> 반지름