개발 42

Homebridge 설치

Homebride 설치 Homebridge 또한 이곳에서 LXC를 받는다. https://tteck.github.io/Proxmox/ bash -c "$(wget -qLO - https://github.com/tteck/Proxmox/raw/main/ct/homebridge.sh)" Proxmox의 Shell에 위 bash command를 입력하면 Homebridge 컨테이너를 자동으로 설치한다. 나는 기본 설정으로 그대로 설치했다. 설치후 lxc에 할당된 ip:8581로 점속하면 homebridge 로그인 페이지가 나온다. 초기 id/pw는 admin/admin으로 로그인하면 홈브릿지 home ui가 반겨준다. iPhone의 홈 앱을 설치하고 카메라 앱으로 QR 코드(가렸다)를 스캔하면 홈브릿지가 iO..

개발/Proxmox 2023.08.14

Proxmox에 LXC로 Nginx Proxy Manager 설치하기.

Proxmox를 도입하게된 이유 자체가 놀고있는 5600G를 달고있는 Deskmini X300를 사용해서 NPM도 돌리고 뭔가 생산적인 일을 해보자였다. 처음에는 "proxmox를 올리고 linux를 올린다음 docker를 올려서 npm을 돌려야 하나?" 라는 생각이었는데.... 어느 능력자께서 설명하시길 "https://tteck.github.io/Proxmox/" 이걸 보면 다 해결이 된다고 했다. 시키는대로 따라해봤다. proxmox에서 local console을 연 다음 bash -c "$(wget -qLO - https://github.com/tteck/Proxmox/raw/main/ct/nginxproxymanager.sh)" 위와같이 입력해준다. NPM 설치 매니저가 나타나고 설치가 이루어진..

개발/Proxmox 2023.08.06

You do not have a valid subscription 메세지 제거

SSH 접속한다. 나는 MobaXTerm을 사용해서 proxmox가 설치된 pc로 접속했다. 쉘에서 아래 명령어를 입력해서 해당 경로로 이동하자. cd /usr/share/javascript/proxmox-widget-toolkit proxmoxlib.js를 편집할 것이므로 기존 파일을 백업해준다. cp proxmoxlib.js proxmoxlib.js.bak vi 에디터로 proxmoxlib.js를 편집한다. vi proxmoxlib.js vi에서 /No valid를 입력해서 No valid라는 문장을 찾는다. Ext.Msg.show({ 앞에 void({//를 적어준다. :wq를 입력해서 저장한다. pveproxy.service를 재시작해준다. systemctl restart pveproxy.servi..

개발/Proxmox 2023.08.06

Spring Security + JWT를 이용한 로그인 구현

게시판 웹페이지를 구현하려면 아무래도 로그인을 구현해야겠다는 생각이 들어 웹의 로그인 방법에 대해 알아봤다. 대표적으로 세가지 정도가 쓰인다. Session JWT OAuth Session 서버에 클라이언트의 정보를 기록해두는 방법이다. 클라이언트가 로그인 인증을 통과하면 클라이언트의 세션 정보를 기록해두고, 이후 클라이언트의 요청이 발생하면 클라이언트가 가지고 있는 세션정보(일반적으로 브라우저 쿠키에)를 대조하여 처리하게 된다. JWT 클라이언트 사용자 정보를 JSON에 담은 token을 발급하는 방법이다. 클라이언트에서 서버로 요청을 보낼 때 발급받아놓은 token을 전달하고 서버는 전달받은 token의 유효성을 확인하여 통과하면 요청을 처리해준다. OAuth (OpenID Authentication..

Back-end 개발 시작 DB 접속

이 프로젝트는 Back-end와 Front-end project 파일들을 개별로 관리하며 개발할 것이다. Back-end에서는 Front-end에서 REST API를 통해 자료를 요청하고 등록/수정/삭제를 할 수 있도록 할 예정이다. application.properties #database connection 관련 property #connection pool의 max size spring.datasource.hikari.maximum-pool-size=4 #jdbc 연결 주소 spring.datasource.url=jdbc:postgresql://hostname:port/databasename #DB user name spring.datasource.username=username #DB user p..

null value was assigned to a property [...] of primitive type

ERROR 24940 --- [nio-8080-exec-2] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed: org.springframework.orm.jpa.JpaSystemException: Null value was assigned to a property [class com.rainyjune.board.entity.User.loginFailCnt] of primitive type : `com.rainyjune.board.entity.User.loginFailCnt` ..

DB 구성하기

PostgreSQL의 설치는 공식 홈페이지(https://www.postgresql.org/)의 인스톨러를 받아 설치해서 개발 PC에서 사용할 수 있으나, 실제 외부 액세스가 가능하도록 하는게 목적인 관계롤 DBMS를 보유중인 NAS에 설치하기로 했다. 보유중인 NAS는 시놀로지의 DS920+로 DSM 7 버전을 사용한다. 해당 NAS에 Docker를 통해 PostgreSQL DBMS를 올리도록 한다. Docker 설치 DSM > 패키지 센터 > Docker 검색 > 설치 PostgreSQL 이미지 설치 설치된 Docker를 실행하여 레지스트리 tab에서 postgres를 검색하고 공식 이미지를 다운로드한다. 컨테이너 생성하기 다운로드한 이미지로 컨테이너를 생성한다. 고급 설정을 열어 환경 탭에 추가 버..

Back-end 구성하기

Spring Boot 프로젝트는 간편하게 작업할 수 있도록 도와주는 Spring Initializer를 통해 구성한다. (https://start.spring.io/) Dependancies는 Spring Web, Lombok, Spring Data JPA, PostgreSQL Driver 정도로 간단히 추가했다. Project는 Gradle을 사용할 예정이고, Java는 Temurin의 OpenJDK 17.0.7을 사용했다. IDE 불러오기 Project를 구성하고 IntelliJ IDEA에서 불러오면 JDK 버전 관련 오류가 발생하는데, 프로젝트의 설정을 변경해준다. 이후 정상적으로 Build 된다.

게시판 Project 시작

웹을 공부하면서 구상했던 짤방 저장소 웹페이지를 만들어보려고 한다. 구성은 다음과 같다 Back-end : Spring Boot 3.0.6 Front-end : React RDBMS : PostgreSQL File Server : 보유중인 NAS Front-end에서 사용할 Library들은 코딩애플의 React 강의와 구글링으로 검색한 여러 방법을 섞어서 사용할 예정이다. React-Router React-Bootstrap Styled components Immutable Open Color Axios Reduxjs/Toolkit

memo, useMemo

memo 자식 Component가 재렌더링하기 부담스러운 상황이 있을 수 있는데, 이 때 memo hook을 사용하면 불필요한 재렌더링을 막을 수 있다. (https://react.dev/reference/react/memo) import {memo, useState} from 'react' // 기존 component 정의 //function ChildComponent() { // return( // Content // ) //} // memo hook을 사용한 component 정의 let ChildComponent = memo(function() { return Content }) function ParentComponent() { let [count, setCount] = useState(0) r..

개발/React 학습 2023.04.27