프로젝트/소규모프로젝트들

프로젝트/소규모프로젝트들
[React,Emotion] 회전 Dial 컴포넌트 만들기
프로젝트를 하다가 아래와 같이 회전하는 Dial모양의 컴포넌트를 만들게 되었다. 우선 위 컴포넌트를 만들어낸 방식은 아래와 같다. 실제로는 아래와 같이 미리 렌더링을 하고 , 빨간색 박스 부분만 보여지도록 제어를 해주면 된다. 이때 회전을 주기위해서 rotate 효과를 활용할 수 있다. const [rotation, setRotation] = useState(0); 따라서 위와같이 회전값을 지정해준 후 버튼이 눌릴때마다 회전을 시켜주면 된다. 그런데 단순하게 위 그림대로 만들어 두고 회전하는 방식으로는 정확하게 180도씩 회전하지 않았다. 위 gif에서 검은색 박스를 보자. rotate 으로 각도를 변화시키면 영역을 감싸고 있는 큰 박스자체가 회전을 하게 된다. 이때 세개의 작은 Dial들이 있는 부..
→2023.12.07
프로젝트/소규모프로젝트들
[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..
→2023.08.18
프로젝트/소규모프로젝트들
라즈베리파이로 웹 서버 만들기 (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이다. 서버가 에러로 인해 꺼졌을때 다시 켜주는 것 외에 클..
→2023.01.27
프로젝트/소규모프로젝트들
라즈베리파이로 웹 서버 만들기 (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..
→2023.01.24
프로젝트/소규모프로젝트들
라즈베리파이로 웹서버 만들기 (1) - 밖에서 라파 접속하기
이번에 새롭게 웹 프로젝트를 시작하려 하니 서버가 마음에 걸렸다. nCloud나 AWS나 몇몇 선택지가 있긴 했지만 가격이 아무래도 마음에 좀 걸렸었다... 그러던 중 집에 굴러다니던 라즈베리파이 몇개가 생각났고 이걸 활용해서 웹서버를 만들면 비용적으로 많이 저렴할 것 같아 공부하고 시도하게 되었다. (실제로 라즈베리파이를 24시간 내내 돌리면 한달에 200~500원정도 나온다고 한다 ㅋ.ㅋ)... 자 이제 시작해보자! 우선 어느정도 배경지식을 살짝 알고가면 좋을 것 같다. 우리집 안의 라우터(공유기)를 활용하여 집안의 노트북,컴퓨터를 활용하여 라즈베리파이를 원격접속해 본 경험은 있었다. 하지만 내가 원하는건 라즈베리파이를 웹 서버로 사용하는 것이기에 이를 외부 IP로 내보내는 과정이 필요했다. 따라서 ..
→2023.01.24
프로젝트/소규모프로젝트들
mdx Editor만들기 (마크다운 에디터)
벨로그에서 글을 써보거나, gitHub Readme.md등의 글을 써본 경험이 있는 분들이라면 마크다운 에디터를 사용한 경험이 있을 것이다. 마크다운 에디터또한 분명 좋지만, 마크다운 문법에 없는 강조기능이나 하이라이팅 기능을 사용하고싶은 경우가 있다. 이런경우 md파일이 아닌 mdx 파일을 활용하면 말한 기능을 사용할 수 있다. 위와같은 텍스트 에디터를 만들 것이다. 마크다운 에디터를 기반으로 내가 커스텀한 기능들을 넣을 수 있다. 글을 읽기전에, https://github.com/Ionaru/easy-markdown-editor GitHub - Ionaru/easy-markdown-editor: EasyMDE: A simple, beautiful, and embeddable JavaScript Mar..
→2022.11.27

• 이전
• 1
• 2
• 다음