프로젝트

    [React,Emotion] 회전 Dial 컴포넌트 만들기

    프로젝트를 하다가 아래와 같이 회전하는 Dial모양의 컴포넌트를 만들게 되었다. 우선 위 컴포넌트를 만들어낸 방식은 아래와 같다. 실제로는 아래와 같이 미리 렌더링을 하고 , 빨간색 박스 부분만 보여지도록 제어를 해주면 된다. 이때 회전을 주기위해서 rotate 효과를 활용할 수 있다. const [rotation, setRotation] = useState(0); 따라서 위와같이 회전값을 지정해준 후 버튼이 눌릴때마다 회전을 시켜주면 된다. 그런데 단순하게 위 그림대로 만들어 두고 회전하는 방식으로는 정확하게 180도씩 회전하지 않았다. 위 gif에서 검은색 박스를 보자. rotate 으로 각도를 변화시키면 영역을 감싸고 있는 큰 박스자체가 회전을 하게 된다. 이때 세개의 작은 Dial들이 있는 부..

    [express] 라즈베리파이 이미지서버 사용

    라즈베리파이를 활용해서 이미지서버를 올려보았다. 간단하게 이미지를 받으면 이를 파일로 저장하고, url로 해당 이미지를 띄워주는 간단한 기능을 하는 서버라 크게 어려울 것은 없다. 라이브러리는 아래 3개를 사용한다. "dotenv": "^16.3.1", "express": "^4.18.2", "multer": "^1.4.5-lts.1" 프로젝트를 하나 만들어준 후 3개의 라이브러리를 설치해주자. npm init npm install --save dotenv npm i express npm i multer express를 통해서 간단하게 서버를 열어 두고 이미지를 받는 API 를 하나 만들었다. multer 라이브러리를 통해서 파일을 받고 저장하는걸 관리한다. import express from "expr..

    라즈베리파이로 웹 서버 만들기 (3) - 배포하기

    사실 저번에 DB를 연결했기에 추가적인 작업은 별로 할 것이 없다. nodejs를 설치하고 그대로 배포를 해주면 된다. NodeSource 사의 레포지토리를 활용하여 최신 버전의 Node.js를 설치할 수 있다. curl -sL https://deb.nodesource.com/setup_16.x | sudo bash - setup_{숫자}.x 에서 숫자부분을 바꾸면 node의 버전을 변경하는것이 가능하다. sudo apt install nodejs 이후 노드를 설치한 후에 버전을 확인하면 된다. node --version 노드는 foreground process이기 때문에 터미널이 꺼지면 서버또한 꺼지게 된다. 이러한 점을 관리해주는 것이 PM2이다. 서버가 에러로 인해 꺼졌을때 다시 켜주는 것 외에 클..

    라즈베리파이로 웹 서버 만들기 (2) - 라파 DB 서버로 사용하기

    이번에는 라즈베리파이를 DB서버로 사용해 보자. 우선 라즈베리파이에 MySQL을 설치해야 한다. 먼저 mariadb를 설치해주자. sudo apt-get update sudo apt-get install mariadb-server 왜 MySQL을 사용한다고 했으면서 mariadb를 설치하는가 의문이 들어보면 아래글을 한번 읽어보면 좋을 것 같다! https://sabarada.tistory.com/164 [database] mysql과 mariaDB 중 어떤 DB가 나에게 맞을까? 안녕하세요. 오늘은 mysql과 mariaDB에 대한 차이점을 알아보고 어떤것을 사용하면 개인에게 그리고 팀에게 적합할지 알아보는 시간을 가져보도록 하겠습니다. 히스토리 mariaDB는 mysql의 개발자가 sabarada.t..

    라즈베리파이로 웹서버 만들기 (1) - 밖에서 라파 접속하기

    이번에 새롭게 웹 프로젝트를 시작하려 하니 서버가 마음에 걸렸다. nCloud나 AWS나 몇몇 선택지가 있긴 했지만 가격이 아무래도 마음에 좀 걸렸었다... 그러던 중 집에 굴러다니던 라즈베리파이 몇개가 생각났고 이걸 활용해서 웹서버를 만들면 비용적으로 많이 저렴할 것 같아 공부하고 시도하게 되었다. (실제로 라즈베리파이를 24시간 내내 돌리면 한달에 200~500원정도 나온다고 한다 ㅋ.ㅋ)... 자 이제 시작해보자! 우선 어느정도 배경지식을 살짝 알고가면 좋을 것 같다. 우리집 안의 라우터(공유기)를 활용하여 집안의 노트북,컴퓨터를 활용하여 라즈베리파이를 원격접속해 본 경험은 있었다. 하지만 내가 원하는건 라즈베리파이를 웹 서버로 사용하는 것이기에 이를 외부 IP로 내보내는 과정이 필요했다. 따라서 ..

    01_프로젝트 개요

    이번에 새로운 프로젝트를 하나 진행하고자 한다. 친구와 함께 둘이서 진행하는 프로젝트로 마일스톤을 관리하는 웹사이트를 만들어 보려고 한다. 기간은 약 2~3달정도로 잡았고 그동안 했던것과는 다르게 설계 기간을 상당히 길게 잡았다 (2주정도) 마일스톤이란 아래 그림처럼 옆으로 늘어진 일정표이다. 해당 프로젝트를 선택한 이유는 찾아보니 약간 아기자기한 디자인으로 된 마일스톤 편집 페이지가 한국에 없기도 하였고 여러가지 기능을 넣어가면서 기술들을 공부해보기 좋아보였기 때문이다. 단순히 마일스톤뿐 아니라 같은내용을 달력으로도 표시할 수 있도록 하려고 한다. 혹은 보드형식으로 요약본을 볼 수도 있도록 만들어보려고 한다. 아래 기술스택을 활용해서 개발하려고 목표는 잡았고 필요하다면 그때그때 추가해가면서 사용하려고 ..