전체 글
-
-
[HTTP] 웹브라우저의 요청 흐름Study/CS 2021. 9. 25. 23:25
이전 글에서 프로토콜은 '규약', '규칙'을 의미한다고 이야기 했다. 그렇다면 인터넷 프로토콜 스택에는 4계층이 이루어져 있는데 이에 대해 알아보자. 먼저, 프롵토콜 스택이란 데이터 통신에 활용되는 프로토콜의 구조에 관한 개념으로 계층화된 구조로 모여있는 프로토콜의 집합이라 생각하면된다. 그래서 우리는 이를 (Protocol Family)라고 부르기도 한다. 이러한 프로토콜은 용도에 따라 4개의 계층으로 이루어져 있다. 어플리케이션 계층 : 프로세스간 통신을 위해 설계된 계층. 예시) HTTP, FTP, TLS/SSL 전송 계층(Transport Layer) : 송신자와 수신자를 연결하는 서비스에 대한 정보를 담는 계층. 예) TCP, UDP 인터넷 계층 : 패킷을 목적지로 전송하기 위한 정보를 계층 예..
-
[HTTP] 인터넷 통신에 대하여Study/CS 2021. 9. 25. 22:36
중학생때, 한창 영어 배우는 것에 호기심을 가지던 시절 영국인 중학생과 이메일 펜팔을 했던 것이 생각난다. 물론 내용은 "난 오늘 학교 다녀왔어. 그리고 저녁은 ~을 먹었어. 너는 무엇을 했니?" 뭐 이런 내용이었지만 ㅎㅎ 이런 사사로운 이야기 마저 굉장히 설레였던게 생각난다. 내가 지구 반대편에 있는 사람과 이렇게 일상적인 이야기를 주고 받을 수 있다니!! 저 멀리 있는 영국인 중학생과 나는 어떻게 이메일을 주고 받을 수 있었을까? 인터넷에서 컴퓨터 둘은 어떻게 통신을 하며 텍스트를 주고 받을 수 있는가? 1. 인터넷이 통신하는 방법 자, 일단 간단하게 먼저, 두 개의 컴퓨터가 통신한다고 생각해보자. 여러분이 생각하실 때에는 두 대의 컴퓨터가 서로 어떠한 정보를 주고 받기 위해서 무엇이 필요하다고 생각..
-
가상돔Study/React 2021. 9. 18. 18:25
리액트는 렌더링 성능을 위해 가상 돔을 활용한다. 브라우저에서 돔을 변경하는 것은 비교적 오래 걸리는 작업이다. 따라서 빠른 렌더링을 위해서는 돔 변경을 최소화 해야한다. 그래서 리액트는 메모리에 가상 돔을 올려 놓고 이전과 이후의 가상 돔을 비교해서 변경된 부분만 실제 돔에 반영하는 전략을 채택했다. 리액트 요소 이해하기 JSX문법으로 작성된 코드는 리액트의 createElement 함수로 변경된다. 리액트가 UI를 표현하기 위해 사용하는 리액트 요소의 구조를 살펴보자. const elementJSX = click here const element = React.createElement( 'a', { href: 'https://shinyeong.com' }, 'click here', ); 첫줄의 ele..
-
브라우저 동작원리about front-end 2021. 9. 18. 18:24
크롬 브라우저를 사용한지 아마 어연 10여년이 되는 것 같다. 대학생 때, 그저 흔히 사용해왔던 ie 보다 디자인이 더 깔끔하고 직관적인것 같아 맘에 들어 사용하기 시작했다. 어연 10여년을 사용했음에도 개발자가 되기 전까지는 이 브라우저가 어떠한 원리로 동작하는지 전혀 몰랐다. 직접 배포작업들을 거치면서 웹 브라우저는 어떠한 방식으로 동작할지 살펴보게 되었다. 브라우저의 주요 기능 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서이지만 PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI에 의해 정해진다. 브라우저 기본 구조 사용자 인터페이스 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분을 의미한다. 예를 들면, ..
-
자바스크립트란?Study/JavaScript 2021. 8. 22. 22:32
자바스크립트란? 2-1. 자바스크립트의 탄생 1995년, 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하며 탄생한 것이 Brendan Eich가 개발한 자바스크립트이다. 2-2. 자바스크립트의 표준화 1996년, 넷스케이프 커뮤니케이션즈는 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구인 ECMA 인터내셔널에 자바스크립트의 표준화를 요청한다. 1997년, 표준화된 자바스크립트 초판 사양이 완성되었고 자바스크립트는 ECMAScript로 명명된다. 2015년, ECMAScript 6 (ES6)는 let/const 키워드, 화살표 함수, 클래스, 모듈 등과 같은 범용 프로그래밍 언어로서 갖춰야 할 기능들을 대거 도입하는 큰 변화가 있었다. 2-3. 자바스크립트 성장의 역사 2-3-1. Ajax 1999..
-
Loading, Error 컴포넌트 생성하기 - 1. Skeleton LoadingStudy/React 2021. 7. 11. 19:27
정말 오랜만에 블로깅을 한다. :) 오늘은 회사에서 로딩, 에러 컴포넌트 티켓을 담당하면서 처음에 생각한 것보다 굉장히 다양한 방법과 내용들이 포함되어 있는 것 같아 좀 더 공부할 겸 글로 남겨본다. 위의 영상과 같이 웹 사이트내에서 로딩이 이루어지는 장면을 본 적 있을 것이다. 지난 주 나에게 맡겨진 task 중 하나가 바로 사용자에게 "로딩, 에러"를 안내함으로 사용자 경험이 지루하거나 답답하지 않도록 하는 것이 었다. 잠시 디자이너의 부재로 인해, 디자인과 기획까지 구상해야했다. "그래? 그냥, 데이터 로딩이 이루어질 동안 로딩 컴포넌트 보여주면 되겠지!" 이게 처음 나의 단순한 생각이었다. 그러나 로딩 화면을 보여주는데에는 다양한 디자인과 더불어 다양한 방식도 있었다. 먼저, 로딩 화면을 구현하면..
-
신입 개발자에게 필요한 자세 - 1. 사람 된 마음과 자세 그리고 말개발일기 2021. 4. 24. 11:25
신입 개발자가 되어보니, 나는 정말 많은 실수를 저지르고 있고 처음 보는 듯한 모르는 것들은 계속 생겨나 언덕을 오르고 또 오르게 되는 기분이다. 더보기 실력이 좀 부족한 한 부하직원은 늘 잦은 실수를 하는 중에도 감사와 고마움의 표현을 열심히, 진심을 다해 전했다. 똑같은 실수에 지적을 거듭해도 수정 되기까지 한참이 걸렸고 다른 부서원에 비해 업무능력도 떨어져 상사인 내 입장에서는 고민이었는데, 늘 말 끝에 "더 열심히 해서 선배의 짐을 들어드리겠습니다" "제 부족함을 감싸주셔서 감사합니다" "가르침에 누가 되지 않겠습니다" 하며 마음을 담은 인사를 전하곤 했다. 예쁜 말을 골라서 하니 심하게 야단을 칠 수도 없고, 하나라도 더 가르쳐 주고 싶은 마음이 들었다. 그런데 그렇게 느낀 사람이 나만은 아니었..