본문 바로가기
반응형

전체 글373

FastAPI 시작하기 1. 폴더구조 2. 라이브러리 설치 pip install fastapi uvicorn pydantic jinja2 import uvicorn from fastapi import FastAPI, Request from fastapi.responses import HTMLResponse from fastapi.templating import Jinja2Templates from pydantic import BaseModel import requests app = FastAPI() db=[] #---------------------------------------------------------------------------------------------------------- # data models c.. 2021. 9. 9.
FastAPI - Jinja2로 프론트 적용하기 1. 설치 pip install fastapi uvicorn pip install aiofiles # CSS파일 로딩 pip install jinja2 2. Project 구성 3. 시작명령어 python app.py 4. app.py import uvicorn from fastapi import FastAPI, Request from fastapi.responses import HTMLResponse from fastapi.staticfiles import StaticFiles from fastapi.templating import Jinja2Templates app = FastAPI() templates = Jinja2Templates(directory="templates") app.mount("/s.. 2021. 9. 9.
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... 2021. 9. 5.
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.. 2021. 8. 24.
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.. 2021. 8. 23.
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 = {.. 2021. 8. 11.
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.. 2021. 8. 10.
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 파일을 불러오게 됩니다... 2021. 8. 10.
오브젝트 - 4. 설계 품질과 트레이드오프 01. 데이터 중심의 영화 예매 시스템 ○ 데이터를 준비하자 ○ 영화를 예매하자 02. 설계 트레이드오프 ○ 캡슐화 · 객체를 사용하면 변경 가능성이 높은 부분은 내부에 숨기고(구현) 외부에는 상대적으로 안정적인 부분만 공개함으로써(인터페이스) 변경의 여파를 통제할 수 있다. ○ 응집도와 결합도 · 응집도: 모듈 내의 요소들이 하나의 목적을 위해 긴밀하게 협력한다면 높은 응집도 · 결합도: 어떤 모듈이 다른 모듈에 대해 꼭 필요한 지식만 알고 있다면 두 모듈은 낮은 결합도를 가진다. 클래스의 구현이 아닌 인터페이스에 의존하도록 코드를 작성해야 낮은 결합도를 얻을 수 있다. 03. 데이터 중심의 영화 예매 시스템의 문제점 ○ 캡슐화 위반 ○ 높은 결합도 ○ 낮은 응집도 단일책임원칙(SRP: Single R.. 2021. 8. 9.
오브젝트 - 3. 역할, 책임, 협력 01. 협력 - 영화 예매 시스템 돌아보기 협력: 기능 구현을 위한 상호작용 책임: 협력에 참여하기 위해 수행하는 로직 역할: 협력 안에서 수행하는 책임들이 모여 객체가 수행하는 역할을 구성한다. - 협력 객체가 메시지를 처리할 방법을 스스로 선택한다.(자율적 존재) 자율적 존재가 되기 위해서는 자신이 알고있는 정보를 이용해 직접 요금을 계산해야 한다. (캡슐화) 메시지를 처리하던 중에 직접 처리할 수 없는 정보나 행동이 필요한 경우 또다른 객체에게 도움을 요청한다. - 협력이 설계를 위한 문맥을 결정한다. 객체의 행동을 결정하는 것은 객체가 참여하고 있는 협력이다. 협력이 바뀌면 객체가 제공해야하는 행동 역시 바뀌어야 한다. 협력 -> 행동 -> 상태 협력이 일종의 문맥(Context)를 제공한다. 0.. 2021. 8. 9.
반응형

티스토리툴바