Never give up

해당 예제에서는 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 =..

위젯들을 겹쳐야되는 상황이 생길 때 대부분 stack을 먼저 떠올릴텐데 stack을 사용하지 않고도 가능한 방법이 몇가지 있습니다 그중에서 Align을 이용한 방법 그리고 무적위젯 transform을 이용한 방법을 알아보겠습니다 import 'package:flutter/material.dart'; class WidgetTest extends StatefulWidget { const WidgetTest({Key? key, required this.title}) : super(key: key); final String title; @override _WidgetTestState createState() => _WidgetTestState(); } class _WidgetTestState extends St..

ListView, SingleChildView등을 사용할 때 위젯 리스트들의 크기가 화면의 크기보다 작으면 physics에 bouncing을 넣어도 스크롤이 안되는데 속성하나만 설정하면 가능하게 할 수 있습니다 import 'package:flutter/material.dart'; class PhysicsExample extends StatefulWidget { const PhysicsExample({Key? key, required this.title}) : super(key: key); final String title; @override _PhysicsExampleState createState() => _PhysicsExampleState(); } class _PhysicsExampleState ..

많은 유저들이 사용하는 Chewie video player가 없데이트 중이어서 다른 패키지 업데이트할 때 충돌이 나기도 하고, 간단한 기능만 사용하는데 너무 많은것들(?)이 붙어 있어서 video player를 사용해서 한번 만들어봤습니다 video player widget import 'package:custom_video_player/src/util/enum.dart'; import 'package:custom_video_player/src/util/extension.dart'; import 'package:custom_video_player/src/controller/video_controller.dart'; import 'package:custom_video_player/src/view/full_..

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..