z00h_성장일지

최신 글

• 

  [AWS] QuickSight로 S3 데이터 시각화하기 이번에는 S3에 저장된데이터(member 테이블)를 QuickSight로 시각화하여 그래프 및 지도로 나타내 보려고 한다.QuickSight가 무엇인지 알아보고 계정 생성 후 실습 진행과정을 정리하였다. 🔍 QuickSight란?Amazon QuickSight는 AWS에서 제공하는 서버리스 비즈니스 인텔리전스(BI) 서비스로,데이터를 시각화하고 대시보드를 통해 공유할 수 있는 클라우드 기반 도구이다. ✅ 주요 특징서버리스인프라 관리 필요 없이 사용 가능 (자동 확장)SPICE 엔진대용량 데이터를 메모리에 로딩해 빠른 분석 가능다양한 데이터 소스S3, Athena, RDS, Redshift, Aurora, Salesforce, Excel 등 연동시각화 지원표, 막대/선형/원형 차트, 지도 시각화 등 다양.. 2025.04.09

• 

  [AWS] S3 파일 업로드시 CSV 파일 한글 깨짐 현상 (해결) member 테이블의 레코드가 담겨있는 CSV 파일을 이전 포스팅에서 한셀을 이용해서 S3에 업로드 하였는데 추가 실습을 위하여 레코드를 40개정도 추가 후 다시 Athena로 쿼리를 사용하는 과정에서 문제가 생겼다. 한셀로 CSV 저장하는 과정에서 쉼표 구분자로 저장이 되지 않아 Athena에서 파일을 잘 읽어오지 못하였다.어쩔수 없이 Excel 파일로 연결 후 '쉼표 분리'로 저장을 하였는데이때 한글이 깨진 상태로 파일이 저장되는 문제가 발생하여 이를 해결하는 과정을 포스팅 하려고 한다.  아래와 같이 member.csv 파일을 열면 한글이 깨져있는 상태다.    Athena는 파일 인코딩이 UTF-8일 경우 자동으로 처리하지만,CSV 파일이 BOM(Byte Order Mark) 없는 UTF-8이라면.. 2025.04.09

• 

  [AWS] Athena 사용 및 쿼리 실행 (S3) ✅ AWS Athena란?Amazon Athena는 AWS에서 제공하는 서버리스(Serverless) SQL 쿼리 서비스이다.즉, 서버를 직접 구축하거나 관리하지 않아도, S3에 저장된 데이터에 SQL로 직접 접근하여 분석할 수 있는 서비스이다. Athena는 필요시에만 SQL 쿼리를 날려 데이터를 분석하는 서비스로, 분석 환경을 빠르게 구성하고 비용을 절감할 수 있는 장점이 있다.  1. S3 버킷에 CSV 데이터 저장 (이전 포스팅 참고) https://z00h.tistory.com/136       ↓ 2. Athena에서 데이터베이스 및 테이블 생성        ↓ 3. SQL 쿼리를 작성하여 데이터 조회 및 분석        ↓ 4. 결과 확인 및 저장 (CSV 다운로드 등)   Athena를 .. 2025.04.09

• 

  [AWS] S3 버킷 생성 CSV파일 업로드 이번 글에서는 S3의 개념과 함께 로컬 db 데이터를 CSV 파일로 변환하여 S3에 업로드하는 과정까지 정리해보았다. S3란Amazon S3는 AWS에서 제공하는 객체 스토리지 서비스로,이미지, 문서, 로그 파일, 백업 등 모든 데이터를 인터넷상에서 안전하게 저장할 수 있다. ✅ S3를 사용하는 이유1. 무제한에 가까운 저장 용량 (확장성)S3는 데이터 용량 제한이 없기 때문에, 수십만 개의 파일도 문제 없이 저장 가능프로젝트가 커져도 따로 서버 증설 없이 그대로 사용 가능2. 높은 내구성 및 안정성S3는 데이터를 여러 위치에 중복 저장해서, 거의 절대적으로 안전하게 보관 가능디스크 고장, 네트워크 문제 등에도 데이터 손실 확률이 매우 낮음3. 다양한 AWS 서비스와 연동Athena, Lambda, Gl.. 2025.04.08

• 

  [AWS] SpringBoot 프로젝트 (EC2) 배포 Mariadb,Maven, git(2) 이번에는 Putty를 이용하여 Ubuntu 콘솔에 접속한 환경에서Git을 설치하고 Ubuntu에 git clone 하여 배포해보려고 한다. 로컬 환경에서 빌드 후 jar 파일을 생성하여 EC2로 가져와도 무방하지만로컬에서 프로젝트 변경사항이 생겼을때 EC2 내에서 연결된 git에서자동으로 pull 받아 EC2 내에서 빌드 할 수 있는 편리함이 있어 git과 연동하여 진행해볼 예정이다.  1. EC2에서 Git 설치 및 설정 ✅ 1.1. Git 설치EC2에 Git이 설치되어 있는지 확인합니다.Git을 아래 명령어로 설치sudo apt update && sudo apt install git -y  Git 설치 확인git —version  ✅ 1.2. GitHub SSH 키 등록EC2에 SSH 키 생성ssh-.. 2025.04.04

혼자만든 나만의 웹

• 

  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