에스알닷컴

[부스트코스] 웹 프로그래밍 수료

 - 수료 후, 수료증 발급과 학습했던 내용 확인
 - 프로젝트 정리 요약 (코드: 비공개)

 - 나의 강좌 페이지에서 확인 가능

수료증 페이지

 - 공유하기 (URL로 수료자 확인 가능) 

 - 수료증 내려받기 (PDF로 수료증 다운로드 가능)

강의 및 프로젝트 진행 간에 배운 내용들 확인 가능

부스트코스 시작시...

 - 2018.05 ~ 2020.03

 - 초기에는 자바의 정석, JSP 책 한권, 코드로배우는 스프링 웹 프로젝트 책 한권 스터디 한번 씩 했었다.

 - 크게 크게는 뭔지 알 것 같은데, 혼자 코드 구성이나 구조를 만들어보라고 하면 전혀 할 줄 몰랐다.

 - 그냥 자바만 여러번 한 느낌...

 - 그렇게 시작한 부스트코스

첫 강의 및 프로젝트 1 자기소개 홈페이지 만들기

2018/06/09 - [Edu/BoostCourse Web Project] - [부스트코스] 프로젝트 1: 나를 소개하는 홈페이지 구현

 - 웹에 대한 기본적인 내용으로 구성되어 있어 복습하는 느낌으로 보았다.
 - 웹에 대한 기본 지식이라고해서 그냥 넘어가면 분명 막힐 수 있는 내용들이 정리되어 있다.
 - 프로젝트를 완성한 뒤 "생각해보기" 내용을 다시한번 보는 것을 추천!!

두 번째 프로젝트 ToDo-List

2018/06/09 - [Edu/BoostCourse Web Project] - [부스트코스] 프로젝트 2: To-Do List 구현

 - Vanilla JS 공부를 시작하게 된 계기가 된 프로젝트, javascript 치면 다 jQuery만 검색되더라...
 - 검색의 종결점은 항상 MDN사이트...
 - 해당 프로젝트는
"3. 웹 앱 개발:예약서비스 1/4" > "1. JavaScript - FE" 와
"5. WEB UI - FE" > "3) Event delegation" 내용을 먼저 보신 후에 하는 것을 추천합니다.
 - 프로젝트 제출 시 FrontEnd를 JSTL, EL로 구성해도 되고, HTML + JavaScript로 구성해도 될 것 같습니다.
(저는 JavaScript가 많이 부족해서, 최대한 html + JavaScript로 작성)

드디어 스프링.. 세 번째 프로젝트인 예약 서비스

2018/07/29 - [Edu/BoostCourse Web Project] - [부스트코스] 프로젝트 3. 예약관리 시스템: 메인페이지

 - DOM API 활용 내용은 화면을 쉽게 다룰 수 있게 된 계기가 됨
 - 오프라인 스터디를 하게 된 시기.. 그러나 게을러서 진도를 못뺌..
 - 강의보고 따라 하면, 분명 설정은 됨. 믿고 따라 가세요. !!
 - TDD를 적용해서 개발하기 시작, Repository, Service, Controller Layer 단계 별로 테스트 할 수 있어서 100% 도움 됨

네 번째 프로젝트: 예약 서비스 

2019/01/05 - [Edu/BoostCourse Web Project] - [부스트코스] 프로젝트 4. 예약관리 시스템: 상세페이지 설계 및 분석

 - handlebar를 적용하여 html, javascript 각각 자원의 역할을 구분해서 작성해보기 시작한 프로젝트
 - JavaScript의 객체리터럴, 프로토타입 구조 작성, 아직도 JS는 쉽지 않다..
 - interceptor내용은 마지막 프로젝트에 있긴하지만, 로그관리가 필요해서 적용

거의 다 했다... 예약 등록하기

2019/07/22 - [Edu/BoostCourse Web Project] - [부스트코스] 프로젝트 5. 예약관리 시스템: 예약하기 분석 및 설계

 - form 태그 사용하고 submit 하는건 많이 했었지만, 느긋하게 이것저것 건드려보았다.
 - Session, form 태그, interceptor, argument resolver 다 대충만 알았지 구성하고 구현해본적이 없었기에 도움이 많이 된 프로젝트였다.
 - 하지만 그만큼 시간도, 테스트도 많이 투자함.. 개념은 이해가 되도 어디에 어떻게 적용해야 할 지..

마지막 프로젝트 한줄평 (파일 업로드, 다운로드)

2020/01/02 - [Edu/BoostCourse Web Project] - [부스트코스] 프로젝트 6. 예약관리 시스템: 한줄평 등록

 - 마지막 프로젝트라는 기쁨과 동시에 지금까지 한 내용이 웹의 기초라는 것을 생각하면 소름...
 - 하지만 설계, 구조, 작성 순서 등등 잘 다져왔다면 다른 언어나 프레임워크도 어렵지 않게 분석할 수 있지 않을 까 생각됨
 - 프로젝트가 마무리 되면 추가적인 기술들 적용해보는 테스트 프로젝트 용도로 사용할 수 있지 않을까 생각됨
 - MyBatis, Swagger, Spring Security 등등

[BoostCourse] 프로젝트 6. 예약관리 시스템: 한줄평 (FE)

 - 이전 글

2020/01/02 - [Edu/BoostCourse Web Project] - [부스트코스] 프로젝트 6. 예약관리 시스템: 한줄평 등록

2020/02/29 - [Edu/BoostCourse Web Project] - [부스트코스] 프로젝트6. 예약관리 시스템: 한줄평 (BE) 제출 [PASS & Feedback]

FE_PJT F-2. 예약: 한줄평 피드백

 - 그냥 돌아간다고 장땡이 아니더라, 역시 사람은 배워야 하는듯

수정할 내용

 - 웹 접근성 참고 후 프로젝트 적용

2020/03/02 - [Edu/BoostCourse - Web] - [BoostCourse] 웹 접근성

 - 웹 프론트엔드의 취약점 보안

2020/03/02 - [Edu/BoostCourse - Web] - [BoostCourse] 웹 프론트엔드 취약점

 - validation vs verification ( 검사와 검증 )

2020/03/02 - [Edu/BoostCourse - Web] - [BoostCourse] Verification and Validation

시연 영상

프로젝트 수료

참고 사이트

 - 웹 접근성: https://www.wah.or.kr:444/Participation/guide.asp

[BoostCourse] 프로젝트 6. 예약관리 시스템: 한줄평 (BE)

 - 이전 글

2020/01/02 - [Edu/BoostCourse Web Project] - [부스트코스] 프로젝트 6. 예약관리 시스템: 한줄평 등록

 - 다음 글

2020/03/01 - [Edu/BoostCourse Web Project] - [부스트코스] 프로젝트6. 예약관리 시스템: 한줄평 (FE) 제출 [PASS & Feedback]

수정 할 내용 & 개선해야할 내용을 생각해내기 위한 포스팅

 - 반성 및 조금 더 생각해보기

 1. 아래 내용 보면 코드 작성 후, 오타 확인 ( 내용이 조금 많아졌다고, 기본적인 내용에 소홀한 듯 )

 2. 사용자가 많을 경우, 다수의 사용자가 동일한 파일명을 올릴 경우의 예외를 생각했으나 적용하지 않은점

 3. 기능이 돌아간다고, 간단한 예제 수준의 코드에서 개선하지 않은점

 4. 열심히 주석 했으나 javadoc으로 만들 수도 없는 형식으로 되어 있어서, 나만 쓰는 프로그램이 된다는 점

BE_PJT F-1. 예약관리 시스템: 한줄평

수정한 내용

[ FileController ]

 - 더 생각해서 불필요한 메서드 줄이기 ( 수정중 )

 - 각 메서드의 주석 작성시, 변경사항을 수정하지 않음

 - @PathVariable 제대로 알고 쓰기

 - 변수 표기 방식 통일하기

 - @PathVariable 제대로 알고 쓰기

[ ReservationServiceImpl ]

 - MultipartFile 클래스에 대해서 좀 보고 사용하기

[ FileUtils (파일 관련 로직 모아 놓은 클래스) ]

 - 경로 사용시 OS 생각해서 공통으로 사용할수 있는 방법을 찾아봤어야 했다.

 - 다수의 사용자가 이용할 경우 동일한 시간에 같은 파일을 올릴 경우에도 다른 파일명을 만들 수 있도록 하기

 ( UUID를 사용하다가 시간_파일명으로 수정했는데, 다시 생각해 볼 것)

 * Javadoc 만들어보기

2020/03/01 - [Edu/BoostCourse - Web] - [JavaDocs] Javadoc 문서 만들기

 * 업로드 파일명 중복처리

[BoostCourse] 프로젝트 6. 예약관리 시스템: 한줄평 등록

 - 다음 글

2020/02/29 - [Edu/BoostCourse Web Project] - [부스트코스] 프로젝트6. 예약관리 시스템: 한줄평 (BE) 제출 [PASS & Feedback]

2020/03/01 - [Edu/BoostCourse Web Project] - [부스트코스] 프로젝트6. 예약관리 시스템: 한줄평 (FE) 제출 [PASS & Feedback]

 - 총 정리

Summery Contents

 * 이 글은 웹 프로그래밍 과정을 진행하면서 "개인적인" 생각을 정리한 글입니다.
 * 잘못된 부분, 이해가 안 되는 부분 또는 더 좋은 생각이 있으신 분들은 댓글 남겨주세요.

프로젝트 6 기본 기능 다이어그램

 프로젝트 6 기능 구현 후, 다중 파일로 기능 변경

프로젝트 6 내용은 아니나 흐름상 필요해보이는 기능 

시연 영상

개선해야 할 내용

 - 슬라이드 구현한 내용으로 기능은 작동하나 스크립트 오류 발생

[BoostCourse] 프로젝트 5. 예약관리 시스템: 예약하기 (FE)

 - 이전 글

 - [부스트코스] 프로젝트 5. 예약관리 시스템: 예약하기 분석 및 설계
 - [부스트코스] 프로젝트 5. 예약관리 시스템: 예약하기(BE) 제출 [PASS & Feedback]

피드백

개선할 사항

 - 공통 API 호출 함수인 getAjax()의 함수명 수정 ->  callAjax()
 - 소스코드 구조 개선 필요 (단일 책임의 원칙:SRP)
 - 의도에 맞는 변수명 개선 (이름 지정 규칙: JavaScript Naming Conventions)
 - 특정 상황에 사용할 수 있는 정규표현식이 아닌 포괄적으로 사용할 수 있도록 하기

시연 영상

- 기본적으로 예약하기, 예약확인하기 화면이 영상에 보여야 함.
- 예약하기시 -, + 버튼을 클릭해서 숫자가 변경되는 부분이 영상에 보여야 함.
- 예매자 정보를 입력하고 총매수가 변경되는 것이 영상에 보여야 함.
- 연락처 정보에 숫자와 숫자가 아닌 문자를 입력하는 과정이 영상에 보여야 함.
- 약관의 접기/보기를 클릭해서 변경되는 화면이 영상에 보여야 함.
- 동의버튼을 클릭해서 변경되는 화면이 영상에 보여야함.
- 예약내용을 모두 올바르게 입력해서 '예약하기' 버튼이 선택가능한 상태로 활성화 되는과정이 영상에 보여야함.
- 이메일을 유효하지 않은 정보를 입력해봄.
- 취소를 눌러서 취소된 예약이 그부분이 노출되는지가영상에 보여야 함.

[BoostCourse] 프로젝트 5. 예약관리 시스템: 예약하기 (BE)

 - 이전 글

 - [부스트코스] 프로젝트 5. 예약관리 시스템: 예약하기 분석 및 설계

 - 다음 글

 - [부스트코스] 프로젝트5. 예약관리 시스템: 예약하기(FE) 제출 [PASS & Feedback]

BE_PJT E-1. 예약관리 시스템: 예약하기

피드백 요약

하단에 작성된 내용은 기능관련 피드백만

1. Service

• auto seq (key) 기능 사용하기 (ref - link)

SimpleJdbcInsert(docs)

 위 사이트에서 SimpleJdbcInsert라는 내용을 살펴보면

1. SimpleJdbcInsert 클래스 선언

2. setDataSource() 메서드에서 new SimpleJdbcInsert() 클래스 생성

3. withTableName("테이블명").usingGenerateKeyColumns("pk명") chaining 메서드를 통해 필요한 값을 주입

4. AutoGenerated Key 사용할 메서드에서 executeAndReturnKey("파라미터") 메서드를 통해 입력된 값에 대한 Auto-generated Key를 얻을 수 있다.

5. 위 사이트의 예시에서 first_name, last_name을 파라미터로 넣는 이유를 몰랐는데 직접 해보면 테이블에 기본값이 없는 필드는 입력을 해주어야 원하는 key 값을 얻을 수 있다.

 위 테이블 보면 product_id, display_info_id, reservation_name, reservation_tel, reservation_email, reservation_date 필드에 "기본값이 없음"을 알 수 있다.

위 로그에 132 라는 값을 DB에서 확인

자동증가 132의 값이 리턴되는 것을 알 수 있다.

현재 프로젝트에 적용되어 있는 클래스는 NamedParameterJdbcTemplate이기 때문에 밑의 내용으로 Generated Key를 구현

NamedParameterJdbcTemplate.update 알아보기(docs)

 - update 메서드 중 generatedKeyHolder를 파라미터로 사용하는 메서드가 2개 있다.

Issue an update via a prepared statement, binding the given arguments, "returning generated keys".

public int update(String sql, SqlParameterSource paramSource, KeyHolder generatedKeyHolder)

public int update(String sql, SqlParameterSource paramSource, KeyHolder generatedKeyHolder, String[] keyColumnNames)

위 update메서드를 통해 리턴받은 generated key

2. Controller

• 파라미터의 null이나 공백("") 체크에 대한 조건식 처리

apache에서 제공하는 라이브러리 사용

Maven Library

참고 사이트

https://commons.apache.org/proper/commons-lang/apidocs/org/apache/commons/lang3/StringUtils.html

이후 수정한 내용

 - 기존 세션에 대한 로직을 페이지 요청 컨트롤러에서 모두 처리하여 불필요한 코드를 줄여보았다.

[BoostCourse] 프로젝트 5. 예약관리 시스템: 예약하기

 * 이 글은 웹 프로그래밍 과정을 진행하면서 "개인적인" 생각을 정리한 글입니다.
 * 잘못된 부분, 이해가 안 되는 부분 또는 더 좋은 생각이 있으신 분들은 댓글 남겨주세요.

 - 다음 글

[부스트코스] 프로젝트5. 예약관리 시스템: 예약하기(BE) 제출 [PASS & Feedback]

[참고 문서]

[기획서]  - 부코_웹_PJT3-5_예약서비스.pptx
[Trello]   - boostCourse (작성 중)

[목차]

1. 프로젝트 기능 요구사항 정의서
2. 프로젝트 기술 요구사항 정의서
3. 예약하기, 예약확인 시퀀스 다이어그램
4. API Data Flow
5. 예약하기 View 구현 상세
6. 세션 등록 이벤트 시점
7. 예약확인 페이지 JsonData 확인

1. 프로젝트 기능 요구사항 정의서

2. 프로젝트 기술 요구사항 정의서

3. 예약하기, 예약확인 시퀀스 다이어그램

4. API Data Flow

5. 예약하기 View 구현 상세

6. 세션 등록 이벤트 시점

7. 예약 확인 페이지 JsonData 확인

8. 예약확인 페이지 구현

[BoostCourse] 프로젝트 4. 예약관리 시스템: 상세페이지 (FE)

 - 이전 글

[프로젝트 4-2 (FE)에 대한 피드백 정리]

 - 필요한 요구사항은 모두 충족하였다.

 - 디버깅 시 작성했던 코드는 테스트 후 삭제하는 습관을 갖는다.

 - 코딩컨벤션을 되새겨보아야 한다. "setXX()이라는 메서드 명이 하는 일"

[코딩 컨벤션] 

 - setXXX() 함수의 역할이 무엇인지 생각해 보아야 한다.

[불필요한 코딩]

 - 테스트를 위한 코딩은 삭제해야 한다.

 - 실제 개발 시에도 배포할 때는 테스트 코드는 삭제

[일관성 있는 코딩 및 불필요한 코딩]

 - 위쪽에서와 달리 여기서 변수 선언 및 초기화를 했다.

 - 굳이 할 필요 없는 코드 였기 때문에 삭제 해야 했다.