기초부터 완성까지 프론트엔드 - day1

Day 1

오늘 읽은 범위

• 1장 프런트엔드 개발이란?
• 2장 HTML과 CSS

책에서 기억하고 싶은 내용을 써보세요.

• 클라이언트: 서비스를 이용하는 사용자 또는 사용자의 디바이스를 의미
• 클라이언트 영역: 사용자의 PC와 스마트폰에서 사용자가 서비스를 접하는 영역

• 프런트엔드 개발: 클라이언트 영역에서 서비스 사용자와 대화하는 인터페이스를 개발하는 것

  • 사용자가 입력한 데이터를 비즈니스 로직에 따라 처리
  • 서버와 통신해 가져온 데이터를 출력
  • 디자인을 적용해 스타일링 하기

• 프런트엔드의 궁극적인 목표:

  • 서비스를 이용하는 사용자의 접근성과 편의성 증진

• 프런트엔드 개발자의 역할

  • 요구 사항 분석
  • 설계 (사용될 기술 검토, 구조 설계)
  • 개발 (디자인, 기획서를 바탕으로 기능이나 모듈을 개발)
  • 배포 (테스트 환경을 구성해 QA 과정을 반복, 자동화된 배포 전략을 도입해 애플리케이션 배포)

• 시맨틱하게 작성한다는 것은?

  • 의미에 맞는 태그를 사용해 문서를 작성하는 것

• 시맨틱하게 작성하면 좋은 점

  • 가독성이 높아짐
  • 검색엔진 최적화
  • 크롤러에게 더 구체화된 정보를 제공

• SEO: 검색 엔진 최적화

  • 시맨틱하게 HTML 작성하기
  • title을 놓치지말고 적절하게 작성하기
  • <meta name="description" conten="설명">을 사용해 페이지 설명 남기기
  • open graph를 사용하기
    • <meta property="or:title" conetent="페이지이름"/>
    • <meta property="or:description" conetent="페이지에 대한 한두 줄 설명"/>

• 웹접근성

  • 신체적 한계, 환경적 한계를 고려해 개발하는 것
  • 웹 접근성 지침 가이드라인 지키기
• <button>, <input/> 대신 <div>을 사용해 비슷하게 구현할 때는 추가적인 코드를 작성해 사용 목적과 유사하게 만들자
  • role: 해당 요소의 원래 목적을 작성 <div role="button">
  • tab-index: 해당 요소를 탭키로 도달하게 하는 속성
  • 키보드 이벤트 리스너 추가하기

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

기존에 알고 있던 내용들을 정리하는 시간이었던 것 같고, 내가 작성했던 코드들을 시맨틱하게 작성했는지 다시 한번 확인해 봐야겠다. <button>을 사용하지 않고 <div>를 사용해 버튼을 구현한 적이 많은데, 다음부터는 <div> 사용을 최소화 해야겠다.