김일국의 기술 블로그 누적조회수: / 오늘조회수: / 어제조회수:

[글쓰기] / [관리자]

고정 헤더 영역

글 제목

메뉴 레이어

김일국의 기술 블로그

메뉴 리스트

홈

분류 전체보기 (891)

검색 레이어

김일국의 기술 블로그

검색 영역

컨텐츠 검색

노드js·자바스크립트

리액트기반으로 공공데이터와 지도API 연동05

2022.08.13 by 김일국
리액트기반으로 공공데이터와 지도API 연동04

2022.08.13 by 김일국
리액트기반으로 공공데이터와 지도API 연동03

2022.08.13 by 김일국
리액트기반으로 공공데이터와 지도API 연동02

2022.08.13 by 김일국
리액트기반으로 공공데이터와 지도API 연동01

2022.08.13 by 김일국
Express(ejs템플릿) vs VueJS vs ReactJS

2022.07.25 by 김일국
자바스크립트로 구현한 유니코드 <-> 한글 변환기

2022.07.20 by 김일국
카카오맵을 이용해서 코로나19확진자 정보를 추가해 보았습니다.

2021.07.26 by 김일국

리액트기반으로 공공데이터와 지도API 연동05

----주요실습 순서(아래)------------------------------------------------------------------------ 1 구름IDE에서 리액트 컨테이너 생성 후 npm install 로 기본 패키지 설치 후 리액트 홈 실행하기. 2 1).공공데이터 포털에서 API 활용신청하기 및 2).카카오 개발자센터에서 지도 API 애플리케이션 생성하기. 3 구름IDE에서 공공데이터 포털의 API 데이터를 노드js API의 서버기능 으로 데이터 가져오기. 4 리액트에서 카카오 맵 API 샘플코드를 사용하여 클래스형 컴포넌트 생성 후 라우터 기능으로 메뉴에 추가하기. 5 이전에 생성한 노드js API 데이터를 리액트 카카오 맵 클래스형 컴포넌트에 바인딩해서 지도에 표시하기. 6 클..

노드js·자바스크립트 2022. 8. 13. 17:21

리액트기반으로 공공데이터와 지도API 연동04

----주요실습 순서(아래)------------------------------------------------------------------------ 1 구름IDE에서 리액트 컨테이너 생성 후 npm install 로 기본 패키지 설치 후 리액트 홈 실행하기. 2 1).공공데이터 포털에서 API 활용신청하기 및 2).카카오 개발자센터에서 지도 API 애플리케이션 생성하기. 3 구름IDE에서 공공데이터 포털의 API 데이터를 노드js API의 서버기능 으로 데이터 가져오기. 4 리액트에서 카카오 맵 API 샘플코드를 사용하여 클래스형 컴포넌트 생성 후 라우터 기능으로 메뉴에 추가하기. 5 이전에 생성한 노드js API 데이터를 리액트 카카오 맵 클래스형 컴포넌트에 바인딩해서 지도에 표시하기. 6 클..

노드js·자바스크립트 2022. 8. 13. 15:26

리액트기반으로 공공데이터와 지도API 연동03

----주요실습 순서(아래)------------------------------------------------------------------------ 1 구름IDE에서 리액트 컨테이너 생성 후 npm install 로 기본 패키지 설치 후 리액트 홈 실행하기. 2 1).공공데이터 포털에서 API 활용신청하기 및 2).카카오 개발자센터에서 지도 API 애플리케이션 생성하기. 3 구름IDE에서 공공데이터 포털의 API 데이터를 노드js API의 서버기능 으로 데이터 가져오기. 4 리액트에서 카카오 맵 API 샘플코드를 사용하여 클래스형 컴포넌트 생성 후 라우터 기능으로 메뉴에 추가하기. 5 이전에 생성한 노드js API 데이터를 리액트 카카오 맵 클래스형 컴포넌트에 바인딩해서 지도에 표시하기. 6 클..

노드js·자바스크립트 2022. 8. 13. 14:28

리액트기반으로 공공데이터와 지도API 연동02

----주요실습 순서(아래)------------------------------------------------------------------------ 1 구름IDE에서 리액트 컨테이너 생성 후 npm install 로 기본 패키지 설치 후 리액트 홈 실행하기. 2 1).공공데이터 포털에서 API 활용신청하기 및 2).카카오 개발자센터에서 지도 API 애플리케이션 생성하기. 3 구름IDE에서 공공데이터 포털의 API 데이터를 노드js API의 서버기능 으로 데이터 가져오기. 4 리액트에서 카카오 맵 API 샘플코드를 사용하여 클래스형 컴포넌트 생성 후 라우터 기능으로 메뉴에 추가하기. 5 이전에 생성한 노드js API 데이터를 리액트 카카오 맵 클래스형 컴포넌트에 바인딩해서 지도에 표시하기. 6 클..

노드js·자바스크립트 2022. 8. 13. 12:08

리액트기반으로 공공데이터와 지도API 연동01

아래 내용에서 구름ide 무료정책이 변경되어서 코예브라는 클라우드로 배포위치를 변경하였다.(아래) https://koyeb.com/ - 위 대시보드에서 [Create Web Service] 로 생성할 때 [Build command 와 Run command] 부분 그리고, Port 부분이 핵심이다. [npm run start] Run command에 입력하지 않아도 실행 된다. 즉, node api-server.js 로 4000번 포트에 앱을 실행하게 되고, 리액트앱은 npm run start 하지 않아도 자동실행 된다. (아래 결과 화면) 외부 테이터 가져오기 : https://bitter-mariel-kimilguk.koyeb.app/openapi/getdata 리액트 앱 실행결과(아래) : https..

노드js·자바스크립트 2022. 8. 13. 11:26

Express(ejs템플릿) vs VueJS vs ReactJS

아래 3가지 모두 실행 환경은 노드 js 이다. ------------------------------------------------------- # 익스프레스 ejs 템프릿 사용: 확장자가 ejs 인 템플릿 파일로 HTML + js 서버 프로그램을 코딩할 수 있다. - 작업소스: https://github.com/miniplugin/nodejs - 실행결과(구름IDE 사용) : https://nodejs-jvbqr.run.goorm.io 오픈챠트 시작 nodejs-jvbqr.run.goorm.io - 코딩 예 : 아래 구름 IDE 에서 사용한 .ejs 파일처럼 HTML과 js서버 코드가 함께 존재한다. https://github.com/miniplugin/nodejs/blob/nodejs11_02/v..

노드js·자바스크립트 2022. 7. 25. 18:33

자바스크립트로 구현한 유니코드 <-> 한글 변환기

유니코드 ↔ 한글 변환 유니코드 (\uAC00 형태로 입력하더라도 %uAC00으로 변환해서 한글로 보여주기 때문에 "\" 문자는 "%" 문자로 변환되어서 표시된다.) 한글

노드js·자바스크립트 2022. 7. 20. 11:48

카카오맵을 이용해서 코로나19확진자 정보를 추가해 보았습니다.

그동안 벼르고 있던, 카카오맵을 이용하는 기술을 한번 적용해 보았습니다. 2018년 이후 구글맵이 인증 Key 없이 더이상 무료로 지원하지 않기 때문에(아래 URL참조) https://koko8829.tistory.com/2012 구글 맵에 신용카드를 등록하는 부분이 꺼림직 하기 때문에, 카카오맵으로 옮기기로 합니다. 카카오 맵 api는 무료이고, 일정 조회수를 넘어가면, 사용이 중단되는 구조입니다.(아래 URL참조) https://devtalk.kakao.com/t/api/82867 구글 지도 API는 어떤 경우에 과금을 하는가 음. 갑자기 구글 지도 API를 잠시 사용할 일이 생겨서, 확인해보니 카드 등록을 해야 하는데, 과금에 대한 불안감에 이것저것 찾아보았습니다. 일단 구글에서는 대부분의 사용자는..

노드js·자바스크립트 2021. 7. 26. 21:45

추가 정보

인기글

최신글

페이징

1 2 3 4 5 6 7 8 ··· 12

TISTORY

김일국의 기술 블로그 © Magazine Lab [상단으로]

페이스북

트위터

인스타그램

유투브

티스토리툴바