에스알닷컴

[Java Config] xml 설정 대신 Java 설정으로 바꿔보기

BoostCourse 프로젝트 설정 수정해보기

Convert web.xml to WebApplicationInitializer

 - 프로젝트에 필요한 내용만 web.xml에 설정을 했으나 그마저도 Java Config로 변경하고자 함

참고 사이트

https://www.baeldung.com/spring-xml-vs-java-config

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

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

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

수료증 페이지

 - 공유하기 (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 등등

[웹 프론트엔드 취약점]

 - View에서 Controller로 보낸 데이터의 유효성 검사 필요

 - Spring Filter를 사용한 XSS(Cross-Site Scripting) 처리 필요

한줄평 400자 이상 입력 후 제출 시 백엔드에서도 체크할 수 있도록 처리

이미지 확장자 jpg, png외에 다른 확장자의 파일을 업로드를 시도할 경우, 한줄평 등록 기능에 대한 방어로직 필요

별점 값이 설정되어 있지 않음에도 한줄평이 제출될 경우, 한줄평이 등록 기능에 대한 방어로직 필요

별점 값의 range를 제한하여 체크하는 로직이 필요

[Verification & Validation]

Verification (검증)

 - Verification Process는 문서, 설계, 코드, 프로그램을 체크하는 것.

 - 제품이 올바르게 만들어지고 있는지 체크, 요구사항, 설계 명세서에 따라 만들어지고 있는지 확인

Validation (유효성 검사)

 - Validation이란 소프트웨어 테스트의 동적 메커니즘이며, 실제 제품을 검증하는 것.

 - 올바른 제품을 만들었는지 체크, 비즈니스 요구사항을 충족하는지 여부를 결정

Difference Verification & Validation

프로젝트 적용 내용

 - Verification 

 - Validation 

[프로젝트 작성 후 보완해야 하는 비기능성 요소]

 - 수정 및 수정이 필요한 근거

레이어 팝업 컨텐츠(Layer Popup Content)

 * 팝업 창 차단 기능이 있는 브라우저에서 시작적으로 팝업 창과 같은 효과를 내도록 구현한 컨텐츠
 레이어 팝업 컨텐츠는 같은 페이지의 일부 영역을 가리고 그 위에 표시되므로 그 뒤의 컨텐츠를 보기 위해서는 반드시 레이어 팝업을 화면에서 사라지도록 해야 한다. 레이어 팝업은 웹 페이지에 포함되는 컨텐츠이므로 초점 이동과 컨텐츠의 선형구조를 위반하지 않도록 구현해야 한다.

초점 이동

 * 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.

 웹 페이지에서 제공하는 모든 기능을 키보드만으로 사용하는 경우에도 사용자 입력 간의 초점 이동은 적절한 순서를 따라야 하며, 이 과정에서 컨텐츠 조작이 불가능한 상태가 되거나 갑작스러운 페이지의 전환 등이 일어나지 않아야 한다.

 또한 초점을 받은 컨텐츠는 저시력 장애인과 지체 장애인들이 인지할 수 있도록 시각적으로 구별되어야 한다.

 (1) 초점 이동 순서 유지 : 사용자가 키보드를 이용하여 초점을 이동하는 경우 이동 순서가 관례를 벗어나면 사용자에게 혼란을 주기 때문에 초점 이동 순서는 사용자가 예측하는 이동 순서와 일치하여야 한다. 바람직한 방법은 기존의 관례를 따르도록 콘텐츠를 제공하는 것이다. 관례와 달리 초점 이동 순서를 결정해야 하는 경우에는 사용자 입력 간의 이동 순서가 논리적이 되도록 구현해야 한다. 예를 들어, 사용자 아이디, 비밀번호를 입력하는 입력 창과 로그인 버튼 간의 초점 이동 순서는 사용 자 아이디, 비밀번호, 로그인 버튼의 순서이어야 한다. 

(2) 함정 또는 오류 방지 : 웹 콘텐츠는 더 이상 키보드 조작이 불가능한 상태가 되어 다음 사용자 입력 또는 컨트롤 등으로 초점을 이동할 수 없거나 이전 페이지로 초 점을 이동할 수 없는 상태가 되지 않도록 구현하여야 한다.

(3) 초점의 시각화 : 사용자 입력 등이 위치 지정 도구(마우스)나 키보드 조작을 통해 초점을 받았을 때, 해당 컨트롤이 초점을 받았음을 시각적으로 구별할 수 있음을 의미한다. 대표적인 예로 키보드 조작을 통해 버튼이 초점을 받았을 때 이 버튼의 주위에 점선의 테두리가 표시되는 것을 들 수 있다. 위치 지정 도구에 의한 초점과 키보드에 의한 초점의 표시 방법이 다른 것도 허용한다. 

검사 항목 6.1.2 절을 준수함으로써 얻을 수 있는 기대 효과는 다음과 같다. 

(1) 화면 낭독 프로그램을 이용하는 사용자의 경우, 사용자 입력 주변의 상하좌우에 위치한 콘텐츠에 대한 정보를 알 수 없다. 따라서 웹 콘텐츠를 사용하는 과정에서 키보드 조작에 의한 사용자 입력 간의 이동 순서는 관례를 따라야 한다. 그렇지 않으면 사용자 입력의 조작 과정에서 혼란을 주게 된다. 

(2) 마우스나 키보드 조작을 통해 특정 영역으로 컨트롤을 이동하였을 경우에 해당 영역이 초점을 받았음을 시각적으로 알려준다면 저시력 장애인, 노인, 지체 장애인뿐 만 아니라 비장애인들도 어느 컨트롤이 선택되었고 활성화시킬 수 있는지 쉽게 인지할 수 있다. 

컨텐츠의 선형구조

웹 페이지의 모든 컨텐츠는 시각적인 2차원 공간의 상하좌우로 배치되어 있어서 원하는 곳을 바로 찾아가거나 그 기능을 바로 선택하여 실행할 수 있다. 그러나 화면 낭독 프로그램 사용자는 모든 컨텐츠를 순차적으로 접근할 수 있기 때문에 시각적인 배치가 아닌 읽어주는 순서가 중요하다. 여기서 컨텐츠가 보조 기술로 제공되는 순서를 컨텐츠의 선형 구조라고 하며, 이 구조는 논리적이어야 한다. 마크업 언어로 제작된 컨텐츠의 선형 구조는 스타일 시트와 테이블 구조들을 제거하면 얻을 수 있다. 

컨텐츠의 논리성

 * 컨텐츠는 논리적인 순서로 제공해야 한다.

콘텐츠는 보조 기술 사용자가 맥락을 이해할 수 있도록 논리적인 순서로 제공해야 한다.

(1) 콘텐츠의 선형 구조 유지 : 웹 페이지를 구성하는 모든 콘텐츠는 사용자가 그 내용을 이해할 수 있도록 선형 구조로 작성되어야 한다. 

(2) 내용, 표현 및 기능 분리 : 브라우저 화면에 표시되는 콘텐츠의 순서는 웹 페이지에 수록된 콘텐츠의 선형 구조와 항상 같은 것은 아니다. 예를 들어 스타일 시트를 사용하면 웹 페이지를 구성하는 콘텐츠의 순서를 변경하지 않고도 화면에 표시되는 콘텐츠의 배치를 임의로 변경할 수 있다. 따라서 웹 페이지를 구성하는 콘텐츠의 나열 순서는 그 맥락을 이해할 수 있도록 논리적으로 구성해야 한다. 시각적으로 배치를 변경해야 하는 경우에도 콘텐츠의 선형 구조는 유지되어야 한다.

검사 항목 7.3.1 절을 준수함으로써 얻을 수 있는 기대 효과는 다음과 같다. 

(1) 콘텐츠의 선형 구조가 논리적인 콘텐츠는 지적 장애, 언어 장애 및 학습 장애가 있는 사용자들이 콘텐츠를 이해하는 데 도움을 준다. 

(2) 콘텐츠의 선형 구조가 논리적인 웹 콘텐츠는 스타일 시트(style sheet)를 바꾸거나 기능을 제거하더라도 그 내용을 순서대로 읽어 문서의 의미를 이해하기가 쉽다.

[Python] 데이터 사이언스로 시작하기

 - 파이썬 문법
 - 데이터 분석 방법 알기
 - 데이터 분석 라이브러리 (pandas, seaborn) 사용하기

데이터 분석

 - 무엇을 분석할 것인가 ?

 - 왜 분석을 하는가 ?

데이터 분석 환경 만들기

 - Anaconda 설치 https://www.anaconda.com/distribution/

 - Jupyter & Jupyter Lab 사용 https://jupyter.org/

 - JupyterNavigator 화면

 - Jupyter Notebook 화면

[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

[JavaDoc] 만들기

 - 해당 프로젝트 오른쪽 클릭 > Export > Javadoc

next > next 이후 Encoding 파라미터 설정 

프로젝트 경로 내에 doc 폴더로 생성

index.html 실행 시 화면

 - Packages, Classes, 등등 javadocs로 프로젝트 구성을 볼 수 있다.

Javadoc에 적용되는 주석 상태

 - 기본적으로 설정되어 있는 author는 적용

 - date를 생성하여 적용해봤지만 문서에는 적용이 안됨

 - 해당 클래스나 메서드에 설명은 /** .. */ 주석의 맨 위에 작성해야 나옴

 - 주석은 계속 수정이 필요. 

Javadoc 주석(/** .. */) 내에 작성한 내용이 수정되지 않는 것을 원하는 경우 <pre> ... </pre>안에 작성

 * 주석도 활용할 수 있는 형식으로 작성하도록 하자