비실이의 개발 성장기

실행 컨텍스트란 (Execution Context, E.C) 실행 가능한 javascript 코드 블럭이 실행되는 환경 실행 컨텍스트가 생성되는 시점실행 가능한 코드(전역 코드, eval() 로 실행되는 코드, 함수 내부의 코드) 가 실행되면 각각의 독립적인 실행 컨텍스트가 생성된다. (ex. 함수가 실행되는 시점에 해당 함수의 실행 컨텍스트가 생성된다.) 생성 된 실행 컨텍스트는 순서대로 콜 스택(Call Stack) 에 push 된다. 스택이므로 가장 마지막에 추가 된 실행 컨텍스트가 현재 실행되고 있는 컨텍스트다. 실행 컨텍스트는 작업이 종료되면 콜 스택에서 pop 된다. 실행 컨텍스트 생성 코드 예123456789101112console.log('this is global context'); fu..

Javascript를 처음 접했을 당시, 타입이 엄격하지 않음과 더불어 함수가 변수처럼 어떠한 함수의 인자로 전달될 수 있고, 함수의 반환 결과로도 사용 가능하다는 것에 매력을 느꼈었다. Javascript에서 함수를 자유롭게(?) 사용가능한 이유는 함수를 일급 객체(First-class citizen) 로 취급하기 때문이었다. 어떠한 특징이 있으면 일급 객체라고 부르는 것일까 라는 생각이 들어 위키백과를 찾아봤다. 일급 객체란? '컴퓨터 프로그래밍 언어 디자인에서 일반적으로 다른 객체들에 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.' 일급 객체가 되기위한 조건 1. '변수나 데이터 구조안에 담을 수 있다.' testList 배열을 선언한 뒤, 0번째 인덱스에 익명함수를 추가했다. 2. '파라미터..

React 릴리즈 버전이 16.4.x 버전까지 올랐다는 걸 React 공식페이지나 여러 기술블로그를 통해 알고 있었다. 하지만, 변경 된 사항들에 대해 글을 읽기만 했을 뿐 간단한 예를 만들어서 해보지는 않았다. 최근 이직 준비로 인한 시간이 생겨 변경 된 사항들을 직접 해보고 있다. 오늘은 React v16.0 에 새로 추가 된 componentDidCatch() 함수에 대해 알아보고 이 함수를 어떠한 경우 사용하면 좋을지에 대해 알아보려한다. React 프로젝트는 수 많은 UI 컴포넌트 트리로 구성되어 있다. 화면 렌더링이 시작되면 수 많은 UI 컴포넌트 들이 각자 역할에 맞게 수행되며 가장 마지막에 위치한 컴포넌트의 역할이 끝나면 페이지 렌더링이 완료된다. 만약 렌더링 도중 어떠한 컴포넌트에서 런타..

브라우저 구조 1. User Interface 브라우저 화면에서 웹사이트가 표시되는 부분을 제외한 나머지 영역 (ex. 주소창, 이전/다음 버튼, 새로고침 버튼, 즐겨찾기 탭 등) 2. 브라우저 엔진 User Interface 와 렌더링 엔진 사이에서 발생하는 동작 제어 3. 렌더링 엔진 HTML, CSS 를 파싱하여 화면에 표시 담당 (ex. 서버측에서 전달받은 리소스 중에 .html 이나 .css 파일을 파싱하여 화면에 표시) 4. 네트워크 통신 네트워크 호출 시 역할 수행 (ex. URL 입력 시, 해당 서버측과 HTTP 통신을 통해 웹페이지 소스를 받음) 5. Javascript 해석기 Javascript 코드를 해석하고 실행 (ex. 서버측에서 전달받은 리소스 중에 .js 파일을 해석하고 실행)..

1. 브라우저 주소창에 접속 할 URL 을 입력 2. 브라우저는 현재 PC에 연결된 네트워크의 DNS 에 접속 할 URL 의 IP 주소를 요청 3. DNS 로 부터 IP 확인이 완료되면 브라우저는 서버에 요청 할 HTTP 메시지를 작성 4. 작성이 완료 된 HTTP 메시지를 패킷으로 나누어 서버측으로 전송 (TCP 이므로 3-handshaking 기법을 통해 서버를 찾음) 5. 서버측에서는 도착한 패킷을 조합하여 원래의 HTTP 메시지로 만듦 6. 서버(Web server + WAS) 는 클라이언트에 보낼 리소스(HTTP 메시지)를 패킷으로 나누어 클라이언트측으로 전달 7. 브라우저(클라이언트) 는 서버로부터 전달받은 패킷을 조합하여 화면에 띄움

Queue 란? 영어 단어 queue는 `차례를 기다리는 사람이나 승용차의 열` 이라는 뜻을 가지고 있다. 자료구조에서의 Queue도 데이터를 순서대로 저장 공간에 넣은 뒤, 넣은 순서대로 데이터를 꺼내어 사용하는 방식을 말한다. 자료구조의 Stack 이 `가장 마지막에 저장한 데이터가 가장 먼저 처리되는 방식 (LIFO)` 이라면, Queue 는 `가장 처음 저장한 데이터가 가장 먼저 처리되는 선입선출 방식 (FIFO)` 를 가진다. Queue 에는 공간에 들어있는 데이터 중, 첫번째 데이터를 가리키는 `Front` 와 가장 마지막 데이터를 가리키는 `Rear` 두개가 존재한다. Queue 에 데이터를 삽입하는 동작을 `Enqueue`, 삭제하는 동작을 `Dequeue` 라고 부른다. Queue 의 종..

javascript가 최초 나왔을 당시, 웹 페이지의 규모는 지금과 같이 크지 않았다. 그러나 컴퓨터의 성능이 향상되고, 네트워크 속도가 빨라지며 웹 페이지 규모도 점차 커지게 되었다. 웹 페이지 규모가 커지다보니 javascript 코드 규모 또한 커지게 되었고, 중복되는 기능도 많았다. 그러다보니 중복되는 기능들을 하나의 모듈로 만들어 소스 코드의 규모를 줄이고, 재사용성을 좋게 하였다. 하지만, 이 당시 javascript 모듈 사용을 위한 방법에는 정해진 표준이 없었다. 표준 없이 뒤죽박죽 개발을 하면 개발자들간에 혼선이 생기게 되고, 언어 사용성이 떨어지게 된다. 이를 막기위해 CommonJS 와 AMD (Asynchronous Module Definition) 방식의 모듈 사용이 등장하게 된다..

지난 번에 선형 리스트가 무엇인지, 선형 리스트에서의 삽입 / 삭제 방법과 특징에 대해 공부했다. 이전 포스트 바로가기 이번 포스팅에서는 다항식(polynomial) 을 선형 리스트(배열) 로 표현하는 방법에 대해 다루겠다. 선형 리스트로 다항식(polynomial) 표현 다항식(polynomial) 은 계수(coefficient) / 변수(variable) / 지수(exponent) 로 구성 된 항(term) 들의 합 이다. 항 들의 순서는 지수의 내림차순으로 정렬된다. 순서가 정해져 있으므로 선형 리스트를 활용하여 표현할 수 있다. 다음 다항식을 선형 리스트(배열) 로 표현 해 보겠다. 우선, 첫 번째 항의 지수를 통해 주어진 다항식의 최고차항을 알 수 있으며 이는 리스트의 크기가 된다. 주어진 다항..