TIL 작성에 앞서
웅진씽크빅에서 주관하는 유데미X사람인에서 주관하는 취업부트캠프에 합격을 했다..!
OT때 말씀해주시기를, 서류-코딩테스트-면접에 걸쳐 선발되기까지 경쟁률이 무려 570:17이라 하였다.
자부심을 갖고 믿음과 기대에 부응할 수 있도록 혼신의 힘을 다해 노력해야겠다고 다짐했다. (초심 잃지 않기를 제발...)
오늘은 가볍게 조원들과 아이스브레이킹 및 자기소개를 하였다.
서로의 얼굴을 그려주기도 하고 일어서서 자기소개를 하는데, 여전히 남들 앞에 서서 발표하는 일은 쉬운일이 아닌 것 같다...
그래도 자기소개를 함으로써 조금 더 친근해진 느낌이 들어서 좋았고, 무엇보다 동기분들의 마음가짐, 개발 경력, 개발 철학, 과거 경험 등을 들을 수 있어 자극도 받고 성공적인 프로젝트를 위해 3개월 동안 혼을 갈아 넣겠다는 목표가 생겼다.
또한 이전보다 개발에 대한 마음가짐에 변화가 온 것이 느껴져서 자신감도 생겼다.
교육과정중에 힘든일이 생기거나, 초심을 잃었다고 판단되었을 때는 이 1일차 블로그를 자주 방문하려고 한다.
TIL을 통해 이번 교육과정에서 학습한 내용과 동시에, 얻은 좋은 경험들을 기록하는 것을 놓치지 않으려고 한다.
학습내용
1. 웹 작동방식
1-1. 주소창에 URL을 입력하면?
-
웹 브라우저 접속
사용자가 웹 브라우저를 통해 URL을 입력. 웹브라우저는 클라이언트 or 프론트엔드로서 작동. -
Request
브라우저가 웹사이트를 호스팅하는 원격컴퓨터(서버)에 Request 보냄. -
Response
웹사이트를 호스팅하는 서버(백엔드)는 브라우저의 요청을 처리한 후 Response를 다시 웹 브라우저로 보냄. -
브라우저 렌더링
브라우저는 서버로부터 받은 응답을 해석하여, 사용자에게 보여준다.
cf. 브라우저 렌더링 과정
1-2. URL
URL이란
웹 상에서 원하는 것을 검색하기 위해 브라우저에서 사용하는 메커니즘.
URL구성
프로토콜://도메인/path 로 이루어져있다.
정리하자면 URL은 결국
"전송받고 싶은 리소스가 있는 웹서버와 그 파일" 을 의미한다.
http://www.n-study.com/network/index.html 라는 url이 있다고 가정하면,
www.n-study.com 이라는 서버에 http 요청을 하는거다.
=> 너네가 인터넷에 공개한 network디렉토리 안에 있는 index.html이라는 파일을 http 응답을 통해 보내줘!
자세한 내용은 전에 정리한 티스토리 블로그를 참고하자!
https://baegopeun-sj.tistory.com/23
1-3. DNS
DNS란?
호스트의 도메인네임(www.google.com)을 네트워크주소로 변환하거나, 그 반대의 변환을 수행하는 시스템.
DNS 서버는 이 매핑 테이블이 포함된 서버이다.
다시 주소창에 url을 입력하면 생기는 일을 자세히 다뤄보겠다.
1. 브라우저는 입력받은 도메인을 ip주소로 변환하기 위해 DNS서버와 대화 시도.
2. ip 주소로 변환받으면 웹서버에 request를 보낸다.
3. 서버로부터 response 받는다.
여기서,
도메인을 IP 주소로 변환하려면 DNS서버에 도메인 쿼리하는 과정은 필수다.
하지만 동일한 도메인을 계속 쿼리한다면 성능면에서 안좋다는건 당연한 일이다.
따라서 DNS 서버에 쿼리하기전, DNS 캐시 정보를 먼저 확인하는 방법도 있다.
그래서 자세히 다룬 동작과정은 다음과 같다.
- 로컬 hosts파일 확인
- DNS cache 확인(캐싱)
- DNS에 질의
- IP 주소획득
- TCP 연결 (3-way handshake)
- 연결 성공하면 http request
- 그리고 그에 따른 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) 결국에 기업에서 개발자를 뽑는 이유는 “문제해결능력” 이라고 하셨다.
어떤 문제를 맞닥뜨렸고,
어떤 상황으로 인지했고,
어떻게 해결해 나갔는지 이게 궁금한거지
이력서에 어떤거 만들었다! 이거는 좋은 평가 받기 힘들다. 라고 하셨다.
포토폴리오 작성시에도, 프로덕트의 완성도에 중점을 두기보다는
“개발자 포토폴리오” 이므로
해당 프로덕트가 실제로 사용되고 있는 상황이고, 어떠한 문제가 있을때 어떻게 해결할 거인가를 인지하고 있는 개발자가 경쟁력을 갖출것이다
그리고 코드의 퀄리티도 중요하지만, 경험의 퀄리티에 강조를 많이 하셨던 것 같아서 좋은 경험을 위해 동작할 메커니즘이나 사용할 기술 스택에 대해서도 왜 해당 스택을 사용해야 하는지 그런 고민들을 늘 가져야겠다고 생각했다.
느낀점
항상 고민하고 그 과정에서 얻은 경험을 기록하자
