문제 상황프로젝트를 수행하면서 다음과 같은 상황이었다. cafe, beverage, document 세 엔티티에 대해 cafe : beverage = 1 : n 관계였으며, beverage : document = 1 : 1 관계를 갖는다. 세 개의 엔티티를 조인하고 특정 컬럼만 뽑아내기 위해 직접 CafeRepository에 다음과 같이 nativeQuery를 날린 상황이었다.package com.alpha.DLINK.domain.cafe.repository;import com.alpha.DLINK.domain.cafe.domain.Cafe;import org.springframework.data.jpa.repository.JpaRepository;import org.springframework.data..

이전에 next.js 프로젝트 생성 후 구조를 분석하는 글을 포스팅했다. 이번에는 Routing에 대해서 공부해보도록 하겠다. [Next.js] 1. Next.js 시작하기내가 몸 담고 있는 국민대학교 소프트웨어융합대학 웹 학술 동아리 대WINK의 공식 홈페이지 만들기에 사용된 Next.js spring이랑 express.js만 해봤기 때문에 typescript나 react에 대한 선수 지식이 없어서sksmsfbrjs51.tistory.com 1. Routing 구조- Nested Routing (중첩 경로)원하는 엔드포인트를 설정하기 위해 directory/directory 구조로 중첩하여 생성하는 것이다. 중첩 경로에서는 세그먼트의 구성 요소 가 상위 세그먼트의 구성 요소 내에 중첩된다.- Dynam..

내가 몸 담고 있는 국민대학교 소프트웨어융합대학 웹 학술 동아리 대WINK의 공식 홈페이지 만들기에 사용된 Next.js spring이랑 express.js만 해봤기 때문에 typescript나 react에 대한 선수 지식이 없어서 어려울 것 같다... 처음 다뤄보기 때문에 기초부터 차근차근 다뤄보자1. Next.js란?Next.js는 풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크이다. React 구성 요소를 사용하여 사용자 인터페이스를 구축하고 Next.js를 사용하여 추가 기능과 최적화를 수행할 수 있다. 2. Next.js 시작하기다음 명령어로 프로젝트를 생성할 수 있다.npx create-next-app@latest 이 방식은 react, react-dom, next 라이브러리를 자..

# Docker 실행중인 컨터이너 확인sudo docker ps# Docker 모든 컨테이너 확인 (정지된것도 포함)sudo docker ps -a# 현재 실행 중인 컨테이너 중지sudo docker stop [container]# 최신 docker image pullsudo docker pull {docker_username}/{docker_image}# 로그 실시간 모니터링 가능. 단, 해당 컨테이너가 restart or stop 되기전까지 콘솔 종료 불가.sudo docker attach [container_id]# 컨테이너의 모든 로그를 보여주고, 로그를 실시간 모니터링 가능.sudo docker logs -f [container_id]# 컨테이너의 로그를 number 만큼 보여줌.docker l..

이전에 GitHub Actions를 사용하여 로컬 환경에서 git push 시 자동으로 빌드 파일을 생성하여 도커 허브에 업로드 해주는 기능을 구현해보았다. - 이전 블로그 포스트 [Spring] GitHub Action을 이용한 CI 구현 (Docker 사용)본 프로젝트에서 로컬에서 푸쉬한 프로젝트를 github actions를 통해 build하고 빌드된 파일을 도커 이미지로 업로드하여 EC2에서 pull 받아 사용하는 방식으로 아키텍쳐를 설계하였습니다.  1. CI 구sksmsfbrjs51.tistory.com 이번엔 자동 빌드에서 끝나지 않고 자동 배포 (CD) 까지 구현해보도록 하겠다. 1. EC2에 연결하기 위한 GitHub Secret 환경 변수 등록 workflow에서 필요한 ec2의 hos..

본 프로젝트에서 로컬에서 푸쉬한 프로젝트를 github actions를 통해 build하고 빌드된 파일을 도커 이미지로 업로드하여 EC2에서 pull 받아 사용하는 방식으로 아키텍쳐를 설계하였습니다. CI / CD란?CI/CD는 약어로, 몇 가지의 다른 의미를 가지고 있다.CI/CD의 "CI"는 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration)을 의미한다. CI를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 리포지토리에 통합되므로 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있다. CI/CD의 "CD"는 지속적인 서비스 제공(Continu..

1. MongoDB 설치하기https://mongodb.com/try/download/community위 링크에서 다운로드 가능하다.설치 중 다음과 같은 화면에서 해당 박스에 체크를 하지 않고 Next를 누른다.설치 이후 중요한 단계를 거쳐야 한다.바로 서버를 실행하기 전에 데이터가 저장될 폴더(C:\data\db)를 먼저 만들어야 한다.터미널에서 몽고디비를 실행할 수 있는 MongoSh(몽고쉘)을 설치해야 한다.https://mongodb.com/try/download/shell 2. MongoDB 연결하기몽고쉘을 설치한 이후 터미널에서 $ mongosh 을 입력하면 몽고디비에 접속할 수 있게 된다.그럼 프롬프트에서 test> 로 바뀌게 되는데, 맨 처음 누구나 몽고디비에 접속할 수 있으므로 관리자 계..

1. 프로젝트 시작프로젝트 시작 시 패키지 정보들을 저장해야 하기 위한 기록을 남겨야 한다npm init터미널에서 위 코드 실행 시 만들고자 하는 앱의 정보들을 기입할 수 있다.2. 패키지 설치npm i [패키지명]현재 진행하는 프로젝트에서는 express, express-session, morgan, dotenv, cookie-parser, passport, nodemon 모듈을 사용하고 있다.express-session : express에서 세션을 관리하기 위한 모듈morgan : 로깅을 관리해주는 모듈GET /favicon.ico 500 6.647 ms - 26dotenv : 오픈 소스에 코드를 올릴 때 노출되면 안되는 값들을 .env 파일에 모아두기 위한 모듈cookie-parser : 쿠키 관리..