frontend-project

개요

• 해당 프로젝트는 이스트소프트 오르미4기 부트캠프 에서 진행된 프론트엔드 프로젝트이다
• 개인 프로젝트이다
• 정보 제공을 위한 간단한 웹 사이트 프로젝트이다.
• 제공되는 정보마다 레이아웃을 구분하여 할당한다.

사용 기술 및 api

• HTML
• CSS
• JavaScript
• 카카오맵 api

주요 기능

• 홈 버튼
• 내부 링크
• 이미지 디스플레이
  • 버튼 클릭시 이미지 로딩 시작
  • 무한 스크롤
  • 버튼 재 클릭시 이미지 로딩 취소
• 카카오 맵
  • 커스텀 스타일
  • 초기 화면으로 돌아가기
  • 전체 화면 기능
• 이메일 입력
  • 엔터를 누르거나 버튼 클릭하면 입력
  • 입력이 진행됬다는 것을 로딩 이미지로 나타냄
  • 이메일 형식 검사, 알림창
  • 검사 통과시 모달 창 팝업
• 모달 창
• 스크롤
  • 마우스를 올리면 진하게 표시하고 천천히 위로 스크롤 한다
  • 마우스를 올리면 작동을 멈춘다
• 외부링크

보유 파일

• index.html : HTML 파일
• hodu_style.css : CSS 파일
• image_scroll.js : 무한 스크롤 이벤트 JS 파일
• map.js : 지도 이벤트 JS 파일
• else.js : 그외 이벤트 JS 파일

주요 태그 와 보유 정보

• header(#index_banner) : 배너 역할, 홈버튼, gnb
• main(#intro_scope) : 인트로(소개글) 역할, 텍스트, 이미지
• section(#contents_scope) : 두개 아티클 보유, 단순 이미지, 텍스트, 매거진(이미지 무한 로딩)
• section(#support_scope) : 지도, 이메일 입력
• section(#modal_scope) : 모달 창
• aside(#scroll_btn) : 우측 하단 스크롤
• footer() : 홈 버튼, 외부링크

프로젝트 목표

• 실제 의뢰를 받아서 프로젝트를 진행하는 것처럼 전체적인 설계를 먼저 한 후 진행한다.
• 배운내용의 집약체가 될 수 있도록 구현한다.
• 간단하게 구현하기 보단 다양한 방법으로 구현하는 것을 목표로 한다.
• 오직 디자인 적인 요소에만 div를 사용하고 그외에는 적절한 시멘틱 태그를 적용한다.
• 쓸모없는 요소를 만들지 않는다.
• 공통으로 적용되는 스타일은 각각 부여한 것이 아니라 공통으로 적용한다.
• 다양한 이벤트들을 적용해본다.
• 이벤트가 발생했을때 경우의 수를 생각하여 이벤트 처리에 반영한다.
• html,css,javascript를 분리해서 구현하도록 한다.

프로젝트 후 셀프 피드백

1. 한번만 사용하면 #id로, 여러 곳에 공통적으로 사용되면 .class로 하여 css를 적용하였었는데 이 기준은 알아보기는 쉬울 수 있을 지라도 확장성의 측면에서 아쉬운 선택이었다고 생각 된다. 기본적으로 .class로 부여하고, class인자를 타고 가서 자식 요소로 접근시키면 더욱 구조적으로 될 것으로 생각되고, 나중에 더 중요한 스타일이 생기게 된다면, #id로 적용 시키면 되니, 유지 보수성에서도 우수할 것으로 판단된다.

2. 플렉스를 너무 많이 사용하였다. 플렉스를 사용하면 필수적으로 컨테이너가 필요하고, 협업자가 있다면, 구조 파악에 더 많은 노력이 들 것으로 예상된다. 필수적으로 요구되는 부분이 아니라면, 마진, 패딩을 사용하는 것이 더 나은 선택이었다고 판단된다.

3. 플렉스로 선언했다면, 사이즈를 정할 때 width보단 flex-basis로 정하는 것이 플렉스를 다루기 더 유리한 방법으로 판단된다.

4. 간격 설정을 할 때 마진으로 전부 통일 시켜 했었는데, 형제 간에서는 마진을, 부모-자식 간에서는 패딩으로 설정해 주는 것이 더 유리하다.

5. 이미지 역시도 특별한 기능이나 의미가 없다면 가상 요소로 처리하는 것이 더 유리하다. 왜냐하면 화면에 랜더링 될 때 html파일부터 가장 먼저 되기 때문에 성능적으로 우수하며, html구조 파악에도 더 도움 된다. 가상 요소에는 이벤트를 등록할 수 없으므로 주의하자

6. 설명이 필요한 부분은 디자인적으로는 사용자가 볼 때 보이지 않는 부분이라도 html파일에서 생략하지 않는다. 대신 css로 보이지 않게 처리한다. 시각 장애인등에게도 접근성이 좋아지는 방향이라 판단된다.

7. 모달 요소에는 dialog 태그를 쓰자. 모달인 것을 한눈에 알아볼 수 있으며, 기본적으로 hidden으로 설정 되어 있고, show modal 같은 함수를 간편하게 사용 가능해서 훨씬 유리하다.

8. 주소를 위한 태그 address, 사진과 설명을 위한 figure, figcaption도 적극적으로 사용하자.

9. 접근성을 위한 css 설정을 .a11y에 넣어 관리하자