ivory's Log
그게 무엇이라도 항상 쉬운 일이다.
반응형

2020/09 7

SSR(Sever Side Rendering)과 CSR(Client Side Rendering)

이 글은 SSR(Sever Side Rendering)과 CSR(Client Side Rendering)에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! Rendering 렌더링의 개념부터 다시 짚고 넘어가자! 서버로부터 HTML 파일을 받아 브라우저 화면에 표시하고 그리는 작업을 렌더링이라고 한다. 렌더링의 과정은 아래를 참고하자! - 서버로부터 데이터를 응답받아 HTML을 Parsing 하여 DOM트리를 생성한다. - DOM트리가 구축되는 동안 브라우저는 Render트리를 구축한다. - CSS설정 및 위치를 설정한다. - Render트리가 그려지고 브라우저 화면에 표시된다. SSR Server Side Renderin..

ivory's DevLog 2020.09.30

Cookie? Local, Session Storage??

이 글은 Storage에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! 개발자 도구 Application 탭을 열어보면 Storage라는 카테고리가 있다. 여기엔 크게 로컬 스토리지, 세션 스토리지, 쿠기가 있고 그 밖에 IndexedDB와 Web SQL을 확인할 수 있는데, 도대체 이것들이 무엇이고 언제 사용하는지, 그리고 서로에 대한 차이점에 대해 알아보자!! Cookie 쿠키가 무엇인가? 쿠키란, HTTP의 일종으로써 인터넷 사용자가 어떤 웹페이지를 방문할 경우, 그 페이지가 사용하고 있는 서버를 통해 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 말한다. 쿠키의 종류는 다음과 같다. - Session Cooki..

ivory's DevLog 2020.09.25

브라우저 렌더링 과정

이 글은 브라우저 렌더링 과정에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! 브라우저(Browser)란? 브라우저, 웹 브라우저라고 불리는 이것은 웹 서버에서 이동하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어를 말한다. 쉽게 말해 브라우저를 통해 사용자들은 영상, 이미지 등 자료들을 주고 받을 수 있고 공유도 할 수 있다. 대표적인 브라우저는 구글 크롬, 모질라 파이어폭스, 오페라, 사파리, 인터넷 익스플로어 등이 있다. 브라우저의 주요 기능 브라우저의 주요 기능은 사용자가 선택한 자원(Resource)을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통..

ivory's DevLog 2020.09.23

REST API(RESTful API)와 GraphQL

이 글은 Rest API 와 GraphQL에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! REST API(RESTful API)와 GraphQL를 알아보기 전에 API에 대해 간략히 짚고 넘어가자!! API(Application Programming Interface) 언제나 그랬듯 알기쉽게 예시를 들어보겠다. 우리가 식당에 가면 홀에서 서빙하는 직원이 메뉴판을 가져다 준다. 그 메뉴판을 통해 음식을 정하여 점원을 통해 주문을 하게 되면, 점원은 주방 요리사에게 주문내용을 전달하게 된다. 주문을 받은 요리사는 그 즉시 요리를 시작할 것이고, 요리가 완성되면 다시 점원을 통해 요리를 전달받고 비로소 먹을 수 있게 된다. ..

ivory's DevLog 2020.09.22

[JavaScript] - Callback과 Promise

이 글은 JavaScript의 Callback과 Promise에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! 앞선 포스팅에 이어 JavaScript의 비동기 처리에 대해 좀 더 알아보자. JavaScript를 비동기 처리하려고 할 때 크게 3가지 방법이 있다. 바로 Callback 이용, Promise객체 이용, 마지막으로 async, await이 있는데, 그 전에 왜 JavaScript의 비동기적 처리가 필요한 이유부터 알아보자. 비동기적 처리가 필요한 이유? JavaScript는 싱글 쓰레드 언어 JavaScript는 싱글 쓰레드(Thread) 언어다. 쓰레드란, 프로세스 내에서 실제로 작업을 수행하는 주체를 말한다..

ivory's DevLog 2020.09.18

[JavaScript] - 동기와 비동기

이 글은 JavaScript의 동기와 비동기에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! JavaScript를 공부하며 동기와 비동기에 들은적이 있었는데, 정말 이해하기 어려웠던 개념 중 하나였다. 게다가 누군가에게 프로그래밍과 관련된 언어의 정의는 사전적인 의미와 비슷하다는 말에 제대로 낚여 한참을 헤맸던 이 두녀석에 대해 파헤쳐 보려고 한다. 동기란? 동기(Synchronous)는 요청과 결과로 이루어지는 실행의 흐름이 순차적으로 딱 맞아 떨어진다고 생각하면 쉽다. 더 쉽게 예를 들면, 슈퍼마리오와 같이 어떤 게임을 할 때 순차적으로 첫 번째, 스테이지부터 마지막 스테이지까지 순서대로 진행한다고 생각해보자. Sta..

ivory's DevLog 2020.09.16

프롤로그

이 블로그를 운영하기 전에 따로 운영하던 기술 블로그가 있었다. 그땐 개발 영역에 발을 처음 내디딘 시점이었고(물론 지금도, 개발 초보), 여러 가지 개념을 정리하고 열심히 공부하기 위해 블로깅을 열심히 해야겠다는 생각을 가지고 있었다. 심지어 블로깅 커뮤니티에 참여하여 주 3회 이상, 기술 로그를 꾸준히 남기기도 했었는데 프로젝트를 병행하며 블로깅을 하는 일은 매우 쉬운 일이 아니었다. 게다가 횟수를 채우지 못하면 벌금을 내야 하는 규칙이 있었는데, 이 벌칙을 피하고자 어떻게는 횟수만 채우는 데에 집중하고 있는 내가 있었다. 얼마 전에 그 기술 블로그 내용을 첫 로그부터 최근 로그까지 정독한 적이 있다. 초반은 그래도 처음 시작하며 의욕은 넘쳤는지 봐줄만했으나, 최근 로그로 갈수록 내용이 부실해지거나 ..

ivory's DevStory 2020.09.06
반응형