W7D1 학습목표
- PM이 개발 지식을 이해해 개발팀과 소통하는 것의 필요성을 설명할 수 있다.
- 서버와 클라이언트 구조를 이해하고 이를 개발하는 프로세스를 설명할 수 있다.
개념 정리
- 서버, 클라이언트
- 프런트엔드
- 프레임워크
이후 답변 가능한 질문
- 어떤 서비스에서 서버와 클라이언트의 역할은 무엇인가?
- 현대의 개발에서 프레임워크를 사용해야 하는 이유는 무엇인가?
PM이 개발 지식을 알아야 하는 이유
- 각 기술 및 사용 환경을 아는 것(기술 스택)은 무언가 빠르게 개발할 수 있는 것과 동시에 그 기술의 한계를 이해하고 상황에 맞는 솔루션을 제공
- 팀원과의 커뮤니케이션 뿐만 아니라 리스크 관리를 위해
IT 서비스의 기본적인 구조
- 클라이언트 : 서비스를 사용하는 사용자
- 서버 : 서비스를 제공하는 컴퓨터
HTML, CSS, JavaScript의 역할
HTML의 역할: 구조 만들기
- 콘텐츠의 레이아웃을 제어합니다.
- 웹 페이지 디자인을 위한 구조 제공
- 모든 웹 페이지의 기본 빌딩 블록
CSS의 역할: 웹사이트 스타일 지정
- 웹 페이지 요소에 스타일을 적용합니다.
- 웹 페이지를 반응형으로 만들기 위해 다양한 화면 크기를 대상으로 합니다.
- 주로 웹 페이지의 "모양과 느낌"을 처리합니다.
JavaScript의 역할: 상호 작용 증가
- 웹 페이지에 상호 작용 추가
- 복잡한 기능 및 기능 처리
- 기능을 향상시키는 프로그래밍 코드
| HTML | CSS | JAVA |
| 갖다놓고 | 꾸미고 | 시킨다 |
HTML : '마크업 언어' 화면에 이것들이 이런 구조로 놓여 있어라 하고 갖다 놓는 수단
CSS : 시트, 이불 이렇게 보여라 하고 꾸며주는 [문서]
JAVA 스크립트 : 웹사이트에서 돌아가는 자바스크립트는 브라우저에서 다양한 일을 수행하고 HTML으로 올려놓은 요소들을 변형시기거나 직접 만듬
HTML 문서 구조
<head> 각종 설정을 넣는 곳
CSS와 자바 스크립트 연결
<body> 화면의 요소
계산기의 틀 (div)란 보이지 낳는 상자를 넣는다. (span)그 안에 계산기 이름을 텍스트로 표시할 요소를 넣는다.
(input)수식을 넣을 입력칸 넣는다. 칸이 비었을 때 나오는 문구 설정
자바 스크립트로 생명력을 넣어준다.
좀 더 디테일한 부분 설정 가능
프런트엔드 탐색하기분석해보고 싶은 웹 기반 서비스를 하나 선택해, 해당 서비스의 랜딩 페이지 내용을 다음과 같이 나누어 분석해 봅니다.
화면의 구성 요소들을 이 어떻게 배치되어 있는지 구조를 정리해 분석해 봅니다.(HTML 요소)각 구성요소들이 어떠한 모양을 하고 있는지 스타일을 정리해 분석해 봅니다.(CSS 요소)각 구성요소들이 가지고 있는 특정한 동작이 무엇인지를 정리해 분석해 봅니다.(JavaScript 요소) (단, 기능 중 '다른 페이지로 연결'은 제외합니다.)선택) 분석한 내용 중 하나를 선택해 해당 기능을 구현하는 코드가 어떻게 되는지에 대해 찾아보고 간략하게 정리해 봅니다.(F12 개발자 도구를 클릭해, 해당 코드가 어떻게 구성되어 있는지 확인해봅니다. ex. URL, 이미지, 텍스트, CSS 스타일 등)
화면의 구성 요소들이 어떤 방식으로 만들어 졌는지 '마켓컬리'를 통해 알아보자.
마켓컬리는 헤드, 바디로 이루어져 있다,
<!Doctype html>
: 관용적인 태그로 가장 첫 줄에 쓰인다.
: doctype 선언을 하는 이유 = 문서 형식을 선언함으로서 웹브라우저가 웹 문서를 불러오고 처리할 수 있게 함
<html>
: html 문서의 시작과 끝을 나타내는 전체적 부모 태그이다.
: 문서 시작과 끝을 묶기 때문에 오프닝, 클로징 태그 사용 <>/<>
<head>
: 웹 페이지 자체의 정보를 담는 태그
: title, meta 태그의 부모 태그가 된다.
<body>
: 웹 페이지 사용자에게 실제 보이는 부분을 담는 태그이다.
<title>
: head 태그 안에 들어가는 자식태그이다.
: 웹 페이지의 이름을 설정해주는 태그로 오프닝, 클로징 태그를 사용해야한다. <></>
<meta> <meta charset="utf-8">
: metadata의 약자, 현재 html 문서를 부가 설명해주는 역할을 한다.
- meta = 태그 (다른 데이터를 설명해주는 데이터)
- charset = 인코딩 방식을 정하는 속성 (charater set; 문자지정)
- utf-8 = 모든 언어를 표기할 수 있는 세계표준 코드
<meta property="속성값">
ex) 카톡, 페북 등 여러 소셜에서 링크 보여줄 때 그 경우 상세 설정.
- og = open graphic
<meta property="og:type" content="website"> // 종류 지정
<meta property="og:title" content="스파이더맨 보러~"> // 페이지 제목
<meta property="og:url" content="https://www.insight.co.kr/~"> // 사이트 주소
<meta property="og:iframe" content="https://~"> // 이미지. 절대 경로로 표시
<meta property="og:description" content="영화관 팝콘 속에서 나온~"> // 사이트 설명
마켓 컬리 웹사이트 <meta property>
- 마켓컬리 :: 내일의 장보기, 마켓컬리
- Love Food, Love Life. 마켓컬리! 당일 수확 채소, 과일, 맛집 음식까지 내일 아침 문 앞에서 만나요!
meta name="속성값"
- 정보의 이름을 정할 수 있으며, 지정하지 않으면 http-equi와 같은 기능을 한다.
마켓 컬리 웹사이트<meta name>
다이어트, 식단, 닭가슴살, 요리, 치아바타, 레시피, 요리, 상차림, 다이어트음식, 이유식, 건강이유식
meta http-equiv="Page-Enter" content="속성값2"
- 페이지 장면 전환 효과 속성값
<div>
<div>는 의미론적인 값을 전달하지 않는 일반 콘텐츠 블록을 정의
플로우 콘텐츠를 위한 통용되는 컨테이너로, CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 아무 영향도 주지 않는다.
<body>=책상, <div>=종이
<body> 내부에 코드를 적는 것 = 책상에 종이 없이 그림을 그리는 것
<div>라는 종이를 여러개 만들어서, 종이에 들어갈 형태에 따라 종이들을 나눌 수 있다.
그 종이에 <div id="종이1이름">이라는 형태로 이름을 붙여줄 수 있다.
'DAILY' 카테고리의 다른 글
| [코드스테이츠 PMB 9기] 스테이징과 API (0) | 2022.01.05 |
|---|---|
| [코드스테이츠 PMB 9기] 앱 서비스 이해 (0) | 2022.01.04 |
| [코드스테이츠 PMB 9기] 데이터 시각화 (0) | 2021.12.30 |
| [코드스테이츠 PMB 9기] 린 분석 (0) | 2021.12.29 |
| [코드스테이츠 PMB 9기] 고객 데이터 분석 (0) | 2021.12.28 |
