[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 1/7

 

Chapter 01에서는

코딩을 시작 하기 전, 기본적으로 알아야 하는 내용을 중요한 것들 위주로 짧고 자세히 설명해 주셨어요.

공부하다 보면 용어 같은게 어려워서 간혹 이해하기 어려울 수 있는데,

쉽게 설명해 주셔서 내용이 쏙쏙 들어와요. 그 이후로는 암기랑 경험이 필요...😅

 

프론트엔드 개발(Front End Development)은,

보여지는 페이지를 만드는 작업으로 HTML, CSS, JS를 사용합니다.

 

HTML(Hyper Text Markup Language)은 웹의 구조 담당

CSS(Cascading Style Sheet)는 웹의 구조를 꾸미는 담당

JS(Javascript)는 페이지를 움직이게 동적인 작업 담당이에요.

집으로 묘사를 하면, HTML로 집 틀을 만들고, CSS로 인테리어 디자인을 하고, JS로 전기, 물, 가스 등을 연결해서 버튼을 누르면 불이 켜지거나, 물이 나오는 등 반응이 돌아오는 무언가 움직이게 되는거죠.

 

 

우리가 인터넷을 통해서 사용하는 모든 웹사이트는 '서버'에 등록(?)이 되고,

주소를 설정해서 어디서든 인터넷이 있으면 누구든 들어갈 수 있어요.

 

주소창에 주소를 입력 혹은 링크를 눌러서 사이트에 접속하면

나 : 서버야, 나 왔어요. 사이트 보여줘요. 요청을 하고,

서버 : 브라우저야, HTML 받아라. 응답을 하고,

브라우저 : HTML에 CSS, JS, img가 필요해 라고 다시 서버에 요청

서버 : 여기 CSS, JS, img 있다.

이런 식으로 아주 빠르게 소통을 해서 내 브라우저에 사이트를 보여줘요.

 

작업한 파일을 로컬 컴퓨터에만 가지고 있고, 서버에 올리지 않으면

파일을 가지고 있지 않는한, 사이트를 볼 수 없어요.

 

'로컬', '로컬 환경', '로컬 개발환경'이라는 단어는 이런 파일을 작업하고 있는 '그 컴퓨터'를 말해요.

서버에서 로컬에 다운 받았어요? 라고 하면 '내/그/작업에 사용하는 컴퓨터'를 말하는거죠.

 

 

코딩을 시작하게 되면 웹표준, 크로스브라우징이 중요한 사항인데,

웹표준(Web Standard)는 표준어 처럼, 맞는 코드를 나타냅니다.

표준 코드를 사용하지 않으면 문제가 생길 수 있어요. 표준어를 사용하지 않으면 의사소통이 안 되는 것 처럼,

브라우저와 의사소통이 어렵고, 오해석이 생길 수 있죠.

크로스브라우징(Cross Browsing)은 어떤 브라우저(크롬,사파리,웨일,인터넷익스플로러 등 인터넷 접속/사용을 위해 사용)에서든 웹사이트가 내가 원하는 대로 나오게 코드를 수정/추가하는 것입니다.

내가 웹표준을 잘 지켜서 작성해도 브라우저들이 성격이 다 달라서 다르게 보여줘요.

 

 

웹사이트에는 이미지가 자주 들어가는데, 

일반적으로 사진은 jpg, 배경이 투명해야 할 경우 png, 애니메이션은 gif, 아이콘은 svg를 사용해요.

jpg(jpeg)는 사진의 디테일, 색상 표현이 잘 되고 용량이 작은 장점이,

png는 디테일, 색상표현, 투명한 표현 가능,

gif는 애니메이션 가능, 색상표현은 별로 안 좋음,

svg는 안깨짐(다른 확장자는 픽셀로 표현되는 이미지고 이거는 수학적 기호로 표현되요), 파일뿐만 아니라 코드로도 사이트에 넣어줄 수 있음, 코드로 넣으면 js나 css로 수정, 조작이 가능해요.

그래서 상황에 맞는 확장자를 잘 선택해서 사용하면 좋아요.

//google logo svg
<svg fill="none" stroke-width="18" viewBox="0 0 520 174" width="90" height="34" class="TYpZOd">
	<path d="M69 70.4l61 0m-9 3.5a56 57 0 1 1-17-47" class="fSnalc" stroke-width="19px"></path>
    <ellipse cx="179" cy="90" rx="33" ry="34" class="ZqPjbb"></ellipse>
    <ellipse cx="270" cy="90" rx="33" ry="34" class="oOg6Ne"></ellipse>
    <ellipse cx="358" cy="90" rx="32" ry="34" stroke-width="17px" class="fSnalc"></ellipse>
    <path d="M391 49l0 73l-2 0a 22 22-30 0 1-59 24" class="fSnalc"></path>
    <path d="M423 5l0 130" class="aPiskd"></path>
    <path d="M509 110a32 35-3 1 1 3-29M517 76l-63 24" class="ZqPjbb" stroke-width="16px"></path>
</svg>

 

WEBP는 jpg, png, gif의 특징을 모두 가지고 있다고 하는데, 사용해 보지 않아서 어떻게 사용되는지 잘 모르겠네요...

간혹 다른 사이트 이미지를 저장하려고 하면 WEBP 확장자가 있는데, 그러면 저장된 파일이 인터넷으로만 열리더라구요.

그리고 WEBP는 새로 만들어진 확장자라서 지원하지 않는 브라우저도 있데요.

 

브라우저에서 지원하는지 여부는 'Can I use...'라는 사이트에서 확인 가능해요!

 

 

특수문자 용어는 회사에서 소통할 때, 용어를 모르면 의사소통에 어려울 때가 있어요...

근데 외우기 쉽지 않은... 특히 괄호 종류들...

 

오픈소스 라이센스는 진짜 꼭 상업용(돈 버는용)으로 무료로 가능한지, 개인적으로만 사용 가능한지 확인 하셔야 해요.

안그러면 고소도 당한답니다...^^

코드뿐만 아니라 폰트, 이미지도 사용할 때 꼭 확인하세요!

 

아직까지는 대부분 아는 내용이라, 해당 패캠 수업 외에서 알게된 내용도 조금씩 추가해 봤습니다.

모르는거 나오기 시작하면, 공부한 내용을 메모하는 식으로 포스팅이 될 것 같긴 한데...

설명을 너무 잘 해 주셔서 정리를 어떻게 해야할지...

차차 생각해 보기로 하고, 이렇게 1주차 끝!

 

안뇽🖐 화이팅💪