Back to the Basics

이 포스팅은 앞으로 웹 개발을 하면서 꼭 알아둬야 하는 Google의 Chrom Network Tap사용법 영상을 보고 정리한 글이다 크롬 브라우저 에러 읽기 chrome://network-errors/ 을 브라우저에 입력하여 전체 error 목록을 확인할 수 있다. 문제 해결 페이지 Chrom Network Tap 사용법!! 아래 수염난 아저씨가 상당히 잘 설명을 해주셨다. 영어가 조금 약해도 이해가 쏙쏙쏙 되었다. Devtool은 열려있는 동안 only 네트워크 활동? (network activity)만을 읽는다고 한다. 1. network tap 기본 기능들에 대한 설명 아래의 빨간 박스로 체크된 곳을 보며, 전체 request와 전송된 data를 볼 수 있다. 그 위에 위에 나오는 chart는 전..

1. 클라이언트 - 서버 아키텍처 (Client - Server architecture) Client - Server Client : 클라이언트는 인터넷에 연결된 디바이스 또는 웹 접근할 수 있는 Software를 의미하며, 대표적으로 Browser가 있다. Browser는 API에 따라 Server에 Resource를 요청하고 HTML, CSS, Javascript 등으로 작성된 코드를 내부 엔진을 통해 해독하며 Server의 Response에 따른 화면을 표시한다. Server : API를 통해 보내온 Client의 Request를 처리한다. Client - Server architecture 설계 방식 2Tier 아키텍처라고도 불리는 설계 방식 리소스가 존재하는 곳(server), 리소스를 사용은 ..

강의를 듣고 내용을 간단히 정리한 포스팅 입니다. OS는 사용자, Application Program에 Interface를 제공한다. 운영체제는 사용자에게 인터페이스를 제공한다. SHELL이라는 응용프로그램을 통해 사용자가 OS의 기능을 조작할 수 있도록 한다. SHELL이란, 사용자와 OS 간의 Interface이며 CLI에서 Terminal 또는 GUI 환경 두 종류가 있다. 운영체제는 Application을 위한 인터페이스도 제공하며 API라고 한다. API는 Application Programming Interface의 약자이며 함수로 제공된다. 보통 API들을 묶어 Library의 형태로 제공된다. System call System call은 운영체제의 기능을 사용할 수 있는 함수 또는 명령어이..

Underbar Night mare 이번 포스팅에서는 미루고 미뤄왔던 Nightmare 포스팅을 진행하겠다. _. memoize : momoise() method는 Lodash 라이브러리의 method이다. 이미 계산된 값을 일시적으로 기억했다가 다시 호출할 때 다시 계산하지 않고 기억한 값을 출력한다. 이미 해결한 문제는 다시 풀지 않는 기법이다. 완전하게 Lodash 라이브러리의 memoization 구현을 한 것은 아니겠으나, 추후 Memoization에 대해 공부할 일이 생긴다면 한번 더 구현을 해보기로 하자. Parametar func : callback 함수로 memoization을 적용하고자 하는 함수. _.memoize = function (func) { // memo를 하기위한 배열을 선..

단일 연결 리스트 자료구조 연결 리스트는 실행 시간에 메모리를 할당하거나 해제할 수 있는 동적 자료구조이다. 이번 포스팅에서는 단일 연결 리스트의 개념과 단일 연결 리스트 연산들의 구현에 대해 간단하게 정리해 보았다. 참고로 사용한 언어는 python이다. 1. 연결 리스트의 개념 연결 리스트 자료구조는 배열처럼 선형 자료구조에 속하지만 인덱스로 접근하는 것이 아닌, 각 노드가 다음 노드에 대한 참조를 갖는 구조이다. 배열처럼 자료들의 메모리가 선형적으로 저장되지 않고 흩어져(?) 있지만 각 노드의 참조를 갖고 있기 때문에, 그 참조를 따라 다음 노드로 접근할 수 있다. 아래의 그림을 보면 쉽게 이해할 수 있다. 각 노드는 데이터를 담는 data field와 다음 노드를 참조하는 pointer field..

삭제 연산 동작 길이가 5인 리스트에서 index 1에 있는 요소를 지우고 싶은 경우 인덱스 1 뒤에 있는 데이터를 모두 한 칸씩 앞으로 밀어서 저장한다. 인덱스 1에 인덱스 2에 있는 요소를 저장한다 인덱스 2에 인덱스 3에 있는 요소를 저장한다 인덱스 3에 인덱스 4에 있는 요소를 저장한다 동적 배열에서 접근할 수 있는 인덱스 범위도 1을 줄여준다동적 배열은 배열의 크기와 개발자가 사용하는 인덱스들의 범위를 따로 관리한다. 삭제 연산 시간 복잡도 삭제 연산도 아무 위치에 있는 데이터를 삭제할 때와 맨 뒤 데이터를 삭제할 때, 두 경우도 나눠서 생각할 수 있다. 최악의 경우 : 맨 앞의 데이터를 지울 때 삭제 연산은 최악의 경우 삭제할 데이터가 맨 앞에 있는 경우이다. 인덱스 1부터 끝까지 모든 요소들..

Node.js - fetch API How to use 기초 편 이번 포스팅에는 Node.js의 API 중 하나인 fetch API에 대해 간단히 알아본 내용과 기본적인 사용법에 대한 내용을 정리하였다. 참고 사이트들 MDN How to use Fetch Fetch API는 URL을 통해 network 요청을 해주는 API이다. Fetch API를 통해 network resource에 접근이 가능하고 HTTP 요청, 파일 다운로드 및 업로드 등의 작업을 가능하게 해 준다. // ! Syntax const fetchResponsePromise = fetch(resource [, init]) Parameters resource : URL 또는 Request object options : request에 추가..

appen는 동적 배열의 끝에 요소를 추가해주는 반면 insertion은 원하는 위치에 요소를 삽입한다. 추가 연산의 시간 복잡도 appen와 마찬가지로 아래 두 경우로 볼 수 있다. 경우1 : 정적 배열에 남는 공간이 있을 때 : 배열 중간에 새로운 요소를 넣을 경우, 가장 뒤의 요소부터 insertion 할 위치까지의 요소들을 하나씩 뒤로 밀어준다. 그 후 빈 공간에 요소를 저장한다. 시간 복잡도 : 최악의 경우 index 0에 요소를 추가할 경우엔 모든 index를 하나씩 뒤로 밀어주게 된다. index로 요소에 접근하는 경우 O(1)이며 n번 반복하므로 O(n)이 된다. 경우 2 : 정적 배열이 찼을 때 : 새로운 배열을 만든 후 기존 데이터를 복사하여 저장한다. 그 후 위와 비슷하게 인덱스를 뒤..