개발 이야기/backend10

• 

  리액트 프로젝트를 위한 koyeb 백엔드 배포 세팅법 리액트로 채팅앱을 만드려다가, 백엔드 구성에 너무 힘을 주고 싶지는 않기도 하고 AWS로 배포하기에 부담이 되어 알아보던 중 많은 분들이 Koyeb을 사용하는 것을 알고 백엔드를 이에 맞춰 구성하기로 했습니다.    배포 서비스를 Koyeb으로 설정한 이유는 간편하게 백엔드 서비스를 배포하고 관리할 수 있으며, 무료로 사용할 수 있어 비용 부담이 없기 때문입니다. 또한, GitHub 연동을 통해 코드 변경 시 자동으로 빌드 및 배포가 가능해 효율적인 개발 환경을 지원합니다. 오늘은 koyeb으로 백엔드를 초기 세팅하고 간단하게 배포하는 방법에 대해 포스팅 해보겠습니다. 이에 앞서 프론트엔드와 백엔드를 어떻게 구성했는지 알려드릴게요.       프로젝트 구성제 프로젝트는 React로 만든 프론트엔드와 No.. 개발 이야기/backend 2024. 9. 9.

• 

  Electron.js에서 HTTP 대신 TCP 서버 사용하기 Electron.js에서 HTTP 서버가 아닌 TCP 서버로 구동할 필요성이 생겼습니다. 이에 Electron.js에서 TCP 서버를 어떻게 연결하는지에 대한 순서 및 TCP 서버의 개념을 정리해보려고 합니다. 이 글은 TCP 서버의 기본 개념부터 시작하여 Electron 환경에서의 구현 방법까지 설명할 것입니다. Electron 환경 설명Electron은 웹 기술을 사용하여 데스크톱 애플리케이션을 개발할 수 있는 프레임워크입니다. 기존의 Electron 애플리케이션은 주로 HTTP 통신을 사용하여 외부 서버와 데이터를 주고받습니다. 이는 웹 애플리케이션과 유사한 방식으로, 웹 서버가 필요한 모든 리소스를 처리하고 클라이언트 측에서는 그 결과를 받아 사용자에게 보여주는 형식입니다. 하지만 Electron.. 개발 이야기/backend 2024. 5. 10.

• 

  node express에서 html, js, css파일 정상적으로 불러오기 express에서 html을 불러올 때는 주의해야 할 사항이 있다. 우리는 보통 다음과 같은 방식으로 html을 연결하곤 하는데, 이렇게 하면 해당 html에 script로 박아넣은 js파일이나 css파일 등을 바로 읽지 못하고 오류가 날 수 있다. 주의사항 이를테면 아래처럼 html 파일을 연결했을 때, 아래처럼 404에러가 줄줄이 뜨는 것을 확인할 수 있을 것이다. 해결방법 해당 오류에 대해서는 아래 페이지에서 해답을 찾을 수 있었다. Serving static files in Express Serving static files in Express To serve static files such as images, CSS files, and JavaScript files, use the express.. 개발 이야기/backend 2023. 10. 9.

• 

  스프링부트 미니 프로젝트 만들기 - 리액트 연동 초기 세팅 개발환경 포스팅 하기 앞서 내가 만들 미니 프로젝트의 개발환경은 이러하다. BACKEND framework | springboot build tool | gradle ide | STS FRONTEND library | react.js ide | VScode 스프링부트에 리액트를 연동해보고 테스트 데이터도 받아 와보자. 1. 스프링부트 프로젝트 내 React 프로젝트 생성 (1) 터미널 오픈 (2) 리액트 프로젝트 폴더 생성: 터미널에 아래 명령어 입력. 프로젝트명은 영어 소문자로 해야 할거다. npx create-react-app 프로젝트명 이렇게 나오면 성공. 2. 리액트 경로 확인 나는 이클립스 터미널이 영 텍스트도 짤리고 엑박도 많아서 그냥 탐색기 들어가서 확인을 해보았다. 탐색기에 스프링부트 프로.. 개발 이야기/backend 2023. 10. 9.

• 

  스프링부트 미니 프로젝트 만들기 - MVC 모델 큰 그림으로 개념잡기 문제점 일단 이번 프로젝트를 진행하기 전 개념 정립을 한번 더 해야 함을 느꼈다. MVC모델이 이해가 될 듯 하다가 말았던 이유는 직장 프로젝트에 쓰인 class가 책이나 인강에서 접하는 class와 달랐기 때문이다. 또한 이해가 안가는 용어들(dto, dao, vo, controller 등)을 검색해보면 어디는 dto를 쓰고 어디는 안 쓰고, 어디는 entity를 쓰고 어디는 안썼다. 혼란했다...숲을 모른 채로 나무부터 봐서 그런걸까. 서둘러 큰 흐름을 이해해야 할 필요를 느꼈다. MVC모델 개념 MVC모델에 대해서는 찾아보면 뭐가 많이 나온다. 그 중에 가장 직관적인 도식은 아래 그림이였다. 이제 좀 개념이 잡히는 데이터의 흐름. 나만의 버전으로 텍스트로 한번 도식화 해보려 한다. TIL스프링부트 .. 개발 이야기/backend 2023. 10. 9.

• 

  스프링부트 미니 프로젝트 만들기 - lombok, log4j2 설치 한번 날리고 다시 쓰는 포스트. 힘이 없다...... 무튼 나는 이제 gradle로 개발하려고 한다. framework | springboot build tool | gradle ide | STS 스프링부트 초보의 미니 프로젝트 만들기 lombok 설치하기 기존 포스트에서 나는 스프링부트 설치할 때 dependency에 롬복도 설치를 해놔서 추가로 뭘 할게 없다. 그러나 혹시라도 모르는 분들을 위해 기록을 해볼까 함. 1. build.gradle 2. dependencies에 아래 항목 추가 dependencies { // ... compileOnly 'org.projectlombok:lombok' annotationProcessor 'org.projectlombok:lombok' } 3. build.g.. 개발 이야기/backend 2023. 10. 9.

• 

  스프링부트 미니 프로젝트 만들기 - Maven, Gradle 두 버전으로 프로젝트 생성 서론 처음엔 백을 스프링으로 하려고 하다가 스프링부트로 프로젝트를 진행해도 문제 되지 않을 거라는 말을 듣고 그렇게 하기로 했다. 무튼 해당 블로그는 그냥 빈틈이 아주 많을 것으로 예상되는 스프링부트로 프로젝트 만드는 기록이다.. 빌드툴은 Maven으로 하려고 하고 프론트는 리액트로 할까 생각중인데 이건 나중에 상황 봐서 마저 정하련다. Maven 이용할 경우 1. STS와 Java는 이미 준비되어 있는 상태. 기존에 쓰던 workspace에 spring starter project를 생성함. 참고: https://powernote.tistory.com/35 [STS] spring boot 프로젝트 생성하기. spring boot 프로젝트 생성. 기본 환경 ide: sts 4.11.0 spring : s.. 개발 이야기/backend 2023. 10. 9.

• springboot에 log4j2 설정하기(gradle버전) log4j2 설정하기 springboot 모르는 사람이 보기에도 직관적이었고 gradle 버전 7일 경우의 설정방법이라 따라하기 쉬웠다 8. 스프링부트 Log4j2 적용하기 우선 추후 개발하기 편하게끔 스프링부트에 Log4j2 부터 적용하겠습니다. linked2ev.github.io lombok 설치하기 [Spring Boot] 스프링 부트 로그 설정 (log4j2) 목차 0. 환경 windows10 openjdk version "11" 2018-09-25 IntelliJ Tool Spring Boot 2.5.6 Gradle Project MyBatis + Mysql + HikariCP를 이용해 DB(Mysql) 연동할 프로젝트입니다. 1. 성능 log4j2는 Spring Boot에 기본으로 적용되어있는.. 개발 이야기/backend 2023. 10. 9.

• 

  코딩애플 node.js강의 til 2 - 데이터 아이디 만들기 서론 코딩애플 til 1은 무료강의 내용이라 til 올리기 괜찮았는데 이후 내용부터는 유료분이라 알아서 좀 걸러서 포스팅하기로 함. 코드를 가져다 써야 할 부분은 그냥 제 선에서 최대한 어글리하게 쓸게요.. 코딩애플 강의 짱. 돈 하나도 안아까운 강의!!! EJS 사용하는 방법 서버데이터 집어넣어서 html 만드는 법: ejs사용 npm install ejs 그리고 server.js에 아래 임포트 app.set('view engine', 'ejs'); 이후 list.js의 확장자를 js대신 .ejs로 바꾸자. 파일 위치는 항상 views라는 폴더 안으로 위치시켜야함. ejs파일 안에 변수 이름 작성하는 법은 ejs 문법을 반복문 돌리려면 그냥 이 오징어같은 기호 넣으면 됨; 그리고 이건 내가 작성한 db.. 개발 이야기/backend 2023. 10. 9.

• 코딩애플 node.js강의 til - node.js 설치부터 실행까지 서론 코딩애플 없었으면 나 울었다. 코딩애플 강의가 세상에서 젤 재밌다... 코딩애플 온라인 강좌 - 개발자도 단기완성! 단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절 codingapple.com 코딩애플 til 포스트는 그냥 내가 까먹지 않기 위해 적어놓은 것들 위주로 올림. 설치 방법 1. nodejs 설치 - 그냥 구글에 검색해서 다운받으면 됨 2. vscode에서 express 라이브러리 설치: npm init -> 엔터 치고 entrypoint에만 server.js라고 쓰기. 그럼 package json이 생성됨. -> npm install.. 개발 이야기/backend 2023. 10. 9.