목차

1. 프로젝트의 목표

2. 프로젝트 1차 완성 및 코드 리뷰

2-1). 프로젝트 분석
2-2). 난감하거나 어려웠던 부분
2-3). 2차 작업시 개선하거나 추가했으면 하는 부분

1. 프로젝트의 목표

1. 수업에서 실습한 일일 기록 형식의 토이프로젝트를 재구현하는 것을 목표
2. 재구현 이후, 별도의 추가기능들을 추가하여 다이어리가 아닌 다른 용도로 사용할 수 있도록 커스터마이징 진행할 것을 목표

2. 프로젝트 1차 완성 및 코드 리뷰

2-1). 1차 프로젝트 분석

1). 공용 CSS

1. 프로젝트는 한개의 공용 CSS파일과 3쌍의 HTML/CSS 파일로 구성되어 있다.
2. 프로젝트를 시작함에 있어, 구현할 3개의 페이지의 reset.css나 전체적인 layout, 그리고 header영역의 반응형을 공용 CSS로 구현했다.
3. 공용CSS에서 header영역의 자식요소들을 top-wrap으로 감싸 max-width로 반응형을 구현했다.
   
   

2). 로그인 및 회원가입 페이지

1. 로그인 페이지와 회원가입 페이지는 폼 태그를 이용한다는 점에서 상당히 유사하여 HTML은 거의 일치하게 작성했다.
2. 폼태그 안의 자식요소들은 flex를 활용하여 구성했다.
3. 가운데 로고 하단의 글자의 shadow는 box-shadow로 구성했다. 글자의 반만 하이라이트 처리할 때 종종 사용하기에 익혀두는 것을 권장한다.

• box-shadow : inset /그림자를 밖으로 내보냄/ 0 /그림자 위치/ 0 /흐림 정도/ -0.6 /그림자의 확산 정도(크기)/
  
  

3). 메인 페이지

1. 다른 페이지와 달리 상단의 우측에 가입자 이름과 로그아웃 버튼이 함께 붙어있어, 이를 float : right로 처리했다.
   float의 경우, 반응형 처리를 할 때, 별도의 작업없이 부드럽게 하단으로 이동한다는 장점이 있어서, 반응형 작업시 종종 사용하길 권장한다.

2. 수업에서는 메인 페이지 가운데에 그려진 선을 form태그의 border-right로 처리했으나, 필자는 임의의 div태그로 처리했다.
   회고를 해보니, 전자의 경우가 코드 사용량도 적어 훨씬 효율적일 것이라 생각된다.
   아마도, 메인 태그를 flex 및 justify-contents: space-between을 사용하려 그랬던것 같은데, 따로 div태그 없이도 충분히 구현 가능하다.
   

3. 폼태그의 width 값은 이를 감싼 wrapper에 flex-basis 값을 부여하여 틀을 잡았다.
   그 외의 자식요소들에는 width : 100%를 부여했으며, 없으면 안된다.
   이와 함께, flex-shrink : 0을 사용하여 크기가 변하지 않게 고정했다.
   

4. 아티클의 쉼표는 가상요소를 만들고, background 속성으로 처리했다.
   여기서 핵심은 백그라운드의 배경색을 초반에 작성하면 url속성값과 함께 사용할 수 있다. 다만, url이미지의 배경색이 없어야 하며, 이미지가 들어갈 가상요소의 배경색과 같아야한다.
   위치는 position : absolute를 사용하여 지정해줬다.
   

5. 아티클의 테두리의 두 줄 처리는 각각 아티클 자체의 border와 아티클의 가상요소의 border를 함께 사용하여 구현했다.

• border-width : border의 두께 값을 나타냄
  

6. 반응형 작업

• max-width: 1024px를 기준으로 메인 태그는 max-width: calc(100% - 60px); 으로 양 옆에 30px씩 여유를 갖도록 작성했다.
• 가운데 줄은 숨김처리로 깔끔하게 정리했다.
• 아티클 태그는 flex-direction: column;으로 방향을 바꿨다.
  

2-2). 난감하거나 어려웠던 부분

1. 메인 태그 가운데의 직선

• 당연히 빈 div 태그를 사용하려 했으나, 코드 자체도 복잡하지고, 반응형과 같은 사후 작업시에 불편을 주기에 수업에서 사용한 border-right를 사용하여 해결 할 것을 적극 권장한다.

2. 메인 태그의 양식부분의 width값 지정

• form태그의 자식요소에 특정한 width값을 주기 싫었으나, 주지 않으면 모양이 틀어져서 원본가 전혀 다른 형태가 되었다.
• 또한 추후에 반응형을 넣어야 했기에 보다 유동적인 width 값을 부여해야 하는 것이 난감했다.
• 수업에서 이를 해결하기 위해, form태그에 flex-basis과 flex-shrink : 0을 함께 이용했다.
  이는 form태그의 모양도 잡아주고, 자식요소에 width:100%을 부여하여 보다 유동적인 형태로 만들어줘서 유용하다.

2-3). 2차 작업시 개선하거나 추가했으면 하는 부분

1. Main 페이지 : form태그의 날짜를 현재 날짜로 반영하기

• Problom: 현재 기록된 날짜는 임의로 지정한 날짜이기에 정적인 것이 문제라고 생각한다.
• Solution: 이를 개선하기 위해서는 자바스크립트의 new Date()생성자 함수를 적용할 계획이다.

2. Main 페이지 : localStorage를 활용한 실시간 컨텐츠 반영

• Problom: 현재 기록된 내용은 임의로 작성된 내용이라 정적인 것이 문제라고 생각한다.
• Solution: 이를 개선하기 위해서는 JQuary의 localStorage를 활용할 계획이다.

3. login, join 페이지 : 반응형 구현

• Problom: 현재 header태그만 반응형이 구현된 상태인 것이 문제다.
• Solution: 남은 부분도 반응형 처리하면 된다.