ch 1. 개요

🎯이번 챕터는

본격적인 강의에 앞서 기초적인 내용들과 진행하면서 알아두고 있으면 좋은 것들을 배웠다.

들으면서 프론트엔드는 항상 최신을 달려야한다는 점을 조금 느끼게 되었다.

각종 정보들을 잘 기억해 두어야 겠다.

---

⭕01. 첫 인사 및 강의 개요

📌강의 정리

• 앞으로 업데이트되는 프론트엔드 소식들은 heropy.blog에 올라오니 알아두면 좋다.
• 웹프론트엔드 개발의 핵심 줄기를 학습하는 과정이다.
• 난이도가 높고 중요도가 낮은 내용은 가볍게 학습하거나 생략한다.
• 프론트엔드 개발이란 HTML, CSS, JS를 사용해서 데이터를 그래픽 사용자 인터페이스(GUI)
  로 변환하고, 그것으로 사용자와 상호 작용할 수 있도록 하는 것이다.
• 프론트엔드는 앞단이라는 뜻을 가지고 있다. 즉 사용자와 상호작용하는 것이다.
• 비즈니스로직은 백엔드라는 뒷단에서 취급한다.

 

📌느낀점

프론트엔드의 기초부터 다시 시작하는 느낌이다.

빠르게 진도를 나아가 최신 기술을 섭렵해야 한다.

 

---

⭕02. HTML, CSS 그리고 JS

📌강의 정리

• 웹 브라우저에서는 3가지 언어가 동작한다. HTML, CSS, JS
• 3개의 언어들은 각각의 역할이 있다.
• HTML은 하이퍼텍스트 마크업 랭귀지로 페이지의 제목, 문단, 표, 이미지, 동영상 등
  웹의 구조를 담당한다.
• HTML은 기획자라 할 수 있는데 이는 단순역할로써 웹의 구조를 담당하기 때문이다.
• 캐릭터의 얼굴을 만들때 구조를 만들어내는 것이 HTML의 역할이다.
• CSS는 캐스캐이딩 스타일 시트로써 실제 화면에 표시되는 방법, 색상, 크기, 폰트, 레이아웃 등)을
  지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당한다.
• CSS는 콘텐츠를 꾸며주는 시각적인 표현을 담당하는게 핵심이다.
• HTML,CSS는 움직이지않는 정적인 이미지이다.
  그러므로 JS를 통해 동적으로 움직여서 웹페이지 제품을 만들어야한다.
• HTML과 CSS는 이미지만 알아보기 때문에 비교적 쉽게 만들 수 있다.
• 디자이너는 JS에서 개발자는 CSS에서 어려워한다.
  그 이유는 HTML,CSS는 레이아웃중점으로 JS는 데이터중심개발으로 가기 때문이다.
• 이 둘의 사고의 개념이 다르다.
• JS에서는 레이아웃의 생각이 아닌 자바스크립트를 이용해서 크기, 위치, 색상이 아닌
  데이터를 다루어야하고 그래서 괴리감이 느껴져서 어렵게 느껴진다.
• 스타벅스 예제를 보면 사이트가 움직인다. 우선 CSS와 JS를 빼면 구조적인 내용들만 나와있다.
  너무 정적이므로 CSS 와 JS를 이용해서 움직이고 예쁘게 해야한다.
• 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시켜야 개발자라고 할 수 있다. 
• HTML은 기획자, CSS는 디자이너, JS는 개발자 역할이다.

 

📌느낀점

다시금 HTML, CSS, JS에 대해서 정의를 들으니

분명 다 아는 내용들이라고 생각했지만 새로운 부분들도 분명 있었다.

JS보다 CSS가 더 까다롭다 느끼는걸보면 나는 다행이도 개발자가 맞나보다.

이 세가지의 개념을 머릿속에 잘 넣고 앞으로 나아가야겠다.

---

⭕03. 웹앱의 동작원리

📌강의 정리

• 웹앱의 동작방식에 대해서 알아보자.
• 웹 애플리케이션은 쉽게말해 홈페이지라고 생각하면된다.
• 사용자는 자신의 컴퓨터에서 브라우저를 통해 주소창에 페이지 주소를 입력한다.
• 이제 최초의 요청 리퀘스트를 서버로 보내면 서버에서는 최초응답 리스폰스를 하는데
  이때 HTML을 브라우저로 보낸다.
• 이제 브라우저는 CSS,JS,JPG를 추가요청하고 다시 서버는 추가응답을 한다.
• 이 특별한 웹페이지를 우리는 우리의 컴퓨터에서 만드는데 이 웹페이지는 서버에 있어야한다.
• 우리의 로컬(개발자가 만드는 컴퓨터)에서 만든 것을 서버에 업로드하고 사용자는 서버로 접근한다.
• 우리는 우리의 프로젝트를 서버에 업로드 해야한다.

 

📌느낀점

웹의 동작방식이다.

크게 브라우저와 서버의 통신인데 이때 요청을 리퀘스트라 하고

서버에서 브라우저로 보내는 응답을 리스폰스라 한다.

이러한 동작 원리를 잘 이해하고 웹 애플리케이션을 만들어야겠다.

---

⭕04. 웹 표준과 브라우저

📌강의 정리

• 웹표준과 브라우저에 대해서 알아보자.
• HTML, CSS, JS를 사용할때 웹의 표준기술을 배워서 적용해야 한다.
• 이런 웹의 표준기술은 W3G에서 제정한다.
• 권고안에 해당하는 기술들이 있다.
• 웹표준이란 웹에서 사용되는 표준기술이나 규칙을 의미한다.
• 우리가 만드는 웹 애플리케이션은 사용자의 브라우저에서도
  사용되어야하기 때문에 이 웹표준을 지켜서 브라우저 공급업체가 브라우저를 만든다.
• 제정된 웹표준을 지켜서 만들지만 다 다른 사람이 만들기 때문에
  조금은 다르게 구동되는 여러 브라우저에서
  동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법을
  크로스 브라우징이라 한다.
• 크로스 브라우징 이슈는 과거에는 많았지만 이제 많이 줄어들었다.
• 인터넷익스폴로러는 웹표준과 많이 동떨어지는 부분들이 많다.
• 이제 업데이트가 안되기 때문 하지만 IE는 아직도 기존에 많이 커서
  우리는 IE를 대응해야 하는 상황들이 생길 수 있다.
  이때는 표준이 아닌 기술들을 사용해야 할 수 있다.
• 브라우저의 기본적인 인터페이스를 알아보자.
• 이런 기본적인 창과 그리고 위의 상단에 탭이 있다. 그리고 밑에 그 화면이 나온다.
  그래서 새탭에 열기 또는 새창에 열기가 있는데 최대화 최소화 닫기가있는 것이 창이고
  탭은 그안의 하나의 구성원이다.
• 주소창이 있다. 주소를 입력한다.
• 뷰포트가 있다. 하나의 웹페이지가 렌더링(웹사이트를 출력)되는 화면이 있다.
  뷰포트라는 단어가 매우 많이 사용되므로 잘알아둘 필요가 있다.

 

📌느낀점

웹표준과 브라우저에 대해서 알아보았다.

우리가 만드는 로컬환경과 사용자가 사용하는 브라우저에서의 환경이 같아야

우리가 의도한대로 사용자에게 전달되기에 하나의 표준을 지켜야하는데 그것이 웹표준이다.

IE는 이제 업데이트가 안되어서 웹표준을 지키지 않고 만들어야 될수도 있다는게 새로운 도전과제 같았다.

브라우저의 구성요소들 창,탭,주소창,뷰포트에대해 간단히 알아보았는데

특히 뷰포트는 처음 들어보는 거라 흥미로웠다.

당연히 여기던것에 이름을 알게되는 것은 새롭게 쓸 수 있는 도구가 늘어나는 것 같아 기분이 좋다.

잘 익숙해져놔야겠다.

---

⭕05. 웹에서 사용하는 이미지

📌강의 정리

• 웹에서 사용할 수 있는 이미지는 비트맵과 벡터로 나뉘어진다.
• 레스터화는 비트맵으로 만드는 개념이다.
• 픽셀로 만들어진 정보의 집합은 래스터 비트맵이다.
• 점,선,면의 위치(좌표), 색상 등 수학적 정보의 형태로 이루어진 이미지는 벡터이다.
• 비트맵은 정교하고 다양한 색상을 자연스럽게 표현하지만 확대,축소시 계단현상, 품질이 저하된다.
• 벡터는 확대 축소에서 자유롭고 용량 변화가없다.
  하지만 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어렵다.
  수학적으로 표현되는 이미지이기 때문이다.
• jpg, png는 비트맵이미지이다. svg는 벡터이미지이다.
• 매터리얼 이미지같은 매트한 이미지는 벡터로 표현하는것이 더욱 좋다.
• jpg(jpeg)는 풀컬러와 그레이스케일의 압축을 위해 만들어졌으며
  압축률이 훌륭해 사진이나 예술분야에서 많이 사용된다.
• 손실압축을 하므로 용량이 획기적으로 줄어든다.
  사람눈으로는 잘알아볼수없지만 계속해서 jpg로 저장되면 점점 화질이 안좋아진다.
  24비트(약 1600만 색상)으로 표현 색상도가 뛰어나다.
  이미지의 품질과 용량을 쉽게 조절가능하다.
• png는 gif의 대체포맷으로 개발되었다.
• 비손실 압축으로 저장될때 손실되지 않는다.
  용량이 조금 높아질 수 있다. 8비트(256색상) 24비트(1600만)컬러이미지 처리가 가능하다.
  jpg는 흰색영역이 있어야하지만 png는 alpha channel로 투명한 영역을 만들 수 있다.
  w3g 권장 포멧이다.
• gif는 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장한다.
  비손실 압축이고 여러장의 이미지를 한 개의 파일에 담을 수 있다.
  (움짤, 애니메이션) 8비트 색상만 지원한다.
  (다양한 색상 표현에는 적합하지 않다.)
• webp는 jpg,png,gif를 모두 대체할 수 있는 구글이 개발한 이미지 포멧이다.
  완벽한 손실 비손실 압축을 지원하고 gif같은 애니메이션을 지원한다
  또한 alpha channel을 지원하므로 투명을 쓸 수 있다.
• webp는 최근포멧이라 IE에서 사용가능한지를 확인하는것을 하위호환성을 확인한다고 한다.
• svg는 마크업언어기반의 벡터 그래픽을 표현하는 포멧이다. 해상도의 영향에서 자유롭다.
  CSS와 JS로 제어가 가능하다. 파일 및 코드 삽입이 가능하다.
• 예를 들면 구글 로고는 svg코드로 되어 있어 CSS, JS로 제어 가능하다.
  이는 svg는 코드,수학으로 이루어져있기 때문이며, 수정이 가능하다.
  하지만 간단하게만 가능하다.

 

📌느낀점

이미지에 대해서 공부한다길래 뭐가 있을까 했는데 생각보다 모르는게 꽤 있었다.

특히 webp와 svg같은 경우에는 정말 최신의 자료인 것 같아 매우 좋았다.

이런 것을 보면 프론트엔드 개발자는 항상 최신을 달려야 하는 것이 맞고

이 기조를 잘 따라야 한다는 생각이 들었다.

---

⭕06. 특수 기호

📌강의 정리

• 특수 문자 용어를 정리하는 시간이다.
• 그레이브라는 단어를 알아야 나중에 할 수 있는 것들이 있다.
• 백틱, 그레이브 는 ‘`’ 이다. 물결표시와 같이 붙어있다.
• 틸드, 물결표시 ‘~’이다.
• 느낌표 ‘!’ 영어로는 엑스클러메이션이다.
• 앳사인 ‘@’ 골벵이라고도 부르기는 한다.
• 샵,넘버,우물 정 은 ‘#’이다.
• 달러 ‘$’, 퍼센트 ‘%’, 캐럿 ‘^’ 무엇무엇 이상을 표현할때 사용한다.
• 앰퍼센드는 ‘&’라고 한다.
• 애스터리스크 별표시 ‘*’이다.
• 하이픈, 대시, 마이너스 ‘-‘이다.
• 언더스코어, 로대시,밑줄은 ‘_’이다. 언더바라고도 들었다.
• 이퀄, 동등 ‘=’이다.
• 쿼테이션 큰따옴표 ‘ ” ’이다.
• 아포스트로피, 작은 따옴표 ‘ ’ ’이다.
• 콜론 ‘:’
• 세미콜론 ‘;’
• 콤마, 쉼표 ‘,’
• 미리어드, 닷, 점, 마침표 ‘.’
• 퀘스천 ‘?’
• 슬래시 ‘ / ’
• 버티컬 바 ‘ | ’
• 백슬래시, 역 슬래시 ‘ \ ’
• 퍼렌서시스,소괄호,괄호 ‘ () ’
• 브레이스, 중괄호 ‘{}’
• 브래킷, 대괄호 ‘[]’
• 앵글 브래킷, 꺽쇠괄호 ‘<>’

 

📌느낀점

특수문자기호를 꼭 알아야해? 라고 생각했지만 생각보다 중요한 내용이었다.

나중에 다른이와 소통할경우 용어를 모른다면 소통에 문제가 생길 수 있기에

한글표기만이 아닌 영어표기도 잘알아야겠다는 생각이 들었다.

---

⭕07. 오픈소스 라이선스

📌강의 정리

• 오픈소스란 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를
  누구나 접근해서 열람할 수 있도록 공개하는것을 말한다.
• 무료, 프리가 많이 없다. 일반적인 기준은 개인사용가능, 상업적이용가능을 잘 알아봐야한다.
• 결과적으로 무료로 사용할 수 있는지 알아야한다.
• 아파치 라이센스는 개인적/상업적 이용이 가능하고 배포,수정,특허 신청이 가능하다. 즉 폭넓게 쓸 수 있다.
• MIT 라이센스는 특별한제약은 없지만 이 라이센스를 사용하고 있다는 표시만 지켜주면 된다.
• BSD 라이센스는 MIT와 동일한 조건이다.
• Beerware 라이센스는 오픈소스 개발자에게 맥주를 사줘야 하는 라이센스이다.
  이것은 내가 만들기 했지만 나중에 나만나면 맥주나 한잔 사줘라 정도이다.
  내가만든것은 알아달라.

 

📌느낀점

개발을 하다보면 자연스럽게 구글링을 하게되고 코드들을 보게 되는데

이때 이 코드를 어떻게 어디까지 쓸 수 있는지는 꽤 중요한 문제이다.

그런 측면에서 이런 오픈소스 정의들은 알아두면 매우 좋은것 같다.