Never give up

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

먼저 필자는 문서를 간단하게 보기는 했지만 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만 만들어서 아래처럼 구현했습니다..

Svelte kit으로 간단한 반응형 페이지 및 간단한 fetch 테스트를 해봤습니다 먼저 Flutter 예제와 동일하게 JsonPlaceholder에서 간단한 Get 호출 및 처리 그리고 간단하게 html이랑 css로 화면에 표현 하는 부분만 다뤄봤습니다 먼저 폴더구조는 아래 이미지처럼 api, routes로 간단하게 나누었고 api/common.js const getPosts = async (index) => { const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${index}`) const posts = await res.json() return { body: { posts } } } export {getPosts} routes..

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. 윈도우 검색창에 "환경"을 칩니다 옛날에는 컴퓨터 속성 -> 고급 -> 관리 이런식의 경로로 들어갔었는데 귀찮으니 바로 ..

혹시 왜 포스트를 안 올리는지 궁금하시는 분이 있을것 같아서 말씀드리자면.. (제 블로그 정기적으로 보시는분은 없겠지만..) 갑자기 웹을 개발해야되는 상황이 생겨서 플러터에 전 만큼 시간을 투자할 수 없게 되었고 이제 웬만한 자료들은 다 있어서 포스팅 주제(?)를 찾기 어렵게 된 이유도 있습니다 처음에는 플러터 웹을 시도해보려고 했는데, 같은 플러터 코드다 보니 기능은 금방 구현이 가능한데 웹에 적합한(?) UI/UX를 개발하는 시간, SEO문제 그리고 생각보다 큰 용량과 rendering속도 등이 조금 아쉬운것 같아서 웹 프레임워크 그 중 svelte를 사용하게 되었습니다 svelte를 선택하게 된 이유는 (위에서 시키는대로) 진입장벽, 스터디 시간, 구현 난이도 및 시간 등 여러가지를 고려해봤을 때 ..