z00h_성장일지

최신 글

• 

  [새싹 금천 5기] Docker Volume, network 설정 (이노그리드_기업맟춤형 클라우드 인재 양성 캠프) Docker 에서 데이터 관리법 3가지1. VolumeDocker가 관리하는 디스크 저장소데이터를 호스트의 디스크에 저장하지만, Docker 전용 공간에서 따로 관리됨일반적으로 데이터 보존이 필요한 경우에 사용가장 자주 쓰임 2. Bind Mount호스트의 디렉토리(폴더)를 그대로 연결Docker 외부에 있는 원하는 경로를 컨테이너와 공유할 수 있음개발 시 소스 코드 자동 반영 등 실시간 연결에 유용bashdocker run -v /host/path:/app mycontainer 3. tmpfs Mount메모리에만 저장 (디스크 X)컨테이너가 꺼지면 데이터는 사라짐임시 파일이나 보안 데이터 저장에 사용bashdocker run --tmpfs /app/tmp mycontainer 방식저장 위치특징주로 .. 2025.06.19

• 

  [새싹 금천 5기] Docker 실습 및 명령어 정리 (이노그리드_기업맟춤형 클라우드 인재 양성 캠프) Dockerfile이란 ?도커 이미지를 빌드하는데 필요한 명령어를 순서대로 기술한 텍스트 파일이다. DockerFile 기본 지시어지시어(Instruction)의미FROM베이스 이미지 지정RUN베이스 이미지에 새로운 레이어를 추가해 커맨드를 실행하고, 결과를 빌드 이미지에 반영CMD컨테이너를 시작할 때 실행할 커맨드를 설정LABEL이미지에 레이블을 설정EXPOSE컨테이너에서 공개하는 포트 번호 설정ENV환경 변수 설정ADD이미지에 파일 복사 (압축 파일의 경우 압축을 해제한 후 복사)COPY이미지에 파일 복사ENTRYPOINT컨테이너를 시작할 때 실행할 커맨드 설정VOLUME볼륨이 마운트될 위치를 설정USER커맨드를 실행할 사용자 ID 설정WORKDIR커맨드를 실행할 작업 디렉터리를 설정ARG빌드 시에.. 2025.06.17

• 

  [새싹 금천 5기] Docker 개념 및 이해 (이노그리드_기업맟춤형 클라우드 인재 양성 캠프) Docker 란?애플리케이션을 ‘컨테이너’ 라는 독립된 환경으로 패키징하여 실행할 수 있도록 해주는 오픈소스 플랫폼이다.다른 환경에서도 일관된 실행 환경을 제공하기 때문에 개발/테스트/운영 환경 간의 충돌을 크게 줄여준다. Docker의 주요 구성 요소Docker는 내부적으로 Client–Server–Repository 구조로 구성되어 있다.클라이언트가 요청시 서버는 이미지 생성 → 컨테이너 생성1. Client (CLI)사용자가 docker 명령어를 입력하여 서버에 요청을 보낸다.예: docker run, docker build, docker push 등 2. Server (Daemon)클라이언트 요청을 받아 실제 작업을 수행백그라운드에서 동작하며, dockerd라는 이름의 데몬(daemon)으로 실행.. 2025.06.16

• 

  [새싹 금천 5기] AWS Cloud Watch, Auto Sclaling 활용 (이노그리드_기업맟춤형 클라우드 인재 양성 캠프) 지난 포스팅에서 로드밸런싱으로 부하를 분산시키는 실습까지 진행하였다. 이번 포스팅에서는 인스턴스에 트래픽을 유입시키고 경보를 설정하여 부하 알림을 받고오토스케일링을 활용하여 부하를 처리하는 것 까지 실습을 진행해보려고 한다. Amazon SNS(Simple Notification Service)메시지 전달을 위한 완전관리형 서비스여러 시스템 또는 사용자에게 푸시 알림, SMS, 이메일, Lambda 호출 등을 통해 메시지를 빠르게 전달할 수 있다.퍼블리셔-구독자 모델을 기반으로 하며, 다양한 구독자에게 동시에 메시지를 전송하는 데 적합하다. 토픽(Topic)Amazon SNS에서 메시지를 발행(publish)하고 구독자들에게 전달하는 중앙 허브발행자는 토픽에 메시지를 보내고, 구독자들은 해당 토픽을 구독.. 2025.06.09

• 

  [새싹 금천 5기] AWS AMI 생성, 로드밸런서 활용 (이노그리드_기업맟춤형 클라우드 인재 양성 캠프) 이번포스팅에서는 EC2 구성요소를 알아보고 AMI로 인스턴스 생성, 로드밸런서 활용 실습을 진행해보려고 한다. EC2 구성요소 AMI(Amazon Machine Image)인스턴스를 시작하는 데 필요한 소프트웨어 구성(운영 체제, 애플리케이션 서버, 애플리케이션)이 포함된 템플릿사용자 커뮤니티 또는 AWS Marketplace에서 제공하는 AMI를 선택하거나, 자체 AMI를 선택할 수 있음 EBS(Elastic Block Store)https://aws.amazon.com/ko/ebs/EBS는 EC2를 위해 설계된 사용이 쉽고 확장 가능한 고성능 블록 스토리지 서비스EBS 볼륨은 특정 가용 영역에 위치하며 여기에서 자동으로 복제되므로, 단일 구성 요소에 장애가 발생하더라도 안전하게 보호됨모든 EBS 볼륨.. 2025.06.08

혼자만든 나만의 웹

• 

  CarStoreApi 시연영상 CarStoreApi 시연영상(1) - 비로그인 상태 시연영상 CarStoreApi 시연영상(2) - 로그인후 시연영상 https://github.com/joo9710/CarStoreApi GitHub - joo9710/CarStoreApi Contribute to joo9710/CarStoreApi development by creating an account on GitHub. github.com 2023.01.09

• 

  CarStoreApi 완성본 (기능 설명) CarSotreApi에 대한 소개 및 기능 설명을 포스팅 하려고 한다. 이번 포스팅에서는 사진으로 전반적인 기능을 보여주고 다음 포스팅에서는 모든 기능을 다뤄 보면서 시연영상을 포스팅할 예정이다. 전체적인 주요 기능은 다음과 같다. 로그인 국산/수입 차량 분류 통합검색 -> 검색조건 (작성자, 차량명, 지역) 회사별 분류/ 지역, 회사별 차량 분류 상세페이지 (다중 이미지 업로드) 글 수정, 삭제, 찜하기, 댓글 추가/수정/삭제 글 쓰기 (로그인 시 가능) 마이페이지 - 찜목록, 판매중인 차량 한눈에 보기 찜목록 상세보기, 판매중인차량 상세보기 회원정보수정 - 닉네임 중복확인, 연락처, 비밀번호 변경 로그아웃 회원가입 (email, 닉네임 중복확인) 푸터영역 (홈, 찜목록, 깃허브, 유튜브, 인스타, 블.. 2023.01.06

Spring boot

• 

  Springboot [다중 파일 업로드 처리] 오랜만에 포스팅을 하게 되는 것 같은데 그동안 vue.js로 디자인을 구현하다가 차량 상세페이지에서 기존에는 단일 파일 업로드로 차량 썸네일, 차량사진 각 1장씩 등록하여 보여주었다. 차량 사진을 여러장 추가하여 사용자에게 보여줄수 있도록 하는 기능이 필요하여 springboot에서 단일 파일업로드 메소드를 다중 파일업로드로 수정 해보았다. 참고로 vue.js의 input태그에서 multiple속성을 이용하면 파일을 여러장 선택 가능하다. vue에 관련한 내용은 다음 포스팅에서 간단하게 다루어 보도록 하겠고 vue.js에서 요청을 보내면 file이 list형식으로 fileList를 서버로 보낸다. 기존의 Controller에서는 매개변수로 MultipartFile타입으로 받아와서 단일 파일 업로드 처리를.. 댓글 0 2022.10.28

• 

  Springboot [회원정보 수정/ 수정시 관련 게시물도 변경] 이번 포스팅에서는 회원정보를 수정하는 기능을 해보았다. 회원정보 수정 목록은 3가지로 만들었다. 1. nickName(닉네임) 2. phoneNumber(연락처) 3. password(비밀번호) 회원정보를 담고있는 member테이블을 우선 보면 7가지 컬럼이 있는데 위의 3가지 컬럼 제외 나머지의 회원 정보들은 변동될 여지가 거의 없기때문에 수정이 불가능하다. 현재 차량 판매 글을 쓰면 car테이블의 author에 nickName을 넘겨주어 (car.author = member.nickName)의 형식으로 글정보가 담겨 있는데 회원정보인 닉네임이 변경되면 글의 author 또한 똑같이 바뀌어야 한다. 회원정보 수정시 닉네임을 바꾸지 않으면 상관이 없지만 수정을 한다면 자동으로 바뀌게 기능을 만들어 놓았다.. 댓글 0 2022.09.27

• 

  Springboot [mybatis (테이블 LEFT JOIN)] 현재 마이페이지를 만들고 있는데 마이페이지에 보여질 항목은 1. 나의 찜목록 2. 판매중인 차량 (자신이 올린 글의 조회수, 댓글수) 위와 같이 크게 나누어 보았다. 판매중인 차량의 상태를 직관적으로 빠르게 파악하기 위하여 조회수 및 댓글 수를 보여주도록 하였다. 자신이 올린 글의 조회수는 Car테이블의 readCount 컬럼이 있기때문에 이를 이용하여 쉽게 보여줄 수 있지만 글의 comment수는 Car테이블 자체로만 보면 보여줄 수 없기때문에 방법을 생각하다가 글 관련 정보인 Car 테이블과 댓글관련 테이블인 Comment 테이블을 join을 하여 보여주도록 하였다. 두개의 테이블을 그룹화하여 COUNT를 하면 글에 해당하는 댓글 수를 불러 올 수있다. LEFT JOIN을 사용하여야 하는데 LEST .. 댓글 0 2022.09.26

Vue.js

• 

  Vue.js [다중 파일 업로드 처리] 지난 포스팅에서 springboot로 다중파일 업로드 기능을 구현하면서 vue.js에 관한 얘기를 잠깐 하였는데 이번에 다뤄 보도록 하겠다. 우선 다중파일업로드이기때문에 파일을 1개이상 다중선택이 가능해야 한다. 이것은 input태그의 multiple속성을 사용하면 파일을 바로 여러개 선택가능해진다. ref명을 imageFile로 지정해두었다. @change를 통해 값이 들어오면 자동으로 메소드가 실행되도록 되는데 uplodad메소드에서 imgFile에 선택한 파일이 들어가야한다. 선택한 파일들을 imgFile배열에 넣어야 하는 부분에서 많은 시행착오가 있었다. for문을 사용하지 않아도 ref속성명을 지정해두고 이 값을 이용하면 쉽게 선택한 파일들을 imgFile변수에 넣어줄 수 있게 된다는것을 알게 .. 댓글 0 2022.10.31

• 

  Vue.js [게시판 카테고리별 검색기능] 게시판 카테고리별 검색기능에 대한 vue.js를 구현해보자 ui에서 검색조건을 추가하고 그에 해당하는 category를 받아와서 param으로 같이 넘겨주면 된다. v-select는 분류를 선택하는 태그이다. items인 keywords에는 카테고리로 사용할 [작성자, 차량명, 지역] 을 담아준다. 3개중 하나의 검색조건을 선택하면 해당하는 문자열이 category에 들어가게 된다. 헤더에 실을 param이 하나 늘어났으므로 키워드 입력후 검색 버튼을 누르면 실행되는 keywordSearch메서드에서 params에 category만 추가해주면 된다! url이 car/search로 바뀐것도 유의하도록 하자. ui에서 검색조건(category) '작성자'로 홍길동(keyword)이 쓴 글을 검색해 보자 홍길.. 댓글 0 2022.09.15

• 

  Vue.js [게시판 검색기능] Springboot에서 검색기능을 성공적으로 구현하였으니 vue.js로 frontend를 구현해 보도록 하겠다. template안에서 검색란, 검색버튼을 우선 만들어 보았다. 검색버튼을 누르면 keywordSearch라는 메서드가 실행이 된다. keywordSearch 메서드는 axios get호출로 params 3개를 받아오고 있고 v-model인 this.carName -> keyword, page는 초기값이 1인데 jpa 페이징에서는 page 0 값부터 시작이 되어야 하므로 this.page-1 -> page, size는 초기값 5로 지정하여서 그대로 this.size -> size 로 헤더에 param들을 실어준다. 그 후 this.totalpage값도 받아오고, this.users에 게시글 데이.. 댓글 0 2022.09.15