본문 바로가기

FrontEnd94

[React] React 프로젝트 GitHub Pages로 배포하기 React 프로젝트 생성 React를 이용해서 개발하는 방법에는 여러가지가 있다.프로젝트 구성을 직접해도 되지만, React에서 추천하는 Create React App 툴체인이 있다. Create React App은 React를 배우기 간편한 환경으로 싱글 페이지 애플리케이션 앱을 만들기 적합하다.이것은 개발 환경을 설정하고, 최신 JavaScript를 사용하게 해주며, 좋은 개발 경험과 프로덕션 앱 최적화를 해준다.Create React App을 사용하기 위해서는 Node 8.10 혹은 상위 버전 및 npm 5.6 혹은 상위 버전이 필요하다. 새로운 프로젝트를 만들기 위해서 아래의 명령어를 실행한다.(npx : npm 5.2+ 버전의 패키지 실행 도구) npx create-react-app test-a.. 2020. 11. 19.
[QGIS] shp 파일의 좌표계 변환하기 Data 준비하기 도로명주소 관련 DB 구축이 필요해서 개발자센터에서 전자지도를 다운받았다. 파일은 아래 사진과 같이 행정구역별로 폴더가 구분되어있으며, 각 제공 데이터 별로 dbf, shp, shx으로 3개의 파일이 존재한다. (각각이 의미하는 정보는 데이터 다운 시 pdf 파일로 자세히 나와있음) 전자지도 파일 포맷인 shapefile은 아래와 같은 구조를 가진다. (참고자료:위키피디아) 필수 파일 .shp-모양 형식; 특징 기하학 자체 .shx— 모양 색인 형식; 신속하게 앞뒤로 검색 할 수있는 기능 지오메트리의 위치 색인 .dbf— 속성 형식; dBase IV 형식 의 각 도형에 대한 열 속성 다른 파일들 .prj— 좌표 참조 시스템 의 잘 알려진 텍스트 표현을 사용하는 투영 설명 .sbn그리고 .. 2020. 10. 16.
proj4js로 WGS84 <--> GRS80 좌표변환하기 도로명 주소 공공 데이터를 사용할 일이 있어 다운을 받았다. 하지만 좌표체계가 WGS84(EPSG-5179)로 표시되어 google 지도와 같은 지도 서비스에서 해당 위치를 검색해볼 수가 없었다. 따라서 WGS84 좌표를 GRS80(EPSG-4326, UTM-K, 경위도 좌표)로 변환하는 과정이 필요했다. 변환방법은 도로명주소 개발자센터 Tech & Tips에 잘 설명되어 있다. (https://www.juso.go.kr/addrlink/devCenterEventBoardDetail.do?regSn=123&noticeType=T&currentPage=1&keyword=%EC%A2%8C%ED%91%9C&searchType=subject) WGS84와 GRS80의 차이 ex) WGS84(EPSG-5179) .. 2020. 10. 14.
[ubuntu] JAVA 설치하기 1. ubuntu에 Java 설치 여부 확인하기 java --version 터미널에 위의 명령어를 실행했을 때 다음과 같은 화면이 뜬다면 ubuntu에 JAVA가 설치되어 있지 않은 것이다. Command 'java' not found, but can be installed with : sudo apt install default-jre sudo apt install openjdk-11-jre-headless sudo apt install openjdk-8-jre-headless 터미널에서 알려주는 방법대로 default java나 openjdk 8, 11을 설치하거나,만약 다른 버전의 Java를 설치하고 싶다면 직접 다운로드 하는 방법이 있다. 2-1. default, openjdk 다운받기 sudo .. 2020. 3. 6.
[HTML5] track 태그 속성 사용하여 Video 자막 추출하기 HTML5 태그에서 속성을 이용해서 현재 재생중인 자막의 텍스트를 불러올 수 있다. 우선 자막 텍스트를 추출하기 위해 알아야할 함수는 다음과 같다. HTMLMediaElement.textTracks Media 내부에 선언된 객체의 순서를 지켜 순서대로 TextTrack을 반환하는 함수이다. 자막 읽기 위와 같은 코드에서 .textTracks의 반환 결과는 [track(Korean1), track(Korean2), track(Korean3)]이 된다. .textTracks의 반환 결과 : HTMLMediaElement.pause(), HTMLMediaElement.pause .pause()는 의 재생상태를 일시정지로 변경하는 메소드로 .play()와 반대되는 함수이다.(.play()는 를 재생시키는 함수).. 2020. 2. 12.
[HTML5] Video Track 태그 사용하기(자막 파일 사용하기) HTML5 태그에서 태그를 이용하여 자막 파일을 영상에 사용할 수 있다. HTML5 태그 태그는 media 요소 ( 및 )의 자막, 캡션 파일과 같은 시간별 텍스트가 포함된 파일을 지정하는데 사용된다. 트랙은 WebVTT(Web Video Text Tracks, .vtt 파일) 또는 TTML(Timed Text Markup Language) 형식을 사용해야 한다. WebVTT WEBVTT FILE 000:00:01.000 --> 00:00:02.500Hello. This is frist Subtitle. 100:00:02.500 --> 00:00:03.000It is very easy to use. 0 : 헤더, 필수 요소는 아니다.00:00:01.000 --> 00:00:02.500 : 시간으로 -->.. 2020. 1. 31.
반응형