포켓몬슬립 식재료 가방을 캡쳐해서 올리면 식재료 수량이 저장되면 좋겠다...하면 되겠다! 1. Vision API 1.0. Google Cloud Vision API 란?Google에서 제공하는 머신러닝 기반 이미지 분석 AI이미지 인식, 객체 검출 등에서 매우 효과적으로 사용할 수 있는 API 제공아래 사이트에서 다음과 같이 샘플로 분석해볼 수 있다https://cloud.google.com/vision?hl=ko 1.1. Vision AI 환경 준비https://chung-develop.tistory.com/47 Google Vision AI(이미지분석 API) 적용-이미지 내 텍스트 추출하기(OCR)-1편Google Vision AI(이미지분석) 적용하기-이미지 내 텍스트 추출하기(OCR)..

0. 상황기존에 EC2에 SSH(port 22) 접속에는 문제가 없었음웹 서버를 구축해서 오픈한 뒤 접속이 타임아웃!하지만 간헐적으로 될 때도 있다 1. 예상 원인퍼블릭 IP 변경에 따른 DNS/접속 지연 문제인스턴스를 중지/시작하거나 리부트 하는 경우 IP가 변경될 수 있음VPC 설정이나 퍼블릭 IP 갱신 등 영향으로 IP 변경 가능신규 인바운드 포트가 열리면서 보안그룹, 네트워크 ACL 설정이 추가됐을 가능성또는 트래픽이 증가했을 때 간헐적인 불안정성 야기탄력적 IP 적용으로 고정된 주소를 사용하여 IP 변경 리스크를 제거하고 SSH 접속 안정성을 확보하자! 2. 탄력적 IP 적용 2.1. 탄력적 IP 생성 2.2. 탄력적 IP 주소 연결탄력적 IP 주소 선택 → 탄력적 IP 주소 연결 →..

[Next.js] Thymeleaf 기반 구조 Next.js로 리팩토링 : Next.js 준비 및 설정 / Docker 컨테이너화 / Nginx 프록시 설정이전 Thymeleaf로 간단한 페이지를 제공하던 프로젝트에서 Next.js 프론트를 추가하면서백엔드 컨트롤러를 @Controller에서 @RestController로 변경했습니당그러면서 JSON 응답의 일관성을 위해 공통 응답 포맷 적용ㄱ 1. @Controller전통적은 Spring MVC의 컨트롤러 어노테이션주로 View(화면)을 반환하기 위해 사용@ResponseBody 어노테이션을 활용하여 JSON 형태 데이터 반환 가능@Controller@RequestMapping("/ingredients")public class Ingredie..

기존 프로젝트는 Thymeleaf 기반의 간단한 페이지로 구성되어 있었는데프론트 협업을 대비해서 연습해보고 싶어서 Next.js 기반으로 리팩토링‼ 1. Next.js 란?React를 위해 만든 오픈 소스 JavaScript 웹 프레임워크React에는 없는 기능 제공서버 사이드 렌더링(SSR; Server-Side Rendering)정적 사이트 생성(SSG; Static Site Generation)증분 정적 재생성(ISR; Incremental Static Regeneration) 1.1. SSR vs CSR SSR (Server-Side Rendering)CSR (Client-Server Rendering)JavaScript 로딩서버에서 JS 로딩→ 완성된 HTML 클라이언트로 전달(초기 로..

1. 프로퍼티(Props) 1.1. 프로퍼티(props)란?properties의 줄임말상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용 (단방향)수정할 수 없다 (자식 입장에서 읽기 전용)[Example] propstext=”Click”이 props자식 컴포넌트(Button)이 이 값을 받아 사용 1.2. 컴포넌트에 props 전달하기 1.2.1. 자식 컴포넌트에 props 전달App.js : 부모 컴포넌트person(객체)와 money(숫자) 전달import Content from "./components/Content";export default function App() { return ( );} 1.2.2. 자식 컴포넌트 내부에서 props 읽기여러 개 프로..

0. React (리액트)0.1. React란?리액트(React) : SPA을 위한 자바스크립트 라이브러리웹 UI를 작성하기 위한 목적재사용을 위해 ‘컴포넌트’라는 작은 단위 기반 개발여러 개의 컴포넌트를 조합하여 UI 작성SPA(Single Page Application) : 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트HTML, CSS, JavaScript 파일을 최초 1회만 로드이후에는 JS 파일을 통해 DOM 또는 필요한 HTML 파일을 조작 0.2. React의 특징 0.2.1. 리액트 컴포넌트UI의 특정 부분과 관련된 기능을 컴포넌트 단위로 개발 (JavaScript)재사용 가능여러 컴포넌트를 모아 웹 ..

이전 글에 이어서 CI/CD 구성을 이어서 함미다이전 글 : [CI/CD] EC2-Docker-GitHub Actions CI/CD 구성 (1) : EC2 / RDS / Docker 세팅 1. EC2 서버 환경 설정배포 디렉터리 생성sudo mkdir -p /opt/posleepsudo chown ec2-user:ec2-user /opt/posleep # 소유자/그룹 변경애플리케이션 환경변수 설정위치 : /opt/posleep/app.envcat > app.env :3306/posleep?useUnicode=true&characterEncoding=utf8SPRING_DATASOURCE_USERNAME=SPRING_DATASOURCE_PASSWORD=SERVER_PORT=8080EOF ..

포켓몬 슬립 게임하면서 취미로 요리 레시피 계산기 사이트를 만들고 있었는데CI/CD 구성을 해보고 싶더라구요전체적인 네이밍은 무심코 설정했던 posleep!렛츠고 😎 0. CI/CD 구성 0.1. 구성 요소GitHub (소스 저장소 + Actions)Actions 트리거 : main 브랜치에 push.github/workflows/cicd.yml 파일에 빌드/배포 파이프라인 정의Docker Hub (이미지 저장소)GitHub Actions가 빌드한 Spring 애플리케이션 이미지를 pushEC2는 최신 이미지를 pull 받아서 실행AWS EC2 (애플리케이션 서버)Docker + Docker Compose로 컨테이너 실행/opt/posleep/docker-compose.yml 기준으로 애플..

1. 영속성 컨텍스트 (Persistence Context) 1.1. 영속성 컨텍스트란?JPA가 데이터베이스와 직접 연결하지 않고 엔티티 객체를 관리하는 메모리 공간엔티티를 관리하는 1차 캐시(저장소)매번 DB-JPA 직접 통신하지 않고, 엔티티를 보관하면서 변경 사항 추적 1.2. 엔티티의 생명주기 1.2.1. 비영속 (new/transient)영속성 컨텍스트와 전혀 관계가 없는 상태Member member = new Member();member.setId("member1");member.setUsername("홍길동"); 1.2.2. 영속 (managed)영속성 컨텍스트에 저장된 상태EntityManager em = EntityManagerFactory.createEntityManager();em..

1. Spring AOPAOP (Aspect-Oriented Programming) : 관점 지향 프로그래밍을 지원하는 기술로깅, 보안, 트랜잭션 관리 등과 같은 공통 관심사를 모듈화코드 중복을 줄이고 유지 보수성 향상핵심 로직과 부가 기능 분리 1.1. 주요 용어용어설명Aspect공통적인 기능들을 모듈화한 것을 의미TargetAspect가 적용될 대상 (메소드, 클래스 등이 해당)Join pointAspect가 적용될 수 있는 시점 (메소드 실행 전, 후 등)AdviceAspect의 기능을 정의한 것Point cutAdvice를 적용할 메소드의 범위를 지정 1.2. 주요 어노테이션어노테이션설명@Aspect해당 클래스를 Aspect로 사용하겠다는 명시@Before대상 메소드가 실행되기 전에 Advic..