리액트에서의 코드 분할에 대해 알아보겠습니다. 유저가 처음 웹 페이지에 접속했을때 빌드된 main.js 파일을 로드한다고 생각해봅시다. 만약 프로젝트의 규모가 커진다면 main.js 파일의 크기 또한 커질 것이고 이를 로드하는데 많은 시간이 걸리므로 사용자 경험의 퀄리

오늘은 리액트의 라이프 사이클 과정에 대해서 알아보겠습니다. 라이프사이클은 마운트, 업데이트, 언마운트 총 세 가지 카테고리로 나눌 수 있습니다.DOM이 생성되고 웹 브라우저에 나타나는 것을 마운트라고 합니다. 그럼 마운트가 될 때 호출되는 메서드들을 알아보죠. 위의

큐는 FIFO(First In First Out) 먼저 들어가 데이터가 먼저 나오는 형식의 자료구조입니다. 순서를 지키기 때문에 주로 버퍼에 사용됩니다. 다들 아시는 내용이니 바로 구현을 해보죠.그런데 배열을 활용해 큐를 구현하게 되면 문제점이 있습니다. shift()

오늘은 쓰로틀과 디바운스에 대해서 알아보게겠습니다. 두 가지 기법 모두 DOM 이벤트가 발생했을 때 성능을 최적화하기 위한 기법입니다.예를 들어 보죠. 유저가 검색창에 "보드게임"을 입력한다고 생각을 해봅시다. input 이벤트를 걸어둔다면 검색어를 입력할 때마다 이벤

HTML, CSS, JavaScript, React 등 지금까지 주구장창 코드를 짜고 구현하는 것에만 집중해왔는데 면접을 보고나서 "아, 조금 더 근본적인 개념을 공부할 필요가 있겠다" 라는 생각을 하게 됐습니다. 그래서 먼저 브라우저에서 렌더링 엔진을 이해할 필요가

이진탐색트리 설명에 앞서 이진트리를 설명해보겠습니다. 여러개의 자식을 가질 수 있는 트리와는 다르게 이진트리는 최대 2개의 자식만을 가질 수 있는 트리입니다.그럼 이진탐색트리는 뭘까요? 이진탐색트리는 이진트리에서 2개의 규칙을 적용한 트리를 말합니다. 2개의 규칙은 아

트리 구조란? https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f9f30162-157d-4b10-bd25-ff0369a41c47/Untitled.png 오늘은 트리 구조에 대해서 알아보겠습니다. 트리라는 이

이번 시간에는 해시테이블을 공부해도록 하죠. 자바스크립트에서 흔히 사용되는 객체는 키 - 값이 하나의 쌍으로 연관되어있습니다. 이렇게 동작하는 방식이 해쉬테이블과 유사합니다.해쉬테이블도 키를 통해 값을 매핑할 수 있는 자료 구조입니다. 위의 그림을 보면 연필, 볼펜,

기존의 http, https 요청의 경우를 생각해보죠. 클라이언트에서 서버로 요청을 보내고 서버가 요청에 대한 응답을 하게 되죠. 이것을 단방향 통신이라고 합니다. 그러나 HTML5에서 웹 소켓이 새롭게 추가되면서 단방향 통신이 아닌 양방향 통신을 할 수 있게 됐습니다

자바스크립트에서는 호출과 상관없이 this를 지정하 수 있습니다. call, apply, bind 메소드가 이를 지원하죠.바로 예제를 확인해보겠습니다.call 메소드는 함수안에서 사용된 this를 어떤 객체로 사용할지 정해줍니다. 위의 예제에서 sayHello에 사용된

타입스크립트 환경을 설정하고 익스프레스 서버를 구동하기 위해 필요한 패키지들을 설치하자.express@types/express : express 라이브러리의 타입을 추가해준다.@types/node : node.js 타입을 추가해준다.nodemon : 실시간으로 수정사항

MySQL은 SQL 언어를 사용하는 관계형 데이터베이스(RDB)의 대표 주자이며, mongoDB는 NoSQL의 대표 데이터베이스입니다. 여기서는 MySQL 세팅 방법과 기본적인 문법에 대해서 알아보죠.데이터베이스는 관련성을 가지고 중복이 없는 데이터의 집합을 의미합니다

익스프레스 프레임워크를 사용해서 웹 서버를 구축해봅시다. 익스프레스는 많은 의존성 패키들을 사용하기 때문에 조금 어려울 수 있지만 express-generator를 이용하면 package.json과 기본 폴더구조까지 잡아줍니다.express-generator는 콘솔 명

cluster 모듈을 활용하면 싱글스레드인 노드가 CPU 코어를 모두 사용해여 작업을 병렬적으로 처리하도록 해줍니다. 이를 이용하면 요청을 분산시켜 서버가 오버로드 되지 않도록 할 수 있습니다. 물론 성능또한 어느정도 개선되겠죠? (이게 그 유명한 클러스터링 이라고 합

https 모듈은 웹 서버에 SSL 암호를 추가합니다. GET, POST와 같은 메소드로 데이터를 주고 받을 때 이를 암호화하여 다른 사람이 요청, 응답을 해킹하더라도 데이터를 확인할 수 없습니다. 요즘 http로 서버를 구축하면 브라우저에서 안전하지 않다는 경고문구가

자! 모듈에 대한 공부는 어느정도 했으니 node.js를 사용해서 웹 서버를 만들어보죠. 웹 서버를 만들기 위해서 http모듈을 사용할 것 입니다.end 메서드를 사용할 때 인자가 있으면 그 인자를 마지막 데이터로 보내고 응답을 종료합니다.on 메서드로 각각 liste

node.js가 가진 내장 모듈에 대해서 알아보겠습니다. os 모듈은 컴퓨터 운영체제의 정보를 가져옵니다. 여러가지 메소드들이 있는데 다 외우진 말고 필요할 때마다 검색해서 활용해보죠.os.arch() : 프로세서 아키텍처 정보입니다.os.platform(): 프로세서

노드에서 모듈을 만드는 방법은 두 가지입니다. module.exportsexports 객체add.jsmodule.exports = add를 로드할 때는 {}가 필요없지만 module.exports = { add }를 로드할 때는 {}를 써줘야합니다.아래와 같이 모듈을

액션을 선언할 때 보통은 아래 코드와 같이 쓰죠. 따로 타입추론으로 인해서 각 액션의 타입으로 string이 부여되죠. 그런데 타입스크립트에서는 문자열 자체를 타입으로 만들어 줄 수 있습니다. 바로 const assertion을 통해서 말이죠.const assertio

velopert님의 벨로그 포스트를 보면서 이번 장에서는 타입스크립로 리액트의 Context API를 활용하는 방법에 대해서 알아보겠습니다. 프로젝트의 Hello, World!라고 할 수 있는 투두리스트를 만들어보면서 배워보죠.먼저, 타입스크립트가 적용된 리액트 프로젝