주니어 PM이 갖춰야 할 프론트엔드 개발 기초 지식
타다 프론트엔드 탐색
프론트엔드
사용자가 제품에서 겉으로, 눈으로 볼 수 있는 클라이언트를 묶어서 앞단 혹은 프론트엔드라고 부른다. 사용자가 클라이언트에서 여러 기능을 수행하면 클라이언트가 뒷단인 백엔드와 정보를 주고 받으면서 사용자에게 기능을 통해 요청한 결과를 되돌려주는 형태로 이뤄진다.
프론트엔드는 프로토 타입을 기반으로 웹 사이트의 화면을 만들어나간다. 사용자는 이 만들어진 웹 사이트에 접근하기 위해 구글 크롬, 엣지, 웨일 등을 사용하는 형식이다. 그럼 웹 사이트의 화면을 구성하는엔 세 가지 언어가 필요하다. 위 사진 자료에서 볼 수 있듯이 HTML, CSS, Javascript(이하 JS)가 있다.
Hyper Text Markup Language(HTML)
ex) <요소 이름> 내용 </요소 이름>
· 운영체제나 프로그램에 상관없이 일정한 형식이 동일하게 보이는 뼈대
- 콘텐츠의 레이아웃
- 웹 디자인의 구조
Cascading Style Sheets(CSS)
ex) 요소 이름(내용)
· 웹 화면의 스타일을 지정하는 살갗
- 요소의 크기, 색상, 위치 등의 스타일 구성
- 반응형 웹 제작을 위한 다양한 화면 크기 대상
Javascript(JS)
· 동작이나 데이터의 처리를 수행
- 웹 화면에 유저가 사용할 수 있는 상호 작용 추가
- 복잡한 기능 및 처리
- 기능 향상을 위한 프로그래밍 코드
프레임워크
과거에는 단순히 정보를 보여주는 것에 집중한 것에 비해 현재 웹 개발의 난이도가 높아졌다. 따라서 개발하는 모든 것을 하나하나 개발자에 의해 만드는 것은 시간적 여유나 효율적인 측면에서 좋지 않기 때문에 프레임워크가 등장하게 됐다. 건축으로 치면 골격, 그림으로 치면 스케치와 같은 뼈대를 오픈소스를 통해서 활용할 수 있다. 개발하는 과정의 어려움을 줄여줄 수 있고 데이터베이스 연동과 코드 재사용이 가능하다. 주의해야할 점은 한 종류의 언어에 종속되어있기 때문에 한 번 정하면 바꾸기 어렵다.
라이브러리
라이브러리는 프레임워크와 함께 효과적인 개발을 위해 탄생한 것이지만 둘 사이엔 차이가 있다. 주로 소프트웨어 개발 시 구성 데이터, 문서, 도움말 자료, 코드, 서브루틴, 값 등이 포함되고 프레임워크 안에서 진행하게 된다. 프레임워크와 다르게 여러 라이브러리를 활용하여 개발의 효율을 증대시킬 수 있다.
Document Object Model(DOM)
문서 객체 모델이라고 불리는 DOM은 일종의 웹페이지에 대한 인터페이스이며 HTML 문서 조작 및 접근에 표준화된 방법이다. 단순 텍스트로 이루어진 HTML 문서의 객체화된 표현으로 다양한 프로그램에서 활용할 수 있다. 우리가 웹페이지를 접속하기 위해 활용하는 브라우저가 HTML 웹 페이지를 인식하는 방법을 계층화하여 표현한 것이다. F12를 누르게 되면 나타나는 개발자 도구에선 볼 수 없다.
HTML, CSS <-> [DOM] <-> Javascript
DOM을 통해 HTML과 CSS를 유동적으로 변경할 수 있어 HTML인 웹페이지와 자바스크립트를 이어주는 역할을 한다.
타다(TADA) HTML 화면 구조 둘러보기
<head>
· 하나만 존재해야하며, html 바로 하단에 위치해야 함
· 페이지의 화면에 보이지 않고 문서의 형태, 타이틀, 스타일 정보, 자바스크립트 정보 포함
- 페이지 설명, 콘텐츠를 꾸미기 위한 CSS, 문자 집합 선언 포함
- 한글 인코딩(UTP-8), 콘텐츠를 표시하는 <meta>, CSS와 관련 된 <style>, 웹 페이지의 제목인 <title> 등
<body>
· 하나만 존재해야하며, head 바로 하단에 위치해야 함
· 화면에 보여지는 부분으로, 다양한 태그를 배치할 수 있음
- 바디의 제목을 표시하는 <h1~6>, 구역을 표시하는 <div>, 문단을 표시하는 <p>, 이미지를 표시하는 <img> 등
*body 뒤의 명칭은 타다 페이지의 개발자 도구에서 보이는 명칭을 사용했습니다.
<body main>
<body intro>
- 최상단 메인과 아래부터는 section을 나뉘어있다. <div>를 통해 구역을 나누고 그 안에 <h1>으로 제목이 표시되어있다. 앱 다운로드는 <button>을 통해 이미지를 삽입하고 <a href> 속성을 이용하여 클릭 시 삽입된 링크로 이동하도록 되어있다. 백그라운드가 되는 사진은 별도의 <div class>를 통해 작동된다. 인트로 섹션은 <section id=intro>를 통해 제목이 입력되어 있고 타다가 추구하는 목표가 입력되어 있다.
<body lineup>
<body event>
- 라인업과 이벤트 또한 <section id=xx>를 통해 섹션을 분리되어있다. <h2>로 라인업 이름이 지정되어있고 그 안에 <div>를 통해 '실시간 NEXT' 등의 버튼명이 <ul class>로 지정되어 있다. 버튼 클릭 시엔 <li class = ~~ active vimeo-active> 등으로 색이 점점 채워지도록 설계되어 있다. 이벤트 섹션에는 'Quality Ride for All'이라는 슬로건을 <img class>로 네이비와 화이트로 삽입해놓았다. 스크롤을 내릴 시 색상이 변경된다.
<body dscription>
<body howtouse>
<body bye>
- 디스크립션 섹션의 경우 한 화면 안에서 스크롤을 총 4번을 내릴 수 있었고 각각 <li class =trigger01~04>로 지정되어 있다. 뒤에 'style="opacity:0~9999'로 지정되어있어 스크롤을 움직일 시에 숫자가 움직이는 것을 확인할 수 있었다. 사용법 섹션에는 슬라이딩 콘텐츠가 삽입되어있다. 수동으로 움직일 수 없고 자동으로 넘어가는 형태다. 'style="transition-duration; 0~700ms;'로 지정되어있는 것을 확인할 수 있었다. 마지막 bye 섹션은 단순히 '편안한 이동이 필요한 순간 타다와 함께하세요.'라는 타이틀과 함께 이미지가 삽입되어 있다. 'footer'를 통해서 드라이버 지원 버튼과 회사 정보 등을 확인할 수 있다.
참고자료
