-
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드(리액트/react) 8일차스나이퍼 팩토리 2023. 6. 21. 01:00
2주차 첫 날. 시간이 빠르다.
<임시저장해두고 포스팅안해둔 것들 포스팅.>
개인적으로 중요한 개념 혹은 헷갈리는 개념들은 강의와 별도로 따로 정리하고 공부하여 기술해두었다.
오전활동 작성
정동훈 강사
HTML5 웹 기초
html의 기본골자이다.
html5 - <head>
생소하거나 헷갈리는 개념 정리.
UTF-8이란
UNICODE
UTF-8을 알기 위해서는 먼저 유니코드를 알아야한다.
유니코드는 전세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준이다.
이것을 규율하는 단체는 유니코드 콘소시엄(Unicode Consortium)이라고 한다.
전세계의 모든 문자를 담는 ISO/IEC 10646 코드표를 사용함으로써, 각 언어와 문자 체계에 따른 충돌 문제를 해결하였다.
따라서 유니코드를 사용하면 한글과 신자체·간체자, 아랍문자 등을 통일된 환경에서 깨뜨리지 않고 사용할 수 있다.
UTF-8
UTF-8은 유니코드를 위한 가변 길이 문자 인코딩 방식 중 하나로, 켄 톰프슨과 롭파이크가 만들었다.
풀네임은 Unicode Transformation Format - 8bit 이다.
8의 의미는 8비트 1바이트를 기준으로 인코딩 한다는 의미이다.
코드 페이지는 65001로, UTF-8로 표현 가능한 길이는 최대 6바이트지만 다른 인코딩과의 호환을 위해
4바이트 까지만 사용한다.
그래서 한 글자가 1~4바이트 중 하나로 인코딩 될 수 있으며, 1바이트 영역은 아스키코드와 하위 호환성을 가진다.
아스키 코드의 0~127까지는 UTF-8로 완전히 동일하게 기록된다.
유니코드는 U+10FFFF까지만 (10진법으로는 1,114,111) 이용하는 데, UTF-8은 아래에 나와 있듯이
가변 바이트 길이를 선언하기 위해 꽤 많은 비트를 잡아먹고도 2,097,151까지 인코딩할 수 있기 때문에
4바이트만으로도 충분하고도 남는다.
장점
유니코드가 널리 쓰이기 전부터 형성된 인터넷 문서들은 대부분 아스키 코드를 기본으로 해서 작성되었고,
특히 기존의 HTML 태그나 javascript 등 아스키로 구축된 사이트를 별다른 변환 처리 없이 그대로 쓸 수 있는
뛰어난 장점이 있었다.
더군다나 UTF-8은 *엔디안 에 상관없이 똑같이 읽을 수 있으므로 크로스 플랫폼 호환성도 뛰어났다.
ASCII 호환성, C로 작성된 Unix 프로그램 호환성, BOM이 필요없다던가, 엔디안을 따지지 않아도 된다던지.
파싱에 예외모드 확장 문자 처리등등 또한 필요없다. 그 덕에 실제 처리 속도가 더 빠르다.
이처럼 엔지니어링 측면에서의 수많은 장점이 존재한다.
가장 큰 장점은 단일인코딩 UTF-16은하위 인코딩 문제가 매우 심각 했는 데, 인코딩에 여러 하위 방식에 존재하여
읽을 때마다 그냥 UTF-16이라고만 하면 절대 디코딩을 할 수 없었다고 한다.
*엔디안
엔디안은 컴퓨터의 메모리와 같은 1차원의 공간에 여러개의 연속된 대상을 배열하는 방법을 뜻하며, 바이트를 배열하는 방법을 특히 바이트 순서라고 한다. 빅 엔디안과 리틀 엔디안이 있다.
SEO 최적화란
SEO(Search Engine Optimization, SEO)는 검색엔진 최적화라고 불린다.
이는 웹 기반 서비스를 운영하다보면, 단순히 서비스의 사용성자체에만 치중하는 경우가 더러 생긴다. 하지만 유저사용성 만큼이나 집중해야할 부분이 바로 이 SEO이다.
흔히 우리는 궁금한 게 생기면 구글 혹은 네이버를 열고 특정 키워드를 입력하여 검색한다.
이때, 대부분의 사람들은 상위 노출된 페이지를 먼저 열람하게 된다.
이때 검색 엔진 결과 페이지에서 웹사이트 또는 웹페이지의 상위 노출도를 높이는 작업이 바로 SEO이다.
즉, 네이버나 구글 같은 검색엔진이 쉽게 이해할 수 있는 형태로 내 웹페이지를 구성하는 과정이라고 할 수 있다.
상위에 노출되는 검색 결과는 크게 두가지로 나눠 볼 수 있다. 이는 광고가 아닌 자연 검색(Organic Search)과 광고로 노출되는 PPC(pay-per-click)이다.
유료광고는 대부분 검색 결과의 상단 또는 하단에 노출된다.
언뜻 생각해보면 검색 광고방식인 PPC가 훨씬 유리해보인다. 그렇지만 구글의 2019년 통계조사에 따르면 2019년 기준으로
전체 구글 검색 유저 중 40%가 자연 검색을 활용하고 있다. 그리고 불과 3.8%의 유저만이 PPC를 활용한 광고를 클릭하고 있었다.
이는 절대적인 결과라고 볼 수는 없지만 추이 충분히 참고할 만한 조사 결과이다.
이러한 통계자료를 놓고 보더라도 검색엔진 최적화를 통해 웹페이지의 노출 순위를 높이는 것이 얼마나 중요한 작업인지는 유추가 가능하다. 무엇보다 검색엔진 최적화는 유료광고와 달리 집행 비용이 들지 않는 다는 막대한 장점이 있다.
다만, 여러 요인에 따라 노출도가 달라질 수 있고 캠페인 시작과 바로 반영되는 광고와는 달리 최적화에 몇 개월의 시간이 소요될 수 있다는 점은 단점으로 부각된다.
검색엔진 최적화를 위한 작업
그렇다면 이런 검색엔진 최적화를 위한 작업에는 어떤 것이 필요하며 진행되어야할까?
SEO는 여러요인에 영향을 받는다. 최적화를 통해 노출도를 높일 수 있는 방법은 아래와 같다.
메타태그(Meta Tag)
<title> 태그
메타태그는 웹페이지를 검색엔진에 검색했을 때 노출되는 제목으로 이해할 수 있다. 메타태그는 단순히 검색 결과에만 노출되는 것이 아니라, 브라우저 탭 상에도 노출되므로 중요도가 매우 높다. 메타태그가 적용된 모습은 브라우저 내 개발자 도구를 통해 확인 할 수 있고
<title>요소로 정의된다.
* title 요소를 정의할 떄는 너무 긴 텍스트를 사용하거나 모든 웹페이지의 title에 단일한 제목을 사용하지 않도록 유의해야 한다.
<description> 태그
메타 태그 중에서는 타이틀만큼이나 중요한 요소가 있는데 바로 <decription>이다. 메타 디스크립션이라고도 불리는데, 해당 웹페이지의 설명을 요약한 한 두줄의 문장을 뜻한다. 대부분의 유저는 메타 디스크립션을 보고 해당 웹페이지에 자신이 찾고 있던 정보가 담겨있는지 아닌지를 판단한다. 따라서 읽는 입장에서 최대한 잘 읽히는 문장으로 작성하는 것이 좋다.
또한 되도록 페이지별 메타 디스크립션은 반복적이지 않은, 다른 내용의 키워드로 작성되는 편이 좋다.
오픈 그래프<Open Graph> 메타태그란
Open Graph 태그 검색엔진 최적화에서 빠질 수 없는 것이 바로 오픈그래프(OG) 태그이다.
지인들에게 뉴스 기사나 웃긴 사이트 등을 링크로 공유한 해본 경험이 있을 것이다. 그럼 위와 같은 화면을 볼 수 있다.
오픈 그래프 태그는 웹페이지의 링크가 카카오톡이나 기타 SNS에서 공유될 때 어떻게 노출될 지를 정의해 주는 역할을 한다.
단순히 SNS에 효과적으로 공유될 수 있게 하는 목적뿐만 아니라, 검색엔진 최적화 과정에서 해당 웹페이지가 SNS에서 얼마나 공유 되고 있는지 혹은 얼마만큼의 트래픽이 일어나고 있는지 판단하는 기준이 되어 검색 상위 노출을 위한 품질 평가에도 영향을 주기 때문에 중요한 역할을 한다고 볼 수 있다.
오픈 그래프 태그는 HTML 코드상 og: 의 형태로 정의된다.
위 그림과 같이 크게 image, title, description 등이 있으며, type, url 이 있다.
위에 서술하지않은 SEO를 위한 메타태그는 더 존재하며 이를 잘만 이용한다면 무료 트래픽을 얻는 방법이 될 수 있다.
div vs semantic html5-시맨틱 태그
왜 시맨틱 태그며, 앞으로 접할 기본 태그들을 용도에 맞게 사용해야 하는가
<title> 태그는 응당 head안에 있어야하지만 <footer> 안에 있다면
아무도 타이틀이라고 하지 않을 것이다.
즉, 태그들을 올바르게 사용해야 하는 이유는 웹 표준을 준수하기 위해서이다.
굳이 시맨틱 태그를 사용하지 않아도 <div> 태그를 사용하여도 전부 위치와 범위를 정하고 구분 지으며 구조를 짜는 것이 가능하다.
그러나 시맨틱 태그는 사용자와 작업자의 편의성과 능동성에 기여한다.
즉 <div> 태그를 사용하였을 때 보다 능률이 높다.
시맨틱태그는 한 눈에 HTML의 구조파악이 손쉬워 진다.
또한, 다른 작업자들과의 협업을 능통하게 만들어준다.
그리고 위에 서술하였듯이 SEO 최적화에 활용된다.
HTML5-기본태그
Display : inline / block
제목태그
h1 ~ h6 까지 있따 숫자가 클수록 폰트 크기가 작아진다.
리스트태그
<ul>, <ol>
순서가 없는 것과 순서가 있는 것
테이블태그
<tbody> 등.
링크
<a>
<form> (매우 중요.)
입력양식 전체를 감싸는 태그
<input>
<select>
HTML에서 ID CLASS 차이
역시 이론을 보고 공부하는 것보단 직접 실습해보며 직접 때려보면서 모르는건 직접 찾아보는게 이해가 빠르다.
각각 태그별로 왜 어떻게 쓰이는지 직접 타이핑 하며 결과를 눈으로 확인하는 것만큼 빠른 습득은 없는 것 같다.
코딩을 시작하려면 일단 뭐라도 만들어보는 것부터 시작하라는건 역시 다 이유가 있다.
다만 정말 너무나도 코딩에 대해 전무하다면 이 과정이 힘들 수는 있으나 이 것보다 빠른 길은 없다.
역시 모든일엔 왕도는 없다.
강사님이 알려주신 TMI 전세사기 예방법 꿀 팁.
전세사기 예방 방법 3가지
집주인 신분확인
그사람이랑 직접 계약을해서 그사람이 맞는지 확인
대리인인지는 맞는지 그걸 확인
등기부등본확인
권리가 문제가 없는지 확인
시세확인
객관적가치가 정말로 중개인이 말한 가격인지.
너무 어렵다면 세이프홈즈를 쓰세요.(요지)
출처
https://velog.io/@ts6938/UTF-8%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C
UTF-8이란 무엇일까?
어느 기업 구인공고를 보다가 UTF-8이 무엇이냐라는 질문이 있었다.막상 면접에서 이걸 물어봤다면 내가 답할 수 있었을까.UTF-8을 알기 위해서는 먼저 유니코드를 알아야한다.유니코드는 전 세계
velog.io
https://yozm.wishket.com/magazine/detail/1540/
검색엔진 최적화(SEO)란? | 요즘IT
웹 기반 서비스를 운영하다 보면, 단순히 서비스의 사용성 자체에만 치중하는 경우가 더러 생깁니다. 하지만 잘 살펴보면 유저 사용성만큼이나 집중해야 할 부분이 있습니다. 바로 SEO(Search Engine
yozm.wishket.com
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
'스나이퍼 팩토리' 카테고리의 다른 글
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드(리액트/react) 6일차 - Git&Github 강의 후기 (0) 2023.06.24 [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드(리액트/react) 15일차 - html, css, js 복습 (0) 2023.06.24 [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드(리액트/react) 16일차 - 과제 제출 (0) 2023.06.20 [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드(리액트/react) 9일차 - 과제 제출 (0) 2023.06.13 [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드(리액트/react) 5일차 - 서비스기획3 후기 (0) 2023.06.11