블로그 모아보기 - 인프런

채용시장에서 유리한 주니어? [1탄 - 주니어의 기본기 : 프론트엔드 편]

상향 평준화 된 요즘의 채용시장, 주니어 또는 신입 개발자들은 끊임없는 딜레마에 빠집니다.공고에 맞는 스택을 갖췄는데 이직에 실패하거나 취업이 힘든 경험이 있는 주니어 개발자.대체 어느 부분때문에 이직,취업이 어려운 걸까요?더 많은 기술스택이 있는 사람을 채용하는 걸까요? 이에 코드캠프는 채용에 대한 원초적인 질문을 던져 보기로 했습니다.❓ 채용시장에서 조금 더 유리한 주니어 개발자의 역량은 어느 정도일까?❓ 점점 상향 평준화 되어가는 채용 시장, 주니어는 어떤 경쟁력을 갖추고 있어야 할까?주니어 개발자를 양성하는 코드캠프에서 위의 질문은 핫토픽이자, 커리큘럼 개편에 가장 중요하게 반영되는 요소입니다.그만큼 위 질문에서 만큼은 진지하게 고민하고, 다른 기업 CTO분들과 얘기도 많이 나눠보고 여러가지 의견을 반영하는 편입니다.오늘은 위 질문에 대한 코드캠프의 의견을 공유해볼까 합니다!주니어 개발자를 꿈꾸시는 분들께 많은 도움이 되었으면 좋겠습니다. 💡 그래서 뭣이 중헌디[ for. 주니어 ][ ❗️ 아래 내용은 프론트엔드 개발자를 기준으로 한 글 입니다. ] 다수의 기업 CTO분들께서 공통적으로 입을 모아 말씀하셨던 부분은 단연코 ' 주니어의 기본기 ' 였습니다." 부트캠프를 수료하고 만드는 방법을 배워 나오는 주니어는 많은데, 본인 언어나 프레임워크를 깊이 있게 아는 사람이 얼마 없어요.그럼 기업 입장에서는 만드는 방법만 배워 나왔나 싶은거죠. "- 모 기업 CTO분의 말씀 이런 말을 들은 코드캠프는 '주니어의 기본기란 무엇에 대한 그리고 어느 정도 깊이까지를 말하는 걸까?'를 고민해봤고, 그 결과 아래와 같은 답을 도출해보았습니다.웹에대한 이해본인 언어에 대한 이해본인이 사용 중인 프레임워크(혹은 라이브러리)에 대한 이해위의 세가지는 선택이 아니라 '필수'일 정도로 너무 너무 중요한 부분입니다.코드캠프는 저 셋 중에서도 많은 분들이 공부하기 까다롭다, 어렵다 하시는 웹에 대해 간단히 다뤄볼까 합니다.그럼 웹은 어느 정도 깊이로 알고 있어야 할까요? 💡웹, 어느 정도 알아야 해요?프론트엔드 개발자가 웹을 알아야 하는 이유는 굉장히 많습니다.하지만 간단히 요약하자면성능 최적화를 위해디테일한 통신/에러 핸들링을 위해프론트엔드 개발자는 다양한 브라우저를 다루기 때문위와 같이 추려 볼 수 있습니다.그럼 프론트엔드는 웹 중에서도 어떤 부분을 중점으로 먼저 봐야 할까요?물론 다 알면 좋지만, 공부하는데 있어 우선순위는 있습니다!프론트엔드 개발자는 웹의 거시적인 구조와 웹 중에서도 브라우저와 네트워크를 알고 있는게 좋습니다.1️⃣ 웹의 거시적인 구조웹의 거시적인 구조는 우리가 흔히 통신하는 구조를 통틀어 웹 구조라고 합니다.웹 구조에 관련된 그림을 하나 볼까요?거시적인 웹의 구조는 생각보다 별거 없습니다.클라이언트와 서버, 그리고 그 둘을 이어주는 네트워크 이 세 개를 묶어서 거시적인 웹구조로 보시면 됩니다.쉽게 말해 통신 과정이 웹의 구조인 셈이죠.주니어 프론트엔드 개발자는 저 웹 구조 중에서도 브라우저와 네트워크에 관련된 기본기가 상당히 중요합니다. 2️⃣ 브라우저와 네트워크의 이해► 여기서 언급하는 개념은 반드시 따로 블로깅 내용 이외에도 따로 더 깊이 공부해야 하는 개념입니다. ◀︎🔴 브라우저의 기본브라우저를 다루는 프론트엔드 개발자가 브라우저에 대한 이해가 없다면, 프로젝트를 만들 수는 있지만 성능을 고려해 제대로 만들기가 어렵습니다.❓브라우저에서 뭘 공부해야 해요?- 렌더링 과정과 , 성능 최적화에 관련된 공부를 하셔야 합니다.렌더링 과정여러분들은 브라우저가 서버로부터 응답 받은 HTML을 어떤 과정을 거쳐 파싱해주는지 알고 계신가요?위의 과정을 Critical Rendering Path(CRP)라고 합니다.CRP는 여러분들이 작성한 코드를 브라우저에 그려주는 과정을 설명한 개념이기 때문에 반드시 알아야 합니다.그 과정에서 브라우저와 관련된 많은 개념을 배울 수 있습니다.성능 최적화브라우저의 역할이 렌더링이 끝일까요?당연히 그렇지 않습니다.데이터를 요청하는 네트워크(HTTP통신)통신도 하며, 이렇게 받아온 데이터를 캐싱을 도와주는 일도 합니다.받아온 데이터를 캐시에 넣어두면 같은 데이터라면 데이터 요청을 하지 않아도 되기 때문에 화면에 렌더 되는게 빨라집니다.이런 디테일한 부분들이 사용자 경험을 향상 시키고, 사용자 경험은 곧 기업의 매출과도 연결되기 때문에 사소한 부분이라도 최적화는 중요합니다.그럼 어떤 부분의 성능을 최적화해야 하나요?[ HTTP 요청 수 줄이기, 이미지 데이터 최적화, 스크립트 파일 최적화, 캐시 최적화 ]가 최적화의 기본이라고 보시면 됩니다.그럼 여러분들은 해당 부분을 공부하시면 좋겠죠?브라우저에서는 이정도를 기본으로 알고 있는 것이 좋습니다.🔴 네트워크의 기본적인 이해우리가 하고 있는 데이터 통신이 바로 네트워크 통신인 건 모두가 알고 있을 것 입니다.그럼 네트워크에 대한 이해는 너무나도 당연하겠죠?네트워크 부분은 상당한 CS적 지식을 요구하고 양도 굉장히 많은 파트 입니다.따라서 네트워크를 정말 깊게 알게 된다면 정교한 데이터 통신 핸들링도 가능한 시니어 정도의 수준을 갖추게 됩니다.하지만 우리는 주니어에게 필요한 수준이 궁금하니까 주니어 수준에 맞춰 공부해야 할 것들을 알려드리도록 하겠습니다.❓네트워크에서는 뭘 공부해야 하나요?- 네트워크 패킷, HTTP/HTTPS 통신 , HTTP 버전에 따른 지원기능, 네트워크 계층 모델네트워크 패킷브라우저의 주소창에 https://codebootcamp.co.kr/ 을 입력하고 엔터를 누르게 되면 어떤 일이 일어나는지 알고 계신가요?주소창에 위의 주소를 입력하고 엔터를 치게 되면 네트워크 통신이 일어나는데요, 네트워크 통신 과정에서 정보를 담아 왔다갔다 하는 친구가 바로 패킷 입니다.즉, 네트워크 통신의 가장 기초가 네트워크 패킷이 되는 것이죠.따라서 네트워크를 공부한다면 가장 먼저 공부해야 하는 개념입니다.네트워크 계층 모델네트워크 통신이 일어나면 패킷이 왔다갔다 한다고 위에서 말씀을 드렸는데요, 이 패킷이 왔다갔다하는 곳이 바로 계층 모델 입니다.옛날에는 OSI라고 해서 7계층이었지만, 현재는 TCP/IP모델이라고 해서 4계층 모델을 사용하고 있습니다.가장 기초인 패킷이 왔다갔다하는 곳이 바로 이 계층 모델이니 이 또한 반드시 공부해야겠죠?HTTP/HTTPS 통신데이터를 주고받는 과정은 HTTP 통신을 통해 이루어 지는데, HTTP 통신의 결과로 어떤 유형의 데이터를 받을 수 있는지 모두 알고 계신가요?우리가 흔히 봐온 JSON데이터 이외에도 받아올 수 있는 데이터가 있습니다.또한 HTTP header에 넣을 수 있는 데이터 종류는 뭐가 있을까요?위의 질문들은 통신에서 가장 중요한 요청과 응답 관련 개념이기 때문에 반드시 알고 있어야 합니다.요청과 응답 관련 내용을 이해한 상태에서 통신 과정을 공부하시면 가장 좋습니다.HTTP 버전에 따른 지원기능여러분들은 HTTP에도 버전이 있다는 점, 알고 계신가요?현재 지원하는 버전은 1.1, 2, 3 버전이 있는데요, 버전에 따라 지원기능이 다른걸 왜 알아야 하냐!2014년도의 HTTP 버전에서의 GET메소드는 바디가 들어갈 수 없었지만, 1.1 버전 부터는 GET메소드에서도 바디를 지원합니다.이 말은 지원하는 기능에 따라 보내줄 수 있는 데이터의 양과,방법이 달라진다는 것 입니다. 오늘은 주니어라면 이정도는 기본기로 알고 있는 것이 좋다! 하는 개념에 관련해서 블로깅을 해보았는데요.어떠셨나요?어떤 분은 너무 쉬운데? 라고 생각하실 수 있지만, 여기에 적힌 개념은 정말 몰라서는 안된다 하는 내용입니다.따라서 더 많이 공부를 해주셔야 합니다.다음 블로깅에서는 주니어의 기본기에 대해 조금 더 자세히, 개념에 대해 다뤄볼 예정입니다.코캠과 함께 공부 할 싸람~!(없으면 저 혼자 앞질러 갑니다. 오히려 좋아)그럼 우리는 다음 글에서 브라우저에 관한 내용으로 만나요!

알아두면 좋은 웹 용어! GNB, LNB, SNB, FNB (feat. 인프런)

웹사이트에서 유저의 서비스 탐색을 도와주는 카테고리. 서비스를 찾은 유저가 원하는 것을 쉽게 찾아낼 수 있게 직관적인 UI 구성이 필요한데요. 내비게이션 바라고 불리는 이 카테고리 영역은 위치와 역할에 따라 GNB, LNB, SNB, FNB 등으로 나눌 수 있어요. 인프런 사이트에서 GNB, LNB, SNB, FNB를 찾아볼까요?1. GNB (Global Navigation Bar)웹사이트 전체에 똑같이 적용되는 내비게이션 바이며, 어떤 페이지를 클릭해도 공통으로 쓸 수 있는 메뉴입니다. 보통 웹사이트 최상단에 위치하고 있어 메인 메뉴라고도 불러요. GNB의 Global 역시 웹사이트 모든 영역에 해당된다는 의미를 내포하고 있어요. 인프런 사이트에선 상단의 '강의', '로드맵', '멘토링' 등의 메뉴가 GNB 영역입니다. 2. LNB (Local Navigation Bar)GNB를 클릭하거나 마우스를 호버했을 때 노출되는 하위 메뉴입니다. LNB의 Local은 웹사이트 중 특정 영역으로 한정한다는 의미가 있어, LNB 영역을 서브 메뉴라고도 해요. 인프런 사이트에선 GNB 영역에 마우스를 호버했을 때 LNB가 노출돼요. 3. SNB (Side Navigation Bar)보통 메인 메뉴와 서브 메뉴를 제외한 나머지 메뉴를 SNB라고 해요. 보통 왼쪽이나 오른쪽에 위치하고 있어 Side라고 표현합니다. 인프런에서 GNB 영역의 '강의'나 '로드맵'을 클릭해서 이동했을 때 왼쪽에 SNB가 노출됩니다. 4. FNB (Foot Navigator Bar)웹사이트 가장 하단에 위치하는 메뉴입니다. GNB처럼 사이트 내 모든 페이지에 공통으로 노출되는 메뉴입니다. 가장 하단에 위치하고 있어 Foot이라고 표현하며, 해당 영역을 푸터(Footer)라고도 해요. 보통 기업 정보 등 사이트의 정보가 위치하는 영역이에요. 인프런의 FNB에는 기업 정보, 코드 등록, 고객센터 등이 있어요.

(구체적으로) 웹 사이트에 접속하기까지 무슨일이 일어날까?

안내:단순하게 dns에서 도메인을 ip로 변환하여 그 ip를 이용해 웹 사이트에 접속한다 식의 간단한 설명이 아닙니다.이해를 돕기 위해 실제 상황과는 다른 요소가 있을 수 있습니다.(데이터 처리 위치 등) 들어가기 전에 아래 내용을 눈으로 잘 익혀주시면 글을 이해하는 데 큰 도움이 될 수 있습니다.인터넷 네트워크 세상에서는 상대와 1대1로 통신하기 위해서는 2가지 주소(IP & MAC)를 알아야 합니다.IP 주소를 이용해 기기를 찾고자 한다. -> 라우터라는 기기는 해당 IP를 가진 컴퓨터를 찾기 위해 어느 라우터를 향해 가야 하는 지(또는 통해 가야 하는 지) 알고 있다.MAC 주소를 이용해 기기를 찾고자 한다. -> 스위치라는 기기는 자신이 담당하는 해당 MAC을 가진 컴퓨터가 정확히 어디 연결되어 있는 지 알고 있다.1대1로 정확히 통신하기 위해서는 두 컴퓨터가 모두 유효한 두 주소를 가지고 있어야 합니다. 여러분은 inflearn.com에 접속하려 합니다. 먼저 컴퓨터를 켜야겠죠?여러분은 컴퓨터의 전원을 올렸습니다. 저런, 여러분의 컴퓨터는 고정 ip를 가지고 있지 않습니다.~ 통신사가 여러분의 컴퓨터가 필요할 때마다 동적으로 ip 주소를 빌려주는 사설 ip를 사용해야 하는군요.그나마 다행히 mac 주소는 여러분의 컴퓨터를 출고할 때부터 메인보드의 네트워크 카드에 각인되어 있어서 따로 건드릴 것은 없네요. 사설 ip를 사용하기 때문에 방금 막 켜진 컴퓨터는 DHCP.exe를 실행시킵니다.(물론 고정ip를 가지고 있어도, 컴퓨터가 자신과 가장 가까이 있는 라우터 장비를 찾기 위해 실행될 수 있습니다.) DHCP.exe의 목적은 자신과 연결되어 있는 라우터라는 장비의 정보와, 도메인을 ip 주소로 변환해주는 dns 서버의 정보를 보내주며, 유동ip를 사용해야 하는 컴퓨터에게 ip를 할당해주는 서버와 통신하고 그 정보를 컴퓨터에 저장하는 역할입니다.그래서 DHCP.exe는 DHCP 서버를 찾아야 합니다.근데 우리의 컴퓨터는 현재 ip 및 DHCP, 라우터 정보가 아무것도 없습니다. 이럴 때에는 무식한 방법만이 해결책이 될 수 있습니다. 아무 기기에게나 '당신이 DHCP 서버입니까?'라고 물어봅니다. 진짜로 이렇게 물어봅니다. 상황별, 네트워크 기기별로 약간씩 다르지만 DHCP 과정이 일어날 때는 여러분의 컴퓨터가 인터넷을 이용하기에는 아직 미성숙(?)한 상태이기 때문에 해당 과정과 관련된 모든 요청과 응답은 LAN 전체에 전파되도록 되어있습니다.물론 LAN 영역 전체에 요청과 응답을 할 때는 다음 제약 사항이 있긴 합니다.같은 Lan 영역 안에서만 물어봅니다. 다른 LAN 영역 친구들은 무슨 일이 일어나는 지 모릅니다. 보통의 경우 dhcp 서버는 같은 lan 영역 안에서 무조건 찾을 수 있습니다.물어볼 때 형식을 지켜 물어봅니다. 아래 가로 줄은 그 형식의 구체적인 부분을 이야기하고 있기 때문에 건너뛰어도 좋습니다.요청을 보내기 위해 작성하는 형식은 일종의 택배 상자와 같습니다. 보내는 사람, 받는 사람, 택배 무게 등이 택배 상자에 적혀있죠. DHCP 서버를 찾는 상황에서는 3번의 포장 과정을 거치게 됩니다. 이 포장 과정을 마쳐야 전송할 수 있게 됩니다.가장 먼저 실행되는 UDP.exe는 DHCP 요청이라는 문서를 포장합니다.초록색은 택배 내용물, 나머지는 택배 송장이라고 생각하시면 됩니다.여기에서 포트라는 생소한 개념이 등장합니다.포트는 UDP.exe 파일이 구체적으로 무얼 해야 하는 지 알려주는 역할입니다.DHCP 서버는 67번(이 상황에서는 받는 컴퓨터의 포트에 들어가겠지요),여러분의 컴퓨터는 68번(이 상황에서는 보내는 컴퓨터의 포트에 들어가겠지요)을 적어넣어주시면 됩니다.67, 68번 포트처럼 미리 지정되어 있는 경우도 있고, 간혹 비어 있는 포트는 사용자 지정 작업을 수행하게 구성할 수 있습니다. 그다음 IP.exe가 실행됩니다.ip 주소를 이용해 앞에서 포장한 udp 택배를 포장합니다.앞서 포장한 택배를 물류 센터에서 처리할 수 있게끔 다시 포장합니다.여기서 앞서 나온 UDP 택배와 크게 다른 점은, 택배가 분리될 수 있다는 겁니다.인터넷 세계에서는 택배가 너무 커서 다른 택배들이 처리되는 것을 방해하는 것을 경계합니다.네트워크마다 받아들일 수 있는 택배 크기가 다르다면, 택배가 분리됩니다.그리고 ip 택배는 송장에 내용물을 처리하기 위해 어떤 exe를 실행시켜야 되는가도 적습니다. 우리의 UDP를 처리하기 위해서는 17을 적어주면 됩니다. 17이 적힌 택배가 오면 UDP.exe를 실행시키라는 뜻입니다.마지막으로 보내는 쪽 ip와 받는 쪽 ip를 적습니다. 현재 여러분의 컴퓨터는 ip 주소가 없는 상태이기 때문에 0.0.0.0을 적고, DHCP의 ip 주소를 모르기 때문에 lan 영역 전체로 택배를 보내는 255.255.255.255를 받는 컴퓨터의 ip 주소로 적습니다.마지막에는 아까 포장해둔 UDP 택배를 잘 넣어둡니다. 그다음 이더넷.exe가 실행됩니다.이더넷 택배로 ip 택배를 포장합니다. 이더넷 택배는 구체적으로(몇 동 몇 호) 어디로 가야하는 지 알려줍니다.택배 송장에 제일 먼저 이것은 이더넷 택배이므로 이더넷.exe가 처리해야 한다는 것을 알려줍니다.그다음에는 받는 컴퓨터와 보내는 컴퓨터의 MAC 주소를 적어줍니다. 스위치라는, 여러분 집 어딘가 거실 또는 지하에 묻혀있을 수 있는 네트워크 장비는, MAC 주소를 통해 정확하게 지정된 컴퓨터로 택배를 보내줍니다.보내는 컴퓨터의 MAC 주소에는 여러분 컴퓨터 MAC 주소를 넣어줍니다.받는 컴퓨터의 MAC 주소에는 LAN 전체에 보내라는 FF:FF:FF:FF:FF:FF를 넣어줍니다.그다음 송장에 적힌 내용은 이더넷 택배를 열고 어떤 exe를 실행시켜야 되는가 입니다. ip.exe를 실행시키기 위해서는 0x0800을 적어두면 됩니다.마찬가지로 마지막에는 아까 포장해둔 UDP를 포장해둔 IP를 잘 넣어줍니다. 아무에게나 막 요청을 뿌리고 다닌 끝에 응답이 돌아왔습니다.DHCP 서버는 응답으로 여러분의 컴퓨터가 사용할 수 있는 IP 주소를 제시해줍니다.(물론 이 과정에서도 응답을 보내는 DHCP 서버는 열심히 택배 포장을 합니다) 여러분의 컴퓨터는 이 DHCP 서버에게 '당신이 보내준 제안을 받아들이겠다'라는 택배를 보냅니다.그리고 DHCP 서버는 마지막으로 정보를 업데이트(컴퓨터에게 제시한 IP를 컴퓨터가 승인하여 사용 중)하고 처리를 끝내게 됩니다. 마지막 요청에서 기본 게이트웨이(라우터)의 IP 주소와 DNS 서버의 IP 주소 등 네트워크를 본격적으로 이용하기 위해 필요한 정보를 보내주게 됩니다.바로 DHCP 서버가 해당 IP 주소를 사용하라고 통보하는 방식을 사용할 수 있겠지만, 굳이 두 컴퓨터가 합의의 과정을 거치는 이유는 한 Lan 영역 안에 반드시 하나의 DHCP 서버가 존재한다는 보장이 없기 때문입니다. 물론 우리는 이상적인 상황을 가정하므로 그냥 넘어가겠습니다.이 과정에서 많은 시스템-dhcp서버가 아닌 근처, 즉lan에 있는 다른 컴퓨터-에 필요 없는 요청이 가게 됩니다. 그런데 말입니다.DHCP로부터 할당받은 IP 주소가 10.x.x.x 로 되어 있네요~?해당 주소는 사설IP에 사용되는 주소로, 외부(LAN 밖)와 소통하기 위해서 반드시 거치는 기본 게이트웨이(라우터)가 약간 지능적으로 나와줘야 합니다.한 LAN 영역 안에 있는 기기들은 다른 LAN 영역으로 택배를 보낼 때 라우터의 ip 주소로 대신하여 보내게 됩니다. 물론 lan 안에서 서로 다른 기기들의 요청을 구분하기 위해 라우터가 포트 번호로 구분하여 요청을 보내고, 응답을 나누어 줍니다.복잡하지만, 인류가 사용하기에는 숫자가 너무 적은 ipv4 주소를 아낄 수 있는 좋은 방법이기 때문에 많이 사용됩니다. DHCP.exe는 최종적으로 종료되었으며, 여러분은 이제 브라우저를 켜게 됩니다.브라우저에 http://inflearn.com을 입력하셨군요.좋아요. 이제 여러분의 화면에 inflearn을 띄우기 위한 여정을 시작해 봅시다. 아마 위에서 보았겠지만, 외부와 통신하기 위해서는 기본 게이트웨이를 거치게 됩니다. 그리고 DNS 서버에게 요청을 보내 inflearn의 ip 주소를 알아올 수 있지요. DHCP 서버는 우리에게 기본 게이트웨이와 dns의 IP 주소를 알려주었고요. 그러나 완전한 통신을 하기 위해서는 ip주소와 mac 주소가 필요합니다.즉, dns와 기본 게이트웨이의 mac 주소를 찾아야 합니다! 이때 사용하는 프로그램은 ARP.exe입니다. 여담 exe들은 각각 자신과 동급인 것들로 나눌 수 있습니다.이렇게 동급인 것들로 나누면 총 7개의 분류가 완성되며, 고급지게 표현하면 이것이 OSI 7계층 모형입니다.7층에서 만들어진 택배를 외부로 보낼려고 하면 6층, 5층, 4층, 3층, 2층, 1층에서 순서대로 포장을 하게 됩니다.7층 exe로 유명한 것이 HTTP입니다.아까 보았던 UDP.exe는 4층입니다. 다른 4층으로는 TCP.exe가 있습니다.IP.exe는 3층이고, 이더넷.exe는 2층입니다.IP 주소는 3층 송장에 적고, MAC 주소는 2층 송장에 적는다는 것을 알 수 있죠.1층은 실제 전선을 따라 이동하는 비트들에 대해 다루므로 여기에서는 다루지 않겠습니다.또한 반이중, 전이중 통신을 담당하는 5층과 인코딩과 디코딩을 다루는 6층 또한 생략하도록 하겠습니다.한편 지금 알아볼 ARP.exe는 2층이냐 3층이냐 논쟁이 있습니다. 서적과 인터넷 문서에서는 작성자의 취향(?)에 따라 2층, 3층 중 하나로 표기하고 있습니다.여기에서는 이 논쟁은 다루지 않도록 하겠습니다.ARP.exe는 택배 포장을 합니다.택배 내용은, 해당 ip 주소를 가지고 있는 컴퓨터는 컴퓨터의 MAC 주소를 나에게(내 컴 MAC 주소로) 보내달라는 의미를 담고 있습니다.당연히 LAN 영역 전체에 보내도록 되어 있습니다.... 열심히 택배를 보낸 끝에 기본 게이트웨이(라우터)가 우리의 요청에 응답하였군요. 이 응답을 통해 우리는 기본 게이트웨이로 완전한 1대 1 통신을 할 수 있게 되었습니다. 이제 DNS 서버와 통신을 하여서, inflearn.com의 IP 주소를 알아와야 합니다.마찬가지로 DNS 서버의 MAC 주소를 알아올려고 합니다.그러나 일반적으로 DNS 서버는 LAN 영역 밖에 있습니다. arp 택배가 유효하게 전송될 수 있는 곳은 여러분의 컴퓨터가 속해 있는 LAN 영역 안인데 어떡해야 할까요? 여러분의 컴퓨터는 이 상황을 신경쓰지 않아도 됩니다.왜냐고요? LAN 외부 영역과의 통신은(택배 주고받기는) 기본 게이트웨이가 해주기 때문입니다.같은 LAN 영역이 아닐 때에는 IP 주소만 제대로 적고, MAC 주소에는 아까 ARP.exe 프로그램을 실행시켜서 알아온 기본 게이트웨이의 mac 주소를 적어주면 됩니다. 기본 게이트웨이가 목적지 MAC 주소로 적혀 있으면 스위치는 택배를 기본 게이트웨이로 전달합니다. 기본 게이트웨이(라우터)는 다음 라우터에게 이 택배를 보낼 때, 마찬가지로 목적지 MAC 주소에는 다음 라우터의 MAC 주소를 적어줍니다. 이러한 과정이 통신하고자 하는 대상이 있는 LAN 영역의 기본 게이트웨이에 도착할 때까지 지속됩니다. 마지막으로 이제 목적지 MAC 주소에 그 대상의 MAC 주소가 들어가게 되고(그쪽 컴퓨터 또는 라우터에서도 ARP.exe가 잘 작동한다면요), 그쪽 영역의 스위치가 최종적으로 택배를 전달해주게 됩니다. 우선 우리의 컴퓨터는 스터브리졸버.exe를 실행시킵니다..스터브리졸버.exe는 UDP.exe를 실행시켜 53번 포트로 설정하고 질의문을 작성합니다.inflearn.com의 주소를 알려주십시오.마찬가지로 UDP 택배는 IP.exe, 이더넷.exe를 실행시켜 순차적으로 포장되고, DHCP 서버가 알려준 DNS 서버의 IP주소를 향해 택배를 보내게 됩니다. DNS 서버에 택배가 잘 도착하였군요.놀랍게도 이 DNS 서버는 inflearn.com의 IP 주소를 모릅니다.단지 inflearn.com의 IP 주소를 찾는 일을 대행해주는 일을 하는 것뿐입니다. DNS 서버가 이 일을 할 때 사용하는 프로그램을 폴리졸버.exe라고 하겠습니다. 폴리졸버.exe는 ICANN의 루트 서버에게 먼저 질의 요청을 보냅니다. 내용은 스터브리졸버.exe가 DNS 서버에 보낸 것과 동일합니다. ICANN은 국제인터넷주소관리기구로 여러분이 인터넷 세상에서 도메인을 사용하고 싶다면 복종해야 되는 비영리 기관입니다. 다양한 도메인 등록 대행사들은 ICANN의 승인과 검증을 거치게 됩니다. 전세계 각지에 배치되어 있는 ICANN 루트 서버는 폴리졸버.exe가 보낸 요청에 대해 com 도메인을 관리하는 서버의 IP 주소를 알려주고 여기에다가 물어보라고 응답해줍니다. 폴리졸버.exe는 다시 com 도메인 관리 서버에 질의 요청을 보냅니다.com 도메인 관리 서버는 응답으로 inflearn.com을 관리하는 DNS 서버의 IP 주소를 알려줍니다. 마지막으로 폴리졸버.exe는 com 도메인 관리 서버가 알려준 서버에 질의를 하고, 그 결과를 스터브리졸버.exe로 전달을 해줍니다. 이제 우리는 inflearn.com의 IP 주소를 얻어오게 되었습니다! 참고로 폴리졸버.exe는 이제 inflearn.com의 IP 주소를 일정 시간 동안 저장해두면서 다른 곳에서 요청이 왔을 때 바로 응답해주게 됩니다. 이제 외부와의 통신과 관련된 부분은 끝났으니, 이 글의 하이라이트인 http 관련 내용이 시작되겠습니다.👏먼저 TCP.exe가 실행이 됩니다. 앞서 말한 듯이 UDP와 같은 층인 4층 프로그램입니다. TCP 택배는 항상 외부로 나가기 전에 IP와 이더넷으로 포장된다는 것을 잊지 마세요!TCP는 UDP와 달리 안정적인 통신을 우선합니다. 통신을 하는 양쪽이 통신을 완전히 준비하는 것을 확인한 상태에서 통신을 진행하는 것이죠.tcp 택배에서 udp에서 보이지 않았던 부분들이 있습니다.시퀀스 번호는 택배 내용물이 많아 택배가 분리될 때, 분리된 것에 몇 번째인가를 나타내주는 부분입니다. tcp의 경우 tcp 포장 단계에서 미리 택배를 분리하게 됩니다. 택배가 분리될 때에는 분리된 각 택배에 송장이 각각 생기죠. 이때 각 송장에 시퀀스 번호가 순서대로 들어가게 됩니다. 이는 UDP보다 훨씬 더 큰 안정성을 가질 수 있게 해줍니다. 택배의 목적을 통해 tcp.exe가 구체적으로 무엇을 해야 하는 가를 알 수 있습니다. 택배의 목적에는 SYN, ACK, FIN 등이 들어갑니다. 여러분의 컴퓨터의 TCP.exe는 서버와의 통신에서 안정성을 확보하기 위해 다음 과정을 거칩니다.여러분의 컴퓨터에서 택배의 목적에 SYN이 적힌 TCP 택배를 보냅니다. SYN은 연결을 허용해도 되는 가를 물어보는 역할을 합니다. HTTP 연결을 하려면 받는 컴퓨터의 포트는 80으로 넣으면 됩니다.서버는 SYN 요청에 응답하기 위해 택배의 목적에 ACK를 넣어서 보냅니다. 또한 서버는 여러분의 컴퓨터를 향해 SYN 패킷을 보냅니다.여러분의 컴퓨터는 서버가 보낸 SYN에 대한 응답으로 ACK를 보내고, 연결 시작을 완료합니다.이제 처리해야 되는 데이터를 가진 TCP 택배를 자유롭게 보내면 됩니다. 큰 데이터가 분리되어도 다시 합칠 수 있고, 중간에 택배가 손상되어도 택배를 다시 달라고 해서 안정성을 가질 수 있게 됩니다. 이제 여러분은 http 연결을 완료한 겁니다.(정확히는 http 메시지를 주고받을 수 있는 준비가 완료된 것이죠)보안 향상을 위해 사용하는 https의 경우, tcp를 통해 통신 준비를 한 뒤, tls라는 것을 이용해 암호화 준비 과정을 거치게 됩니다. 이 과정은 생략하도록 하겠습니다.이제 여러분의 컴퓨터의 브라우저는 inflearn 서버를 향해 GET 요청을 보내게 됩니다.(택배 포장을 하게 됩니다. http 요청을 tcp 택배 안에 넣고, ip 택배 안에 이 tcp 택배를 넣고, 이더넷 택배에 ip 택배를 넣고,,,,) http에서 요청 명령을 분리하는 방법은 줄 바꿈 문자를 사용하는 것입니다.GET 요청은 다음과 같은 문자열들을 넣어서 보냅니다. 줄 바꿈 문자를 사용해 각 명령을 구분하지요.GET / HTTP/1.1HOST: inflearn.com 인프런 서버의 응답은 다음과 같을 겁니다.HTTP/1.1 200 OKDATE: 지금 날짜와 시각Server: node.js(Express) 어쩌고Content-Length: 응답 크기(용량)Content-type: text/html<HTML>어쩌고 저쩌고................</HTML> 이 응답을 받은 웹 브라우저는 여러분에 인프런 메인 페이지를 보여 줄 겁니다. 아직 안 끝났습니다. 여러분은 인프런 메인 페이지에서 오랜 시간 아무것도 안하고 그냥 보고 계시는군요. 컴퓨터는 불필요한 TCP 연결 통로를 해지할 겁니다.여러분의 컴퓨터는 택배의 목적에 FIN을 넣어서 보내줍니다. TCP 연결을 종료하겠다는 의미입니다.서버는 종료에 대한 확인의 ACK 택배를 보냅니다. 그리고 서버도 FIN 택배를 보냅니다.마지막으로 여러분의 컴퓨터가 서버의 FIN에 대한 응답으로 ACK를 보내고, 연결을 종료하게 됩니다. 3줄 요약컴터를 키면 LAN 안에 있는 DHCP 서버를 찾아서 네트워크 기본 정보를 받아온다.기본 게이트웨이 라우터의 도움을 받아 DHCP 서버가 알려준 DNS 서버에 도메인의 ip 주소를 물어본다.기본 게이트웨이 라우터의 도움을 받아 DNS 서버가 알려준 ip주소로 tcp 연결을 하여 안정성을 확보하고 http 데이터를 교환한다. 다루고 싶었지만 분량 상의 문제, 전문 지식 부족의 문제로 다루지 못한 것들이 많았습니다. HOP, 서브넷마스크, Time To Live, Tls, BGP, IPv6 등등...또한 실제 운용 환경에서는 생각 이상으로 많은 경우들을 만나야 하기 때문에 단순히 서적을 참고하는 것만으로는 작성하는 데 어려움이 있었던 것 같습니다. 와이어샤크로 시작하는 데이터분석! 이쪽분야 고인물들 보면 참 부럽습니다......실제와 미묘하게 다른 부분이 있음에도 맥락적 이해를 돕고자 실제와 살짝 다르게 작성해놓은 것도 있으니 양해를 구하며, 네트워크 관련 전문 지식을 습득하고자 하시는 분들은 꼭 RFC 문서를 참고하시길 권장드립니다.이 글을 보시는 분들께 조금이라도 도움이 되었다면 감사하겠습니다.어려운 용어들의 최대한 사용을 자제하였지만, 글에서 다룬 내용 중 추가적으로 더 알아보실 분들은 다음 키워드로 찾아보시면 되겠습니다.프로토콜RFC 문서패킷 포맷브로드캐스트, 유니캐스트NAT패킷패킷 헤더권한이 있는 DNS 서버, 권한이 없는 DNS 서버DNS 재귀적 질의, 비재귀적 질의

네트워크･네트워크･tcp･udp･ip･dns･웹･web･웹서버･브라우저･arp

[IT 창업 부트캠프]{창} 6기 모집

직장인 창업 부트캠프 {창}은 언젠가 ‘내 일’을 꿈꾸고 있으나 어디서부터 시작해야 할지 막막한 직장인 분들을 위해 고안된 3개월 과정의 창업 부트캠프입니다. '팀 빌딩부터 투자 유치' 까지 실전 창업 전과정을 제공하는 커리큘럼으로 예비 창업가분들이 시행착오를 최소화 하실 수 있도록 돕고 있습니다.- 👫검증된 예비 창업가 100명과 팀빌딩- 📖창업가를 위한 사업성 검증/개발/마케팅 교육- 📢현직 VC참가 데모데이- 💰부트캠프 내 팀별 최대3,000만원 시드 투자 유치기회 제공🔎모집 링크https://chang.spartacodingclub.kr

[인프런 워밍업 클럽 스터디 2기] : 웹 개발의 첫 발자국

안녕하세요!제 첫 블로그에서는 자바 스프링(Spring Framework)을 처음 배우면서 느꼈던 점과1주차에 배운 주요 개념들을 간단하게 정리해보려고 합니다.새로운 것을 배운다는 생각에 약간 신나기도 합니다 ㅎ이번 스프링 스터디를 통해 스프링을 배우며 얻은 지식을 꾸준히 정리해 블로그에 올리는 습관을 만들어보겠습니다. 간단한 웹 이론웹 서비스는 크게 세 가지 요소로 구성됩니다: 클라이언트, 서버, 데이터베이스.- 클라이언트: 요청을 보내는 주체로, 컴퓨터나 스마트폰의 브라우저 등 사용자가 접근하는 환경입니다.- 서버: 클라이언트의 요청을 받아 작업을 수행하는 주체입니다.- 데이터베이스(DB): 데이터의 집합으로, DBMS를 통해 데이터를 관리합니다. 웹 프레임워크와 라이브러리의 차이웹 프레임워크: 웹 개발을 편리하게 도와주는 도구로, 이미 정해진 틀이 있습니다.예를 들어 이케아의 가구처럼 정해진 틀과 구성이 있다고 생각할 수 있습니다.라이브러리: 정해진 틀이 없는 도구로, 필요에 따라 사용할 수 있는 철물점의 도구와 비슷합니다. 스프링 프레임워크스프링은 자바로 만들어진 웹 프레임워크로, 다양한 주요 개념이 있습니다.MVC 패턴MVC 패턴은 모델(Model), 뷰(View), 컨트롤러(Controller)로 이루어진 소프트웨어 아키텍처 디자인 패턴입니다.- 모델: 데이터를 담는 역할을 합니다.- 컨트롤러: 클라이언트의 요청을 받아 작업을 수행하고, 결과 데이터를 모델에 담습니다.- 뷰: 사용자에게 보여지는 화면으로, 모델에서 데이터를 가져와 표시합니다. 레이어드 아키텍처- 컨트롤러: 클라이언트의 요청을 받는 인터페이스로, 데이터를 검증하고 서비스의 메소드를 호출합니다.- 서비스: 데이터 처리 로직을 수행하고, 저장소(DB)에 대한 작업을 요청합니다.- 저장소: DB에 접근하여 데이터를 처리하며, 여러 서비스에서 공통적으로 사용할 수 있는 처리 방법을 제공합니다. 스프링 빈(Spring Bean)스프링에서 관리하는 자바 객체를 빈(Bean)이라고 합니다. 스프링 빈은 스프링 컨테이너에서 생성되고 관리되며, 다음과 같은 특징이 있습니다.- 관리되는 객체: 스프링 컨테이너에서 생성되고 관리됩니다.- 재사용 가능: 애플리케이션 전체에서 재사용이 가능합니다.- 의존성 주입: 스프링이 빈들 간의 관계를 자동으로 설정해줍니다. 스프링 부트에서의 의존성 주입- 생성자 주입: 클래스 생성자를 사용하는 방식으로 가장 안전합니다.- 수정자 주입: @Autowired 같은 어노테이션을 사용하여 필드를 주입하는 방식입니다.- 필드 주입: 수정자 주입과 비슷하게 동작하지만, 의존성을 바꿀 때 문제가 생길 수 있어 신중히 사용해야 합니다. HTTP와 REST APIHTTP 메소드- GET: 리소스를 가져오는 요청- POST: 리소스를 생성하는 요청- PUT/PATCH: 리소스를 업데이트하는 요청- DELETE: 리소스를 삭제하는 요청- 오류 코드: 400번대는 클라이언트의 문제, 500번대는 서버의 문제를 나타냅니다.REST API: HTTP 통신을 통해 애플리케이션 기능을 정의하는 규칙입니다.URL을 자원으로 활용하고, HTTP 메소드를 이용해 행위를 표현합니다. JPA (Java Persistence API)JPA는 자바 객체를 DB의 테이블로 매핑해주는 기술입니다. 이를 통해 개발자는 직접 쿼리를 작성하지 않고도 객체지향적인 접근이 가능합니다.- 장점: 생산성 증가, 객체지향적 접근, DBMS 의존성 감소- 단점: 충분한 학습이 필요하고, 복잡한 쿼리를 처리하는 데 한계가 있을 수 있습니다. 느낀 점과 회고스프링을 처음 배우며 새로운 개념들을 많이 접했습니다.특히 빈과 의존성 주입 개념이 이해되면서도 어려우면서도 아리까리?합니다.직접 프로젝트에 적용해보면서 개념을 익히는 것이 가장 좋겠다고 생각했습니다.기본적인 웹 이론에 대해 잘 모르고 있던 부분이 많아 부끄럽기도 했지만, 이번 기회를 통해 기초부터 다시 다질 수 있어서 좋았습니다.앞으로도 더 많은 기능을 학습하고 블로그에 정리하며 성장해 나가고자 합니다.오늘 남은 시간을 활용해서 섹션 3의 진도를 나가고 최종장에는 개인프로젝트를 실제로 동작하게끔 만들고 싶습니다!!