일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- KakaoMap
- Raycasting
- Dart 2.17.0
- Flutter 3.0
- web track
- addPostFrameCallback
- Game js
- RouteObserver
- Three js
- FirebaseAnalytics
- babel
- Completer
- androidId
- Three-fiber
- webrtc
- userevent_tracker
- code editor
- methodChannel
- REST API
- swagger-typescript-api
- Babel standalone
- identifierForVender
- node
- Redux
- Image Resize typescript
- Flutter
- Prism.js
- redux toolkit
- typescript
- react
- Today
- Total
목록WEB (24)
Never give up
이번에는 google analytics에서 축적된(?) 데이터를 chart js로 시각화 그리고 excel파일로 만들어서 다운받는 예제를 만들어봤습니다 먼저 google cloud platform에서 api활성화, 그리고 계정 생성, domain 설정(필자는 localhost:8080), 환경변수 등록이 필요합니다 자세한 내용은 링크를 참고해주세요 (링크: https://developers.google.com/analytics/devguides/reporting/data/v1/quickstart-client-libraries#node.js_1) 위 링크대로 api를 활성화 하고, credentials.json파일을 적당한곳(필자는 프로젝트 폴더)에 넣어줍니다 그 후 환경변수에 다음과 같이 등록해줍니다 (..
해당 예제에서는 node로 이미지 업로드 및 이미지 리스트 및 이미지 가져오는 부분을 구현하고 react에서 이미지 업로드 및 가져와서 보여주기를 구현해봤습니다 서버쪽에 만든 api 3개 get : image/get-imglist 서버에 저장된 이미지 리스트를 가져옵니다 get : image/:url 서버에 저장된 이미지를 보여줍니다 post : image/upload 서버에 이미지를 업로드합니다 image/index require('dotenv').config() const formidable = require('formidable'); const express = require('express'); const fs = require('fs'); const router = express.Router()..
오늘은 간단하게 react에서 kakao map을 만들어봤습니다 먼저 세팅부분은 가이드에 나와있는대로 해주고 (링크 : https://apis.map.kakao.com/web/guide/) 카카오맵 웹 예제에 나와있는 키워드 목록을 포함한 부분으로 테스트를 해봤습니다 (링크 : https://apis.map.kakao.com/web/sample/keywordList/) Kakaomap example.js /*global kakao*/ import React, { Component } from 'react' import './kakaomap_example.css' class KakaoMapExample extends Component { constructor() { super() this.markers =..
html과 css만 이용해서 간단한 페이지를 따라서 만들어봤습니다 먼저 참고한 사이트는 material ui 사이트의 album page입니다 (링크 : https://mui.com/getting-started/templates/album/) 이미지 부분 처리가 잘못되어있는것 같은데 일단 정상이라고 가정하고(?) 한번 만들어봤습니다 album import React from 'react' import { AiFillCamera } from 'react-icons/ai' import './album.css' function Album() { // example : https://mui.com/getting-started/templates/album/ return ( Album layout Album lay..
이전 포스트에 이어서 react부분을 정리해봤습니다 (링크 : https://devmemory.tistory.com/78) 다만 class형만 다루고 함수형은 나중에 숙련도가 조금 더 올라가면 함수형으로 간단한 예제를 한번 만들어볼까 합니다 api import { response } from 'util/util' const baseURL = "api" // 성공: code: 1, data : object // 실패: code: -1, data : 실패 message class API { getTasks = async (pageNo, pageSize) => { let url = `${baseURL}/task` if(pageNo){ url += `?pageNo=${pageNo}` } if(pageSize){..
이전에 만들었던것을 조금 더 개선시켜서 만들어봤습니다 (링크 : https://devmemory.tistory.com/77) node는 sqlite3를 연결, 서버부분 에러처리 추가 react는 자잘한 에러 수정 및 pagination 추가 그리고 proxy추가 및 변경된 부분 양쪽 다 처리 크게 이 3가지입니다 이번 포스트에서는 node랑 proxy 셋팅하는 부분만 넣고 react부분은 다음 포스트에 적을 예정입니다 proxy setup const {createProxyMiddleware} = require('http-proxy-middleware') module.exports = function (app) { app.use( createProxyMiddleware('/api',{ target: 'ht..
Android studio만 사용하다보니 Vs code로 개발환경 셋팅할 때 아쉬운 부분이 많다보니 extension이 필요한데 필자가 현재 사용하고 있는건 그다지 많지 않습니다만 앞으로 괜찮은 extension을 찾을때마다 업로드 할 예정입니다 Vscode extension 1. Dracula IntelliJ theme Android studio dracula mode와 거의 동일한 색상을 가지고 있다보니 조금 더 가독성이 좋아지는것 같습니다(필자한테만 좋은..) (링크 : https://marketplace.visualstudio.com/items?itemName=trinm1709.dracula-theme-from-intellij) 2. Bracket Pair Colorizer(deprecated) ..
해당 포스트는 윈도우 10 기준으로 작성되어있습니다 웹 프레임워크 설치 그리고 라이브러리 관리 등을 NPM혹은 Yarn을 통해서 하게 되는데 윈도우에서 환경 셋팅할 때 원하는 위치에 Node .zip버전을 설치하는 방법에 대해 간략하게 포스트해볼까 합니다 (기억 안나면 찾아보기용.. 사실 대다수 제 포스트가..) 1. Node 공식홈페이지의 다운로드 탭에서 사용자의 OS에 맞는 버전을 설치합니다 (링크 : https://nodejs.org/ko/download/) 링크를 누르면 해당 화면으로 이동하는데 OS 비트수에 맞는 버전을 설치 요즘 32비트 쓰시는분은 거의 없으니 64비트 2. 윈도우 검색창에 "환경"을 칩니다 옛날에는 컴퓨터 속성 -> 고급 -> 관리 이런식의 경로로 들어갔었는데 귀찮으니 바로 ..