기본기의 중요성
패스트캠퍼스는 취준생시절 나에게 큰 도움을 주었다.
프론트엔드개발자가 막 뜰무렵 리엑트 기술을 너무나도 배우고싶었는데 지방인지라 배우는데 한계가 있었다.
그당시에는 서울가야만 배울수있는 기술이었다. 이런 나에게 온라인 교육을 제공해준 패스트캠퍼스는 너무나 고마운 존재이다.
덕분에 나는 프론트엔드 개발자가 되었고 년차가 쌓이면서 기본기의 중요성이 계속 느껴져서 다시 패스트캠퍼스를 찾았다.
찾은 강의중에 하나가 Head 태그관련 강의인데 그중 meta태그를 사용하면 여러 장점이 있다.
1. 자바스크립트로 여러줄 휘갈기는것보다 메타한줄로 딱끝낼수있다.
2. SEO에 효과적이다. 즉 구글검색엔진에서 파악하기 좋아 상단에 올라갈확률이 올라간다.
3. 상단에 위치해있어 빨리찾기좋다.
강의후기
박영웅강사의 HTML & CSS 첫걸음 / HTML 06. HEAD태그 강의를 찾아서 다시 수강하였다.
이분의 HTML강의로 처음 독학을 시작하였다. 목소리톤도 좋고 쉽고 차근차근 알려준다.
이분의 블로그에 가보면 많은 꿀팁과 정보들을 얻을수있다. scss강의도 추천한다!
HEROPY
웹디자인과 웹개발 기술을 공유하는 HEROPY 온라인 블로그입니다. 오프라인 지식 공유도 매회 진행합니다. 감사합니다.
heropy.blog
강의내용
강의 내용중에 핵심부분을 정리했다.
META태그는 웹 페이지의 다양한 정보를 나타낸다.(키워드, 내용, 제작자, 표시 장식 등)
이를 구글 검색엔진이나 브라우저에 제공하기때문에 SEO에서 중요한 역할을 한다.
<head>
<meta charset="UTF-8">
<meta name="author" content="홍길동">
<meta name="description" content="우리 사이트가 최고!">
</head>
charset 캐릭터세트로 문자를 인코딩하는 방식으로 UTF-8을 사용하였다.
화면에 텍스트를 렌더링할때 출력하는 방식을 의미한다. UTF-8은 한국, 중국과같은 다양한 국가언어를 출력하는데 특화되어있고
이전에는 euc-kr을 사용하였다고한다.
한가지더 꿀팁을 얻었는데
W3C에서 Validation을 통해 마크업을 교정할수있다고한다.
내가만든 사이트 url을 입력하거나 index.html파일을 업로드하면 HTML을 교정해준다.
활용예시
실제 프로젝트에서 배운내용을 이렇게 활용하였다.
Cloudflare에서 얻은 국가넘버를 표시하는데 사용했다. 상단에 노출되어있어 QA때 빠르게 확인할수있었다.
<meta name="country" content="KR">
name속성에 viewport값을 사용하였다.
아이폰의 경우 작은문자의 경우 인풋창에 타이핑을 하려하면 모바일에서 확대되는 버그가 발생하였는데
몇시간 끙끙대었으나 깔끔하게 maximum-scale=1을 삽입하여 해결하였다..
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
앞으로의 목표와 기대평
막힐때마다 다시 패스트캠퍼스를 찾아가 기본기를 다져야겠다. 같은 올인원 패키지에 있는 타입스크립트랑 웹팩 강의를 연말까지 완강하는것이 목표이다. 안그래도 타입스크립트 기본기가 부족해서 개인 프로젝트를 하는데 애를 먹고있었는데 매우 기대된다. 다른 강의들도 정말 많은데 꾸준히 발전하고 양질의 다양한 강의들을 보유하고있는 패스트캠퍼스를 응원하며 다음에는 Nextjs강의를 신청해보려고한다.
본 게시물은 패스트캠퍼스 후기 이벤트 참여를 위해 작성되었습니다.
'Life' 카테고리의 다른 글
| 프론트엔드 개발자가 반드시 알아야하는 지식과 팁 (0) | 2022.07.20 |
|---|---|
| 개발자 퇴사, 앞으로의 미래 (2) | 2022.03.01 |
| 바람의나라 구그래픽 신그래픽으로 변경 (0) | 2022.02.11 |
| 하나은행 청년주택청약 전환 실제 후기(+ 필요서류) (0) | 2021.12.18 |
| 싱가포르 정보 (0) | 2021.10.29 |
