분류 전체보기

지금까지의 포스트와 개인 공부로 JavaScript를 어느정도 기초를 다져놓은 상태라면 라이브러리에 눈을 돌릴때라 생각한다. 이전 포스트에서 말했듯, 지금까지의 JS포스트는 React와 NEXT를 배우기위한 초석이다. 이번 포스팅부터 React.js가 무엇인지를 학습하고, React.js에서 사용되는 JSX(Javascript Syntax eXtension)문법에 대하여 알아보도록 하겠다. 리엑트 학습엔 아래 공식 자습서를 활용하자. 자습서: React 시작하기 – ReactA JavaScript library for building user interfacesko.legacy.reactjs.org1) 리액트 시작1.1) 리액트 특징 React는 오직 View만 신경쓰는 라이브러리이다. MVC나 MVVM..

이전 포스트에서는 변수/상수/자료형/연산자에 대해 알아보았다. 이번에는 블록/스코프, 일급 객체에 대해 다룰 것이다. 함수나 if/else문, switch,for,while 문들의 사용법은 타 프로그래밍 언어와 크게 다를것이 없기 때문에 여기서 다루지는 않을 것이다. 어디까지나 이 블로그의 JS 포스트는 JS를 이용하여 추후 React.js와 Next.js를 하기위한 기초 개념을 정리한 포스트이다. 만약 함수나 if/else문, switch,for,while 문들의 사용방법을 알고 싶다면 모질라 재단의 공식문서를 확인하자. JavaScript | MDN JavaScript (JS)는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지를 위한 스크..

1)변수와 상수 변수나 상수는 어떤 데이터를 담는 주머니로 인지하면 이해하기 편하다. 변수나 상수에 어떤 데이터를 담아두고 이를 재활용 하거나 값을 출력하는 등, 작업을 위해 필수적이다. 1.1) 변수 let 변수란, 변경이 가능한 값이 담긴 곳 으로 이해하자. 예전에는 var을 많이 썼던것 같은데 ES6라는 표준 문법 이후로는 let을 쓰는것을 권장한다. let x = 1; console.log(x); 가장 일반적인 변수의 사용법인 변수 초기화 방법이다. 변수 x를 선언함과 동시에 값을 넣는 형태이다. 메모리상으로는 선언과 초기화를 따로 하는 것과 동일하다. 즉, undefined할당 후 재할당을 하는 것이다. let x = 1; let y = x; // x가 가진 값을 y에 할당 console.log..

1) 개요 최근 웹 개발 채용시장을 보면 SSR(Server-Side-Rendering) 기반 프레임워크의 사용이 많아졌다. 또한, SSR과 CSR(Client-Side-Rendering)의 개념을 이해하는지를 채용 기준에 넣기도 한다. 따라서 NEXT.js를 배우기 전에 SSR과 CSR의 개념과 차이를 보고 가는것이 좋을듯하다. 2) SPA / MPA SSR과 CSR의 개념을 알기 전, SPA(Single Page Application)와 MPA(Multi Page Application)을 알고 가야한다. 우리가 흔히 웹 개발이라 생각하며 배우려는 React나 Vue와 같은 JS기반 프레임워크는 SPA를 개발하기 위함이다. 또한 MPA는 전통적인 웹 페이지 구성방식, 즉 고전적 방법이기 때문에 현재 배..

Node.js는 http 모듈과 웹과 관련된 기본적인 처리를 한다. 하지만 http 모듈만으로 제대로 된 웹 애플리케이션을 만드는 것은 굉장히 어렵기 때문에 express 모듈을 이용하여 http 모듈에 여러 기능을 추가하여 편리한 개발을 지원한다. 1) 웹 요청과 응답 1.1) 스트림 프로그램이 프로그램 외부와 통신할 때 사용함. 컴퓨터 속 흐르는 물길로 비유함. 스트림은 일종의 추상적인 개념으로 입출력 기기나 프로세스/파일 등 어디로 가는지, 어디로 나왔는지 상관없이 통일된 방식으로 데이터를 다루기 위한 가상의 개념이다. 따라서 스트림을 정의하기는 모호하다. 공식문서에서는 "스트리밍 데이터로 작업하기 위한 추상적 인터페이스" 라고 설명한다. 1.1*) 스트림 타입 타입 설명 예시 Readable 읽을..

1) process 객체의 속성/이벤트 process 객체는 프로세스 정보를 제공/제어할 수 있게 하는 객체. 1.1) process 객체의 속성 속성 설명 env 컴퓨터의 환경정보를 표시 version Node.js 버전 표시 versions Node.js와 종속된 프로그램 버전 표시 arch 프로세서의 아키텍쳐 표시 platform 플랫폼 표시 1.2) process 객체의 메서드 메서드 설명 exit([exitCode = 0]) 프로그램 종료 memoryUsage() 메모리 사용 정보 객체 리턴 uptime() 현재 프로그램의 실행시간 리턴 1.3) process 객체의 이벤트 이벤트 핸들러(이벤트 리스너)는 이벤트 발생 시 호출할 함수를 의미. 이벤트 설명 exit 프로세스 종료시 발생 uncau..