웹(Web)의 이해

클라이언트 VS 서버

클라이언트

• 서비스 요청자.

• ex) PC 카톡의 클라이언트 : PC, 이용자, 카카오톡

서버

• 서비스 제공자.

• 요청에 응답 후 연결을 끊음(단발성 요청).

• 무시도 응답임.

도메인

• 인터넷에 연결된 장치(컴퓨터, 스마트폰, 태블릿, 서버 등등)를 식별할 수 있는 주소.

• 숫자로 이루어진 IP 주소를 문자열로 표현한 것을 도메인이라고 함.

• URL은 도메인 + 경로

• 슬래시(/)는 해당 URL 리소스가 디렉토리(directory)임을 의미.

HTTP

• Hypertext Transfer Protocol의 약자로 텍스트를 뛰어넘는 전송 규칙임.

• Hypertext란 텍스트 자체는 읽고 쓰는 능력을 뛰어넘어 다른 역할을 수행하는 것을 의미.

• HTTPS의 S는 secure이란 뜻으로 보안이 더 추가된 것임.

기타

최적화가 필요한 이유

markup이란?

ES란?

검색엔진 최적화 (SEO)

• 특정 키워드를 검색했을 때, 그에 관련된 자사 웹사이트나 콘텐츠를 가장 상단에 보여줄 수 있도록 하는 작업.

• 웹마다 엔진 규칙이 다름. 예를 들어 구글 검색에 최적화한 코드는 네이버에선 검색 우선순위가 떨어질 수 있음.

• 태그를 올바르게 사용하는지, 그리고 SEO 관점에서 코드를 짜는 습관을 들여야 함.

• h 태그와 a 태그는 검색 시 주로 활용되는 태그임.

h 태그 역할 (SEO 관점)

• h1 태그 - 홈페이지에서 유일해야 함(상징성). 모든 페이지에서 절대 겹치면 안되는 태그. 2개가 나오는 순간 SEO에 감점. 또한 display none으로 남용할 경우 구글에서 차단함. 홈페이지 제목에 보여줘야 함. ex) 아이폰 12 프로

• h2 태그 - h1과 직접적으로 관련된 단어, 키워드. h1 보다는 검색어 위치에서 밀림. ex) 아이폰 12

• h3 태그 - 단어 1,2 개의 조합 문장. ex) 크리스마스 선물

• 추가로 검색 결과에 나온 description은 글자 수 제한 있음. 320자 내외. 페이지 내의 콘텐츠 글자수는 2,000자 이상 작성하는 것이 좋음.

프로젝트 기획하기

기획

• 한국어, 영어 지원

• 키워드 검색

• 작품 코멘트 지원

• 좋아하는 작품 수집

디자인 개요

프로토타입

HTML 제작

SEO 관점

• form 태그로 감싸기

• alt, name, id 등 태그 세부 속성 작성하기

• nav, footer 태그 사용하기

• img요소는 사진이나 그래프 등 그림을 취급할 시에만 사용. alt속성은 영상이나 이미지 대신 적절한 문자열을 작성.

• 좋은 alt값 예시

태그 사용 규칙

• img와 img를 설명하는 콘텐츠를 만들 때 container 태그로 감싸기

• figure는 사진, 이미지, 다이어그램 등을 감싸는 요소.

• figcaption은 figure 요소에 캡션을 만듭니다. figure 요소의 자식 요소이며, 제일 처음 또는 제일 마지막에 위치시킴.

• 단어 등 문장 이하 구조는 span, 문장은 p, 의미 없는 태그는 div 사용

• h 태그를 이용하여 제목 설정

한계

• API로 이미지를 받아오는 부분의 HTML 작성 법을 모르겠음.

• 로그인, 회원가입을 한 후의 HTML 연결을 어디로 해야 할지 모르겠음.

AWS 호스팅하기

NGINX

• apt-get update: nginx 웹 서버 패키지를 설치하기 전에 일단 패키지를 최신 상태로 바꾸어줍니다.

• apt-get install nginx: nginx를 우분투 서버 내에 설치합니다.

• nginx -v: 설치된 nginx의 버전을 확인합니다.

• service nginx start: nginx 웹 서버를 구동합니다.

• service nginx stop: nginx 서버를 중지시킵니다.

• vim default: vim으로 default 설정 파일을 수정합니다.

• vi는 우분투에서 제공하는 가장 기본적인 파일 편집기(Editor)임.

• a를 눌러서 수정 모드로 진입할 수 있음.

• esc를 누른 뒤에 :wq!를 눌러서 '저장하고 빠져나오기'

마치며