인텔리제이 Settings에 들어가서 File Encoding에서 UTF-8로 변경 후 옆에 ascii 체크!

시스템 구성 Spring boot 2.7.5 Gradle Java 11 Intellij Ultimate 라이브러리 thymeleaf jpa web lombok h2 DB 프로젝트 구조 프로젝트 구조는 위와 같은 구조를 따라갈 것이며 각 내용이 무엇을 하는지는 https://magicmk.tistory.com/4 Spring boot 패키지 구조 및 내용 spring boot의 구조를 살펴보고 각 기능별로 살펴보겠습니다. 구조 Spring boot는 목적에 따라 패키지를 따로 생성해서 프로젝트를 관리하는데 크게 나누어 보자면 다음과 같다. Controller DTO Service Reposi magicmk.tistory.com 이 전에 작성한 내용을 보면 이해하기 쉬울 것 같다. 구현 우선 회원가입 관련한..

웹소켓 서버를 생성 및 구동하려다 해당 오류를 만난다면 살짝만 수정해주면 된다. ws 버전에 관한 문제 // 기존코드 import ws from "ws"; const wws = new ws.Server({ server: HTTPServer, }); 위 코드에서 // 수정코드 import ws, { WebSocketServer } from "ws"; const wws = new WebSocketServer({ server: HTTPServer, }); 위와 같이 변경하면 된다.

회사 업무를 진행하다가 Element를 리사이징 했을 때 window resize 이벤트가 비정상적인 속도로 실행되어 Canvas의 annotation이 오류를 일으키는 것을 확인하였다. 최초 canvas annotation 부분의 코드를 수정하려고 했는데 해당 부분에는 문제가 없는 것 같아 리사이징 이벤트 자체를 수정하기로 하였다. 브라우저를 리사이징 할 때는 이상이 없지만 Element를 리사이징 했을 때 오류가 발생하는 경우 window resize 이벤트를 약간 수정할 필요가 있다. // 기존 코드 $(window).resize(function() { initializePerfectScroll(); if(false == checkCanvasImageLoaded()) { return; } selec..

구조 기본적으로 Spring 프로젝트 내부에 React가 들어가는 형식의 구조로 구성한다. 프로젝트 구조는 본인 편한 대로 구성해도 무방하다. Spring 프로젝트 생성 spring project 생성은 이곳으로 본인이 선호하는 java 버전과 프로젝트 내용을 선택하여 만들면 된다. frontend를 제외하고 위와 같이 프로젝트가 생성이 된다. React 프로젝트 생성 이제 react 프로젝트를 생성할 건데 위치는 원하는 곳에 넣어주면 된다. 나는 spring 프로젝트의 루트 디렉토리에 생성하였다. npx create-react-app {project name} {project name} 이라고 적은 곳에 원하는 app 이름을 작성하면 된다. proxy 설정 이상태로는 프론트와 백이 서로 다른 포트를 사..

혹시 나중에 PC를 변경하여 또 커스터마이징 해야 할 수 있으니 남겨놓는 글 우선 WSL을 설치해야 한다. https://docs.microsoft.com/ko-kr/windows/wsl/install WSL 설치 wsl --install 명령을 사용하여 Linux용 Windows 하위 시스템을 설치합니다. Ubuntu, Debian, SUSE, Kali, Fedora, Pengwin, Alpine 등 원하는 Linux 배포판에서 실행되는 Windows 머신에서 Bash 터미널을 사용할 수 있습니 docs.microsoft.com wsl --install만 입력하면 wsl2 및 ubuntu 등 알아서 설치해주니 크게 신경 쓰지 않아도 된다. 그리고 Windows 10의 경우 기본적으로 내장되어 있는 명령..

평소처럼 프로젝트 하나를 생성하여 이것저것 패키지를 설치하던 중 @babel/node를 설치하였음에도 위와 같은 메세지와 함께 서버가 실행되지 않아서 당황했는데 이런 경우에는 npm i @babel/node -g global 옵션과 함께 설치해주면 된다. // 요즘 잔잔바리들이 나를 괴롭힌다 까먹지 않게 메모

이번에 NodeJS와 React를 이용하여 토이 프로젝트를 진행하기 위해 기본적인 서버 및 프론트 세팅을 진행하려고 한다. 위와 같은 형식으로 구조를 만들어 보려고 한다. Server 우선 Node 프로젝트를 하나 생성한다. mkdir "projectName" cd "projectName" mkdir backend cd backend npm init -y backend 디렉토리 내부에 package.json 파일이 생성되었을 텐데 해당 내부로 들어가 license를 "MIT"로 변경하고, main, keywords 등 필요 없는 내용은 삭제한다. { "name": "backend", "version": "1.0.0", "description": "", "scripts": { "start": "nodemo..