일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Image Resize typescript
- Three js
- webrtc
- Completer
- code editor
- userevent_tracker
- typescript
- react
- Raycasting
- methodChannel
- RouteObserver
- REST API
- babel
- Prism.js
- redux toolkit
- Babel standalone
- Flutter
- addPostFrameCallback
- Three-fiber
- Dart 2.17.0
- Game js
- Redux
- web track
- node
- Flutter 3.0
- androidId
- KakaoMap
- identifierForVender
- FirebaseAnalytics
- swagger-typescript-api
- Today
- Total
목록react (23)
Never give up
최근에 graphql사용하는 곳들이 생기면서 궁금해서 한번 예제를 만들어봤습니다 해당 예제는 apollo server, client로 만들었습니다 apollo-server : https://www.npmjs.com/package/apollo-server apollo/client : https://www.npmjs.com/package/@apollo/client 먼저 노드 서버쪽을 보면 server/index.js const ApolloServer = require('apollo-server').ApolloServer; const resolvers = require('./resolvers/index') const typeDefs = require('./typedefs/index') const server ..
해당 포스트는 npx Create-React-App 없이 개발을 해볼 용도로 만들어봤고 정말 기본적인 프리셋(?)만 설정해서 사용하는 방법을 여기저기 찾아보면서 정리해봤습니다 (본 목적은 나중에 헷갈릴 때 찾아볼 용도로...) 1. 폴더를 만들고 내부에서 npm init -y를 입력해서 package.json파일을 만들어줍니다 해당 방법으로 node 프로젝트라는 정의(?)를 해줍니다 2. react, react-dom 설치 React 라이브러리와 DOM과 연결시켜주는 react-dom을 설치해줍니다 3. babel 설치 babel은 transpiler로 es6 이상을 es5 형식에 맞게 변환을 해주는 역할을 합니다 preset-react는 jsx를 js형태로 사용할 수 있도록 해주는 프리셋이고, pre..
간만에(?) 개발하던 웹 소스를 봤는데 createStore가 deprecated되었더군요.. 밑에 내용을 확인해보니 redux toolkit에 있는 configureStore로 하라고 해서 사용법을 찾아봤습니다 (링크: https://redux-toolkit.js.org/) 필자가 사용하던 createStore와 reducer가 configureStore, createSlice로 대체됐습니다 createStore -> configureStore reducer -> createSlice src/store.js import { configureStore } from "@reduxjs/toolkit" import counter from "slices/counter" import dialog from "sli..
해당 예제에서는 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 =..
이전 포스트에 이어서 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){..
먼저 필자는 문서를 간단하게 보기는 했지만 React를 어제 처음 시작했고 Node는 오늘 처음으로 REST API를 구현해봤으니 많은 부분이 미숙하다는걸 감안하고 봐주시면 감사드리겠습니다 React는 아래 유튜브 영상에서 나온대로 함수형으로 한번 구현을 해보고 공식문서에 나와있는 예제를 보면서 class형에 대한 감을 대충(?) 잡고 class형으로 변환을 해봤습니다 (Youtube 링크 : https://www.youtube.com/watch?v=w7ejDZ8SWv8) (공식문서 링크 : https://ko.reactjs.org/tutorial/tutorial.html) 그리고 Node는.. 그냥 검색하면서 여기저기 나오는 자료들 찾아가면서 대충(?) server.js만 만들어서 아래처럼 구현했습니다..