[유데미 취업부트캠프] - 1주차 학습 일지 (프론트엔드 & 백엔드)
유데미X사람이 취업부트캠프 첫날(2023.12.13)
웅진씽크빅에서 주관하는 유데미X사람인에서 주관하는 취업부트캠프에 합격을 했다..!
오프라인으로 진행되는 과정인점이 개인적으로 마음에 들었기 때문에 꼭 붙고 싶었는데 다행이다!..
그동안 온라인 생활이 힘들었다..
OT때 말씀해주시기를, 서류-코딩테스트-면접에 걸쳐 선발되기까지 경쟁률이 무려 570:17이라 하였다.
자부심을 갖고 믿음과 기대에 부응할 수 있도록 혼신의 힘을 다해 노력해야겠다고 다짐했다. (초심 잃지 않기를 제발...)
오늘은 가볍게 조원들과 아이스브레이킹 및 자기소개를 하였다.
서로의 얼굴을 그려주기도 하고 일어서서 자기소개를 하는데, 여전히 남들 앞에 서서 발표하는 일은 쉬운일이 아닌 것 같다...
그래도 자기소개를 함으로써 조금 더 친근해진 느낌이 들어서 좋았고, 무엇보다 동기분들의 마음가짐, 개발 경력, 개발 철학, 과거 경험 등을 들을 수 있어 자극도 받고 성공적인 프로젝트를 위해 3개월 동안 혼을 갈아 넣겠다는 목표가 생겼다.
또한 이전보다 개발에 대한 마음가짐에 변화가 온 것이 느껴져서 자신감도 생겼다.
교육과정중에 힘든일이 생기거나, 초심을 잃었다고 판단되었을 때는 이 1일차 블로그를 자주 방문하려고 한다.
학습 내용
주소창에 URL을 입력하면?
웹 브라우저 접속
1. 사용자가 웹 브라우저를 통해 URL을 입력. 웹브라우저는 클라이언트 or 프론트엔드로서 작동.
2. Request : 브라우저가 웹사이트를 호스팅하는 원격컴퓨터(서버)에 Request 보냄.
3. Response : 웹사이트를 호스팅하는 서버(백엔드)는 브라우저의 요청을 처리한 후 Response를 다시 웹 브라우저로 보냄.
4. 브라우저 렌더링
브라우저는 서버로부터 받은 응답을 해석하여, 사용자에게 보여준다.
cf. 브라우저 렌더링 과정
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
DNS
DNS(Domain Name System) 도메인을 IP 주소로 변환하려면 DNS서버에 도메인 쿼리하는 과정은 필수다. 하지만, DNS 서버 없이 로컬에서 도메인과 IP주소를 직접 설정해 사용할 수가 있다. 로컬에서 도메인
baegopeun-sj.tistory.com
HTML
HTML 이란?
HTML은 우리의 웹사이트 컨텐츠가 어떤 구조로 이루어질지 브라우저에게 설명하는 유일한 언어이다.
우리의 웹사이트 문서를 이루는 태그들의 집합이라고 볼 수 있다. 즉 웹페이지라 하면 결국은 html파일이라고 말할 수 있겠다.
<!DOCTYPE html>
브라우저에게 해당문서가 (현대적인 웹 표준을 따르는) HTML 형식을 사용하여 작성됨을 알리는 역할이다.
HTML element
HTML태그 + 콘텐츠
왜 필요할까??
1. 우리가 만든 컨텐츠들이 브라우저에 제목, 텍스트, 이미지 등으로 표시될수있도록 하기 위해.
2. 검색엔진 크롤러의 탐색을 용이하게 하기위해. (HTML 주석 등 필요로함)
3. 눈으로 볼 수 없는 사용자를 위해. ( e.g. 스크린리더기로 인터렉션하는 시각장애인)
HTML 속성
태그의 이름만으로 정보가 부족할때 속성을 통해 추가요소구성을 할 수 있다.
메타데이터
브라우저에는 영향을 끼치나 사용자에게는 보이지 않는 정보.
메타데이터 <- title, 스타일 등
콘텐츠 <- HTML element
title태그 - 탭과 검색엔진에 표시되는 요소
사이트가 서버에 올라가게 되면 검색엔진 크롤러가 볼수있어, SEO에 중요한 역할을 한다.
CSS
CSS의 본질적인 의미
Cascading Style Sheets
Cascading, 사전적의미로는 '계단식', '폭포가 되어 떨어지는것'이다
즉, CSS의 본질적인 의미는 여러개의 스타일 규칙이 동일한 하나의 요소에 적용될 경우 어느 규칙이 우선 적용될지 정의한 것이라고 봐도 무방하다.
또 CSS는 상속(Inheritance)의 원칙을 담고있는데, 대표적인 예시로 부모요소에서 자식요소로 스타일 속성이 전달되는 것을 말할 수 있겠다.
스타일 적용 우선순위
크게 다음과 같이 나눌 수 있다.
0) !important 키워드
1) 인라인 스타일
2) 구체적인 선택자 (id > class == 가상 > 태그 > 전체)
3) 부모요소로부터 상속
cf. 복합 선택자의 경우 각 선택자의 우선순위 점수를 합산해서 정한다고 한다.
배포 및 호스팅
배포
내 웹사이트의 코드(HTML, CSS, JS 및 기타 이미지 등)를 호스팅 서비스 서버에 업로드 하는것.
호스팅
원격컴퓨터(서버)에서 해당 웹사이트의 코드를 저장.
호스팅 서비스에는 AWS, Netlify, Github Pages, Vercel, Google Cloud Platform 등이 있다.
이중에서 Netlify를 활용해 간단하게 만든 사이트를 배포하는 실습을 해보았다.
https://657dc9ca7a73984a7d1d3808--incredible-scone-637124.netlify.app/
HTML & CSS Basics Summary
HTML Summary HTML (HyperText Markup Language) is used to define our page content, structive and meaning. You don't use it for styling purpose. Use CSS for that instead! HTML uses "elements" to describe (annotate) content HTML elements typically have an ope
657dc9ca7a73984a7d1d3808--incredible-scone-637124.netlify.app
버전관리 시스템
Git - 로컬 관리 도구
Github - git으로 관리한 프로젝트를 클라우드로 보내는 역할(클라우드 호스팅 제공자)
멘토링
Q) 포토폴리오로써 효과적으로 어필할 수 있는 프로젝트가 되게 하려면 주제선정이나 실제 구현에 있어서 어떤 부분에 주안점을 둬야하나요?
A) 결국에 기업에서 개발자를 뽑는 이유는 “문제해결능력” 이라고 하셨다.
어떤 문제를 맞닥뜨렸고,
어떤 상황으로 인지했고,
어떻게 해결해 나갔는지 이게 궁금한거지
이력서에 어떤거 만들었다! 이거는 좋은 평가 받기 힘들다. 라고 하셨다.
포토폴리오 작성시에도, 프로덕트의 완성도에 중점을 두기보다는
“개발자 포토폴리오” 이므로
해당 프로덕트가 실제로 사용되고 있는 상황이고, 어떠한 문제가 있을때 어떻게 해결할 거인가를 인지하고 있는 개발자가 경쟁력을 갖출것이다
그리고 코드의 퀄리티도 중요하지만, 경험의 퀄리티에 강조를 많이 하셨던 것 같아서 좋은 경험을 위해 동작할 메커니즘이나 사용할 기술 스택에 대해서도 왜 해당 스택을 사용해야 하는지 그런 고민들을 늘 가져야겠다고 생각했다.
Q) 어떤 개발자가 경쟁력을 갖출것인가
1. 일단 깊이있는 공부, 경험을 하는 것이 절대적으로 유리하다.
(얕고 넓은 기술 스택은 오히려 독이 될 수 있다)
예를들어 패키지를 가져다 쓸 때도, 이사람이 이걸 이유없이 썼는가? 아니면 비교분석을 철저히 했는가가 굉장히 중요한 포인트.
2. 기술 이슈 경험
예를 들어 포토폴리오를 보면, 이러이러한 프로젝트가 있는데 완성도나 그런걸 보는것보다 과연 이 사이드 프로젝트를 하면서 이슈가 없었을까??
있었다면 어떻게 인지했고, 어떻게 해결했을까?? 이게 굉장히 궁금한 포인트다!
기술이슈를 겪을만한 난이도의 프로젝트를 선정하는게 일단 베스트.
3. 오픈소스 작은코드라도 기여를 했다는 사실.
(유명한 오픈소스 아니어도)
4. 다양한 문제상황을 고민하는 개발자인가
다양항 문제상황을 생각해보고 코드를 그에 맞게 작성. 틀려도 좋으니 어느 상황이 발생한다면 어떻게 처리하면 되지 않을까?? 이런 고민을 하는 개발자인가. 원리파악에 관심 자체가 없어보이면 곤란하다.
느낀점
드디어 첫주차를 잘 마무리 했다.
오프라인이라 긴장도 됐었지만, 다른 분들의 열정이 전해져서 자극도 받고 스스로 부족한 부분도 깨달을 수 있어서 좋았던 것 같다.
빨리 동기분들과 친해져서 함께 스터디도하며 어제보다 성장해 나가고 싶다.
다음 주도 매일 한문제씩은 알고리즘 문제를 풀고 CS 및 프론트 지식에 대해 1가지씩 정리를 하도록 해야겠다.
* 유데미(Udemy) 큐레이션을 받고싶다면? : https://bit.ly/43JLW2l
* STARTERS 취업 부트캠프 공식 블로그 : https://blog.naver.com/udemy-wjtb
본 후기는 유데미 취업부트캠프 프론트엔드&백엔드 리뷰로 작성되었습니다.