ALL

프로젝트 개요 프로젝트 개발 기간 : 12.04~12.29 프로젝트 인원 : 5인 개발 배경 : 텍스트 형 유튜브 같은 플랫폼 구축을 해보고 싶었습니다. 브런치스토리, 네이버의 유료 간행물등 정식으로 등록된 작가들에 대한 후원 및 구독 등은 가능했으나, 유튜브처럼 누구나 편하게 나의 글을 공유할 수 있는 공간을 만들고 싶었습니다. 기술 스택 : BE Java 17, Spring Boot 3.x.x , Spring Data JPA, Spring Batch, Spring Security, Spring Quartz, Redis, MySQL FE HTML5, CSS3 , TailwindCSS, Axios, Toast UI , Vue.js (3) CI/CD Docker 협업툴 Jira, Github, Notion..

⌨️ 교육을 통해 들은 이력서 작성 팁 지금 듣는 교육에서 좋은 기회가 있어 이력서 작성 팁에 대한 강의를 들었다. 해당 강의에 대한 내용과 개인의 생각을 정리해서 작성하지만, 정답이 아닌 개인의 생각에 가까우므로 양해바랍니다. 1. 이력서 작성 이력서와 자소서를 작성할 때 개발 직무에서 가장 어려운 점은 양식이 정형화되지 않은 것 같다. 이런 이유로 문서를 쓸 때 많은 고민과 피드백 수용을 반복하는 것 같다. 1.1. 역량에 대해 고민하기 내가 가지고 있는 역량을 경험에 근거하여 작성하기에 앞서 간략히 역량과 경험을 나열하면 좀 더 수월할 것이다. 1) 역량 - 경험 맵핑 테이블 이런 느낌으로 내가 가지고 있는 직무에 관한 역량과 그 역량에 대한 근거가 될 경험을 한번 쭉 나열해보자 2) 하드스킬 해당..

⌨️ 리뷰 작성 구현 multipart 파일을 태그가 아닌 Axios를 통해 전달하며, 미리 보기 방식을 Vue.js에 맞게 바꾸면서 많은 어려움이 있었다. 1. 리뷰 작성 리뷰 등록 {{ walkingPath.title }} {{ walkingPath.mapList[0].distance }} {{ walkingPath.addr }} 별점 ★★★★★ 본문 사진(5개 제한) + 뒤로가기 리뷰 작성의 부분 1.1. request Axios 만들기 function postReview() { const formData = new FormData(); const reviewsRequestDTO = { content: content.value } const json = JSON.stringify(reviewsReq..

⌨️ Vue.js 로이 전환 타임리프에서 Vue.js로 CSR 방식으로 전환하며 프런트에 대해 거의 깊이가 없어 많이 힘들었던 것 같다. 1. 회원가입/로그인 타임리프에서 Vue.js로 바꾸는 것만 해도 많은 공수가 들었어서 꽤 힘들었다. Vue.js에 대한 자세한 공부는 차차 포스팅 하도록 하겠다. 1.1. 회원가입 ISSUE 주소 찾기를 통해 건네준 데이터가 null로 들어가는 현상 -> 문제 상황 실제로는 null로 들어가는 것이 아니라 애초에 전달이 되지 않았다. 해당 문제는 Vue.js 에서 DOM을 직접 조작할 경우 생기는 문제로 데이터 바인딩이 되지 않는 것이 원인이었다. AS-IS function searchAddr() { new daum.Postcode({ oncomplete: funct..

⌨️ Thymeleaf+Ajax 구현 이 부분은 나의 최대의 약점이었다. 이전에 과제에서도 SPA 형식의 웹 애플리케이션 구현을 받았는데, 미흡하게 제출을 하였었고, 그때의 기억을 기반하여 언젠가 극복하자고 생각했던 부분이 이번에 해결이 되어 기쁜 마음으로 남긴다. *저는 바닐라 JS를 통해 Ajax를 구현 하였습니다. JQuery와 Axios 를 활용하지 않은 것은 백엔드 개발자로써 간단한 화면에 구성에 필요한 Ajax 통신만을 가벼운 사이즈로 구현하고 싶어서입니다. 1. Thymeleaf ? Servlet, JSP를 지나 최근 많이 사용되는 SSR 방식의 템플릿 엔진이다. 1.1. Thymeleaf를 통해 비동기 처럼 보이게 ? 처음 공부를 시작했을 때 한 강의를 통해 배운 방법이다. 그리고 무지했던..

1. WWW - 함께 걷는 산책로 공유 V1 GitHub - Team5Project/WalkingWithWorld: 오조의 마법사 미니 프로젝트 1차 오조의 마법사 미니 프로젝트 1차. Contribute to Team5Project/WalkingWithWorld development by creating an account on GitHub. github.com - 구현 [PROJECT] KOSA 미니 프로젝트 진행 - (1) WWW 기획 및 소개 ⌨️ KOSA 교육과정 미니 프로젝트 진행 한국소프트웨어산업협회에서 진행하는 풀스택 기반 MSA 개발자 과정의 첫 번째 프로젝트를 진행하게 되었다. 이제 처음부터 구현 한 부분을 정리하고, 새 romanc3.tistory.com [PROJECT] KOSA 미..

⌨️ 로그인 구현 이번 세션 로그인을 구현하며 가장 많이 공부가 된 파트, 그리고 고민을 한 부분이다. 1. 로그인 로직 고민 세션 로그인 자체는 쉽게 기간의 문제 상 쉽게 접근했다. 로그인 시 세션에 로그인한 유저의 정보를 저장하고 필요한 곳에서 가져다 쓰는 간단한 방식으로 구현을 완료했다. 그 와중 해당 방식에서의 많은 중복과 불편함이 발생했기에, Spring Security처럼 필터를 두어 로그인을 처리하기로 했다. 1.1. LoginCheckFilter @Slf4j public class LoginCheckFilter implements Filter { // TODO 로그인이 필요 없는 URL 추가 private static final String[] whiteList = { "/", "/sign..

⌨️ 회원가입/로그인 구현 요즘은 Spring Security를 활용하면 쉽게 회원가입과 로그인을 구현할 수 있다. 그러나 그러한 기술의 필요성과 내가 직접 구현 했을 때의 부족함을 비교해 보기 위해 직접 세션 방식으로 구현해보려 한다 1. 회원가입 많은 양의 정보를 받기보다 우선 필요한 최소한의 정보를 받아서 회원 가입을 구현하려 한다. 1.1. UsersDTO @Getter @Setter @ToString public class UsersDto { private int id; @NotBlank(message = "아이디 입력은 필수입니다.") @Length(max = 30, message = "아이디 길이는 30자 를 넘으면 안됩니다.") private String name; @Pattern(rege..

⌨️ KOSA 교육과정 미니 프로젝트 진행 한국소프트웨어산업협회에서 진행하는 풀스택 기반 MSA 개발자 과정의 첫 번째 프로젝트를 진행하게 되었다. 이제 처음부터 구현 한 부분을 정리하고, 새롭게 배우고 그간 고민 했던 것이 해결 된 부분을 공유하려 한다. 1. 기획 및 사용기술 1.1. 개요 최근 러닝과 걷기 운동 등 일상속에서의 운동을 취미로 하는 사람들이 많아짐에 따라, 해당 취미를 공유하는 사람들을 위한 커뮤니티를 만들고 서로의 경로를 공유하여, 많이 알려진 경로가 아닌 색다른 경로로 산책을 즐길 수 있게 하는 것에 목적을 개발을 결정 1.2. 프로젝트 기간 및 기술 1) 프로젝트 기간 2023.10.13~2023.10.23 2) 사용 기술 Front-end : HTML5, CSS3, JacaSc..