전체 글

[Spring+MySql] Spring에 AWS RDS(MySQL) 연결하기 / driver 에러 해결

AWS에서 RDS를 생성하고, 기존에 세팅해놓은 백엔드 프로젝트에 연결하는 걸 해봤다. 우선 AWS에서 RDS를 생성했다. 그 후, 다른 블로그를 참고해서 build.gradle과 application.yml을 세팅했다. 세팅한 내용은 다음과 같다. spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: [AWS RDS 엔드포인트] username: [master name] password : [password] jpa: hibernate: ddl-auto: update properties: hibernate: format_sql: true 엔드포인트는 RDS 세팅 후 정보란에 나와있다. username과 password는 DB생성할 때..

[개인프로젝트] 개인 프로젝트 시작!

개인 프로젝트 시작 ! 싸피 생활을 끝내고 취업 준비생으로서 열심히 공부 중에 있다. 싸피에서 프로젝트를 여러번 하긴 했지만, 어려운 문제를 해결해나간 경험이라던지, 최적화 방면에서 깊은 고민을 한 경험이 부족하다고 생각해서 개인 프로젝트를 해야겠다고 전부터 마음 먹었었다. 프론트엔드 개발자로 준비를 하고 있기 때문에 처음에는 백엔드를 구해볼까 생각도 했었는데 전부터 백엔드를 맡아서 해보고 싶기도 했고, 아직 프론트가 맞는지, 백엔드가 맞는지 잘 모르는 상태라서 이 고민에 대한 결론을 확실하게 내리기 위해서 프론트와 백엔드를 다 하는 것을 도전해보기로 했다. 우선 프론트는 React와 TypeScript를 사용하려고 생각중이다. React, TS는 사용 경험이 있어서 어느정도 다룰줄은 알지만 아직까지도 ..

[JavaScript] JS null 병합 연산자 ??

null 병합 연산자 ?? 이게 무엇인가? 사실 첨에 봤을땐 우리가 흔히 보는 물음표인데 코딩할 때는 어떻게 쓰이나.. 했는데 검색해봐도 이름을 모르니 그냥 물음표로 인식해버린다..ㅎ 그런데 생각보다 흥미로운 기능을 하는 친구라서 소개해보려고 한다. 사실 이 글도 구글링이 잘 될지는 모르겠지만,,, null 병합 연산자 ES11(ECMAScript2020)에서 도입된 null 병합 연산자 ??은 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. 이게 무슨말인지 코드를 보면서 설명해보면 보통 JS로 코딩을 하면서 다들 || 연산자는 사용해본적이 있을 것이다. || 연산자는 보통 기본값을 설정할 때 사용된다. let foo = n..

[SpringBoot] 등록/수정/조회 API 만들기 - 그리고 중단..

API를 만들기 위한 3개의 클래스 1. Request 데이터를 받을 Dto 2. API 요청을 받을 Controller 3. 트랜잭션, 도메인 기능 간의 순서를 보장하는 Service 스프링 웹 계층은 다음과 같다. 비즈니스 처리를 담당하는 부분은 Domain이다. 모든 로직이 서비스 클래스 내부에서 처리가 된다면 서비스 계층이 무의미하고, 객체란 단순히 데이터 덩어리 역할을 하게 된다. (자세한 내용은 책 참고해주세요!) 그렇기 때문에 이 실습에서는 도메인 모델을 다루고 코드를 작성한다. 각각의 클래스 생성 (경로는 패키지명 참고) package com.jojoldu.book.springboot.web.dto; import com.jojoldu.book.springboot.domain.posts.Po..

[SpringBoot] JPA로 데이터베이스 다루기

현대 웹 애플리케이션에서 관계형 데이터베이스(RDB)는 빠질 수 없는 요소이다. Oracle, MySQL 등 다양하게 쓰이고 있고, 그러다보니 객체를 관계형 데이터베이스에서 관리하는 것이 중요하다. 관계형 데이터베이스를 사용하는 상황에서 SQL는 피할 수 없는 요소이다. 하지만 , SQL은 유지보수하는 것이 어렵고, 패러다임 불일치 문제가 발생한다. 관계형 데이터베이스는 어떻게 데이터를 저장할지에 초점이 맞춰져있지만, 객체 지향 프로그래밍 언어는 메시지를 기반으로 기능과 속성을 한 곳에서 관리하는 기술이다. 이 두개의 패러다임이 서로 다른데, 객체를 데이터베이스에 저장하려고 하니 문제가 발생하고, 이를 패러다임 불일치라고 한다. JPA는 이러한 문제점을 해결하기 위해 등장한다. 서로 지향하는 바가 다른 ..

[SpringBoot] 롬복 소개 및 설치

롬복이란? 롬복은 자바 개발에서 자주 쓰이는 Getter, Setter, 기본 생성자 등을 어노테이션으로 자동 생성해준다. 프로젝트에 롬복 라이브러리 다운로드 build.gradle에 implementation('org.projectlombok:lombok') 추가 후 gradle을 새로고침해준다. 롬복 플러그인 설치는 플러그인 마켓에서 설치한 뒤 여기를 체크해주면 된다. 플러그인은 한번 설치하면 되지만 해당 과정은 프로젝트 마다 설정해줘야한다. 롬복 테스트 package com.jojoldu.book.springboot.web.dto; import lombok.Getter; import lombok.RequiredArgsConstructor; @Getter //선언된 모든 필드의 get메소드 생성 @R..

[Springboot] 스프링 부트에서의 테스트 코드

스프링부트에서의 테스트 코드 최근 회사 채용 공고를 보면 테스트 경험에 대한 경험을 요구한다. 또한 TDD라는 테스트 주도 개발 경험을 요구하는 곳들도 있다. 참고책에서는 TDD가 아닌 단위 테스트 코드에 대해 기술한다. 테스트 코드를 작성해야 하는 이유? 1. 빠른 피드백 - 개발을 하는 과정에서 테스트 코드가 없다면 코드 수정 -> 프로그램 실행 -> API테스트 도구로 HTTP 요청 -> 출력 후 검증 -> 다시 코드 수정 과정을 거친다. 하지만 테스트 코드가 작성된다면 코드 수정 후 간단하게 테스트 코드만 실행시키면 되기 때문에 빠른 피드백을 받을 수 있다. 2. 검증 - 테스트 코드를 작성하면 직접 print문을 작성하여 눈으로 확인해야하는 것들을 자동으로 검증해준다. 3. 기능 보호 - 기존 ..

[SpringBoot] 스프링부트 프로젝트 세팅하기

스프링부트 공부해보고 싶어서 실습을 진행하려고 한다. 원래는 강의 부터 들을까 생각도 했지만, 처음부터 모르는 것 투성이로 강의 듣는것과 실제로 실습을 한 뒤에 강의를 듣는 것은 큰 차이가 있다고 생각이 들어서 그래도 어느정도 아는 상태에서 강의를 들어보고자 빠르고 간단하게 경험해보고자 실습부터 하려고 한다. 다음 책을 참고해서 실습을 진행했다. http://www.yes24.com/Product/Goods/83849117 스프링 부트와 AWS로 혼자 구현하는 웹 서비스 - YES24 가장 빠르고 쉽게 웹 서비스의 모든 과정을 경험한다. 경험이 실력이 되는 순간!이 책은 제목 그대로 스프링 부트와 AWS로 웹 서비스를 구현한다. JPA와 JUnit 테스트, 그레이들, 머스테치, 스프링 www.yes24...

[SSAFY] SSAFY 7기 수료 후기 #3 - 자율 프로젝트 + 찐 수료후기

마지막 자율 프로젝트! 마지막이라서 확실히 취준 위주 vs 플젝 위주로 많이 갈린다. 퇴소하는 사람들도 많은듯 사실 나도 취준 위주로 하려고 원래 하던 사람들과 하려고 했는데 우연히 새로운 사람들과 할 수 있는 기회가 주어져서 새로운 사람들과 팀을 이루게 되었다! 자율 프로젝트 기획 뭔가 마지막이라 그런가 사람들이 힘을 덜 쓰고 싶어하는 듯 보였다. 이거는 처음에 다들 취준과 어느정도 병행할 거냐고 서로 이야기를 했었고, 나도 마찬가지긴 했다. 근데 또 열심히 하라면 열심히 할 의지가 있었다. 난 나이가 상대적으로 어렸기 때문에 취준이 급하거나 그러진 않았다. 그래도 여러가지 기획안들을 내고 프로젝트 규모와 기술같은 것들을 이야기하면서 의외로 간단하게 아이디어를 선정했다. 스터디 서비스를 제공하기 때문에..

[SSAFY] SSAFY 7기 수료 후기 #2 - 특화 프로젝트

싸피 수료 후 후기 몰아쓰기 2탄..! 이번엔 특화 프로젝트닷.. 특화 프로젝트 특화프로젝트는 AI, 빅데이터, 블록체인 등을 사용해서 프로젝트를 진행한다. 사실 이때부터 의욕이 줄어드는 사람들이 많다고 한다. 공통때 힘을 많이 쏟고, 취업 준비하는 사람도 많이 있기 때문이다. 우선 위해서 말한 기술들 중에서 하고 싶은 트랙을 1지망, 2지망 선택을 한다. 대부분은 1지망으로 배정을 해주지만 인기가 없는 트랙들을 위해 2지망으로 배정이 될 수도 있다. 그게 바로 나다...ㅎ 사실 빅데이터를 하고 싶었는데 인공지능으로 배정을 받았다. 이건 뭐 거부할 수도 없어가지고,,, 여기서 백엔드 파트를 맡고 싶었는데 인공지능을 담당할 사람이 많이 필요해서 백엔드에서 인공지능 포지션으로 변경되었다. 하핳 인공지능에 대..

[SSAFY] SSAFY 7기 수료 후기 #1 - 공통 프로젝트

거의 몇달만의 글인가...? 플젝하느라 공부를 따로 할 수가 없어서 거의 관리 안 한 내 블로그... 다시 재개해야겠다..ㅎ 싸피 7기를 잘 수료하고 이제 혼자가 되었다!!.. 좋으면서도 뭔가 슬프다ㅠ😹 1학기 수료후 그동안 글을 잘 올리지 못했는데 프로젝트와 취업준비로 인해 관리하기가 어려웠다. 또한 싸피가 오프라인으로 전환된 후에는 9시까지 갔다가 퇴실하구 집 오면 거의 오후 7-8시? 였다. 그러면 이제 또 자소서 쓰고,,,,, 면접 준비도 하고,,,, 그래서 알고리즘과 CS공부를 손 놓을 수 밖에 없었다... 체력이 바닥이 나가지고...ㅠ (수영 다니면서 체력 기를거다....제발...) 1학기때문에 대면이였으면 진짜 큰일날뻔...ㅋㅋㅋㅋㅋ그때 알고리즘 문제 많이 풀어놓길 잘했다. 간단하게 싸피 2..

[Typescript] 필수가 아닌 타입 설정하기

가끔 TS를 쓰면서 ?를 붙여서 필수 요소가 아닌 속성을 설정할 수 있다. 요로케 export type PrivateRouteProps = { auth: InitialStateType; outlet: JSX.Element; study?: boolean; }; 현재 study라는 인자를 옵션으로 받고 있는건데 그러면 이 옵션이 안올 때를 대비해서 미리 default값을 설정해줘야한다. 그러지 않으면 에러뜬다 defaultProps 세팅해주라고 합니다 그러면 해주면 된다. PrivateRoute.defaultProps = { study: true }; 이런 식으로 기본값을 설정해주면 에러가 사라지는 모습을 볼 수 있다. PrivateRoute는 컴포넌트 이름이다. 완성 코드 export type Privat..

[React+TS] React에서 비로그인처리, PrivateRoute사용하기

시작하기 전 React에서 비로그인시, 또는 어떤 서비스를 쓰기 위한 제한이 있을때 PrivateRouter라는 커스텀 라우터를 사용해서 처리해줄 수 있다. 다른 방법도 있겠지만, 한꺼번에 관리할 때 편리한거 같아서 아직까지는 자주 사용 중 ! 필자는 react + typescript를 사용했다. 그리고 redux도 사용한다. 본문 우선 기본적으로 세팅은 되어있겠지만 react-route-dom 설치가 필요하다 npm i react-router-dom 그리고 기본 라우터가 세팅되어있다는 가정하에 진행할 예정이다. 1. 기본 라우터 우선 기본 세팅 되어있는 라우터는 다음과 같다. Route.tsx export default function Routes() { return ( ); } 이렇게 세팅되어있는 라..

[python] 사용자 정의 이미지를 사용해서 인공지능 이미지 분류 모델 학습하기

들어가기전 프로젝트를 진행하면서 인공지능 파트를 맡게됐다.(사실 백엔드 하고 싶어서 백엔드 한다고 했는데 어쩌다 보니 인공지능 간건 안비밀....) 팀원 전체가 인공지능에 대해 잘 아는 사람이 없었고, 나도 마찬가지로 인공지능을 실제로 구현해본 경험은 없었다. 그래서 사실 기대반 걱정반으로 인공지능을 맡게 되었다. 인공지능을 총 3명의 인원이 맡게 되었다. 기획단계에서 모델을 학습할 수 있는 데이터셋을 구하는 것이 중요하기 때문에 데이터셋을 제공해주는 사이트를 여러 곳 찾아봤고, 그 중에서 우리는 AI허브에 있는 반려동물 질환 이미지 데이터셋을 이용하기로 했다. AI-Hub 샘플 데이터 ? ※샘플데이터는 데이터의 이해를 돕기 위해 별도로 가공하여 제공하는 정보로써 원본 데이터와 차이가 있을 수 있으며, ..

[Web] WebRTC

줌 클론코딩 – 노마드 코더 Nomad Coders WebSockets, SocketIO, WebRTC nomadcoders.co 노마드코더의 줌 클론코딩 강의를 보고 정리한 내용입니다. 비디오 가져오기 스트림 : 비디오와 오디오가 결합된 것 사용자의 스트림 가져오기 스트림은 track을 제공해준다. track은 비디오가 될 수 있고, 오디오, 자막등이 될 수 있다. 해당 track에 접근할 수 있다. const socket = io(); const myFace = document.getElementById("myFace"); //영상 화면 const muteBtn = document.getElementById("mute"); //음소거 설정 const cameraBtn = document.getElem..

[Web]SocketIO

https://nomadcoders.co/noom 줌 클론코딩 – 노마드 코더 Nomad Coders WebSockets, SocketIO, WebRTC nomadcoders.co 노마드코더의 줌 클론코딩 강의를 보고 정리한 내용입니다. SocketIO 실시간, 양방향, event 기반의 통신을 가능하게 하는 프레임워크 socketIO는 websocket을 이용한다. 만약 websocket을 지원하지 않으면 다른 것(http long-polling)을 사용한다. 서버 코드 import http from "http"; import { Server } from "socket.io"; import express from "express"; const app = express(); app.set("view en..

[Web] WebSocket 정리

https://nomadcoders.co/noom/lobby 줌 클론코딩 – 노마드 코더 Nomad Coders WebSockets, SocketIO, WebRTC nomadcoders.co 노마드코더의 줌 클론코딩 강의를 보고 정리한 내용입니다. HTTP http는 모든 서버들이 작동하는 방식 유저가 req를 보내면 서버가 res로 반응한다. http에서 기억해야할 중요한 것은 stateless, 즉 백엔드가 유저를 기억하지 못한다. 유저와 백엔드 사이에 연결이 없다. 서버는 오직 req을 받을 때만 답장을 해준다. Websocket webSocket을 사용해서 연결하고 싶고, 서버가 지원한다면 wss(secure web socket)으로 접속하면 된다. ex) https://nomadcoders.co..

[BJ] 백준 15591 MooTube (Silver) (JAVA)

문제 https://www.acmicpc.net/problem/15591 풀이 방법 이 문제는 시간초과가 관건인 문제였다. 처음에는 인접 행렬로 풀이를 하려고 했는데 계속해서 시간초과가 발생했다. 그래서 도저히 시간을 단축시킬 방법이 생각이 안나서 찾아봤더니 인접 리스트를 사용하면 풀리는 문제였다. 풀이 과정은 다음과 같다. 1. 인접 리스트를 생성해서 인접한 정점들과 USADO 값을 저장해준다. 2. v번째 정점으로부터 BFS를 시작한다. 3. queue에서 poll를 한 정점(n)과 인접하고(USADO값이 존재) 방문하지 않은 정점들만 탐색 후보가 된다. 4. n번 정점과 탐색 후보 사이의 USADO 값이 k이상인 경우에만 que에 넣어준다. 5. 그리고 cnt도 하나 증가해준다. 왜냐면 visit배..

[BJ] 백준 16954 움직이는 미로 탈출 (JAVA)

문제 https://www.acmicpc.net/problem/16954 풀이 방법 가장 왼쪽 하단에서 가장 오른쪽 상단으로이동하면 되는 문제이다. 대신에 맵에는 벽이 존재하고 벽이 아래로 이동하는 조건이 걸려있다. 풀이 방법은 BFS로 풀이했다. 우선 이동 가능한 좌표들을 선언해주고(제자리 포함), 이동 가능한 구역으로 이동후 queue에 넣어준다. 그리고 방문배열을 체크해줘야하는데 제자리에 있는 경우도 있기 때문에 3차원 배열로 만들어서 마지막은 방향으로 방문 배열을 생성해줬다. 그리고 캐릭터 이동 -> 벽 이동이기 때문에 같은 횟수? 번째? 이동인 경우에는 한 번에 처리해주고 그 다음에 벽을 이동해줬다. 제출 코드 import java.io.*; import java.util.*; public cl..

[React+TS] useNavigate props 전달과 useLocation으로 props 받기/ useLocation unknown 타입

useNavigate React와 TS를 사용해서 프로젝트를 진행하고 있다. 클릭없이 페이지를 이동할 일이 생겨서 당연하게 useHistory를 사용했는데 띠용.... 이게 무슨일이야 해서 찾아봤더니 리액트 v6부터는 useHistory 대신에 useNavigate을 사용하라고 한다. React Router | Upgrading from v5 Declarative routing for React apps at any scale reactrouter.com 공식문서를 보면 useHistory를 사용했을 때랑 비교하면서 사용법이 잘 나와있다. 컴포넌트로도 사용할 수 있는 것 같다. useNavigate를 사용하면 .push 나 .go와 같은 함수가 필요없이 그냥 인자값에 따라서 알아서 함수가 적용되는것 같았..

[React+TS+StyledComponent] 사이드바 만들기 + 외부 클릭시 닫히는 기능

시작하기 햄버거 버튼을 누르면 사이드 메뉴가 나오고, 사이드 메뉴 내부에 있는 x 표시나 사이드메뉴 외부를 누르면 사이드메뉴가 닫히는 기능을 구현한다. 버튼 누르면 사이드메뉴가 나오기 버튼을 누르면 사이드 메뉴가 나오게 하는 것은 간단하다. 우선 헤더와 사이드메뉴 이렇게 두 개의 컴포넌트를 준비한다. 그리고 햄버거 버튼에 클릭 이벤트를 걸어주고, 나는 useState 변수를 사용해서 구현했다. Header.tsx function Header() { const [isOpen, setIsOpen] = useState(false); const toggleSide = () => { setIsOpen(true); }; return ( ); } 1. 사이드 메뉴 컴포넌트를 Header안에 같이 넣어줬다. 파라미터로..

[BJ] 백준 11047 동전 0 (JAVA)

문제 https://www.acmicpc.net/problem/11047 풀이 방법 대표적인 그리디 알고리즘 문제이다. 동전의 단위가 있고, 금액이 있을 때 금액을 만들 수 있는 동전의 최소 개수를 구하면 된다. 순서는 정렬을 하고 단위가 큰 순서대로 금액에서 차감하면 되는데 입력값이 오름차순으로 주어진다고 했으니까 따로 정렬하지 않고 뒤에서부터 금액을 차감해주는 식으로 구현했다. 그리고 몫이 없으면 점점 단위가 내려가고 동전이 0이 되는 경우 for문을 벗어날 수 있게 해줬다. 제출 코드 import java.io.*; public class BOJ_11047_동전0 { public static void main(String[] args) throws IOException { BufferedReader..

[Spring] 인프런 스프링 입문 강의 정리 #5

[무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 인프런 | 강의 스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 글에서 나오는 모든 코드와 사진들은 김영한님의 인프런 스프링 입문 강의에서 가져온 것임을 미리 알립니다. 회원 관리 예제 - 웹 MVC 개발 회원 웹 기능 - 홈 화면 추가 controller 패키지 안에 HomeController 클래스를 만들어준다. 그리고 안에는 다음과 같이 작성해준다. package hello.hellospring.controller; import org.springframework.stereotype.Controller..

[Spring] 인프런 스프링 입문 강의 정리 #4

[무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 인프런 | 강의 스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 글에서 나오는 모든 코드와 사진들은 김영한님의 인프런 스프링 입문 강의에서 가져온 것임을 미리 알립니다. 스프링 빈과 의존관계 컴포넌트 스캔과 자동 의존관계 설정 컨트롤러가 서비스를 통해서 기능을 동작하는 것을 의존관계가 있다고 표현한다. ( 컨트롤러가 서비스를 의존한다. ) MemberController 만들어주기 스프링은 @Controller라는 어노테이션을 보고 스프링이 작동할 때 해당 컨트롤러 객체를 생성해서 가지고 있는다. => "스프..