본문 바로가기
반응형

분류 전체보기

 (385)
Python folium을 이용한 지도 불러오기 / 마커 표시하기 import folium as g g_map = g.Map(location=[34.5, 128], zoom_start=7) # tiles='Stamen Terrain', 'Stamen Toner', 'Stamen Watercolor' latlon=[ [33.452278, 126.567803],#제주 [37.56667, 126.97806], #서울 [35.17944, 129.07556], #부산 ] # 마커 marker = g.Marker([37.509671, 127.055517], # 마커를 찍는 과정이다. 해당 위치의 마커를 찍고 popup='campus seven', # 해당 마커의 이름을 넣어준다. icon = g.Icon(color='blue'))# 해당 아이콘의 색깔을 지정해준다. marker...
Vue3 프로젝트 - Vue시작하기: Fruit List(Vuex예제) 1. vue/cli 설치 npm i -g @vue/cli 2. 프로젝트 생성 vue create . //해당 폴더에 생성 3. 라이브러리 설치 npm i -g reset-css npm i vuex@next 4. App.js Fruits List 5. /components/FruitList.vue Fruits Name {{ fruit.name }} 6. /components/FruitPrice.vue Fruits Price $ {{ fruit.price }} 7. store/store.js // store.js import {createStore} from 'vuex'; //export const store = createStore({ export default createStore({ // 상태 stat..
React toolkit을 이용한 React counter 1. 라이브러리 설치 yarn add redux react-redux @reduxjs/tookit 2. index.js Reducer 연결 및 store 생성 import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; import { configureStore } from "@reduxjs/toolkit"; import rootReducer from "./reducers"; import { Provider } from "react-redux"; const store = configure..
React에서 Kakao 지도 api 사용하기 - 지도에 표시하기 1. 지도에서 좌표-주소 변환 geocoder 라는 것을 사용해야하는데, services라이브러리를 써야합니다. 라이브러리는 api 요청할 때 url에 추가해서 보내면 됩니다. (kakao 예제에서 제공하는 cluster, drawing도 함께 추가해 넣었습니다.) 2. 우선 화면에 무언가 표시를 해봅시다. 예제는 kakao에서 제공되는 kakao 제주 사옥을 찾는 것 같습니다. import React, { useEffect } from 'react'; const { kakao } = window; const MapContainer = () => { useEffect(() => { const container = document.getElementById('myMap'); const options = {..
React에서 Kakao 지도 api 사용하기 1. App key 발급 https://apis.map.kakao.com/web/guide/ 사이트에 접속해서 순서대로 진행합니다. 우선 카카오 개발자사이트 (https://developers.kakao.com) 접속하여 회원가입을 하고, 애플리케이션 추가하기를 통해 앱 생성을 합니다. 생성된 앱(mymap)을 클릭해 들어가면 사용할 수 있는 앱 키가 제공됩니다. 이렇게 간단히 앱키 발급이 완료되었습니다. 2. Sample React App 생성 리액트 앱을 생성하고, 간단히 소스를 추가해보겠습니다. 1) public/index.html 아래 코드를 /public/index.html 파일의 내부에 붙여넣습니다. 2) 지도를 띄우는 코드 작성 import React, { useEffect } from 'r..
NSSM을 이용하여 Windows 에 Node 서비스 추가하기 1. NSSM 다운로드 및 설치 https://nssm.cc/download 에서 적당한 것을 다운로드 받습니다. 2. nssm 실행 커맨드창에서 nssm.exe install [등록할 서비스 이름] 으로 실행합니다. 3. UI 입력 실행파일 실행 시 UI가 열리며, 각각의 Input에 값을 넣습니다. - Path : node.exe 실행파일 경로 - Startup directory: Node의 경로 - Arguments: Node가 실행할 프로젝트 경로 - Service name: 이름을 지정 4. Service 시작하기 5. Sample Project Node가 실행할 샘플 프로젝트를 아래와 같이 구성하였습니다. js파일을 실행하게 되며, js 파일 내에서 index.html 파일을 불러오게 됩니다...
오브젝트 - 4. 설계 품질과 트레이드오프 01. 데이터 중심의 영화 예매 시스템 ○ 데이터를 준비하자 ○ 영화를 예매하자 02. 설계 트레이드오프 ○ 캡슐화 · 객체를 사용하면 변경 가능성이 높은 부분은 내부에 숨기고(구현) 외부에는 상대적으로 안정적인 부분만 공개함으로써(인터페이스) 변경의 여파를 통제할 수 있다. ○ 응집도와 결합도 · 응집도: 모듈 내의 요소들이 하나의 목적을 위해 긴밀하게 협력한다면 높은 응집도 · 결합도: 어떤 모듈이 다른 모듈에 대해 꼭 필요한 지식만 알고 있다면 두 모듈은 낮은 결합도를 가진다. 클래스의 구현이 아닌 인터페이스에 의존하도록 코드를 작성해야 낮은 결합도를 얻을 수 있다. 03. 데이터 중심의 영화 예매 시스템의 문제점 ○ 캡슐화 위반 ○ 높은 결합도 ○ 낮은 응집도 단일책임원칙(SRP: Single R..
오브젝트 - 3. 역할, 책임, 협력 01. 협력 - 영화 예매 시스템 돌아보기 협력: 기능 구현을 위한 상호작용 책임: 협력에 참여하기 위해 수행하는 로직 역할: 협력 안에서 수행하는 책임들이 모여 객체가 수행하는 역할을 구성한다. - 협력 객체가 메시지를 처리할 방법을 스스로 선택한다.(자율적 존재) 자율적 존재가 되기 위해서는 자신이 알고있는 정보를 이용해 직접 요금을 계산해야 한다. (캡슐화) 메시지를 처리하던 중에 직접 처리할 수 없는 정보나 행동이 필요한 경우 또다른 객체에게 도움을 요청한다. - 협력이 설계를 위한 문맥을 결정한다. 객체의 행동을 결정하는 것은 객체가 참여하고 있는 협력이다. 협력이 바뀌면 객체가 제공해야하는 행동 역시 바뀌어야 한다. 협력 -> 행동 -> 상태 협력이 일종의 문맥(Context)를 제공한다. 0..
반응형

티스토리툴바