728x90 320x100 💻 뚝딱뚝딱/방통대CBT6 [개발일지#005] 시험풀기 화면 구현 (레이아웃, 안푼문제, 소요시간 등) 1. 레이아웃 구현하기레이아웃은 실제로 방통대에서 오프라인으로 태플릿 시험을 볼 때 화면과 가장 유사하게 만들려고 노력했다. 반응형보다는 높이, 넓이가 고정되어 있고 웹에서 최적화가 되도록 했다. 처음에 Div를 여러개 만들어 해보려고 했으나 생각보다 잘되지 않아서 그냥 테이블 태그를 이용해서 만들었다. 이런식으로 테이블태그를 만들고 각각의 배경색을 눈에 띄는 원색으로 입혀서 테이블 모양이 어떤지 확인하면서 작업했음. 고생 끝에 완성된 레이아웃은 이런 형태이다. 별로 예쁘진 않지만........일단 가로세로 높이가 픽스되어서 고정형이고 안에 문제가 나오는 부분도 고정형으로 내부 스크롤이 따로 있으며, 좌측에는 문제와 보기가 보여지고 우측에는 어떤 답을 선택했는지 OMR형식으로 보여주는 화면으로 구성되어.. 2024. 6. 20. [개발일지#004] 기출문제 목록조회 (검색조회 및 페이지네이션 포함) [구현하고자 하는 화면]소스 이해를 위해 구현하고자 하는 화면을 먼저 띄워보자면상단의 검색조건을 선택할 때마다 그 검색조건에 맞는 결과값들이 하단에 바로바로 조회되는 방식을 만들고 싶었다.검색조건 값들도 하드코딩이 아니라 동적으로 불러오는 방식으로 하고 싶었음. 0. 기출문제 검색조건 조회SearchCriteria.javapackage knou.cbt.domain.exam;import lombok.Getter;import lombok.RequiredArgsConstructor;import lombok.Setter;@Getter @Setter@RequiredArgsConstructorpublic class SearchCriteria { private String departmentId; pri.. 2024. 6. 18. [개발일지#003] 기본 부트스트랩 적용 / 기출문제 전체조회 구현 1. 기본 부트스트랩 적용※ 예전에는 테마 하나를 정해서 그 부트스트랩 테마를 통째로 옮기는 방식으로 사용했다면 이번엔 딱 기본적인 부트스트랩만 가져오고, 간단하게 커스텀해가면서 만들어볼 예정. 1-1. 부트스트랩 사이트에서 기본 부트스트랩 파일 다운 받기https://getbootstrap.kr/docs/5.3/getting-started/introduction/ 접속좌측에 [다운로드] 클릭'컴파일된 CSS와 JS' 하단에 [다운로드] 클릭하면 파일이 다운로드 됨. 1-2. 다운받은 부트스트랩 폴더를 스프링부트 프로젝트에 적용하기 파일 압축 풀기 압축 풀면 css, js 두 개의 폴더가 보임. 프로젝트에서 Resources - static 아래의 경로에 폴더 옮기기 ※ 꼭 Resources - s.. 2024. 6. 7. [개발일지#002] 스프링 프로젝트 생성 및 Mybatis 연결 1. 스프링 프로젝트 생성 스프링 스타터(https://start.spring.io/)를 이용하여 프로젝트를 생성해주었다.Mybatis, MySQL, Spring Web, Thymeleaf, Lombok 등 꼭 필요한 의존성들을 추가해주었다. (+) 참고참고로 나는 보통 스프링 버전을 스냅샷이 아닌 가장 최신 버전을 사용하는데 Mybatis 관련 의존성을 추가하려하니 최신 버전에서는 사용할 수 없어 스프링 버전을 한 단계 낮춘후 Mybatis 의존성을 추가하였다. 2. Mybatis 설정application.propertiesapplication.properties에 데이터베이스 정보를 넣어준다. 서버돌려보면?잘 돌아갑니다! 2024. 6. 7. [개발일지#001] 데이터베이스 설계 및 생성 1. 데이터베이스 설계설계는 https://aquerytool.com/ 사이트를 이용하여 생성하였다. 추가로 '학생(=회원)' 테이블도 생성하였는데 에이쿼리툴은 테이블 5개까지가 무료라서 일단 5개만 만들고 회원 테이블은 따로 생성했다; [각 테이블 톧아보기]학생(회원)테이블흔한 회원테이블과 비슷하게 아이디 / 닉네임 / 비밀번호 / 가입일 / 마지막정보수정일 / 사용여부 컬럼을 만들어 두었다.회원탈퇴나 삭제시 논리 삭제를 하기 위해 사용여부를 사용하였다. 학과테이블일단은 내가 속해있는 컴퓨터과학과의 기출문제만 관리를 할 예정이지만 나중에는 다른 학과로도 넓힐 수도 있으니 학과 테이블을 따로 만들어 관리하기로 했다.기본키인 학과아이디는 대문자 알파벳으로 하기로 했고, 역시 논리삭제를 위해 사용여부 컬럼을.. 2024. 6. 6. [개발일지#000] 방통대CBT 제작계기 & 사용기술스택 & 요구사항 [제작계기]본인은 2024년도 1학기에 3학년으로 편입한 편입생이다. 기말시험을 위해 기출문제를 인쇄해서 풀게 되었는데, 채점하는 것도 번거롭고 내가 뭘 틀렸는지 헷갈릴 때도 있고 오답 하기도 불편해서 CBT 사이트처럼 시험 응시가 가능하고 내가 본 기록들이 남아있고 빠른 채점이 되었으면 좋겠다는 생각을 했다. 2학기 기말시험까진 시간이 좀 있으니 방학 + 2학기 동안 천천히 만들어서 학우들에게 배포해보면 어떨까 하는 생각에 제작하게 되었다. [사용할 기술스택]스프링부트타임리프mybatisMySQL부트스트랩바닐라JS평소에 사용하던 기술스택과 별 다를게 없는 구조. [(최소)요구사항]회원가입 / 회원정보수정기출문제 응시 / 채점 / 기록관리최소 요구사항을 맞춘 후, 추가적인 기능 (문제풀이, 관리페이지)을.. 2024. 6. 5. 이전 1 다음 728x90 320x100
