본문 바로가기

전체 글

 (69)
[TIL] 브라우저의 동작 방식 및 렌더링 원리 브라우저 : 웹페이지, 이미지. 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어 : 주로 사용하는 브라우저에는 크롬, 사파리, 엣지, 파이어폭스 등이 있다. : 브라우저는 웹 표준화 기구인 W3C에서 정한 Html, Css 명세에 따라 Html 파일을 해석해서 표시한다. 1. 웹 브라우저와 웹 서버의 통신 과정 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 서버로부터 받은 응답(Html, Css, Javascript, 이미지 등)을 브라우저에 표현하는 것이다. 웹 브라우저에서 URL을 입력하면 웹 서버가 웹 브라우저에 웹 페이지를 제공해 준다. 이때 웹 브라우저와 웹 서버는 서로 다른 곳에 위치해 있기 때문에 웹 서버가 실행 중인 컴퓨터의 주소인 IP주소를 통해 웹 브라우저가 웹..
[TIL] 프로세스와 스레드 프로세스와 스레드의 정의에 대해서 정리하기 전에 프로그램에 대해 알아야 한다. 프로그램이란 아직 실행되지 않은 파일 그 자체로 파일이 저장장치에 있지만 메모리에 올라가 있지 않은 정적인 상태의 것을 말한다. 예를 들어. exe파일을 실행시키기 전의 파일 그 자체를 말한다. 이러한 정적인 상태의 프로그램을 실행시키면 동적인 상태가 되는데 이러한 실행되고 있는 프로그램을 프로세스라고 한다. 1. 프로세스 : 운영체제로부터 자원을 할당받은 작업의 단위 : 프로세스당 최소 하나의 스레드를 보유 : 각각 별도의 주소공간을 독립적으로 할당받는다.(code, heap, stack) : 각 프로세스는 별도의 주소 공간에서 실행되며 한 프로세스가 다른 프로세스에 접근할 수 없다. 과거에는 프로그램 실행 시 프로세스 하나..
[TIL] Rest, Rest API, Restful 1. Rest (Representational State Transfer) : 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것 : HTTP URI로 자원을 명시하고 HTTP Method로 해당 자원에 대한 CRUD를 적용하는 것 1-1. REST 특징 서버-클라이언트 구조 : 자원이 있는 쪽이 서버, 자원을 요청하는 쪽이 클라이언트 무상태성 (Stateless) : 작업을 위한 상태정보를 따로 저장하거나 관리하지 않기 때문에 이전의 요청이 다음의 요청에 연관되지 않는다. 이를 통해 서버의 처리 방식에 일관성을 부여하고 부담이 줄어들게 된다. 캐시 처리 가능 (Cacheable) : HTTP의 캐싱 기능을 적용할 수 있어 응답 시간이 빨라지고 성능, 서버의 자원 이용률을 향상할 수 있다. 계..
[JavaScript] 이벤트 루프, 태스크 큐 자바스크립트는 싱글 스레드 기반의 언어이고, 자바스크립트 엔진은 하나의 호출 스택만을 사용합니다. 이는 요청이 동기적으로 처리되어, 한 번에 한 가지 일만 처리할 수 있음을 의미한다. 이러한 문제는 비동기 콜백을 사용하여 해결 가능하며 비동기 요청의 처리는 브라우저, Node.js에서 처리된다. 비동기 처리를 위한 브라우저 구조 1) 자바스크립트 엔진 콜스택(Call Stack) : 함수 호출 시 실행 컨텍스트가 생성되며 이 실행 컨텍스트들로 구성된다. 메모리힙(Memory Heap) : 객체가 저장되는 공간으로 크기가 동적으로 변하는 값들의 참조 값을 갖고 있다. 2) Web API or Browser API : 웹 브라우저에 구현된 API : DOM event, AJAX, Timer 등 3) 이벤트 ..
[JavaScript] Babel, Webpack, Polyfill이란? 1. Babel : JavaScript 컴파일러로 모던 자바스크립트 코드를 과거 구 표준을 준수하는 코드로 변환시켜 준다. (*컴파일 : 주어진 언어로 작성된 컴퓨터 프로그램을 다른 언어의 동등한 프로그램으로 변환하는 프로세스) : 최신 버전의 자바스크립트가 실행이 안 되는 구버전 웹브라우저를 대응하기 위해서 사용된다. : ES6 코드를 ES5 코드로의 변환과 리액트의 JSX문법, 타입스크립트, 코드 압축, Proposal까지 처리해 준다. *바벨이 필요한 경우* : 새로운 문법인 경우 - const, let - spread operator - arrow function - class - destructuring 2. Webpack : JavaScript 모듈 번들러로 빌드를 통해 여러 파일들을 하나로 ..
[TypeScript] TypeScript란 TypeScript : JavaScript에 타입을 부여한 JavaScript의 상위 버전 : MS에 의해 개발/관리되고 있는 오픈소스 프로그래밍 언어로 JavaScript의 단점을 보완하기 위해 개발되었다. : ES5의 Superset이므로 기존의 자바스크립트(ES5) 문법을 그대로 사용할 수 있다. : ES6의 새로운 기능들을 사용하기 위해 Babel과 같은 별도 트랜스파일러를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진에서 실행할 수 있다. 사용 이유 1) 에러 사전 방지 : 동적인 자바스크립트 언어에 타입을 미리 부여함으로써 정적타입으로 컴파일 단계에서 에러를 사전에 잡을 수 있어 보다 안정적이다. 2) 실행 속도 : 자바스크립트는 동적타입의 인터프리터 언어로 런타임시에 타입을..
[TIL] CSR과 SSR 1. CSR (Client Side Rendering) : 렌더링이 클라이언트 쪽에서 일어난다. : 서버는 요청을 받으면 클라이언트에 html과 JavScript를 보내주고 클라이언트는 그것을 받아 렌더링을 시작하는 방식 1-1. CSR 단계 - User가 WebSite에 요청을 보낸다. - CDN이 html파일과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다. - 클라이언트는 html과 JS를 다운로드한다. 그동안 SSR과 달리 유저는 아무것도 볼 수 없다. - 다운이 완료된 JS가 실행되고 데이터를 위한 API가 호출된다. 이때 유저는 placeholder를 보게 된다. - 서버가 API로부터 요청에 응답한다. - API로부터 받아온 data를 placeholder 자리에 넣어주며 페이지는 상호작..
[React-Native] 리액트 네이티브란? React Native : Facebook에서 만든 오픈소스 프로젝트 : 2015년 3월 공개 : 기존 하이브리드에서 있던 성능문제없이 자바스크립트를 이용해 iOS, Android 개발 가능 : 페이스북, 인스타그램, 디스코드, 스카이프등에서 react native를 사용 1. 장점 - 쉬운 접근성 : 새로운 언어의 배움 없이 JavaScript를 이용해 개발할 수 있다. - 비용 절감 : iOS, Android를 한번에 개발 가능하다. - Fast Refresh : 코드 수정에 따른 결과를 바로 확인할 수 있다. 2. 단점 - 네이티브앱과의 성능 차이 : 기존 하이브리드 앱보다는 성능이 좋지만 네이티브만큼 좋지 못하다 : 네이티브에 나온 신규 기능을 지원하지 않으면 사용하기 어렵다. - 디버깅의 어려움..

티스토리툴바