에스알닷컴

[BoostCourse] 프로젝트 3. 예약관리 시스템: 메인페이지 (FE)

 - 이전 글

[HTML 커멘트]

 - href="#" 최대한 줄이기

 - href로 이동하는게 아니면 javaScript로 조작하기

[JS]

 - 공통 JS 구현

 - JS 코딩 컨벤션

  세세한 부분을 잘 집어 주신 듯 하다.

다음 프로젝트 4 진행하기

[BoostCourse] 프로젝트 3 . 예약관리 시스템 : 메인페이지 (BE)

 - 이전 글

 - 다음 글

 - 프로젝트 제출 컨텐츠에서 개편

[Java Config]

 - 스프링 설정 시

 - reservation v1.4 폴더 내부 구조 상

img 폴더와 reservation-html-base 폴더 하위 폴더인 img 폴더 안에 파일이 겹치는 내용이 있어서 둘다 설정 했었다.

 - 폴더 내용을 확인하면 img 폴더는 상품(Product)의 file_info 테이블에 저장되어 있는 이미지 파일

 - reservation-html-base의 하위 폴더인 img 폴더 내용은 View를 구성하기 위한 컴포넌트 이미지 파일이 저장되어 있다.

 * 피드백 이후 같은 파일을 삭제, resources 하위 폴더인 img 폴더의 폴더명을 수정

 - 또한 setCachePeriod() 메소드는 정적자원에 대한 캐시 주기를 설정 하는 것

 - 숫자 31556926의 의미는 1년, 그렇기 때문에 이 상수 값을 모든 함수에 설정하기에는 중복이 많다.

 * 피드백 이후 상수 선언으로 동일한 설정 정보를 적용

[Logger]

 - 이 내용은 나중에 뒷 부분에서 배우게 된다.

 - 혹시나 잘못된 데이터로 인해 오류 발생 시, 에러난 시점을 쉽게 찾기 위해서 설정

 - Logger에 대한 정확한 내용을 모르고 작성한 내용에 대해 피드백을 해주심

 * Logger에 대한 이론적인 내용을 정리해야할 듯

[Controller]

 - Service Layer를 DI를 통해 사용하기 위해서 설정, 오타가 있었네...

 * 피드백 후 오타 수정 하였습니다.

[이론]

 - DI관련 어노테이션과 방법, 특징, 장단점 정리가 필요

 - 위에 변수 설정이 default로 설정을 아무생각 없이 한 것을 피드백보고 알았다..

 * 피드백 이후 다른 클래스에서 쓸 내용이 아니라서 private 선언으로 수정

[Log]

 - API호출 시 데이터가 제대로 오는지 확인하기 위해서 끄적여 본 내용이다.

 - 생각해보니 DB에서 잘못 가져왔다면 거기서 예외처리를 했어야 했다.

 - "Err"보다 0으로 표시하여 정확한 값을 나타내 주는 것이 좋은 듯 하다.

 * 피드백 후 DAO Layer에서 예외처리 추가 후, 메서드 호출 로그만 나오도록 수정

[Parameter]

 - required 속성이 사실 필요는 없다. 

 - View에서 처리할 내용이긴 한데 혹시나 몰라서 설정을 해봤는데 상세한 피드백이 왔다. (이건 몰랐네)

 * 피드백 후 추가적으로 defaultValue를 0으로 설정하여 카테고리 전체리스트가 0으로 들어오게끔 설정

[logback.xml]

 - Logger 설정을 위한 logback.xml 파일 설정

 - 뒤 프로젝트 강의에서 배우게 된다.

[BoostCourse] 프로젝트 3: 예약관리 시스템 : 메인페이지 (BE)

 - 이전 글

 - 다음 글

[ 변경된 사항 ]

 1. 프로모션(Promotion)

  - 프로모션 API 문서 확인

  - 프로젝트의 클래스 수정

 2. 카테고리(Category)

  - 카테고리 API 확인

  - 카테고리의 클래스 수정

 3. 상품(Product)

  - 상품 API 확인

  - 상품의 클래스 수정

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

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

 - 다음 글

 - 프로젝트 4의 예약하기 기능을 구현하기 위한 기획서를 분석하여 작성

 - 설계서(구글 프레젠테이션)

 [목차]

 1. 기존 프로젝트 3 소스 수정

  - 기존 :: Controller에서 List<VO>포맷을 JSON 파싱 후 String 리턴하는 방식

  - 신규 :: Controller에서 Map<String, Object>로 리턴하는 방식

  - Dao에서 단일 데이터 호출 Service 단계에서 트랜잭션 데이터 만들도록 정리

 2. 요구사항 정의

  2.1 프로젝트 4 기능요구사항 정의

  2.2 프로젝트 4 기술요구사항 정의

  2.3 프로젝트 4 소스코드 작성 규칙

 3. 상품 전시 정보 보기 기능 Sequence Diagram

  - Proejct 3 메인페이지 작성 내용을 기준으로 사용자가 특정 상품을 눌렀을 때 상세 상품 전시 정보 페이지를 보여주는 기능을 구현

 4. 프로젝트 3 리펙토링

  4.1 카테고리 UI 구현

  - 템플릿을 이용하여 동적으로 갯수가 추가되도록 구현

  4.2 프로모션 UI 구현

  - 슬라이드 구현 방식을 캐러셀 방식으로 구현

 5. DisplayInfo API 구현

 - Swagger에 작성된 문서를 통해 Model과 API 작성

6. 프로젝트4. 예약관리 시스템: 상세페이지 구현 순서

7. 프로젝트4. 예약관리 시스템: 상세페이지

 - 상단

 - 중단

 - 하단

8. 프로젝트 4. 예약관리 시스템: 상세페이지 - 시연영상

 - 수정

[BoostCourse] 웹개발 - Handler 라이브러리를 활용한 Template 작업

 - handlebars.js 라이브러리 등록

[ 1. 단일 데이터 ]

[ 2. 단일 데이터 + 다중 댓글 ]

[ 3. 다중 데이터 동적 조작 ]

See the Pen BvYpEe by seokrae (@seokrae) on CodePen.

[ 4. 다중 데이터 핸들러 생성 ]

See the Pen QzQpLb by seokrae (@seokrae) on CodePen.

[API Document] Swagger

Swagger란?

 - Web API 문서화 도구
 - API들이 가지는 명세(Spec)을 관리하기 위한 프로젝트

Swagger의 기능

1) API Design
2) API Development
3) API Documentation
4) API Testing
5) API Mocking and Virtualization
6) API Governance
7) API Monitoring
8) OpenAPI & Swagger

Web API를 만들지 않고 명세화하기 (Guide)

Create new API (Link)
 1. 왼쪽 사이드 바에서 Create New API를 누르고 선택

 2. API 정보를 입력해야 하는 대화 상자가 표시됨

 3. Create API 누르기

Code Editor

1. 상단 프로젝트 제목 및 설명

2. get method

3. post

4. Models

[문서정리] 에버노트

내게 필요한 기능

[일상]

 - 하루 업무 정리

 - 주간 업무 정리

 - 연간 스케줄 관리

[개인]

 - 개인 프로젝트 작업 정리

 - 블로그 게시물 작업 정리

[회사]

 - 회의록

 - 회의안건

 - 프로젝트

 - 일간 보고

 - 주간 보고

 - 월간 보고

 에버노트 툴을 활용해서 업무의 효율성을 높일 수 있도록 해보자

[플래너 작성]

월

 - 한 달의 목표치를 설정 후 주별로 분량 조절한다.

주

 - 한 주에 정해진 학습 분량을 일간 단위로 자세하게 계획을 세운다.

 - 한 주에 계획을 세울 때 중요도를 체크하여 실천가능한 순으로 분류한다.

일

 - 일간 단위로 계획을 세울 때 무리하게 세우는 것보다는 내가 할 수 있는 선에서 계획을 세운다.

 - 하루 계획을 세웠다면 구체적으로 해야하는 일의 양을 정한다.

[블로그 작성]

 - Headline(제목) 작성시 '도입부'를 읽도록 유도하는 역할

 - Opening(도입부) 작성, 본문의 3~4 문장을 읽음으로 본문 전체를 다 읽도록 하기 위함

 - Half-Width Image(이미지), 라인당 글자수(character per line)을 줄여 독자가 글을 읽는 것이 수월해지도록 함

 - Sub-Head1(소제목1)은 첫 번째 단락을 읽게 하는 역할로 본문에서 무너가 얻는 만한 정보가 있다는 확신을 심어주는 역할

 - CTA1(콜투액션1)은 본문에 대한 요약문장을 제공하거나 트위터, 페이스북 등의 공유 버튼을 삽입으로 백링크^[각주:1]로서의 역할을 함

 - Sub-Head2(소제목2)은 구체적이고 확실한 해법·결론을 제시하면서 마지막 단락으로 이어지게 함

 - Content2(본문2)은 단순하고 실행 가능한 해법을 제시함으로써 독자들에게 확실한 소득을 안김

 - CTA2(콜투액션2)은 포스팅의 최종목표(구매, 가입, 구독) 등으로 글을 마무리

참고사이트 - http://www.marketology.co.kr/seo/블로그-글-작성-요령-기본-포맷-이해하기/

[개인 프로젝트]

 - 프로젝트 미션

  - 비즈니스 문제를 해결하기 위한 목적(Purpose)

 - 프로젝트 목표

  - 프로젝트에서 생성할 제품이나 서비스의 내용을 기술

  - 프로젝트 미션을 달성하기 위해 구체적으로 무엇을 해야 하는지, 무엇을 제외해야 하는지

 - 프로젝트 성공 기준

  - 비즈니스 가치(Value)를 구현

- 개별 프로젝트

[회의]

 - 회의 안건

 - 회의록

[BoostCourse] 웹개발 - DOM API 활용

2. DOM API활용 - FE

 1) Element Attribute 사용

  - tagName 같은 경우는 프로젝트 할 때, Event Delegating, Bubbilng 적용 시 사용할 수 있습니다.

 2) Document Method 사용방식

  - 현 프로젝트에서 주로 사용할 수 있는 메소드는 Event Delegation, Bubbling개념 적용할 수 있도록 closest() 메서드 정도가 되지 않을까 싶다.