플머의 개발 연구소

이 포스트에서는 Node.js 설치와 Node.js를 이용하여 간단히 동작 테스트를 해본다.

Node.js 를 간략하게 설명하면 주로 백엔드(서버 사이드)를 개발하기 위한 하나의 플랫폼이다.

확장자에서 알 수 있듯이 자바스크립트로 개발을 하게 되며,

클라이언트(프론트엔드)에서 요청하는 이벤트에 따라 실시간으로 대응이 가능하다.

요즘 실시간으로 동작하는 웹게임들을 볼 수 있는데 그와 같은 것도 node.js를 이용했다고 보면 된다.

이제 설치 방법에 대해 알아보겠다.

먼저 https://nodejs.org/ 사이트로 이동한다.

위와 같은 화면을 볼 수 있는데 두가지 버전을 제공한다.

좌측에 있는 LTS 버전은 안정된 버전이라 보면 되며, 

우측의 Current는 현재의 최신 버전이라 보면 된다.

백엔드로 동작하는 서버는 안정성이 중요하므로 LTS 버전으로 다운 받을 것을 권장한다.

다운 받은 파일을 위와 같이 실행하여 설치한다.

그냥 쭉 Next를 눌러주면 된다.

설치를 모두 완료하였다면 명령 프롬프트를 띄우고 'npm -v' 를 입력해본다.

위와 같이 버전 정보가 나온다면 정상적으로 설치되었다고 볼 수 있다.

이제 설치는 모두 완료하였으므로 간단히 코드를 작성하여 Node.js를 테스트해볼 것이다.

먼저 명령 프롬프트에서 자신이 코드 작업할 경로로 이동한다.

(나는 C:\node_server\ 에서 작업하였다.)

그리고 아래와 같이 패키지 초기화 작업을 해줍니다.

위와 같이 'npm init' 명령을 입력 후 정보를 입력(입력하지 않을 경우는 계속 엔터)해준다.

그러면 package.json 파일이 생성되며, 이 파일은 앞으로 npm을 통해 필요한 여러 패키지를

설치할 때 의존성 관리를 위해 사용된다. 예로 다른 개발자에게 똑같은 환경 설정을 제공해주고자

할 경우 이 package.json 도 같이 넘겨주면 똑같은 환경으로 패키지를 설치할 수 있게 된다.

단순히 node.js 코드 테스트에는 필요없지만 결국에는 필요한 내용이므로 만들어보았다.

이제 node.js 동작 테스트를 위해 index.js 파일을 만들어보겠다.

이와 같이 'touch index.js' 명령으로 간단히 빈 파일을 만들 수 있다.

이제 편집을 해야하는데 나는 VS Code를 이용해서 편집하였다.

VS Code는 네이버에서 검색하여 다운받을 수 있다.

(메모장으로 편집하여도 상관없으나 VS Code가 깔끔하고 편하다.)

위와 같이 코드를 입력해주고 저장한다.

위에 보면 hostname에 0.0.0.0이라고 입력되어있는데, any라는 의미로 해석하면 된다.

127.0.0.1로 해서 로컬 서버를 열어주어도 되지만, 외부에서는 접속이 불가능하다.

이제 위 파일을 서버로 동작시켜보겠다.

위와 같이 명령 프롬프트에서 'node index.js' 를 입력해준다.

그럼 코드에서 입력해주었던 로그가 그대로 표시된다.

이제 웹브라우저에서 해당 페이지를 확인해볼 차례다.

위와 같이 http://localhost/ 로 접속해보면,

작성한 코드에서 응답으로 보내주는 'TEST'가 정상적으로 표시되었다.

간단하게 Node.js를 테스트해보았는데,

이것을 응용하여 많은 것들을 할 수 있으니 익혀두면 좋을 것 같다.

이 포스트에서는 안드로이드 스튜디오에 플러터를 설치해보기로 한다.

당연히 플러터를 설치하기 전에 기본적으로 안드로이드 스튜디오가 설치되어있어야 한다.

(필자는 안드로이드 스튜디오 3.4.2 버전이 설치되어있음)

먼저 https://flutter.dev/ 로 이동하여 'Get started' 버튼을 클릭한다.

그 다음 설치할 OS를 지정한다.(필자는 Windows에 설치할 것이므로 Windows를 선택했다.)

그 후에는 파일을 다운로드할 수 있는 버튼이 아래와 같이 생기며 해당 파일을 다운로드해준다.

모두 다운로드되었다면 압축을 풀어준다.

압축을 푼 내용 자체가 안드로이드 스튜디오 자체에서 참조할 SDK 경로가 된다.

(나는 C:\flutter\flutter 에 압축을 풀었다.)

압축 푼 경로로 이동하여 'flutter_console.bat' 을 실행한다.

위와 같이 해당 경로에서 'flutter doctor' 를 입력해준다.

이 명령어를 통해 어떤 부분이 부족한지를 확인할 수 있다.

보면 세가지의 문제가 있다. 

먼저 X 표시가 되어있는 플러터와 다트 플러그인 설치가 되지 않은 부분을 해결해보자.

안드로이드 스튜디오를 켠다. 프로젝트를 불러오기 전 Configure -> Plugins 을 선택한다.

(프로젝트를 불러온 상태라면 File->Setting->Plugins 로 들어가면 된다.)

아래의 창이 뜨면 flutter, dart를 각각 검색하여 설치해주기만 하면 된다.

위와 같이 Dart 플러그인을 설치했다면, 이제 flutter를 검색한다.

이제 플러그인은 모두 설치했으니 다시 flutter_console.bat 을 실행하여, 'flutter doctor' 를 입력해보자.

플러그인 부분은 해결이 되었고,

안드로이드 라이센스가 허가되어있지 않다고 나와있는 부분만 해결하면 된다.

이 부분은 위에 나와있는대로 해당 명령어만 쳐주면 해결된다.

위와 같이 입력 후 나오는 문구는 모두 y를 입력해준다.

그리고 다시 'flutter doctor'를 쳐보면 모두 해결되어있을 것이다.

위와 같이 안드로이드 스튜디오를 실행하면,

플러터 프로젝트가 생겨난 것을 확인할 수 있다.

이번에는 플러터에서 Stateful, Stateless의 차이점에 대해 알아보려고 한다.

이 두개의 개념은 플러터에서 상당히 중요한 위치를 차지하고 있고

이것을 모르고는 플러터 개발을 원활히 진행할 수 없다.

하지만 복잡하지는 않다.

Stateful

이것은 뜻 그대로 해석하면 '상태가 있는'을 의미하며,

의미 그대로 상태를 가질 수 있는 위젯을 사용하기 위해 사용한다.

예를 들면, CheckBox, Slider 등의 위젯이 있다.

CheckBox를 예로 들면 체크, 체크안함 이 두가지 상태를 갖고 있으며 사용자의

액션에 따라 상태가 변하게 된다. 즉, 이러한 상태를 갖는 위젯을 사용할 때는

Stateful을 사용해야 한다.

Stateless

위 Stateful과 반대로 '상태가  없는'을 의미하며,

사용자의 동작과 상호작용이 필요없는 위젯을 사용할 때 사용한다.

Container, Row, Column, Icon, Text 등이 있습니다.

이 위젯들은 사용자와 상호작용을 하지 않는 위젯들입니다.

CheckBox 같은 위젯과 달리 Container를 예로 들면

해당 위젯을 터치해서 무언가 반응을 해야할 필요가 없기 때문이죠.

여기서 어떤 분은 이런 의문을 품을 수도 있을 것 같습니다.

Text 내의 글자를 변경하게 된다면 그것은 Stateful에 해당되는 것이 아니냐?

Text 내의 글자를 변경하는 것은 사용자와 상호 작용을 하는 것이 아니므로

Stateful에 해당하지 않습니다. CheckBox와 Slider, Radio 등의 위젯처럼

사용자가 터치 등의 동작이 있을 때 반응해야 하는 위젯만이 Stateful 위젯에 해당됩니다.

왜 이렇게 나누어놓았는가?

우선 Stateful과 Stateless의 LifeCycle이 다릅니다.

당연히 상호작용이 필요없는 Stateless가 LifeCycle이 더 빠르게 동작하므로,

반응에 대한 비용을 절약할 수 있습니다.(Stateless가 속도가 빠름을 의미)

Stateful과 같이 상호작용이 필요한 부분은 사용자와 상호작용시마다

그 상태를 새로 업데이트해주어야 하기 때문에 LifeCycle 시간이 더 걸리게 됩니다.

즉, 더 효율적인 개발을 위해 위와 같이 나누어진 것이라고 보시면 되겠습니다.