[TIL] Udemy 1일차 프론트엔드/백엔드 - HTML,CSS

강준호·2023년 12월 13일
개발부트캠프백엔드유데미유데미부트캠프유데미취업부트캠프유데미큐레이션프론트엔드

Udemy

목록 보기
1/44
post-thumbnail

https://www.udemy.com/course/100-2022-web-development/

웹페이지의 작동 방식

1. 웹 브라우저에서 요청

URL or 링크 클릭 -> 웹 브라우저는 특정 HTML 파일에 액세스하기 위해 웹 서버에 요청을 보냅니다.

2. HTML 파일 전송

웹 서버는 요청된 HTML 파일을 브라우저로 다시 전송하여 응답합니다.

3. HTML 파싱

웹 브라우저는 HTML 파일을 수신 -> HTML 파서를 사용하여 파일의 구조와 내용을 읽고 이해합니다.

4. 렌더링

HTML을 구문 분석한 후 브라우저가 웹페이지를 렌더링합니다. 렌더링 엔진은 HTML과 CSS를 해석하여 화면에 콘텐츠의 형식을 지정하고 표시합니다.

5. 웹 브라우저에 표시

마지막으로 렌더링된 웹페이지가 웹 브라우저 창에 표시됩니다.

정리

url 로 웹 브라우저가 요청-> DNS 에서 매핑된 도메인 주소 읽어서 IP 주소로 변환 -> 요청된 HTML 브라우저로 보내줌 -> 받은 HTML 을 파서로 구조와 내용을 읽고 이해 -> 이해한 웹페이지를 렌더링 -> 표시

기억해두면 좋을 것들

  • 웹 페이지 = HTML + CSS + JS

  • 표준 텍스트 태그는 'p'사용한다.

  • 링크를 넣을 때는 'a' 앵커 태그와 href 속성을 사용한다.

  • font-family 는 폰트, text-align 는 center 등 텍스트 위치 CSS.

  • CSS 스타일 단락을 사용해 일괄적으로 CSS 를 관리하자!

p {
    font-family: sans-serif;
    text-align: center;
}

멘토링 QnA

Q. 이번 교육 커리큘럼 상 백엔드 개발 학습과 실습에 있어 노드를 주력으로 사용하게 될 것 같습니다. 따라서 노드로 익히게 될 백엔드 개발 관련 지식을 자바/스프링 백엔드 개발 포지션에 지원할 때 최대한 유리하게 활용하고 싶습니다. 이를 위해서 어떤 부분에 주안점을 두고 학습을 해나가면 좋을지 조언을 구하고 싶습니다.또한 실무에서 백엔드 개발자에게 요구되는 프론트엔드 관련 역량은 어느 정도 수준일지에 대해서도 질문 드립니다!

  • 노드를 사용하는 당위성이 중요하다.
  • 공부한걸 올리기 보다는 어떤식으로 문제를 해결했는지 사이클해소가 메인이 되어야해.

Q. 안녕하세요 현재 한국의 백엔드 개발에서는 전자정부 프레임워크가 Spring 이기 때문에 과거부터 현업에서 Spring 이 주력으로 사용되었다고 알고있습니다. 하지만 해외에서는 Node.js 의 점유율이 점점 더 높아지는 것으로 알고있는데 혹시 현업에서도 이러한 변화의 흐름이 있는지 궁금합니다.

  • 현재 백엔드 프레임워크는 Fast api , Spring , Node -> Nest.js 이렇게 삼파전이야.

  • Node 를 선택할 경우 장점은 프론트와 기술 스택 일치 -> 패키지 공유로 이슈 감소 및 코드 공유가 유리. 이점을 장점으로 잡고 사용해야해.

Q. 최근에 학교에서 엘라스틱 서치에 대한 내용을 잠시 공부했는데, 혹시 현업에서 백엔드 프레임워크와 데이터베이스에 이를 접목해서 자주 사용하는지 묻고싶습니다!

  • 엘라스틱서치를 현업에서 엄청 자주 사용한다. 업계 표준이 되어버렸다.

  • 하지만 따로 사용하는 경우가 많지 프레임워크와 같이 사용하는 경우는 적다.

  • 로그를 밀어넣기 or 로그 검색 => 로그스테이시

  • 사용자에 대한 검색이나 쿠팡, 네이버 쇼핑 등의 필터 조건 검색에서 엘라스틱 서치는 필수적!

Q. 주니어 백엔드 개발자가 쿠버네티스까지 학습하는 게 투머치일까요?!? 학습을 이론적으로는 하고 있는데, 쿠버네티스를 활용할 일(많은 컨테이너를 관리하는 일)은 실제로 없어서 여쭤봅니다!

  • 쿠버네티스를 써보는 경험보다는 도커를 거쳐서 쿠버네티스로 가는 흐름과 디테일이 중요하다.

  • 단순 쿠버네티스 사용방법은 툴 사용이지. 이는 의미 있는게 아니다.

  • 툴 사용을 익히기 보다는 궁극적으로 리눅스 사용의 디테일을 공부하면 좋을것같다. 도커를 잘 사용하려면 고급 리눅스 스킬이 선행되어야하기 때문이다.

Q. 백엔드 개발자로서 포트폴리오로 사용하기 위해 팀프로젝트를 진행할 때, 효과적으로 어필할 수 있는 프로젝트가 되게 하려면 주제선정이나 실제 구현에 있어서 어떤 부분에 주안점을 두면 좋을지 조언 부탁드립니다!

  • 어떤 것을 할때 문제해결 능력이 가장 중요하다! 즉, 어떤 문제를 어떻게 이해하고 해결해 나갔는가가 중요해!

  • 그렇기에 이것을 기록으로 남겨놓지 않은 이력서는 좋은 평가 받기 매우 어려워..

  • 이 제품이 무엇인지 소개하는걸 이력서에 담기보다. 내가 '무엇을 어떻게 해결했는지'에 초점을 두자. 추가적으로 이런 문제들은 충분한 트래픽이 왔을 때 미리 경험해보는것이 좋아.

  • 예를들면, 데이터 베이스의 동시성 이슈를 일부러 겪을 수 있는 문제 중 복합 조건 검색 에서 문제를 겪어 => 처음에는 데이터베이스로 문제를 해결 했는데 DB 로 쿼리를 날리고 성능 테스트를 했는데 성능이 매우 떨어지는 문제가 발생했어. => 개선을 엘라스틱 서치를 이용해서 성능을 높였습니다. 라고 이력서와 포트폴리오를 자연스럽게 녹여서 스토리를 푸는것이 효율적이야!

Q. 스프링으로 간단한 api 구현을 할 줄 안다고 할 때,입사 전에 redis, batch, logger와 같은 스프링 프레임 워크를 추가적으로 공부해보고자 할 때, 이 부분은 꼭 공부해봤으면 좋겠다 하시는 프레임 워크가 있으실까요?

  • 사실 redis 를 사용해보면 되게 쉽기 때문에 한번 해보면 많은 이해도를 가질 수 있어. JWT 를 사용한다거나 하는것도 이것의 예.

  • 핵심은 레디스를 '어떻게 활용'할지!

  • batch가 자주 쓰이는건 집계 연산부분이야.

  • 예를 들면 만건의 데이터에 배치를 사용하는건 효율적이고 좋은 경험이지.

  • 마지막으로, 로거 같은 경우는 그냥 필수야. 왜냐하면, 스프링에 로거를 붙여서 사용하는건 업계에서 필수이며, 사용하기도 너무 쉽거든.

Q. 배치를 이용해서 개인정보 보호 기간이 만료한 유저의 데이터를 삭제하는 식의 구현을 해보는것도 괜찮을까요?

  • 데이터 건수가 꽤 많은 프로젝트를 할때 ex) 몇 억 개의 데이터 중 중간 데이터가 몇 백 만건 만료되었을때

  • 우선 이를 구성하는 과정에서 여러가지 이슈가 생길 수 있어. 이건 매우 좋지. => 또다른 해결을 할 수 있으니.

  • 이것을 해결할때 내 경험을 꼭 기록해. 예를 들면, 데이터를 5억건을 ex) 서버에 부하가 오는 데이터를 일부러 넣었는데 => 문제가 생겼고 => 이를 해결하면서 푸는 경험을 이력서로 녹이는 거야.

  • 아까도 말했지만 내 경험을 기록하는걸 놓치게 되는데 그러면 면접관 입장에서는 잘 모르기 때문이야.

Q. 요즘에는 처음부터 좋은 회사를 가는 것 보다 흔히 이직 점프를 통해서 점점 원하는 회사에 가는 방법도 한가지 방법이라고 들었습니다. 이 의견에 대해서 어떻게 생각하시는지 알고 싶습니다.

  • 이직 점프 이게 무조건 좋아!

  • 사실 현재 트렌드는 공채를 조금씩이라도 줄이고 있어. 그렇기에 주니어를 수시 채용하는거랑 공채랑 허들이 달라. 공채가 늘고있는 트렌드면 이야기가 다르겠지만, 공채는 너무 어려워졌어. 점점 더 어려워지고.

  • 그렇기에 실제 일을 해보고 서비스를 무조건 경험해보는게 좋아!

-이를 통해서 내 개발 역량 일하는 마인드셋, 실제 내 장단점을 파악할 수 있어.

그렇다면 개발자 입장에서는 최대한 빠르게 단계를 밟아나가며 이직을 하는게 좋을 것 같은데, 기업 입장에서는 너무 잦은 이직을 하는 지원자는 꺼릴 수 있다고도 들었습니다. 정답이 없는 문제인 것 같지만 “적절한 근속년수“는 얼마정도라고 생각하시는지 궁금합니다!

  • 사유가 있는 1년이면 2번정도는 괜찮은것 같다. 하지만 꾸준하게 1년마다 이직한다면 좋지 않아보여.

  • 하지만 이 또한 실력이 있다면, 이직을 많이 해도 어쩔 수 없이 채용하긴해

첫 입사를 node.js 혹은 Nest를 사용하는 기업으로 한 뒤, Spring 프레임워크를 사용하는 기업으로의 이직이.. 쉽지 않을 것 같은데, 첫 입사에서 첫 회사가 사용하는 프레임 워크가 입사한 개발자에게 많은 영향을 끼칠까요?

  • 물론 걱정할 수 있지만, 이게 문제는 아니라고 생각해.

  • 시니어를 뽑는다는거 부터가 비용을 좀 더 쓰고 즉시 투입이 가능한 인재를 뽑는거야.

  • 그렇기에 주니어는 어느 정도의 교육비용, 학습비용을 감안하는 선택을 하는거지.

  • 주니어의 경우는 node,nest 를 엄청 잘해서 이정도 퀄리티 있는 사람이다. 라는건 말하는게 더 중요하다고 생각해.

Q. 혹시 방금 말한 사례가 회사마다 다를까요?

  • 사실 주니어를 뽑는데 진짜 즉시 투입을 원하는 기업은 기대치가 높아.

그렇기에 작은 회사인데 어느정도 주니어의 성장을 기대해주는 회사를 목표로해.

  • 오히려 빅테크 기업의 애매한 부서보다 훨씬 더 성장을 많이 할 수 있어!

Q. 그렇다면 1-3년차 주니어까지는 기존 근무에서 사용한 프레임워크는 중요하지 않고, 근무한 프레임워크에서 작성한 코드의 퀄리티가 더욱 중요하다고 보면 좋을까요? 몇년차까지 주니어라고 볼 수 있을까요?

  • 개인적으로 3년까지는 주니어라고 할 수 있을거같아. 그정도의 경력 이후라면 미드레벨 엔지니어로 가는 과정이라고 생각해.

  • 2년차 넘어가면 주니어가 아니라고 생각하는 회사도 많아.
    3년차까지는 회사에서도 이 사람이 성장하는걸 기다려준다고 생각해.

Q. 기업에서 주니어를 코스트를 써서까지 뽑는 이유가 궁금합니다.

  • 사실 코스트로는 시니어가 훨씬 저렴해. 하지만 시니어로만 10명을 채울 수는 없어. 이들은 고집도 쎄고 주관도 뚜렸하기 때문이야.

  • 그렇기에 이들을 팀장으로 두고, 어느정도 실력이 있으면서 팔로워로 잘따라가는 사람이 더 많이 필요해.

  • 현재 주니어 개발자들은 최소 3개월 정도 회사에서 방향을 잡아주고 키워주는 트렌드야.

  • 이때 많은것을 배우고 1~3년까지는 실수를 해도돼.

profile
강준호
다음 포스트

[TIL] Udemy 2일차 프론트엔드/백엔드 - HTML,CSS

0개의 댓글