Web
-
웹 브라우저에 URL을 입력하면? (What happens when you enter a URL in a web browser?)Web 2023. 2. 11. 18:21
면접을 위한 많은 문제 은행 중 항상 빠지지 않고 나오는 질문이 있다. 바로 "주소창에 네이버(혹은 구글)를 검색하면 무슨 일이 일어나는지 아는대로 말씀해주세요" 이다. . . . 과연 무슨 일이 일어날까? 주니어 개발자의 얕은 지식을 공유한다. 1. 주소창에 입력하기 우선 브라우저를 켜고 URL 혹은 Domain name을 검색하게 될 것이다. URL은 "https://www.naver.com"을 말하고, Domain name은 "naver"를 말한다. 이를 통해, naver.com 도메인에 속해있는 www 컴퓨터의 인터넷망에서 통신을 하려면 당연히 기본적으로는 목적지(네이버 or 구글 등)의 IP주소를 알아야 한다. 그런데 이는 숫자로 이루어져 있어서 수 많은 주소들을 다 외울 수 가 없을 것이고, ..
-
TCP & UDP 통신 프로토콜Web 2021. 10. 18. 15:49
TCP / UDP에 관해서는 사실 그 전부터 들어왔지만, 그 당시에는 보기가 힘들고 무슨 말인지 못 알아들어서 넘어가곤 했었다. 하지만 최근 다시 읽어보니 이해가 가는 부분이 있어 정리를 하고자 한다. 더불어 좋은 블로그 글과 영상 등을 참고했다. Transport Layer ( 전송계층 ) TCP와 UDP는 OSI 표준 모델과 TCP/IP 모델의 전송계층에서 사용 되는 프로토콜이다. 이러한 TCP와 UDP에 관하여 알아보기 전에 간단하게 Transport Layer에 대해서 알아보자! Transport Layer는 End Point 간의 신뢰성 있는 데이터 전송을 담당하는 계층을 말한다. 여기서 신뢰성이란, 데이터를 순차적이고 안정적이게 전달하는 것을 말하고, 전송은 포트번호에 해당하는 프로세스에 데이..
-
간단하게 알아보자! Cookie, Session, Token, JWT, Cache 👍Web 2021. 10. 7. 13:23
... 언젠간 내가 아는 것들을 쉽게 설명 할 수 있는 날이 오길 바라며...! 은근히 헷갈려하는 것들 중에 포함 되는 것이 바로 이 쿠키(Cookie), 세션(Session), 토큰(Token), JWT(조트 or 제이더블유티)이다. 처음 코딩을 시작하는 분들이라면 아직까지는 알 필요 없을 수도 있지만, 이제 1년차가 되어가는 분들, 그리고 취준생분들이라면 그 개념을 확실히 해놔야 지금 당장 사용하지 않더라도 대화를 알아들을 수 있고 이해할 수 있을 것이라고 생각한다. ... ... ... 1. 쿠키 (Cookie) 우선 쿠키(Cookie)에 대해서 알아보자. 쿠키라는 것을 이용해서 서버는 내가 찾은 정보 등의 데이터를 나의 브라우저에 넣을 수 있다. 우리는 흔히 어떠한 사이트에 방문하고, 검색하는 식..
-
FE가 알아야 할 브라우저 렌더링 과정 (왜 transform 속성이 유리할까?)Web 2021. 7. 16. 13:40
브라우저 렌더링 과정-1 의외로 신입이 모르는 것! - 브라우저 렌더링 과정 면접에서 신입에게 가장 많이 물어봤던 것이 브라우저 렌더링 과정이었다. 즉, "www.google.com" 이라고 치면 화면에 보여지기까지의 과정을 말하라는 것인데, 생각보다 많은 지원자들이 이를 잘 알 patrick-f.tistory.com 앞서 전체적인 브라우저 렌더링 과정에 대해서는 간단하게 살펴보았다. 그렇다면 서버 쪽은 잠시 두고, 프론트엔드 개발자로써 알아야 할 브라우저 렌더링 과정에 대해서 이해를 해보자! ( 파이어폭스, 사파리, 크롬 각 브라우저 마다 조금씩 차이가 있을 수 있어서 이번에는 Chrome에 국한 된 포스팅을 하고자 한다 ) 1. 브라우저의 구조 우선 브라우저의 구조에 대해서 전체적으로 살펴보자! "브..
-
의외로 신입이 모르는 것! - 브라우저 렌더링 과정Web 2021. 7. 7. 11:46
면접에서 신입에게 가장 많이 물어봤던 것이 브라우저 렌더링 과정이었다. 처음에는 면접을 위해서 달달 외우기만 했었는데 어느정도 시간이 지나고 다시 보니 이해가 되는게 신기했다. 한번 그렇게 해보시기를.... 브라우저 렌더링 과정은 어떻게 될까 1. HTML parsing 브라우저 Render engine이 HTML을 parsing해서 DOM node로 이루어진 DOM Tree를 생성한다. 2. CSS parsing CSS 파일과 Inline style을 parsing하여 CSSOM을 만들게 된다. 3. Render Tree 생성 DOM Tree와 CSSOM을 결합해 Render Tree를 만들게 된다. Render Tree는 어떤 스타일이 적용되어야하고, 순서는 어떻게 나타낼지 즉, 화면에 시각적으로 나..
-
웹 개발자라면 알아야 할 "CORS"에 대해서!Web 2021. 7. 5. 19:32
얼마 전 좋은 기회를 해볼 수 있었다. 바로 신입 프론트엔드 개발자 면접 자리였다. 항상 면접자로서만 준비를 해봤지 면접관으로서의 생각은 못해봤는데 이렇게 경험을 해볼 수 있어서 좋았다. 물론 내 처지에 누가 누구한테 질문을 하겠냐만은... 기술면접은 시니어분에게 맡기고 나는 주로 평소 공부 방법, 학습을 즐기는지, 계속 공부를 해나가야하는데 부담스럽지 않은지 등에 대한 질문을 했다. ( 주변에서 회사에 들어갔다고 안도감에 공부를 놔버리는 경우를 봤기 때문이다...ㅠ_ㅠ ) 어차피 신입 개발자를 뽑는 자리이기 때문에 어렵지 않은 질문들을 했다. 그 중에서도 대답을 곧 잘 하는 사람들의 경우 조금 더 깊은 질문을 하기도 했는데, 그 정도가 바로 CORS 였다. 그런데 CORS를 겪어도 보았고, 블로그에 정..