[DSC] Node.js와 React를 이용한 웹플랫폼 제작하기 - 1주차

dojun527·2020년 5월 8일
9

처음 DSC에 들어와서 하는 활동입니다.
열심히 하겠습니다!!

1주차 목표

  • 자바스크립프 사용하는 이유

  • 세션에 사용될 핵심적인 문법

  • 깃허브 프로젝트 제작하기

  • 비주얼 스튜디오 코드 설치하기

  • 노드 설치하기

  • 노드 콘솔 실행하기 (Hello World! 출력)

  • 노드로 간단한 서버 만들어보기


자바스크립트 사용하는 이유

Node.js의 등장으로 이전에 브라우저에서만 동작하던 자바스크립트가 웹 브라우저를 벗어나 서버 사이드 어플리케이션 개발에서도 사용되는 범용 프로그래밍 언어가 되었습니다.
자바스크립트는 크로스 플랫폼을 위한 가장 중요한 언어로 주목받고 있습니다. 웹은 물론 모바일 하이브리드 앱, 서버 사이드(Node.js), 데스크톱, 머신러닝(TensorFlow.js)등으로 세계에서 가장 인기있는 프로그래밍 언어입니다.

자바스크립트의 간단한 문법

기본적인 문법은 여기를 참고하면 됩니다.

자바스크립트의 큰 특징으로는 싱글스레드를 기반으로한 Event Driven I/O 방식을 사용하고 있다.

  • 스레드(Thread) : 프로세스 내 실행 단위. 하나의 경우 싱글 스레드, N개일 경우 멀티 스레드라고 합니다.
  • 사건 기반 프로그래밍(Event-driven programming) : 프로그램의 흐름을 사건의 발생에 따라서 제어하는 프로그램밍 패턴입니다.


만약 두 작업을 처리한다고 했을때, 싱글 스레드는 한 작업을 마친 후에 다른 작업을 시작하지만, 멀티 스레드는 짧은 시간동안 2개의 스레드가 번갈아 가면서 작업을 수행해서 동시에 두 작업이 처리되는 것과 같이 느끼게 해줍니다.

그리고 자바스크립트는 비동기 처리 방식으로 동작한다.

자바스크립트의 비동기 처리란 특정 코드이 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다.
간단하게 설명해서, 동기적인 방식일이 끝났을 때 다음 일을 처리하는데, 비동기적 방식일을 동시에 처리하는 것을 뜻합니다.(정확히는 일을 동시에 처리하는 것이 아닌 일 단위를 큐에 넣어서 빠르게 바꿔가면서 처리한다.)

여기서 제가 이해가 안됐던 부분은 싱글스레드이면서 비동기 처리 방식으로 동작한다는 점이였습니다.
싱글스레드는 한순간에 하나의 작업밖에 못한다는 것인데 잘못 이해해서 하나의 작업이 끝날때 까지 다른 작업을 못하는 줄 알고 비동기 처리 방식의 동시에 일을 처리한다는 내용과 상충되어 이해를 하지 못했습니다.
(이해하는데 도움을 주신 김동근님께 감사의 인사를,,)

간단한 예시 코드를 통해 살펴보겠습니다.

function callback(){
    setTimeout(function(){
        console.log('hello world!');
    }, 1000);

    console.log('안녕 월드! ');
}

코드를 보면 hello world가 위에 있으니깐 먼저 실행될 것 같지만 실제 결과를 보면 아래와 같습니다.

안녕 월드!
hello world!

왜 이런 결과가 나오는 걸까?
이것이 자바스크립트의 비동기 개념입니다.

setTimeout이라는 함수가 있는데, 의도적으로 실행을 지연하는 역할을 합니다.
1000(ms)라는 값을 줌으로써, 1초뒤에 실행하게 됩니다.

그래서 출력이 위와 같이 나오게 되는 것입니다.


깃헙 프로젝트 제작하기

정리가 잘되어 있는 블로그와 유튜브 영상를 참고하였습니다.

GitHub 프로젝트 관리
Git Bash이용하여 관리

정리한 깃헙주소

Visual Studio Code 설치하기

Visual Studio Code는 여기로 가서 다운받으시면 됩니다. (비주얼 코드도 일렉트론이라는 JavaScript 프레임워크로 되어 있습니다.)

VSCode 익스텐션 중에 코드를 정렬해주는 Formatter는 크게 PrettierBeautify가 있습니다.
Prettier코드를 강제적으로 변경을 시킨다면 Beautify좀더 자유롭게 놔두는 편입니다.
자신만의 코드 작성 규칙이 있으면 Prettier가 조금 불편할 수 도 있는데, 코드를 항상 일정하게 정렬을 시켜주므로 여러 사람이 한 프로젝트를 같이 코딩을 해야 한다면 꼭 필요한 익스텐션입니다.

앞으로는 프로젝트를 혼자서보다는 여러 사람과 같이 하게 될 일이 더 많을 것이므로 저는 Prettier를 설치하겠습니다.

설치 방법은 아래의 순서대로 하면 됩니다.

  1. 좌측의 아이콘 중 익스텐션 아이콘을 선택합니다.
  2. 검색창에 prettier를 검색합니다.
  3. 검색 결과 중 첫줄에 있는 Prettier-Code-formatter를 선택합니다.
  4. 그리고 install

모든 회사마다 코딩 컨벤션(규격화된 코딩 규칙)이 있는데, 자바 스크립트는 에어비앤비의 코딩 컨벤션이 가장 유명합니다. (틈틈히 공부하기)


노드 설치하기

노드는 여기에서 설치하면 됩니다.

위와 같이 두가지 버전이 존재합니다.
LTS버전은 Long Term Support의 줄임말로 오랜 기간 지원이 가능하다는 말입니다. 그만큼 안정적이고 신뢰도가 높습니다.

Current는 아직 개발이 진행중인 버전입니다. 때문에 해당 버전에 존재하는 기능이 패치를 통해 사라지거나 변경되어 새로 코드를 작성해야할 가능성이 존재하는 버전입니다.

저는 안정적인 LTS로 다운받았습니다.
설치를 다 하고 cmd창을 켜서 node 설치를 확인하기 위해 node -v를 입력하면 다운받은 버전이 나오고 설치가 완료됨을 알 수 있습니다.


Hello World 실행해보기

설치한 nodejs를 실행시켜 console.log를 통해 Hello world를 출력해봅니다.

조금 허무하지만 위와 같이 Hello world를 출력할 수 있습니다.
(이제 나도 노드 개발자,,,?)


노드로 간단한 서버 만들어보기

노드는 기본적으로 서버를 제작하기 위해 만들어졌습니다.

http서버가 있어야 웹 브라우저의 요청을 처리할 수 있으므로 http모듈을 사용합니다.
http모듈에는 createServer 메서드가 있습니다.
createServer의 콜백 부분을 보면 req(요청에 관한 부분)와 res(응답에 관한 정보) 매개변수가 있습니다.
그리고 createServer 메서드 뒤에 listen메서드를 붙여서 클라이언트에게 공개할 포트 번호와 포트 연결 완료 후 실행될 콜백 함수를 넣어줍니다.

이제 직접 한번 서버를 만들어보겠습니다.
VSCode로 들어가서 원하는 위치에 servertest.js를 만듭니다. 그리고 아래와 같이 코드를 작성합니다.
그리고 인터넷 브라우저를 열어 http://localhost:8080 에 접속하면 아래와 같이 실행화면이 뜹니다.

(비주얼 스튜디오를 사용할 때 주의점? 으로 만약 코드를 변경하고 terminal에서 실행시키려면 변경된 코드를 저장하고 실행시키기!!)

끝~~~

profile
Better late than never

4개의 댓글

comment-user-thumbnail
2020년 5월 9일

포스팅 잘봤습니다 다음글 기대할게요 ㅎㅎ

1개의 답글
comment-user-thumbnail
2020년 5월 15일

정리 잘 하셨네요! 잘봤습니다

1개의 답글