Study
-
-
[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..
-
자바스크립트란?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 중 하나가 바로 사용자에게 "로딩, 에러"를 안내함으로 사용자 경험이 지루하거나 답답하지 않도록 하는 것이 었다. 잠시 디자이너의 부재로 인해, 디자인과 기획까지 구상해야했다. "그래? 그냥, 데이터 로딩이 이루어질 동안 로딩 컴포넌트 보여주면 되겠지!" 이게 처음 나의 단순한 생각이었다. 그러나 로딩 화면을 보여주는데에는 다양한 디자인과 더불어 다양한 방식도 있었다. 먼저, 로딩 화면을 구현하면..
-
[Kelly deli] Kelly가 전하는 목표 성취 방법Study/공부방법 2021. 3. 27. 16:55
1. 구체적인 목표를 세워라 - 나는 5년 뒤 300억을 현금으로 가지고 있는다. 2. 구체적인 목표를 간단한 문장으로 만들어 시각화하고 매일 아침 저녁 명상한다. - 구체적인 목표를 이룬 나의 모습을 상상한다. 3. 구체적 목표를 이루기 위한 방법들을 찾는다. 4. 목표를 이루기 위한 도움을 얻기 위해 멘토를 찾아간다. 5. 항상 운동을 하여 뇌의 근육도 키운다. - 일주일의 3번은 유산소운동을 하라. - 어떻게 하면 그 시간을 내려고 노력하는가. 그게 중요하다. 6. "내가 할 수 있을까?, 될까 안될까?" 와 같은 생각은 쓸데없는 시간낭비이다. - 목표를 이룬 나의 모습을 생각하며 계속 행동한다. 7. 부자들에게는 항상 '끈기'가 있다. - 하루의 10분만 100일간 해보아라. (운동, 독서 등) ..
-
20.09.07:: TIL (react-native webview)Study/TIL 2020. 9. 7. 18:17
github.com/react-native-community/react-native-webview/blob/master/docs/Getting-Started.md 오늘의 한 일 react-native webview 활용 새롭게 배운 것 WebView란?! -> 어플리케이션 화면상에 내가 띄우고 싶은 웹페이지를 어플리케이션 안에서 보여주는 프레임을 말한다. 즉, link로 연결하지 않고 바로 내 어플 안에서 페이지를 보여줄 수 있다. react -natived에서 사용할 수 있는 React-native webview 라이브러리가 있다. react-native webview -reborn 라이브러리도 있는데, 이 버전 라이브러리를 깔아서 사용했더니 계속해서 모듈 에러가 났다. 구글링해도 이와 같은 에러가 별..