본문 바로가기

전체 글

(56)
비동기 처리와 콜백 함수 function getData(callbackFunc) { $.get('https://domain.com/products/1', function(response) { callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌 }); } getData(function(tableData) { console.log(tableData); // $.get()의 response 값이 tableData에 전달됨 }); 비동기 처리란? 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. 비동기 처리 첫 번째 비동기 처리의 가장 흔한 사례는 Jquery의 ..
exports 객체와 모듈 Node.js는 모듈을 이용하여 기능을 확장합니다. 모듈은 기능을 쉽게 사용하고자 메서드와 속성을 미리 정의해 모아 놓는 것입니다. 실습을 해보면 모듈로 사용할 자바스크립트 파일과 메인 자바스크립트 파일을 생성합니다. exports.abs = function(number){ if(0
웹팩(Webpack) - entry entryt 웹팩 구문 Single entry Syntax module.expprts = { entry : 번들링할 파일 경로 } Object Syntax module.exports = { entry : { app : 번들링할 파일경로 1, app2 : 번들링할 파일경로 2 } } Multil Page Application module.exports = { entry : { pageOne : './src/pageone/index.js', pageTwo : './src/pagetwo/index.js', pageThree : './src/pagethree/index.js' } }
쿠키(Cookie)와 세션(Session) 개념 HTTP의 특징과 쿠키와 세션을 사용하는 이유 - HTTP 프로토콜 환경에서 서버는 클라이언트가 누구인지 확인해야합니다. 그 이유는 HTTP 프로토콜이 connectionless, stateless 특징을 가지고 있기 때문입니다. connectionless - 클라이언트가 요청을 한 후 응답을 받으면 그 연결을 끊어버리는 특징 stateless - 통신이 끝나면 상태를 유지하지 않는 특징 이와 같은 특징을 해결하기 위해 쿠키와 세션을 사용하게 됩니다. 예를 들어 쿠키와 세션을 사용하지 않으면 로그인을 했음에도 불구하고 페이지 이동시 계속 로그인을 해야합니다. 쿠키와 세션을 사용하게 되면 사용자에 대한 인증을 유지할 수 있게됩니다. 쿠키 ( Cookie ) - 쿠키는 클라이언트 로컬에 저장되는 키와 값이 ..
네트워크의 기본 네트워크 7계층이란 OSI(Open System Interconnection)모형을 가리키며 네트워킹 또는 무선 통신 시스템의 기능을 설명하는 핵심 개념이다. 이 모형을 이용하면 특정 네트워킹 시스템에서 일어나는 일을 계층을 활용해 시각적으로 쉽게 설명할 수 있다. 덕분에 네트워크 관리자는 어떤 문제의 원인이 어디에 있는지 범위를 좁힐 수 있다. 예를 들어 물리적인 문제인지 아니면 응용프로그램과 관련이 있는지 쉽게 파악할 수 있다. 이는 컴퓨터 프로그래머에게도 도움이 된다. 응용프로그램 개발 시 다른 어떤 계층에 작업이 필요한지 쉽게 파악할 수 있기 때문이다. IT 기업은 고객에게 신제품을 설명할 때 OSI 모형을 많이 활용한다. 해당 제품이 어떤 계층에서 작동하는지 아니면 "스택 전체에 걸쳐" 작동하는..
[JavaScript] 표준 스타일 - 코딩 규약 오픈 소스 프로젝트를 보다 보면 다음과 같은 로고를 쉽게 볼 수 있습니다. 이는 "JavaScript Standard Code Style"이라고 하며, 자바 스크립트 코딩 규약을 정리해 놓은 것 입니다. 이름은 "standard(표준)"이라고 돼 있지만 ECMAScript가 지정해 놓은 표준은 아니며 수많은 코딩 규약 중 하나일 뿐입니다. 많은 프로젝트가 이러한 코딩 규약을 지켜서 코딩하고 있으므로 무엇인지 살펴보겠습니다. 왜 필요할까? 자바스크립트는 오랜 역사를 가지고 있는 프로그래밍 언어입니다. 또한 굉장히 자유롭게 코드를 작성할 수 있는 프로그래밍 언어입니다. 그래서 프로그래머의 취향에 따라 다양한 스타일로 코드가 작성돼 왔습니다. 하지만 너무 자유로운 작성 스타일에 여러 사람이 함께 작업할 떄 혼..
[ES6] babel(바벨) 설치 및 Nodejs에서 트랜스파일링된 모듈 실행 Babel은 ES6+ 코드를 ES5 이하의 버전으로 트랜스파일링한다. [1, 2, 3].map(n => n ** n); 위 코드는 ES6에서 도입된 arrow 함수와 ES7에서 도입된 거듭제곱연산자를 사용하고 있다. 이 두가지 기능은 IE는 물론 구형 브라우저에서 지원하지 않는다. 따라서 IE나 구형 브라우저에서도 동작하는 애플리케이션을 구현하기 위해 ES6+ 코드를 ES5 이하의 버전으로 변환(트랜스파일링)할 필요가 있다. Babel을 사용하면 위 코드를 ES5이하의 버전으로 트랜스 파일링할 수 있다. // ES5 "use strict"; [1, 2, 3].map(function (n) { return Math.pow(n, n); }); Babel CLI설치 1. npm을 사용하여 Babel CLI를 ..
[Docker] 설치 / ubuntu 컨테이너 생성 및 실행 리눅스에 도커를 설치하는 방법은 자동 설치 스크립트를 사용하는 것이 가장 수비습니다. > curl -fsSL https://get.docker.com/ | sudo sh 설치 확인하기 > docker version Client와 Server 정보가 정상적으로 출력되었다면 설치가 완료된 것입니다. 버전 정보가 클라이언트와 서버로 나뉘어져 있는데 도커는 실행파일이지만 실제로 클라이언트와 서버역할을 각각 할 수 있습니다. 도커 커맨드를 입력하면 도커 클라6이언트가 도커 서버로 명령을 전송하여 결과를 받아 터미널에 출력해 줍니다. 컨테이너 실행하기 도커를 실행하는 명령어는 다음과 같습니다. > docker run [option] IMAGE[:TAG|@DIGEST] [COMMAND] [ARG ...] option..