## 주제 스프링 MVC ## 목표 나만의 웹 포트폴리오 만들기 ## 커리큘럼 1. 자바 문법 및 알고리즘 2. HTML/CSS 3. Bootstrap 4. JSP 5. Spring MVC ## 대상 1. 웹 개발 입문자 2. 대학 졸업 예정자 3. 취업 준비생 4. Spring MVC를 배우고 싶은 모두 ## 시간 및 장소 + 협의 ## 비용 + 4회 기준 30만원 (회당 2시간) ## 참가 신청 + 참가신청 클릭 + 개별 문의 ## 연락처 + 이메일: sehongpark@cloudstudying.kr + 카 톡: chaesam
# 사전 과제 주어진 링크의 문제를 풀고 코드를 제출해주세요. (실행하면 코드가 제출됩니다) 1. 구구단 출력 (http://cloudstudying.kr/challenges/18) 2. 1등은 누구? (http://cloudstudying.kr/challenges/108) 3. 당신의 연봉은? (http://cloudstudying.kr/challenges/122) ## 질문 게시판 링크 + http://cloudstudying.kr/questions
# 자바 기본 문법 ## 기본 개념 복습 아래의 동영상 강의를 모두 듣고 난 후, 강의 하단부의 실습 문제를 제출하시오. 1. 자바 프로그래밍이란? (https://cloudstudying.kr/lectures/45) 2. 자바의 특징과 컴퓨터 구조 (https://cloudstudying.kr/lectures/46) 3. 첫 프로그램 만들기 (https://cloudstudying.kr/lectures/47) 4. 변수와 타입 그리고 연산자 (https://cloudstudying.kr/lectures/48) ## 쪽지 시험 대비 위 강의 내용 쪽지시험이 다음 수업에 있습니다. 준비해주세요.
# 개발환경 만들기 Spring 개발환경 구축하기: macOS ## 설치 중 프로그래밍 연습 1. 배열 요소 찾기 (http://cloudstudying.kr/challenges/209) 2. 난수 생성과 반복문 (http://cloudstudying.kr/challenges/210) 3. 평균 구하기 (http://cloudstudying.kr/challenges/211) 4. Circle 객체 만들기 (https://cloudstudying.kr/challenges/220) ## Homebrew 설치 macOS 패키지 관리자 설치 (공식 홈페이지: https://brew.sh/index_ko) 아래 코드를 터미널에 입력하고 기다리면 끝. ``` /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" ``` ## JDK 설치 brew를 통한 JDK 설치 ``` brew tap AdoptOpenJDK/openjdk brew install <version> ``` 원하는 버전에 맞게 설치한다. ``` adoptopenjdk-openjdk8 adoptopenjdk-openjdk9 adoptopenjdk-openjdk10 ``` ## STS 설치 ``` brew cask install sts ``` ## Tomcat 설치 ``` brew install tomcat ``` ## PostgreSQL 9.4 설치 ``` brew install postgresql@9.4 ``` ## 레퍼런스 + Homebrew설치: https://brew.sh/index_ko + JDK설치: https://goo.gl/oaSPoa + STS설치: https://goo.gl/4XFySr
# SpringMVC 맛보기 ## 학습 내용 1. Hello World 출력하기 (https://cloudstudying.kr/lectures/234) ![](https://i.imgur.com/BzfPhAg.png) 2. 스프링 MVC 폴더 구조 (https://cloudstudying.kr/lectures/116) ![](https://i.imgur.com/iT6dU7R.png) 3. MVC 패턴 이해하기 (https://cloudstudying.kr/lectures/235) ![](https://i.imgur.com/V7CGG0Y.png)
# 데이터 베이스 연동하기 ## 학습 내용 ### 라이브러리 등록 `pom.xml`을 통해 아래 4가지의 라이브러리를 등록. + PostgreSQL + Spring-JDBC + MyBstis + MyBatis-Spring ### 라이브러리 설정 `root-context.xml`을 변경하여 라이브러리 객체를 생성. ### 기타 설정파일 작성 데이터베이스 사용을 위한 설정 파일 작성 + jdbc.properties + mybatis-config.xml ## 레퍼런스 + 데이터베이스 연동하기 (https://cloudstudying.kr/lectures/117)
# 클래스 만들기 연습 ## 과제 내용 아래 링크의 과제를 실행하여 제출하시오. + 정사각형 (https://cloudstudying.kr/challenges/230) + 원기둥 (https://cloudstudying.kr/challenges/231) + 쇼핑몰 상품 (https://cloudstudying.kr/challenges/233) + 은행 계좌 (https://cloudstudying.kr/challenges/241) ## 출제 의도 클래스 정의 및 구현 능력 증진
# 부트스트랩 연동하기 ## 학습 목표 부트스트랩(bootstrap)을 사용한 페이지 만들기 연습 ## 학습 내용 1. jumbotron ![](https://i.imgur.com/LZMeJnI.png) 2. navbar ![](https://i.imgur.com/rfQR5pd.png) 3. container & layout ![](https://i.imgur.com/DLhUqf8.png) ## 실습 과제 1. 로그인 페이지: forms ![Imgur](https://i.imgur.com/qYhTwTD.png) 2. 앨범 페이지 ![Imgur](https://i.imgur.com/aymH1vz.png) ## 레퍼런스 + 웹 페이지 만들기: Bootstrap (https://cloudstudying.kr/lectures/225) + 부트스트랩 공식 홈페이지 (https://getbootstrap.com)
# 데이터 등록 및 조회 ## 학습 목표 DB를 사용하여 데이터를 등록하고 이를 확인한다. ## 학습 내용 1. 조회 페이지 만들기 ![](https://i.imgur.com/a8fEkfS.png) 2. 등록 페이지 만들기 ![](https://i.imgur.com/ojmg4aS.png) 3. 테이블 생성 ![](https://i.imgur.com/FqX7hzi.png) 4. VO 생성 ![](https://i.imgur.com/HF4qhT0.png) 5. Mapper 생성 ![](https://i.imgur.com/nmsk5LQ.png) 6. 컨트롤러 작성 ## 레퍼런스 + 데이터 등록하기 (https://cloudstudying.kr/lectures/120) + 데이터 조회하기 (https://cloudstudying.kr/lectures/121)
# API 사용 연습 ## 과제 내용 1. Random (https://cloudstudying.kr/challenges/135) 2. ArrayList (https://cloudstudying.kr/challenges/136) 3. HashMap (https://cloudstudying.kr/challenges/156) 4. 문자열 뒤집기 (https://cloudstudying.kr/challenges/255) 5. 주사위 던지기 (https://cloudstudying.kr/challenges/38) ## 출제 의도 OOP 연습 및 API 활용 능력 향상
# 데이터 수정 및 삭제 ## 학습 목표 스프링MVC와 DB를 연동하여 데이터의 수정 및 삭제를 연습한다. ## 학습 내용 1. 수정하기 2. 삭제하기 ## 수정하기 1. View: 데이터 수정 페이지 작성 ![](https://i.imgur.com/MulIybI.png) 2. Controller: 수정 값 받기 ![](https://i.imgur.com/otTffIS.png) 3. Mapper: DB 갱신 ``` @Update("update books set title = #{title}, author = #{author}, image = #{image} where id = #{id}") public boolean update(Book book); ``` 4. redirect: 갱신 후 페이지 이동 ## 삭제하기 1. View: 삭제 버튼 생성 ![](https://i.imgur.com/DiYPd8r.png) 2. Controller: 삭제 요청 받기 3. Mapper: DB 데이터 삭제 4. redirect: 삭제 후 페이지 이동 ## 관련 강의 자료 + 데이터 수정하기 (https://cloudstudying.kr/lectures/122) + 데이터 삭제하기 (https://cloudstudying.kr/lectures/123)
# 포트폴리오 프로젝트 구상하기 ## 목표 취업 대비용 포트폴리오를 구상하고 이를 설계한다. ## 프로세스 1. 브레인 스토밍 - 평소 관심있는 것 또는 만들고 싶은 것을 나열한다. 2. Why-How-What 분석 - 자신의 동기(why)와 - 방법론(how)을 정리하고, - 궁극적으로 무엇(what)을 만들지 고민한다. 3. 유즈케이스 다이어그램 - 사용자(관리자, 매니저, 유저, etc..)를 정리하고, - 각 사용자별 기능들을 분류한다. 4. 화면 흐름 설계 - 유즈케이스 다이어그램을 토대로, - 사용자의 화면 흐름을 설계한다. 5. 클래스 다이어그램 설계 및 구현 - 화면 흐름을 기반으로, - 클래스 다이어그램을 설계하고 - 스프링MVC를 통해 이를 구현한다.
# 타일즈 적용하기 ## 학습 목표 타일즈의 사용법과 장점을 이해한다. ## 학습 내용 1. 타일즈 환경 설정 + 라이브러리 등록 (pom.xml) + 뷰 리졸버 추가 및 변경 (sevelet-context.xml) + 타일즈 설정 파일 작성 (/WEB-INF/tiles/tiles.xml) 2. 레이아웃 설정 + 레이아웃 작성 (/WEB_INF/tiles/layouts/classic.jsp) + 헤더 작성 (/WEB-INF/tiles/components/header.jsp) + 푸터 작성 (/WEB-INF/tiles/components/footer.jsp) 3. 테스트 + Controller: `*/*` 형태로 리턴값 변경 + View: 중복 코드 제거 + CSS 커스터마이징 (css/custom.css) + 결과 확인 ![](https://i.imgur.com/NmbNmbc.png) ## 레퍼런스 + 스프링 Tiles (https://cloudstudying.kr/lectures/125)
# 스프링 시큐리티 ## 학습 목표 스프링 시큐리티를 사용한 로그인 로그아웃 구현. ## 학습 내용 1. 시큐리티 환경설정 + 라이브러리 등록 (pom.xml) + 설정파일 등록 및 필터 추가 (web.xml) + 설정 파일 작성 (/WEB-INF/spring/security/security-context.xml) 2. 로그인/로그아웃 UI + 로그인 페이지 작성 (views/statics/login.jsp) + 로그인/로그아웃 버튼추가 (tiles/components/header.jsp) + 컨트롤러에 로그인 페이지 연결 (SessionsController.java) 3. 시큐리티 설정 + DB 테이블 생성: `users`, `authorities` + DB 데이터를 통한 인증설정 (spring/security/security-context.xml) + 로그인 페이지: input name 변경 ## 레퍼런스 + 스프링 Security (https://cloudstudying.kr/lectures/126)
# 회원 가입 ## 학습 목표 스프링 시큐리티를 활용하여 회원 가입 프로세스를 구현한다. ## 실습 요약 1. View - 회원 가입링크 ![](http://i.imgur.com/JxLEbO5.png) - 회원 가입 form ![](http://i.imgur.com/OMer82X.png) 2. Controller - URL 연결: @RequestMapping - 폼 데이터 받기: @ModelAttribute - DB로 회원 정보 및 권한 저장 3. Model - VO 작성: `User.java` - Mapper 작성: `UserMapper.java` 4. SpringSecurity 설정 - 회원가입 페이지에 모두 접근 가능하도록. ## 실습 자료 + 회원가입 (https://cloudstudying.kr/lectures/145)
# 권한 제한 ## 학습 목표 스프링 시큐리티를 사용하여 사용자별 행동 권한을 제한한다. ## 실습 요약 1. 화면상 기능 숨기기 - View 페이지 상에서 동작 버튼 등을 숨김. 2. URL 접근 제한하기 - 시큐리티 설정을 통해 URL 접근을 제한. ## 실습 자료 + 권한 제한 (https://cloudstudying.kr/lectures/146)
# 관리자 페이지: 권한 부여 및 삭제 ## 학습 목표 스프링 시큐리티를 사용하여 관리자 페이지를 구현한다. ![](http://i.imgur.com/CQW0p32.png) ## 실습 내용 1. View - 관리자 링크 추가 - 관리자 페이지 작성 2. Controller - 모든 사용자 가져오기 - 뷰에 데이터를 전달 3. Model - UserMapper 메소드 추가: `@many` 주의 - VO 변경: `List<Authority> authorities;` - VO 추가: `Authority.java` 4. 권한 부여 및 삭제 - view: 권한 부여 버튼 생성 - controller: 사용자와 역할을 입력받아 이를 DB에 저장 - model: 맵퍼에 메소드 작성 - view: 권한에 따라 버튼 색 달리하기 ## 실습 자료 + 권한 부여하기 (https://cloudstudying.kr/lectures/149)
# 입사면접 예상 질문 ## 동기 및 적성 1. 프로그래밍을 접하게 된 계기가 어떻게 되시나요? 2. 개발자를 업으로 삼겠다고 마음먹게 된 계기가 무엇인가요? 3. 개발자의 필수 덕목을 3가지 꼽자면 어떤 것들이 있을까요? 4. 개발자 서적중 인상 깊었던 것이 있다면 알려주세요. 5. 개발 역량 강화를 위해 개인적으로 노력하는 부분이 있으신가요? ## Java 기본 역량 1. OOP에 대해 설명해주세요. 2. 클래스와 객체를 비교하여 설명해주세요. 3. 인터페이스의 장점을 설명해주세요. 4. 자바 API란 무엇이고 왜 사용할까요? 5. 메소드 오버라이딩이란 무엇인가요? 6. 상속에 대해 설명해주세요. 7. 예외 처리란 무엇일까요? 8. Java I/O를 사용하여, 파일을 읽고 변경후 저장하는 과정을 설명해주세요. ## Java 심화 역량: 자료구조 및 알고리즘 1. Java Collections에 대해 설명해주세요. 2. ArrayList와 LinkedList를 비교해보세요. 3. HashMap의 장점은 무엇일까요? 4. Set이란 어떤 자료구조인가요? 5. 알고리즘의 복잡도란 무엇인지 설명해주세요. ## DB 기본 역량 1. 데이터베이스는 왜 사용할까요? 2. 테이블이란 무엇인가요? 3. PK와 FK를 설명해주세요. 4. 다음의 테이블간 관계를 설명해주세요. - one-to-one - one-to-many - many-to-many ## 포트폴리오 질문 1. 해당 포트폴리오를 만든 동기가 있을까요? 2. 클라이언트-서버 구조에 대해 설명해주세요. 3. 프론트엔드와 백엔드를 비교 및 분석해주세요. 3. MVC 패턴이란 무엇이고 어떠한 장점이 있는지 설명해주세요. 4. MyBatis를 사용한 이유를 설명해주세요. 5. VO는 왜 필요한가요? 6. 게시판 하나 만드는데 얼마나 걸리실까요? ## 실전 면접 코딩 테스트 + 생략..
# 일대다 관계 ## 학습 목표 일대다 관계를 이해하고 이를 구현한다. ## 강의 자료 + 도서 리뷰 등록하기 (https://cloudstudying.kr/lectures/143) ## 학습 내용 1. 일대다 관계란? 2. 도서별 리뷰 작성하기 - View: 폼 만들기 - Controller: 폼 데이터 받기 -> 맵퍼 호출 - Model: VO 생성 -> Mapper 등록 - DB: 테이블 생성 ## 연습하기 아래의 다이어그램을 참고하여 foods의 CRUD를 구현하고, 각 food 별 ingredients를 CRUD 하게 하시오. ![Imgur](https://i.imgur.com/MwJO9R2.png) 음식 재료 테이블 작성쿼리는 아래를 참조한다. ``` create table ( id serial primary key, name string not null, price integer not null, food_id integer referenes foods not null ); ``` ### 음식-재료 추가 설명 예를들어 에그마요 샌드위치를 클릭한 경우, 아래와 같은 정보가 표시되어야 한다. + 에그마요 샌드위치(기본가: 1000원) - 식빵 (500원) ✅ - 계란 (500원) ✅ - 마요네즈 (500원) ✅ - 샐러드: 감자,당근,오이 (500원) ✅ - 오이 피클 (500원) + 최종 가격: 3000원
# 다대다 관계 ## 학습 목표 다대다 관계를 이해하고 이를 구현한다. ## 학습 내용 장바구니에 물품 담기 1. View - 화면 + 장바구니에 담기 버튼 추가 + 장바구니 페이지 생성 + 주문내역 페이지 생성 2. DB - 데이터 보관소 + 모델링: 데이터간 관계 정의 + 테이블 생성 3. Model - 데이터 처리자 + VO 생성: carts, items + Mapper 생성: cartMapper, itemMapper 4. Controller - 서비스 담당자 + 장바구니에 담기() + 장바구니 목록 보기() + 주문내역 보기() ## 레퍼런스 + 도서 주문하기 (https://cloudstudying.kr/lectures/321)