클론코딩8 LMS Web 클론코딩 13 (이미지 업로드) 2024/02/04 이제 게시글에 이미지를 업로드하는 기능을 추가할 것이다. 이미지 업로드는 db에 이미지 원본을 넣어 저장을 하는 것이 아니라 이미지 데이터의 정보를 저장하고, 프로젝트에서 이미지를 필요로 할 때 DB에 저장된 이미지 데이터 정보(path, name, size 등)를 통해 가져온다. local서버에 이미지를 저장하는 방법도 있고, 다른 서버를 대여하여 올리는 방법도 있다. 대표적으로는 aws의 s3를 많이 사용한다. 일단 나는 이미지 업로드 기능 자체를 구현하는것이 목표였기에, 내 local에 이미지를 저장하는 방법으로 진행했다. 1. PostFile 도메인 생성, db table 생성하기 package com.example.myapp.domain; import lombok.Getter.. 2024. 2. 7. LMS Web 클론코딩 12 (검색기능 구현, Date 나타내기) 2024/2/2 검색기능을 구현하기 위해 어떻게 구현할지에 대해서 생각을 먼저 해보았다. 일단 두 가지 방법을 생각해 봤는데 첫 번째는 검색어를 입력하면 화면 전체를 다시 불러와서 해당 검색어가 있는 post-list를 course페이지에서 보여주는 것이고, 두 번째는 ajax를 이용하여 비동기 방식으로 처리하여 바로 post-list를 보여주는 방법이다. 첫 번째 방법이 좀 더 쉬울 것 같아 일단 첫 번째 방법을 선택했다. 검색기능구현 1. Course 페이지 Search form action으로 감싸주어 search 버튼을 눌렀을 때, get요청이 lms/search-posts로 요청되도록 구현한다. 2. PostController @GetMapping("lms/search-posts") public.. 2024. 2. 2. LMS Web 클론코딩 11 (이전, 다음 페이지 이동 버튼 구현) 2024.01.30 오늘은 글 상세 보기 페이지에서 다음 글로 넘어가는 버튼과 전 글로 넘어가는 버튼을 구현하는 방법을 알아보자. 다음, 이전 글이 있다면 버튼이 활성화되어있고 없다면 비활성화되도록 구현할 것이다. 1. 먼저 html에서 Prev 버튼과 Next버튼을 만들어준다. Next > Prev버튼과 Next버튼 각각 활성화 된 모습과 비활성화된 모습을 만들어 준다. 2. Service를 만들어준다. 나의 경우엔 PostService에서 post관련 service를 관리한다. private final PostRepository postRepository; @Autowired public PostService(PostRepository postRepository).. 2024. 1. 30. LMS Web 클론코딩 8 (Spring Dependency, 난관해결방법) 2024.01.25 이번 프로젝트는 Spring Boot가 아닌 Spring으로 진행을 한다. Spring에서 좀 더 편리하게 Spring Boot가 나왔기 때문에 Spring을 제대로 다룰 줄만 안다면 Spring Boot는 어려움 없이 배울 수 있다고 생각해서이다. 물론 Spring의 경우 Boot와 다르게 dependeny버전 설정 등 번거로운 부분이 있지만 오히려 번거로운 과정 속에 배움이 있다고 생각하며 Spring으로 진행 중이다. 1. 첫 번째 난관 (JPA dependency가 추가가 안됨) 나는 바로 JPA를 이용하여 db에 접근하려고 했다. 당연히 jpa를 사용하려면 build.gradle(나는 gradle을 사용하기 때문에)에 jpa dependency를 추가해줘야 한다. 처음엔 이렇.. 2024. 1. 25. LMS Web 클론코딩 7 (Spring 입문 강의 완강) 2024/01/18 어제부터 시작해 오늘까지는 강의를 듣는데 시간을 많이 썼다. 일단 스프링 입문 강의를 통해 기본적인 동작 원리를 이해하고 이후에 필요한 개념을 보충해 나가는 형식으로 공부하기 위해서이다. 강의 내용 중 테스트 케이스 작성과 AOP부분은 이후 다시 집중해서 봐야 할 것 같다. JPA에 대해서 잘 모르고 있었는데 JDBC -> JDBC template -> JPA -> Spring Data JPA 의 모든 과정을 보여주어 이 부분에 대해서 잘 이해가 되었고 이번 클론코딩 개발과정에서는 JDBC template와 JPA를 이용해 개발할 것이다. 일단 이번 LMS 클론 코딩은 Spring - JDBC template/JPA - Mysql - thymeleaf를 이용하여 개발할 예정이다. 내일.. 2024. 1. 18. LMS Web 클론코딩 4 (Nav bar 디테일 수정, 로그인 페이지 그리기) 2024/1/15 오늘은 어제 만든 Nav Bar의 UI 디테일을 수정하고, 각각의 버튼을 눌렀을 때 서로 페이지간 이동을 할 수 있도록 구현했다. 또 로그인 페이지도 그렸다. 페이지의 디테일은 일단 이 정도로 구현하고 이후에 수정할 예정이다.(아이콘, 폰트 등) 이로써 초반 설계했던 mvp 기능을 위한 사용자 페이지는 모두 완성되었다.(dashboard, course, write, login) 이제 spring 공부와 html, css, js로 만든 페이지를 spring - thymeleaf 환경으로 연동하는 작업을 할 것이다. 아마 이 이후 erd 설계를 할 것 같다. 2024. 1. 15. LMS Web 클론코딩 3 (Nav bar만들기, Markdown form 넣기) 2024/1/15 Front page를 먼저 그려놓고 이후 백엔드를 공부하고 연결하는 게 좋을 것 같다고 생각되어 3-4일은 Front에만 집중하려고 한다. html, css, js 그리고 일정 부분은 bootstrap을 사용했다. 모든 버튼에 대한 이벤트는 구현하지 않았고, 필요한 버튼만 클릭하면 다음 동작을 수행하도록만 구현해 놓았다. 사이드바를 누르면 아이콘 배경색이 변하고, Nav bar가 나온다. Nav bar안에는 수강 강의 목록이 나오고 강의 목록을 선택하면 Qna게시판으로 이동한다. +Write버튼을 누르면 Write a post 페이지로 넘어간다. 제목, 내용 그리고 파일 첨부가 가능하며 내용을 넣는 폼은 js의 마크다운 에디터인 SimpleMDE를 사용했다. 2024. 1. 15. LMS Web 클론코딩 2 (대쉬보드 페이지 그리기) 2024/01/13 어제 설계한 것을 바탕으로 일단은 먼저 프론트 페이지를 빠르게 만들어 놓고 기능 구현을 하면 좋겠다는 생각이 들어 오늘은 무작정 첫 화면을 그리기 시작했다. 총 소요시간은 3시간 30분 정도 걸린 것 같다. 처음엔 금방 그려낼 수 있다는 생각이었는데 클론 코딩을 해본 적이 없어 디테일을 잡는 부분이 꽤나 어려웠고 애초에 html.css를 다룬 지 오래되어 초반에 조금 시간이 걸렸었다. 그래도 따라서하다 보니 금방 감을 잡고 한 것 같고 나머지 페이지들도 집중해서 한다면 금방 만들 수 있겠다는 자신감이 생겼다. 일단 오늘은 로그인 이후 첫 화면으로 생각중인 Dashboard 페이지를 만들었고, 옆에 붙어있는 사이드 바 까지 만들었다. 사이드 바의 경우 모든 페이지에 동일하게 들어가므로 .. 2024. 1. 13. 이전 1 다음
