학습내용

Cascading Style Sheets

Cascading, 사전적의미로는 '계단식', '폭포가 되어 떨어지는것'이다

즉, CSS의 본질적인 의미는 여러개의 스타일 규칙이 동일한 하나의 요소에 적용될 경우 어느 규칙이 우선 적용될지 정의한 것이라고 봐도 무방하다.

또 CSS는 상속(Inheritance)의 원칙을 담고있는데, 대표적인 예시로 부모요소에서 자식요소로 스타일 속성이 전달되는 것을 말할 수 있겠다.

스타일 적용 우선순위

크게 다음과 같이 나눌 수 있다.
0) !important 키워드

1) 인라인 스타일
2) 구체적인 선택자 (id > class == 가상 > 태그 > 전체)
3) 부모요소로부터 상속

cf. 복합 선택자의 경우 각 선택자의 우선순위 점수를 합산해서 정한다고 한다.

구글 폰트 활용하기

구글 폰트에서 원하는 폰트를 받아오기 위한 코드를 살펴보면 다음과 같은 것들이 있는데 정확히 무슨 역할을 할지 찾아보았다.

<link rel="preconnect" href="https://fonts.googleapis.com">

rel속성은: 현재 링크와 문서와의 관계를 지정하는 속성이다.

preconnect 속성값 : 브라우저에게 특정한 출처에 대한 연결을 미리 설정하도록 지시합니다.

여기서는 구글 주서버에 미리 연결해줘! 이다.

⇒ 이로인해 DNS 조회, TCP 핸드셰이킹 등 초기 연결 단계를 미리 처리함으로써 지연 시간을 줄인다고 한다.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

=> 해당 코드는 "구글의 CDN에 속한 해당 주소에 미리 연결해줘!" 라고 할 수 있겠다. (“fonts.gstatic.com” 해당 도메인은 구글의 CDN에 속한다고 한다.)
=> Google의 정적 자원(JavaScript 라이브러리, 폰트 등)을 로딩 속도를 향상시키는 데 활용된다.

cf. CDN이란?

그리고 crossorigin 속성은
다른 출처에 있는 리소스를 받아오기 위해 사용한다고 한다.
"해당 리소스 요청은 CORS 정책을 준수하니 막지말아줘!"

cf. CORS란?

<link 
    href="https://fonts.googleapis.com/css2?family=Fira+Sans&family=Oswald:wght@700&family=Roboto&family=Source+Sans+3:wght@300;400&display=swap" 
    rel="stylesheet"
>

Google Fonts API를 통해 해당하는 폰트를 요청한다. 여기서는 Fira Sans와 Oswald를 사용해보았다.
그리고 rel="stylesheet"는 말그대로 받아올 리소스가 스타일시트임을 의미한다.

cf. 앞서 정리한 preconnect 외에도 preload, prefetch 방식에 대해서도 정리가 잘 되어있는 아래 블로그를 참고하면 좋을것 같다.
https://velog.io/@fepanbr/HTML-preload-preconnect-prefetch

대체 텍스트

이미지 태그는 다음과 같이 사용되어야 한다.
<img src="경로", alt="대체텍스트">

그런데 대체 텍스트가 왜 필요할까?
=> 시각장애인들도 콘텐츠의 의미를 파악할 수 있도록 하기 위해.
스크린 리더기가 대체 텍스트의 내용을 읽어준다.
=> 웹접근성 향상.

웹접근성 관련 레퍼런스 참조 사이트
https://developer.mozilla.org/ko/docs/Web/Accessibility
https://webdir.tistory.com/327

Live Server

VS code에서 우리가 자주 사용했던 Live Server는 로컬 개발 웹서버이다.
우리의 웹사이트를 인터넷에 노출 시키는 것이 아니라,

로컬 컴퓨터에서 로컬 컴퓨터로 웹사이트를 호스트하는 기능을 한다.

inline vs block vs inline-block

inline 엘리먼트
- 줄바꿈없이 한줄에 다른 엘리먼트들과 배치된다.
- 위아래의 여백이나 높이속성 등이 적용되지 않는다.

e.g. span, a, img

block 엘리먼트
- 한줄 전체를 차지한다.
- 전후 줄바꿈이 들어가 다른 엘리먼트를 밀어냄

e.g. h1, div, p, li

inline-block 엘리먼트
- 같은 줄에 다른 엘리먼트와 함께 배치
- block 엘리먼트처럼 높이, 마진, 패딩 제어가능

e.g. button, input, textarea, select

마진상쇄

마진이 더 큰쪽이 우선적용.

block요소에서만 발생한다.
인라인 요소나, display: inline-block; 한경우에는 발생X

TIL 작성에 앞서

웅진씽크빅에서 주관하는 유데미X사람인에서 주관하는 취업부트캠프에 합격을 했다..!
OT때 말씀해주시기를, 서류-코딩테스트-면접에 걸쳐 선발되기까지 경쟁률이 무려 570:17이라 하였다.
자부심을 갖고 믿음과 기대에 부응할 수 있도록 혼신의 힘을 다해 노력해야겠다고 다짐했다. (초심 잃지 않기를 제발...)

오늘은 가볍게 조원들과 아이스브레이킹 및 자기소개를 하였다.
서로의 얼굴을 그려주기도 하고 일어서서 자기소개를 하는데, 여전히 남들 앞에 서서 발표하는 일은 쉬운일이 아닌 것 같다...

그래도 자기소개를 함으로써 조금 더 친근해진 느낌이 들어서 좋았고, 무엇보다 동기분들의 마음가짐, 개발 경력, 개발 철학, 과거 경험 등을 들을 수 있어 자극도 받고 성공적인 프로젝트를 위해 3개월 동안 혼을 갈아 넣겠다는 목표가 생겼다.
또한 이전보다 개발에 대한 마음가짐에 변화가 온 것이 느껴져서 자신감도 생겼다.
교육과정중에 힘든일이 생기거나, 초심을 잃었다고 판단되었을 때는 이 1일차 블로그를 자주 방문하려고 한다.

TIL을 통해 이번 교육과정에서 학습한 내용과 동시에, 얻은 좋은 경험들을 기록하는 것을 놓치지 않으려고 한다.

학습내용

1. 웹 작동방식

1-1. 주소창에 URL을 입력하면?

웹 브라우저 접속
1. 사용자가 웹 브라우저를 통해 URL을 입력. 웹브라우저는 클라이언트 or 프론트엔드로서 작동.
2. Request : 브라우저가 웹사이트를 호스팅하는 원격컴퓨터(서버)에 Request 보냄.
3. Response : 웹사이트를 호스팅하는 서버(백엔드)는 브라우저의 요청을 처리한 후 Response를 다시 웹 브라우저로 보냄.
4. 브라우저 렌더링
브라우저는 서버로부터 받은 응답을 해석하여, 사용자에게 보여준다.

cf. 브라우저 렌더링 과정

1-2. URL

URL이란
웹 상에서 원하는 것을 검색하기 위해 브라우저에서 사용하는 메커니즘.

URL구성
프로토콜://도메인/path 로 이루어져있다.

정리하자면 URL은 결국
"전송받고 싶은 리소스가 있는 웹서버와 그 파일" 을 의미한다.

http://www.n-study.com/network/index.html 라는 url이 있다고 가정하면,
http://www.n-study.com 이라는 서버에 http 요청을 하는거다.
=> 너네가 인터넷에 공개한 network디렉토리 안에 있는 index.html이라는 파일을 http 응답을 통해 보내줘!

자세한 내용은 전에 정리한 티스토리 블로그를 참고하자!
https://baegopeun-sj.tistory.com/23

1-3. DNS

DNS란?
호스트의 도메인네임(http://www.google.com)을 네트워크주소로 변환하거나, 그 반대의 변환을 수행하는 시스템.

DNS 서버는 이 매핑 테이블이 포함된 서버이다.

다시 주소창에 url을 입력하면 생기는 일을 자세히 다뤄보겠다.
1. 브라우저는 입력받은 도메인을 ip주소로 변환하기 위해 DNS서버와 대화 시도.
2. ip 주소로 변환받으면 웹서버에 request를 보낸다.
3. 서버로부터 response 받는다.

여기서,
도메인을 IP 주소로 변환하려면 DNS서버에 도메인 쿼리하는 과정은 필수다.
하지만 동일한 도메인을 계속 쿼리한다면 성능면에서 안좋다는건 당연한 일이다.
따라서 DNS 서버에 쿼리하기전, DNS 캐시 정보를 먼저 확인하는 방법도 있다.

그래서 자세히 다룬 동작과정은 다음과 같다.

1. 로컬 hosts파일 확인
2. DNS cache 확인(캐싱)
3. DNS에 질의
4. IP 주소획득
5. TCP 연결 (3-way handshake)
6. 연결 성공하면 http request
7. 그리고 그에 따른 response
cf. https://baegopeun-sj.tistory.com/12

2. HTML

2-1. HTML 이란?

HTML은 우리의 웹사이트 컨텐츠가 어떤 구조로 이루어질지 브라우저에게 설명하는 유일한 언어이다.
우리의 웹사이트 문서를 이루는 태그들의 집합이라고 볼 수 있다. 즉 웹페이지라 하면 결국은 html파일이라고 말할 수 있겠다.

<!DOCTYPE html>
브라우저에게 해당문서가 (현대적인 웹 표준을 따르는) HTML 형식을 사용하여 작성됨을 알리는 역할이다.

2-2. HTML element

HTML태그 + 콘텐츠

왜 필요할까??
1. 우리가 만든 컨텐츠들이 브라우저에 제목, 텍스트, 이미지 등으로 표시될수있도록 하기 위해.
2. 검색엔진 크롤러의 탐색을 용이하게 하기위해. (HTML 주석 등 필요로함)
3. 눈으로 볼 수 없는 사용자를 위해. ( e.g. 스크린리더기로 인터렉션하는 시각장애인)

2-3. HTML 속성

태그의 이름만으로 정보가 부족할때 속성을 통해 추가요소구성을 할 수 있다.

2-4. 메타데이터

브라우저에는 영향을 끼치나 사용자에게는 보이지 않는 정보.

메타데이터 <- title, 스타일 등
콘텐츠 <- HTML element

title태그 - 탭과 검색엔진에 표시되는 요소
사이트가 서버에 올라가게 되면 검색엔진 크롤러가 볼수있어, SEO에 중요한 역할을 한다.

3. CSS

3-1 CSS의 본질적인 의미

Cascading Style Sheets
★여기서 Cascading이란?? =>

3-2 CSS 선택자

CSS 규칙이 적용되는 요소를 정의하는 역할

3-3 글로벌 CSS 스타일

하나의 CSS 규칙이 페이지의 여러 요소에 적용될 수 있어서 좋다.

4. 브라우저 개발자 도구

네트워크 탭 - 리소스가 정상적으로 받아와졌는지 확인하거나, 리소스의 용량 및 다운로드 시간을 확인할 수 있다. ⇒ 성능 최적화를 위해 활용.

브라우저 개발자도구를 통해 페이지 편집하면?
⇒ 로드된 페이지를 변경하게 된다.

멘토링

Q) 포토폴리오로써 효과적으로 어필할 수 있는 프로젝트가 되게 하려면 주제선정이나 실제 구현에 있어서 어떤 부분에 주안점을 둬야하나요?

A) 결국에 기업에서 개발자를 뽑는 이유는 “문제해결능력” 이라고 하셨다.

어떤 문제를 맞닥뜨렸고,
어떤 상황으로 인지했고,
어떻게 해결해 나갔는지 이게 궁금한거지

이력서에 어떤거 만들었다! 이거는 좋은 평가 받기 힘들다. 라고 하셨다.

포토폴리오 작성시에도, 프로덕트의 완성도에 중점을 두기보다는
“개발자 포토폴리오” 이므로
해당 프로덕트가 실제로 사용되고 있는 상황이고, 어떠한 문제가 있을때 어떻게 해결할 거인가를 인지하고 있는 개발자가 경쟁력을 갖출것이다

그리고 코드의 퀄리티도 중요하지만, 경험의 퀄리티에 강조를 많이 하셨던 것 같아서 좋은 경험을 위해 동작할 메커니즘이나 사용할 기술 스택에 대해서도 왜 해당 스택을 사용해야 하는지 그런 고민들을 늘 가져야겠다고 생각했다.

느낀점

항상 고민하고 그 과정에서 얻은 경험을 기록하자