반응형 HTTP 이해하기 나는 HTTP 통신에 대해 알고 있을까? 프로그래밍 공부를 하다보면 자주 접하는 단어지만 모호한 개념만 안 채로 찝찝하게 지나치는 경우가 있다. 그 중 하나가 HTTP이다. 그리고 내 머리는 며칠 내에 까먹을 것이 분명하다..! 어떻게 인터넷상에서 정보를 공유할 수 있을까? 🌐 당시 저는 우리가 정보를 다루는 방식에 새로운 틀을 짜보고 싶었습니다. 그래서 고안해 냈던 것이 월드와이드웹(WWW)이었죠. - Tim Berners-Lee · TED2009 HTTP(HyperText Transfer Protocol)에 대해 알기 전에 우리가 인터넷상에서 정보를 공유하는 방식에 대해 먼저 알아보자. 우리가 인터넷에 연결이 되어 있다면 웹이라는 거대한 서비스 공간에서 서로의 정보를 공유할 수 있다. 그 이유는 웹이.. 2021. 9. 13. 포스트맨(Postman) 사용법과 다운로드(feat. 유튜브 API) 모바일 개발, 프론트엔드, 백엔드 모두 유용하게 쓰이는 API 개발 툴인 포스트맨을 사용해보자. 개발 하기전 테스트용으로도 사용 가능하고 변수 설정을 통해 편하고 보기 좋게 관리할 수가 있다. 또한 컬렉션에 내가 사용했던 API들을 모아 볼 수 있어서 따로 홈페이지를 재방문 할 필요 없이 재사용 가능한 API를 만들 수 있다. API 부자가 되어보자! 포스트맨(Postman) 사용하기 🚀 01. 포스트맨 다운로드 간단하게 구글에 포스트맨 다운로드를 검색하면 사이트에 접속해 앱을 설치할 수 있다. 그냥 웹에서 사용이 가능하지만 자주 사용하는 만큼 어플리케이션으로 다운로드 받아 편하게 사용하는 것을 추천한다. 먼저 가입을 해야하고 운영체제에 맞는 파일을 다운로드 및 설치를 해준다. 02. 앱 실행과 새로운 .. 2021. 8. 8. 크롬 브라우저는 어떻게 작동 할까? - 04 Google Developers 사이트에서 읽은 내용을 정리한 글입니다. 컴포지터에 입력이 들어오고 있어요! 저번 글에선 렌더링 프로세스와 컴포지터에 대해 알아봤다. 이번 글에선 컴포지터가 어떻게 사용자 입력(input) 시 매끄럽게(smooth) 상호작용을 하게 만드는지 알아보자. 브라우저 관점에서의 입력 이벤트(input events) 일반적으로 우리가 "입력 이벤트(input events)"라고 하면 텍스트 박스에 타이핑을 하거나 마우스 클릭 이벤트를 떠올릴 것이다. 하지만 브라우저 관점에서 의미하는 입력은 사용자가 하는 모든 행동(gesture)을 뜻한다. 즉, 마우스 휠 스크롤도 입력 이벤트이며 터치 또는 마우스 오버(mouse over) 또한 입력 이벤트인 것이다. 화면에 터치와 같은 사용자 .. 2021. 8. 8. 크롬 브라우저는 어떻게 작동 할까? - 03 Google Developers 사이트에서 읽은 내용을 정리한 글입니다. 렌더러 프로세스의 내부 동작 저번 글에서 탐색에 대해서 자세히 알아봤다면 이번 글에서는 렌더러 프로세스의 내부에선 무슨 일이 일어나는지 알아보자. 렌더러 프로세스 내부에서는 많은 일들이 일어나기 때문에 여러 가지 측면에서 웹 성능과 연관이 있다. 본 글에서 일반적인 개요를 살펴 보자. 렌더러 프로세스의 웹 컨텐츠 처리 렌더러 프로세스는 브라우저 탭 안에서 일어나는 모든 일들을 담당한다. 여기서 메인 스레드가 우리가 구현한 대부분의 코드를 처리한다. 웹 워커 또는 서비스 워커를 사용할 경우엔 워커 스레드가 자바스크립트 코드 일부분을 처리하게 된다. 컴포지터와 래스터 스레드는 렌더러 프로세스 내부에서 페이지를 효율적이고 매끄럽게 렌더하.. 2021. 7. 29. 크롬 브라우저는 어떻게 작동 할까? - 02 Google Developers 사이트에서 읽은 내용을 정리한 글입니다. 탐색할 때 일어나는 일 저번 글에서, 개별 프로세스 및 스레드가 브라우저에서 여러 부분들을 어떻게 처리하는지 그리고 브라우저 아키텍처에 대해 알아봤다. 이번 글에선 웹사이트를 디스플레이하기 위해 각 프로세스와 스레드들이 어떻게 통신하는 지 깊게 알아볼 것이다. 간단히 웹 서핑하는 경우를 생각해보자. 브라우저에 주소를 치면 브라우저는 서버에서 데이터를 받아 페이지를 표시한다. 여기서 탐색(Navigation)¹ 에 대해 집중적으로 알아보자. 탐색(Navigation)¹ - 사용자의 요청을 받아 브라우저가 페이지를 렌더링하는 과정 시작은 브라우저 프로세스에서 저번 글에서 브라우저 프로세스는 탭 밖의 보이지 않는 부분들을 담당하는 것을 .. 2021. 7. 25. 크롬 브라우저는 어떻게 작동 할까? - 01 Google Developers 사이트에서 읽은 내용을 정리한 글입니다. CPU, GPU, Memory 그리고 멀티 프로세스 아키텍처 프론트엔드 개발을 공부하면서 가장 친숙하고 자주 사용하는 브라우저. 이 브라우저는 어떻게 우리의 코드를 잘 돌아가는 웹사이트로 변환해주는 것일까? 그 중 크롬을 중심으로 브라우저가 동작하는 방식을 알아보자. 먼저 주요한 컴퓨팅 용어와 컴퓨터의 일부분이 어떻게 동작하는지 알 필요가 있다. 많이 들어보셨죠? 컴퓨터의 중심 CPU와 GPU CPU(Central Processing Unit)란? CPU는 컴퓨터에서 뇌 역할을 담당한다. 다양한 작업들을 들어올 때마다 하나씩 처리한다. 과거에는 CPU가 하나의 칩이었지만(이 당시엔 코어란 같은 칩에 들어 있을 뿐 다른 CPU로 취급.. 2021. 7. 22. Firebase Warning: "It looks like you're using the..." 문구 없애기 웹 앱을 만드는 도중 개발자 도구를 봤는데 이런 문구가 생겼다. "이 문제는 Firebase JS SDK를 사용하면서 생긴 것 같아. 너가 프로덕션에 firebase 앱을 배포할 때는 너가 필요한 것만 import해서 사용하는 것을 추천할게." 개발자 도구 콘솔이 친절하게 알려줬다. SDK 전체를 불러와서 사용하지 말고 내 웹 앱에 필요한 것만 불러와서 사용하는 것을 권장하는 것 같다. import firebase from 'firebase'; const firebaseConfig = { apiKey: process.env.REACT_APP_FIREBASE_API_KEY, authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN, databaseURL: proce.. 2021. 6. 1. 이전 1 2 3 다음 반응형
