짹뚜 스튜디오

package.json package.json은 프로젝트에 대한 중요한 정보들을 담고 있는 파일이다. package.json 파일을 생성하는 방법은 3가지가 있다. 직접 package.json 파일을 생성하고 그 안에 들어가는 정보들을 입력하는 방법 npm init 명령으로 생성 - 필요한 정보들을 하나씩 입력해서 package.json을 생성한다. npm init -y 명령으로 생성 - package.json이 default 값으로 바로 생성된다. name 프로젝트의 이름으로 npm에 배포할 때는 동일한 이름이 있으면 안된다. version 프로젝트의 version을 정의한다. description 프로젝트에 대한 설명을 적는다. keywords 프로젝트를 검색할 때 사용되는 키워드이다. hompage..

NPM 우리는 모듈을 직접 만들어서 사용하거나 Built-in 모듈들을 사용해서 하나의 프로그램을 만든다. 필요한 모듈들을 직접 만들어서 사용하는 거에는 문제가 없지만 어딘가에는 나와 같은 문제를 해결하기 위해 모듈을 만들어 둔 사람이 있을 수도 있다. 그리고 그 사람이 모듈을 아무나 사용 가능하게 공유를 했다면 우리가 할 일은 그 모듈을 가져와서 사용하면 되는 것이다. 이렇게 모듈을 가지고 와서 사용 가능하게 하는 것이 NPM (Node Package Manager)이다. NPM은 일종의 스토어로 이러한 모듈들을 패키지화해서 모아둔 다음 누구나 필요한 모듈이 있을 때 쉽게 설치할 수 있게 해 준다. 따라서 NPM은 다음과 같은 일을 할 수 있게 해 준다. 자신이 작성한 코드를 다른 프로젝트에서 재사용 ..

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 열다섯 번째인 this, call, apply and bind 항목을 공부하면서 간단하게 작성한 글이다. this 자바스크립트에서 this는 현재 실행 컨텍스트를 담고 있는 객체를 의미한다. 여기에서 실행 컨텍스트 (Execution Context) 란 쉽게 말해서 현재 코드가 실행되고 있는 환경이라고 한다. 브라우저의 콘솔에서 this를 확인해보면 Global 실행 컨텍스트인 window가 출력되는 것을 볼 수 있다. 왜냐하면 현재 this가 Global 환경에서 호출되었기 때문이다. console.log(this); // window 그렇다면 다음과 같이 객체 안에 함수가 있다고 가정해보자 function aWhoIsThis(){ c..

useEffect Hook은 함수 컴포넌트에서 Side Effect를 처리할 수 있게 한다. Side Effect 함수가 실행되면서 함수 외부에 존재하는 값들에 영향을 끼치는 것을 Side Effect라고 한다. 예를 들어 웹페이지의 Title을 변경하거나, fetch 함수로 데이터를 가져오거나 등등이 Side Effect에 속한다. 이러한 Side Effect를 처리하기 위해서 React에서는 useEffect()를 사용한다. useEffect useEffect의 첫 번째 인자로는 콜백 함수를 받는다. 이 콜백 함수는 useEffect가 호출될 때 실행이 된다. 컴포넌트 생성, 새로운 props 전달, state 변경이 일어나고 렌더링이 된 다음에 useEffect가 호출된다. 두 번째 인자로는 Dep..

Domain 네트워크에 연결된 모든 PC에는 IP 주소가 있고, 이 IP 주소를 이용해서 서로 통신을 한다. 그러나 숫자로 이루어진 IP 주소를 사람들이 모두 기억하는 데에 한계가 있다. 그래서 각 IP 주소에 이름을 부여하는데 그것이 바로 Domain이다. Domain 이름은 일정기간 동안 대여해서 사용한다. naver.com google.com 등등 DNS 우리가 브라우저 주소창에 Domain 이름을 입력해서 해당 Domain으로 접속을 하고자 할때, 일단은 해당 Domain의 IP 주소를 알아야 한다. 그러기 위해서 네트워크에는 Domain이름과 이와 매칭 되는 IP 주소가 저장된 데이터베이스가 있는데 그것을 Domain Name System, DNS라고 한다. 그래서 DNS에서 해당 Domain의..

IP 주소 네트워크 상에서 연결된 컴퓨터를 구별하기 위한 고유의 식별 주소이다. 이 주소는 32 bit로 이루어져 있고 4개의 10진수가 점으로 구분되어 있어서 각 10진수는 1 Byte (8 bit)를 사용한다. 즉, 각 10진수는 0 ~ 255를 표현할 수 있다. 이러한 IP 주소를 IPv4 또는 IP version 4라고도 부른다. IP 주소 중에 특별한 용도로 예약이 된 주소가 있다. 127.0.0.1 - localhost라고도 하는 이 주소는 현재 사용 중인 로컬 PC를 의미한다. 0.0.0.0 / 255.255.255.255 - Broadcast address라고 불리는 2개의 주소들은 로컬 네트워크에 접속된 모든 장치와 소통하기 위해 사용하는 주소이다. 인터넷 초기에는 PC 보급률이 낮아서 ..

URI Uniform Resource Identifier의 약자로 네트워크 상에서 리소스에 대한 고유 식별자 (ID)이다. URI는 리소스를 식별하는 규약이라 하고 그것을 형태로 표현한 것이 URL과 URN이다. 그래서 모든 URL은 URI라고 할 수 있지만 모든 URI는 URL이라고 할 수 없다. URL Uniform Resource Locator의 약자로 네트워크 상에서 파일이 실제로 존재하는 위치를 나타낸다. https://example.com/index.html URL에 query string이 포함되느냐 안되느냐에 대한 여러 의견이 있어서 더 자세히 알아봐야 한다. query string을 위키피디아에 검색을 해보면 다음과 같이 나오기도 한다. A query string is a part of ..

프로토콜이란 프로그램, 데이터, 파일 서비스 등을 다양한 네트워크가 주고받기 위해서 지켜야 하는 약속 또는 규칙을 공식화한 것이다. 주고받는 데이터의 종류도 다양하고 사용자 별로 환경도 다르기 때문에 그에 맞는 프로토콜이 다양하게 존재한다. HTML 파일을 주고받기 위한 HTTP, 메일을 주고받기 위한 SMTP, 파일을 업로드 또는 다운로드하기 위한 FTP 등등이 존재한다. 프로토콜의 기능 Fragmentation & Reassembly (분할 및 재조립) 데이터를 그대로 전송하는 것은 비효율적이고 많은 리소스를 낭비할 수도 있기 때문에 데이터를 패킷이라는 작은 조각으로 분해한 뒤에 전송을 하게 된다. 그리고 분해된 데이터를 받은 다음에 다시 조립을 한 뒤에 사용한다. Encapsulation (캡슐화)..

2 티어 아키텍처 2 티어 아키텍처란 리소스가 존재하는 곳과 리소스를 사용하는 곳이 분리가 된 것을 얘기한다. 여기서 리소스가 존재하는 곳을 Server, 리소스를 사용하는 곳을 Client라고 한다. 그래서 2 티어 아키텍처를 다른 말로 클라이언트-서버 아키텍처라고도 부른다. 클라이언트 종류 웹 앱 모바일 앱 데스크탑 앱 등등 서버 종류 웹 서버 파일 서버 메일 서버 등등 클라이언트와 서버는 서로 요청과 응답을 주고받는 관계이다. 클라이언트가 무언가를 요청하면 서버는 그에 맞는 응답을 한다. 그리고 항상 요청이 있어야만 응답을 한다. 3 티어 아키텍처 2 티어 아키텍처에서 서버에 리소스가 저장이 되었다면 3 티어 아키텍처에서는 이러한 리소스를 저장하는 곳이 따로 분리가 되고 여기에서 서버는 클라이언트와..

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 열네 번째인 Factories and Classes 항목을 공부하면서 간단하게 작성한 글이다. 기본적으로 객체를 만들려면 다음과 같이 작성하면 된다. const dog = { name: 'Max', eat: function(){ return `Max eats`; } } 그리고 만약 dog와 동일한 property를 가지고 있지만 value만 다른 객체를 만들고 싶다면 동일한 코드를 여러 번 작성해주면 된다. const dogMax = { name: 'Max', eat: function(){ return `Max eats`; } } const dogBaduki = { name: 'Baduki', eat: function(){ return ..