본문 바로가기
반응형

분류 전체보기290

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.
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.
오브젝트 - 2.객체지향 프로그래밍 1. 영화 예매 시스템 2. 객체지향 프로그래밍을 향해 - 협력, 객체, 클래스 · 어떤 객체들이 필요한지 (어떤 클래스가 필요한지 보다) 먼저 고민하라. · 객체를 독립적인 존재가 아니라 기능을 구현하기 위해 협력하는 공동체의 일원으로 봐야 한다. - 자율적인 객체(상태는 숨기고 행동만 외부에 공개) · 캡슐화: 데이터와 기능을 객체 내부로 함께 묶는 것 · 접근제어: public protected, private 등 접근 수정자 제공 · public interface: 외부에서 접근 가능한 부분 · implementation(구현): 외부 접근 불가, 내부만 접근 가능 - 프로그래머의 자유 · 클라이언트 프로그래머에게 필요한 부분만 공개하여, 불필요한 접근을 방지한다. . 클라이언트 프로그래머가 알아.. 2021. 8. 8.
오브젝트 - 1.객체, 설계 1. 티켓판매 애플리케이션 구현하기 2. 무엇이 문제인가 - 모든 모듈은 제대로 실행돼야 한다(o) - 변경이 용이해야 한다(x) => 과한 의존성 => 결합도가 높다. - 이해하기 쉬워야 한다(x) 3. 설계 개선하기 - 자율성을 높이자 · 모든 객체가 자율적인 존재가 되도록 설계를 변경(TicketSeller, Audience 등) · 캡슐화 : 객체 내부의 세부적인 사항을 감추는 것 => 객체 사이의 결합도를 낮춤 => 설계 변경이 쉬워짐. - 절차지향과 객체지향 · 절차지향: 프로세스와 데이터를 별도의 모듈에 위치시키는 방식 · 객체지향: 프로세스와 데이터를 동일한 모듈 내부에 위치시키는 방식. 어떤 책임을 할당할 것이냐에 초점을 맞춤 - 책임의 이동 · 기존: 책임이 Theater에 집중됨 · .. 2021. 8. 8.
Javascript 주요 팁 1. 조건이 필요할 때 => 3항 연산자 score > 5 ? 'Good': 'Bad'; // 조건이 true이면 'Good', false이면 'Bad' 2. 조건이 필요할 때 => nullish coalescing const message = text ?? 'Nothing to display'; //text가 있으면 text, 없으면(null, undefined) 'Nothing to display' //함수 default parameter : null 인 경우에는 null을 출력 function printMessage(text = 'Nothing to display'){ console.log(text); } // Logical Or || leftExpr ?? right Expr // falsy(nul.. 2021. 8. 7.
Firebase 이미지 저장하기(storage) 업로드 content 올리기 2021. 7. 30.
Firebase 데이터 저장하기 파이어베이스 웹서버 입니다. 2021. 7. 30.
Firebase 구글 인증하기 1. 인증방식 추가 2. 앱 추가 프로젝트 개요에서 앱 추가를 진행합니다. 또는 생성된 앱을 클릭하여 SDK 소스추가 부분으로 진행합니다. 3. 소스코드 복사 아래의 스크립트 부분을 복사하여 public/index.html 파일에 붙여넣습니다. 파이어베이스 웹서버 입니다. // 구글 인증 기능 추가 var provider = new firebase.auth.GoogleAuthProvider(); // 인증하기 firebase.auth().signInWithPopup(provider).then(function(result) { // This gives you a Google Access Token. You can use it to access the Google API. var token = result... 2021. 7. 29.
Firebase API 만들기 1. 프로젝트 생성 - 로그인 / 프로젝트 생성 - firebase.google.com - Function 과 Hosting 기능을 사용하려면 Blaze 로 업그레이드가 필요합니다. 2. 로컬에 firebase 설치 및 시작 npm install -g firebase-tools 1) firebase 로그인 firebase login 2) firebase init firebase init 생성 과정에서 lint는 y로 설치해줍니다. public directory 의 이름을 지정해야 하는데 기본 설정인 public으로 진행하겠습니다. (public directory 는 html, css, js 파일들이 위치하게 될 디렉토리입니다.) rewrite all urls to /index.html 은 n 으로 입력 .. 2021. 7. 27.
Oracle 여러행의 데이터를 하나의 행에 가로로 합치기(LISTAGG) SELECT LISTAGG(필드명, 구분자) WITHIN GROUP ( ORDER BY 정렬기준필드 ASC 또는 DESC) FROM 테이블 2021. 7. 27.
Gatsby 시작하기 (with Typescript) 0. Gatsby-cli 설치 npm install -g gatsby-cli 1. Gatsby 프로젝트 생성 gatsby new [프로젝트명] or npx gatsby-cli new [프로젝트명]// gatsby-cli설치 없이 수행할 때 yarn remove gatsby-plugin-manifest gatsby-plugin-gatsby-cloud // 필요없는 라이브러리 삭제 2. 타입스크립트 설치 yarn add typescript --dev yarn add gatsby-plugin-typescript 3. gatsby-config.js 파일 수정 module.exports = { siteMetadata: { title: `Gatsby Default Starter`, description: `Kick.. 2021. 7. 4.
Vivaldi Browser 사용기 오늘은 비발디(Vivaldi) 브라우저에 대해 알아보도록 하겠습니다. 인터넷 브라우저 하면 Chrome, Safari, IE, Edge, Firefox....간혹 Opera 같은 브라우저들을 떠올리실텐데요. 옛날부터 저는 Opera를 빼놓지 않고 사용했었습니다. 무료로 제공되는 VPN모드 때문이었지요. 그런데 이 Opera 개발회사가 중국으로 넘어갔다고 하더라구요. 그 와중에 Opera의 개발 방향이 바뀌면서 Opera 메인 개발자인 욘 스테펜손 폰 테츠너가 뛰쳐나와 만든 브라우저가 Vivaldi 되겠습니다. 비발디는 크로뮴 기반 의 브라우저로 크롬의 확장기능 사용이 가능합니다. 메모리 사용량은 다른 브라우저들보다 훨씬 작습니다. UI를 Javascript, React, Node.js, Browserif.. 2021. 7. 2.
Recoil을 활용한 비동기 요청 예제 1. Library 설치 yarn add recoil 2. 구성 /src ㄴ components * UserList.jsx ㄴ recoil * state.js *App.js *Index.js 3. 코드 (1) src/App.js import React, { ErrorBoundary } from "react"; import { RecoilRoot } from "recoil"; import UserList from "./components/UserList"; function App() { return ( ); } export default App; (2) src/recoil/state.js import { atom, selector } from "recoil"; export const userListStat.. 2021. 6. 30.
SWR을 활용한 비동기 요청 예제 1. Library 설치 yarn add swr 2. 폴더 구성 Counter는 참고로 작성했는데, 본 포스트에서 구성하지는 않겠습니다. 비동기로 서버에서 User목록만 불러와서 보여주는 부분만 코드로 남김니다. /src ㄴcomponents *Users.jsx ㄴcustomHooks *useUsers.js *App.js *index.js 3. 코드 (1) App.js import Users from "./components/Users"; import Counter from "./components/Counter"; function App() { return ( ); } export default App; (2) src/customHooks/useUsers.js import useSWR from "swr.. 2021. 6. 29.
React-query 를 활용한 비동기 요청 예제 1. Library 설치 yarn add react-query 2. 프로젝트 구조 /src ㄴcomponents * RQ1 (테스트용) * RQ2 (실 사용 컴포넌트) ㄴcustomHooks * useUsers.js *App.js *index.js 3. 코드 (1) App.js import { QueryClient, QueryClientProvider } from "react-query"; import RQ2 from "./components/RQ2"; const queryClient = new QueryClient(); function App() { return ( ); } export default App; (2) src/customHooks/useUsers.js import { useQuery } .. 2021. 6. 29.
Redux-Saga 를 활용한 비동기 요청 예제 1. 프로젝트 생성 yarn create react-app . 2. 라이브러리 설치 yarn add redux react-redux redux-actions axios redux-saga redux-devtools-extension 3. 프로젝트 구성 프로젝트 구성은 아래와 같이 할 계획입니다. /src 하위부분만 살펴보면 되겠습니다. /src ㄴ components * Leader.jsx ㄴ containers * LeaderContainer.jsx ㄴ lib * api.js (서버에 요청하는 비동기 함수 정의부분) ㄴ modules * index.js (redux와 saga를 통합하는 부분) * leader.js ( action 타입, action 생성함수, redux, saga 정의하는 부분) * .. 2021. 6. 29.
SWR로 로컬 상태 컨트롤 - Counter import useSWR from "swr"; function useCounter() { const { data, mutate } = useSWR("state", () => window.count); return { data: window.count || 0, mutate: (count) => { window.count = count; return mutate(); }, }; } export default function Counter() { const { data, mutate } = useCounter(); const handleInc = () => mutate(data + 1); const handleDec = () => mutate(data - 1); return ( count: {data} in.. 2021. 6. 26.
Color Palette - palette.js palette.js : gray, red, pink, grape, violet, indigo, blue, cyan, teal, green, lime, yellow, ornage 일부는 적어놓고 붙여써야겠습니다. const palette = { gray: [ '#f8f9fa', '#f1f3f5', '#e9ecef', '#dee2e6', '#ced4da', '#adb5bd', '#868e96', '#495057', '#343a40', '#212529', ], cyan: [ '#e3fafc', '#c5f6fa', '#99e9f2', '#66d9e8', '#3bc9db', '#22b8cf', '#15aabf', '#1098ad', '#0c8599', '#0b7285', ], }; export default pa.. 2021. 6. 21.
Next.js 시작하기4 - 설정파일 1. next.config.js module.exports = { reactStrictMode: true, trailingSlash: false, // 뒤쪽 슬래시를 붙일 것인지.. env: { SANITY_PROJECT_ID: 'ozi5ivc6', //Sanity ID를 환경변수로 지정 } } 2021. 6. 20.
Next.js 시작하기3 - 스타일링 1. 라이브러리 설치 yarn add @sanity/block-content-to-react yarn add react-syntax-highlighter 2. BlogPostDetail.jsx import {Col, Row } from 'antd' import BlockContent from '@sanity/block-content-to-react' import SyntaxHighlighter from 'react-syntax-highlighter' const serializers = { types: { code: ({node}) => { const { code } = node; return ( {code} ) }, video: ({ node }) => { return video }, link: ({ n.. 2021. 6. 20.
Next.js 시작하기2 - 스타일링 1. 라이브러리 설치 yarn add antd @ant-design/icons// ant design yarn add dayjs// 날짜 변환 라이브러리 2. pages/_app.js 파일에 반영 -> 전체 적용 import 'antd/dist/antd.css' // p.slug === home.mainPostUrl); const otherPosts = posts.filter(p => p.slug !== home.mainPostUrl); console.log(mainPost); console.log(otherPosts); return ( ) } export async function getStaticProps() { const sanityService = new SanityService(); const .. 2021. 6. 20.
Next.js 시작하기 (Sanity Blog 작성 완료된 경우) 1. 프로젝트 생성 및 Library 설치 yarn create next-app . yarn add @sanity/client//Sanity 연결하여 Data를 가져오기 위한 라이브러리 2. 시작 yarn dev yarn start는 빌드 이후 가능합니다. 3. 라우팅 설정 (기초) 폴더/페이지구조url pages/index.js -> / pages/blog/index.js-> /blog pages/blog/first-post.js->/blog/first-post pages/dashboard/setting/username.js->/dashboard/settings/username pages/blog/[slug].js->/blog/:slug(/blog/hello-world) pages/[username]/.. 2021. 6. 20.
Netlify Serverless function 작성 보안을 위해 API Key가 노출되지 않도록 API 요청 부분을 서버리스 함수로 작성하도록 하겠습니다. 추가로 API Key는 환경변수로 등록하여 Github 등으로 올릴 때 노출되는 것을 막기위해 추가적으로 보안설정을 하겠습니다. 1.netlify-cli 설치 npm i -D netlify-cli 2.netlify.toml # Netlify Dev # https://cli.netlify.com/netlify-dev/#netlifytoml-dev-block # 제품 모드 [build] command = "npm run build" functions = "functions" # Netlify 서버리스 함수가 작성된 디렉토리를 지정합니다. publish = "build" # 프로젝트 빌드 결과의 디렉토리를 .. 2021. 6. 17.
헤로쿠 백엔드, Netlify 프론트엔드 배포 1. 백엔드 헤로쿠에 백엔드를 배포할 경우 CORS(Cross Origin Resource Sharing) 문제를 해결하기 위해 라이브러리를 설치해야 합니다. Koa로 작업할 경우 'koa2-cors' 를 설치해주면 됩니다. 그리고 라우팅 설정 부분에서 아래의 구문을 추가해줍니다. import cors from 'koa2-cors'; app.use(cors()); 2. 프론트엔드 Github의 소스를 자동으로 배포해주는 Netlify의 경우에도 일부 수정할 부분이 필요합니다. Local에서 작업할 경우에는 같은 localhost에서 데이터를 주고 받아서 몰랐었는데, 이제 헤로쿠의 백엔드 데이터를 받아와야 하기 때문에 조금 달라져야 합니다. 그래서 필요한 것이 _redirects파일 입니다. /public.. 2021. 6. 15.
Heroku 기본 사용법 1. Heroku 로그인 2. Heroku CLI 설치 3. git init 4. git add . 5. git commit -m "first message" 6. heroku login 7. heroku create myapp 8. heroku git:remote -a myapp 9. git push heroku master 2021. 6. 14.