클론코딩14 LMS Web 클론코딩 5 (Spring + Thymeleaf) 2024/1/16 오늘은 이때까지 만들었던 페이지를 Spring 환경에서 실행시키기 위해 jsp와 Thymeleaf 중 Thymeleaf를 선택했다. 이유는 좀 더 간단한 것 같고 내가 현재 보는 강의 김영한의 스프링 기초에서 Thymeleaf를 이용하기 때문도 있다. 그래서 오늘은 TA님이 제공해주신 보일러 플레이트(개발을 위한 기초 세팅이 되어있는 코드)를 받고 내 컴퓨터에서 잘 동작하는지 테스트를 했다. 여기 세팅은 jsp와 thymeleaf 둘 다 추가는 되어있지만 기본 설정이 jsp로 되어있어 jsp설정 파일을 지우고, xml파일을 수정하고 static 폴더를 새로 생성하며 thymeleaf을 이용한 개발을 위한 환경설정을 마쳤다. 처음엔 css, js, img 파일들을 읽어오지 못하길래 뭐가 .. 2024. 1. 16. 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. LMS Web 클론코딩 1 (구현 페이지 기능 설계) 2023/01/12 주제 (한동대학교 LMS) 지난학기 가장 많이 사용한 사이트가 뭘까 생각을 해봤는데 LMS가 있었음. UI도 간단하고 구현이 쉬울것이라 예상이 되며 기능이 많지만 구현할 기능을 정해 선택하여 개발하고자 함. 기술 스택 배포 : Azure App Service MVP 기능 (버전 0.1을 완성 후 버전 업그레이드 하는 방향으로) 사용자: LMS 메인 페이지 LMS 대시보드 LMS QnA Board CRUD (파일 입출력, 댓글, dateTime, 검색) LMS People (같은 과목 듣는 사람 정보) 사용자 로그인(학번, 비밀번호) 관리자: 관리자 로그인(admin) QnA 게시물 관리 페이지 LMS People 관리 페이지 과목 생성 추가하고 싶은 기능 사용자: LMS 과제 페이지.. 2024. 1. 12. 이전 1 2 다음
