BOJ가 서비스를 종료하고 CodeUp에 있는 문제를 풀고 있는데,파일을 문제번호로 저장하고,,채점 결과 복붙하고,,,Commit message 작성하고,,,이 모든 걸 단축키 하나로 해결하고 싶어 VSCode의 Task를 활용하기로 합니다 0. VS Code의 Task 관련 용어 0.1. .vscode 폴더- Visual Studio Code에서 해당 프로젝트에만 적용되는 전용 설정을 담고 있다- 파일 포맷, 디버깅, 자동화 등의 다양한 기능에 대해 프로젝트마다 다른 개발 환경을 유지할 수 있도록 도와준다 0.2. tasks.json- 자동화 명령(Task)를 정의하는 파일 1. tasks.json 파일 생성 -아래와 같이 커스텀 Task를 등록하여 사용할 수 있다 2. tasks..

포켓몬슬립 식재료 가방을 캡쳐해서 올리면 식재료 수량이 저장되면 좋겠다...하면 되겠다! 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..