카테고리: frontend

2020
frontendreactNative

React Native iOS setting

React Native iOS 설정React Native의 React Native CLI Quickstart설정에 대한 정리입니다. 설치방법XcodeXcode는 macAppStore에서 설치 할 수 있습니다.Xcode가 설치완료되면 Xcode를 실행 후 command + ,를 이용하여 환경설정을 열어줍니다.Locations탭에서 Command Line To

frontendreactNative

React Native initial setting

React Native 초기 설정React Native의 React Native CLI Quickstart설정에 대한 정리입니다. 설치방법Node & Watchmanbrew를 이용하여 node와 Watchman을 설치하겠습니다. 이미 node가 설치되어 있다면 Watchman만 설치하시면 됩니다. 하지만 node의 버전이 8.3이상인지 확인 바랍니다

2019
frontendreact

React에서 Font Awesome 사용하기

Font Awesome 이란?Font Awesome은 웹페이지에서 소개된 바와 같이 인기있는 아이콘 세트 및 툴킷이라고 합니다. svg로 된 아이콘을 무료로 제공하여 사용 할 수 있습니다. react-fontawesome패키지를 이용하겠습니다. 설정방법1npm i --save @fortawesome/fontawesome-svg-core @fortawes

frontendreact

create-react-app에서 Typescript로 개발하기

create-react-app이란?React앱을 간편하게 만들 수 있도록 자동으로 빌드해주는 모듈입니다.이 패키지 모듈을 이용하면 Webpack이나 Babel을 설치하고 셋팅하는 복잡한 과정을 생략 할 수 있습니다.Typescript를 이용한 create-react-app 설정방법에 대해 설명드리도록 하겠습니다. Typescript란?설정 방법 이전에

2018
frontendreact

create-react-app

create-react-app이란?React앱을 간편하게 만들 수 있도록 자동으로 빌드해주는 모듈입니다. 이 패키지 모듈을 이용하면 Webpack이나 Babel을 설치하고 셋팅하는 복잡한 과정을 생략 할 수 있습니다. 설치방법1npm install -g create-react-app 위 코드를 터미널에서 실행하여 create-react-app모듈을 전역에

2017
frontendsvg

SVG Path

<path><path>요소는 모양을 정의하는 일반적인 요소입니다. d속성 안에 M(m)과 L(l)은 좌표이고 대문자는 절대좌표 소문자는 상대좌표입니다. 속성 이름 값 형태 개요 d path data path 데이터 M(m) <coordinate> x좌표,y좌표 한 쌍 빈공백 또는 줄바꿈으로 좌표 구분 L(l

frontendsvg

SVG title, desc

<title><title>요소는 웹접근성에 의해 그래픽 요소로 렌더링 되지 않습니다. <title>요소를 툴팁으로 표시 할 수 있습니다. 스크린리더, 검색엔진에 반영됩니다. <title>요소는 웹접근성을 향상시킵니다. <title>요소를 사용하게 되면 해당 도형에 마우스를 올려두면 아래와 같이 titl

frontendsvg

SVG symbol

<symbol><symbol>요소는 템플릿 객체를 정의하는데 사용됩니다. 다수의 <symbol>을 <use>요소로 인스턴스화 할 수 있습니다. <symbol>은 너비와 높이를 바꿀 수 없습니다. viewbox를 작성하면 속성을 변경 할 수 있습니다. 위 코드와 같이 <symbol>태그안에 있

frontendsvg

SVG use

<use><use>태그는 다른 엘리먼트를 참조 할 때 사용합니다. 엘리먼트 내 요소들이 설정되었더라도 참조되는 설정이 바뀌게 되면 바뀐 설정이 적용됩니다. 참조는 xlink:href="#id_name"를 사용하여 링크를 연결합니다.