• 코드

use board;

DELIMITER $$

CREATE PROCEDURE testDataInsert()

BEGIN
    DECLARE i INT DEFAULT 1;

    WHILE i <= 120 DO
        INSERT INTO board(title, content)
            VALUES(concat('제목',i), concat('내용',i));
        SET i = i + 1;
    END WHILE;
END$$

DELIMITER $$


call testDataInsert;

• 실행 결과

아직 미숙한 개념이 많지만, 성장할 수 있는 기회가 많은 것이라 긍정적으로 생각하며 꾸준히 공부해나가야겠다.

1. HTTP METHOD

• 종류 : get, post, put, delete
• get, post 차이
  • get : 클라이언트에서 서버로 어떠한 리소스로부터 정보를 요청하기 위해 사용되는 method. 즉, 서버에서 어떤 데이터를 가져와서 보여줄 때, 값이나 내용을 바꾸지 않는 경우에 사용함.
  • post : 리소스를 생성/업데이트하기 위해 서버에 데이터를 보내는데 사용되는 method. 서버 상의 데이터 값이나 상태를 바꾸기 위해 사용함.
  • 주요 차이점으로는 get은 브라우저에 기록되지만 post는 기록되지 않음.

2. HTTP 상태 코드

• 200 : OK, 요청이 성공적으로 되었음. 정보는 요청에 따른 응답 반환
• 404 : 서버는 요청받은 리소스를 찾을 수 없음. 브라우저에서 알려지지 않은 URL을 의미함.
• 503 : 서버가 요청을 처리할 준비가 되지 않았음. 유지 보수를 위해 작동이 중단되거나 과부하가 걸린 서버일 경우 발생함

3. 프로세스와 스레드의 차이

• 프로세스는 자원을 할당받는 작업의 단위이며, 스레드는 프로세스가 할당받은 자원을 이용하는 실행의 단위.

4. RDB와 NoSQL의 차이

• RDBMS는 정해진 스키마가 존재하고, NoSQL은 정해진 스키마가 없다는 것이 큰 차이임.
• NoSQL은 정해진 스키마가 없을 때 데이터 구조 변화가 자유롭고 데이터 분산이 용이하지만, 데이터 중복이 발생하거나 데이터 변경 시에 연산이 오래 걸리는 단점이 있음.

5. DB 인덱스 사용 시 장점

• DB의 인덱스를 잘 사용하는 것은 데이터를 검색하는 시점에 성능 차이에 큰 영향을 미침.
• 대용량 데이터를 담고 있는 DB 테이블에서 필요한 데이터를 빨리 찾기 위해 인덱스가 필요함.

6. 데이터베이스 정규화에 대하여 설명해주세요.

• 데이터베이스의 중복을 없애는 작업을 의미함.
• 무결성 유지 및 DB 저장 용량 절감 효과를 목표로함.
• 실무에서는 보통 1,2,3 정규화 까지만 다룸.
  • 1정규화 : 테이블의 컬럼이 원자값(Atomic Value, 하나의 값)을 갖도록 테이블을 분해하는 것
  • 2정규화 : 제1 정규화를 진행한 테이블에 대해 완전 함수 종속을 만족하도록 테이블을 분해하는 것. 기본키의 부분집합이 결정자가 되어선 안된다는 것을 의미함.
  • 3정규화 : 제2 정규화를 진행한 테이블에 대해 이행적 종속을 없애도록 테이블을 분해하는 것
  • 이행적 종속이라는 것은 A -> B, B -> C가 성립할 때 A -> C가 성립되는 것을 의미

7. 비정규화는 무엇인가요?

• 정규형에 부합하는 테이블을 정규형을 지키지 않게 바꾸는 걸 의미함.(중복허용)
• 정규화 시 테이블이 여러 개로 나눠지므로, 조인 연산을 사용하는 경우가 빈번해짐.
• 일반적으로 조회에 대한 처리 성능이 중요하다고 판단될 때 부분적으로 비정규화를 고려하게 된다

8. Database Injection에 대해 아는대로 이야기해주세요.

9. ORM이 편하고 좋은데, SQL을 알아야만 할까요?

10. RDBMS와 NoSQL은 언제 사용하는 것이 좋을까요?

11. node가 싱글스레드인데도 여러가지 병렬 작업이 되는 이유를 알려주세요.

1. 인터프리터가 비동기 함수를 만나면, 즉시 Call Stack에서 지워버린다.

2. 이 비동기 함수는 Web API로 넘어간다.

3. 비동기 함수는 Web API에 담겨있다가, 타이머나 로드 등이 완료되면 Callback Queue로 보내진다.

4. Event Loop는 Call Stack과 Callback Queue 사이에서 Call Stack이 비어있는지 주시한다.

5. 모든 함수의 실행이 완료되고 Call Stack이 비워지면, Event Loop는 Callback Queue에 담겨있는 함수들을 먼저 들어온 순서대로 Call Stack으로 넘겨준다.

   12. 세션과 쿠키의 차이를 설명해주세요.

   13. http와 https의 차이를 설명해주세요.

   14. Google.com을 쳤을 때 벌어지는 일을 설명해주세요.

   15. 알고있는 자료구조에 대해 설명해주세요.

   16. 큐와 스택의 차이에 대해 설명해주세요 & 언제 큐를 사용하는 것이 좋고, 언제 스택을 사용하는 것이 좋을까요?

   17. 리팩토링에 대하여 알고 계신가요?

   18. OOP에서 지향하는 바가 무엇일까요?

   19. JOIN에 대해서 설명해 주세요.

   20. ORM이란 무엇인가요?

   21. hoisting이란?

   22. TDZ란 무엇인가요?

   23. Closure 함수란 무엇인가요?

   24. 실행컨텍스트란 무엇인가요?

   25. Node.js 란 무엇이며, 사용하는 이유는 어떻게 되나요?

   26. Express.js 란 무엇인가요?

   27. Node.js 는 싱글스레드? 멀티스레드?

• NodeJS 는 두 개의 스레드로 구성되어 있다.

1. 이벤트 루프 (메인 스레드)
2. Thread Pool (미리 생성된, 비어 있는 스레드 그룹이다. Thread Pool 의 크기를 미리 정해놓으면 반복적인 스레드 생성/삭제 절차를 줄임으로써 프로세스의 성능을 개선할 수 있다. Nodejs 의 Thread Pool 기본값은 4 개이다)

• Nodejs 는 이벤트 루프에서 작동하다가, fs 나 해싱 등의 작업이 필요한 경우 이 작업을 Thread pool 로 던져주어 새로운 thread 를 사용한다.
• Nodejs는 이벤트 루프가 싱글 스레드에서 동작 한다는 것이지 내부적으로 스레드풀을 두어 I/O 작업에 스레드를 사용할 수 있도록 한다. 이를 통해 병렬적으로 작업을 진행할 수 있는 것입니다. 결과적으로 Nodejs 는 '멀티 쓰레드' 이다.

* 참고 사이트

1. https://zero-base.co.kr/event/media_BE_school_qna#100
2. https://velog.io/@yukina1418/%EC%B5%9C%EA%B7%BC-%EB%A9%B4%EC%A0%91%EC%9D%84-%EB%8B%A4%EB%8B%88%EB%A9%B4%EC%84%9C-%EB%B0%9B%EC%95%98%EB%8D%98-%EC%A7%88%EB%AC%B8%EB%93%A4

프로젝트를 생성하기 전에 환경설정을 해줘야 하는데, 그 전에 준비해야 할 사항들이 있다.

step 0. 사전 준비

사전 준비물

1. Java 11 설치하기
2. IntelliJ(Eclipse 설치해도 되지만 해당 강의는 IntelliJ로 진행)

step 1. 스프링 프로젝트 생성

다음은 스프링 부트를 활용하여 프로젝트를 생성할 것이다. 아래 주소로 들어가서 생성해 보자!

https://start.spring.io/

• Project : Gradle
• Language : Java
• Spring Boot : 최신 정식 버전으로 설치 (단, SNAP SHOT은 미정식 버전이니 주의)
• Project Metadata : Group, Artifact 에 원하는 ID 기입
• Java : 11
• Dependencies : Spring Web & Thymeleaf 2개 설정

step 3. 실행하기

• 생성된 프로젝트 내 hello.hellospring/service 내에 HelloSpringApplication 을 실행시켜준다.

• 다음과 같이 콘솔 창에 SPRING 글씨가 잘 보이면 정상적으로 프로젝트가 생성된 것이다.

• 콘솔 창에 자세히 보면 "Tomcat", "8080" 이와 같은 글씨들이 보이는데, http://localhost:8080/ 접속해서 실제 로컬 서버에서 구동중인 페이지를 확인할 수 있다. Tomcat은 WAS(웹 애플리케이션 서버) 인데 다음 글에서 다뤄보겠다.

Referenced by 김영한의 스프링 입문

스프링 프레임워크(영어: Spring Framework)는 자바 플랫폼을 위한 오픈 소스 애플리케이션 프레임워크로서 간단히 스프링(Spring)이라고도 한다. 동적인 웹 사이트를 개발하기 위한 여러 가지 서비스를 제공하고 있다. 대한민국 공공기관의 웹 서비스 개발 시 사용을 권장하고 있는 전자정부 표준프레임워크의 기반 기술로서 쓰이고 있다. 특히, 국내는 '자바 공화국' 이라 불릴 정도로 대다수의 기업들이 Java언어 및 Spring 프레임 워크를 사용한다.

• 참고 : 언어별 웹 개발 프레임 워크
• Python - Django Javascript - Node.js Java - Spring*

Spring 프레임워크 특징

1. 제어반전(IoC: Inversion of Control) 기반

• 컨트롤의 제어권이 사용자가 아닌 프레임워크에 있어서 필요에 따라 스프링에서 사용자의 코드를 호출한다.

2. 의존성 주입(DI: Dependency Injection) 기반

• 각각의 계층이나 서비스들 간에 의존성이 존재할 경우 프레임워크가 서로 연결한다.

3. 관점 지향 프로그래밍(AOP: Aspect-Oriented Programming) 기반

• 트랜잭션, 로깅, 보안과 같이 여러 모듈에서 공통적으로 사용하는 기능의 경우 해당 기능을 분리하여 관리 가능하다.

Spring Boot?

스프링만을 사용하여 웹 애플리케이션을 만들어 보았다면 상당히 복잡한 설정들로 인해 많은 어려움을 겪었을 것이다. 스프링부트는 스프링의 복잡한 설정을 자동화하고 단순화 하여 누구나 스프링을 쉽게 사용할 수 있게 만들었다.

Spring Boot 특징

• Tomcat 같은 웹 서버를 내장해서 별도의 웹 서버를 설치하지 않아도 됨
• 단독으로 실행할 수 있는 스프링 어플리케이션을 쉽게 생성
• WAS에 배포하지 않고도 실행할 수 있는 JAR파일로 Web Application을 개발 가능
• SQL 인젝션, XSS(cross-site scripting), CSRF(cross-site request forgery), 클릭재킹(clickjacking)과 같은 보안 공격을 기본으로 막아 줌

• Model View Controller
• 소프트웨어 설계와 관련된 디자인 패턴
• MVC 이용 웹 프레임워크 PHP, Django, Express, Angular 등등

MVC 장단점

장점

• 패턴들을 구분해 개발한다.
• 유지보수가 용이하다.
• 확장성이 높다.
• 협엽에 용이하다.

  단점

• 완벽한 의존성 분리가 어렵다.
• 설계 단계가 복잡하다.
• 설계 시간이 오래 걸린다.
• 클래스가 많아진다.

MVC 흐름

• Model : 데이터를 처리하는 부분
• View : UI와 관련된 것을 처리하는 부분(사용자에게 보여지는 부분)
• Controller : View와 Model을 연결해준느 부분

MVC 폴더 구조

index.js

const router = require("./routes");
app.use('/', router);

• 라우터를 호출하는 코드를 작성해줌

routes/index.js

var express = require("express");
var controller = require("../controller/CVisitor");
const router = express.Router();

router.get("/", controller.main);

module.exports = router; // index.js를 모듈로 사용하겠다 선언

• 경로를 controller 와 연결지어 사용할 수 있음

Controller/CVisitor.js

const Test = require("../model/Test"); //controller - model 연결

exports.main = (req, res) => {
   var hi = Test.hello();
  res.send(hi);
}

model/Test.js

exports.hello = function() {
  return "Welcome";
}

• Controller 와 Model 간 연결.
• 경로와 연결된 함수 내용을 정의함.
• 경로와 연결되는 함수이기에 request 객체와 response 객체를 사용 가능

• 파일 업로드를 위해 사용되는 미들웨어임.
• express로 서버를 구축할 때 가장 많이 사용되는 미들웨어임.

🛠 multer 설치하는 방법

npm install multer

위와 같은 명령어를 터미널에 입력해주면, multer 미들웨어가 설치됨.

✅ 코드 예시

app.js

const multer = require("multer");
const path = require("path")
const upload = multer({
    storage: multer.diskStorage({
        destination(req, file, done) {      // 목적지 지정 함수
            done(null, 'uploads/');
        },
        filename(req, file, done) {         // 파일 지정 함수
            const ext = path.extname(file.originalname); // " .확장자 " 불러오는 메소드
            done(null, path.basename(file.originalname) + ext);
        },
    }),
    limits: { fileSize: 5 * 1024 * 1024 },  // 업로드 파일 용량 제한
})

• storage : diskStorage 메소드를 호출해서 storage를 생성할 수 있음.
  • destination : 파일이 업로드 될 경로를 설정해줌
  • filename
    1. 업로드될 파일명을 지정해줌
    2. path 메소드를 통해 클라이언트에서 업로드한 파일명 + 확장자명 그대로 설정 가능

// 업로드 경로 사용을 위해 선언
app.use('/uploads', express.static('uploads'));

• uploads 라는 가상의 static 저장소 경로를 설정해줌

// upload.single : 한 번에 한장 업로드
app.post("/upload", upload.single("userfile"), (req, res) => {
    res.send(req.file);

})

// upload.array : 한 번에 여러장 업로드
app.post("/upload", upload.array("userfile"), (req, res) => {
      console.log(req.files);
    res.send("업로드 성공!");
})

// upload.fields : 한 번에 여러 인풋 값에서 업로드
app.post("/upload", upload.fields([{ name: "userfile" }, { name: "userfile1" }]), (req, res) => {
    console.log(req.files);
    res.send("업로드 성공!");
})

• upload.single : 한 개 input 값에서 한 장 업로드 시 사용
• upload.array : 한 개 input 값에서 여러 장 업로드 시 사용
• upload.fields : 여러 개 input 값에서 여러 장 업로드 시 사용
• 각 upload 메소드 괄호 내에는 <input> 태그의 name 속성 값을 넣어주어야함.
• 예를들어 <input type="file" name="userfile" id="dynamic_file"> 다음과 같이 설정해주었다면, upload.single("userfile") 이와 같이 메소드 사용을 해야함.

fileUpload.ejs

  <fieldset>
    <legend>개인 정보</legend>
    <form>
      아이디: <input type="text" name="ID"><br>
      비밀번호: <input type="password" name="password"><br>
      이름: <input type="text" name="name"><br>
      나이: <input type="text" name="age"><br>
      프로필 사진:
      <input type="file" name="userfile" id="dynamic_file"><br>
      <button type="reset">리셋</button>
      <button type="button" onclick="fileUpload();">회원가입</button>
      <img src="" alt="">
    </form>
  </fieldset>

• 파일선택 버튼으로 프로필 사진 선택 후 회원가입 버튼을 누를 시 동적으로 사진을 프로필 하단부에 출력
• 미리 만들어놓은 <img> 태그에 src 속성만 추가해서 화면에 출력

    function fileUpload() {
      var form = document.querySelector("form");
      const formData = new FormData();      // 파일 담아 전달할 form 생성
      const file = document.getElementById("dynamic_file");
      formData.append("userfile", file.files[0]);    // 전달할 파일 form에 추가

      axios({
        headers: {
          "Content-Type": "multipart/form-data",
        },
        url: "/upload",
        method: "post",
        data: formData          // formData 전송
      }).then((response) => {
        $("img").attr("src", response.data.path); // 응답으로 온 이미지 경로를 통해 화면에 이미지 표시
      })
    }

• res.send(req.file) 서버에서 온 응답을 axios 내 promise 형식을 통해 전달 받은 뒤, 해당 파일의 경로인 response.data.path 를 이미지 태그에 추가해서 화면에 보여줌.

• <input type="submit"> 이나 <button type = "submit"> 을 이용해 전송
• 전송 시 페이지가 이동이 되는데 이러한 방식을 정적인 폼전송 방식이라고 한다.

📞 비동기 HTTP 통신

• 아마 대부분의 사람들이 로그인 시 틀렸을 때 페이지는 이동하지 않고 위의 예시의 빨간 글씨처럼 글자만 생기는 것을 본 경험이 있을 것이다.
• 이와 같은 방식을 비동기 HTTP 통신을 활용한 동적인 폼전송이라고 할 수 있다.

1. 동기 방식

• 한번에 하나만 처리하며, 페이지를 아예 이동한 후 서버가 데이터를 처리함.

  2. 비동기 방식

• 서버에 데이터를 보내고 응답을 기다리는 동안 다른 처리가 가능 !
• 폼의 데이터를 서버와 dynamic 하게 송수신 하는 것
• dynamic : 웹 문서가 정적으로 멈춰있는 것이 아니라 일부 내용이 실시간으로 변경되는 것

🧐 비동기 HTTP 통신 방법

✅ AJAX ✅ AXIOS ✅ FETCH

1. AJAX

• Asynchronous Javascript And XML
• 자바스크립트를 이용해 클라이언트와 서버 간에 데이터를 주고 받는 비동기 HTTP 통신

  장점

• JQuery를 통해 쉽게 구현 가능
• Error, Success, Complete의 상태를 통해 실행 흐름을 조절할 수 있다.

단점

• JQuery를 사용해야만 간편하고 호환성이 보장된다.(xml 사용은 복잡)
• Promise 기반이 아니다.

예시

$.ajax({
    url: "/ajax",
    type: "POST",
    data: data,
    success: function(data){
          console.log(data);
    }
})

2. AXIOS

• Node.js와 브라우저를 위한 Promise API 활용
• 비동기 HTTP 통신이 가능, return이 Promise 객체로 온다.

  장점

• Promise 기반으로 만들어져 사용이 편리함.
• 브라우저 호환성이 뛰어남.

단점

• 모듈 설치 or 호출을 해줘야 사용이 가능함.

예시

var data = {
    name : "홍길동",
      gender : "남자",

}

axios({
    method: "post",
    url: "/axios",
    data: data // get -> `params: data`
}).then((response) => {
    console.log(response.data);
});

3. FETCH

• ES6부터 들어온 Javascript 내장 라이브러리
• Promise 기반

  장점

• Promise 기반으로 만들어져 사용이 편리함.
• Javascript 내장 라이브러리이므로 별도의 import 필요가 없음.

단점

• 최신 문법
• Timeout 기능이 없음.
• Axios에 비해 상대적으로 기능이 부족함.

예시

// fetch - get 방식
var urlQuery = `?name=${form.name.value}&gender=${form.gender.value}`;

fetch("/fetch" + urlQuery, {
    method: "get",
})
.then((response) => response.json()) // AXIOS와 다르게 json 형태로 파싱.
// .then((response) => response.text()) : res.send("문자열") 일 경우
.then((data) =>{
    console.log(data);
})

// fetch - post 방식
fetch("/fetch", {
    method: "post",
      headers: {
          "Content-Type": "application/json",
    },
    body: JSON.stringify(data)
})
.then((response) => response.json()) // AXIOS와 다르게 json 형식을 거침.
.then((data) =>{
    console.log(data);
})

Body-parser

• 데이터를 쉽게 처리할 수 있도록 도와주는 라이브러리
• post로 정보를 전송할 때 body로 받을 수 있게 도와준다.
• 아래와 같이 app.js 에 선언해주면 된다.

  app.use(express.urlencoded({extended: false}));
  app.use(express.json());

📔 Form

• 입력된 데이터를 한번에 서버에 전송하기 위해 사용됨.
• 속성 : action, name, target, method
• 구성요소 : input, select, textarea, button 등

1. Form 전송방식

✅ GET

• 데이터를 URL의 뒤에 ?를 붙여 전달

• 전송량에 제한이 있고, 사용자에게 데이터가 노출됨. URL 형식에 맞는 인코딩 필요

• 예시(GET)

✅ POST

• HTTP POST 요청은 클라이언트에서 서버로 전송할 때 추가적인 데이터를 body에 포함.
• 전송량에 제한이 없고, 사용자에게 데이터가 보이지 않음. (암호화는 안됨) 

2. Form 사용방법

✅ method

• HTML의 <form> 태그에 method="POST" 또는 method="GET"(기본값) 속성을 설정하여 사용할 수 있음.

  ✅ action

• form 으로 데이터 전송 시 데이터가 도착할 URL을 나타내줌
• ex) "/get" 으로 설정 시 localhost:8000/get 으로 데이터 전송

  ✅ button type

• button : 해당 버튼이 클릭할 수 있는 버튼임을 명시하며, 페이지를 이동하지 않고 보통 onclick 함수 선언 시 사용
• submit : <form> action 속성에 지정한 위치로 페이지를 이동
• reset : 폼 데이터를 초기화 하는 버튼

3. Form 데이터 전송(Views/main.ejs)

<body>
  <!-- GET 요청 -->
  <div class="get">
    GET 요청하기
    <form method="get" action="/get"> 
      <input type="text" name="name">
      <input type="text" name="gender">
      <button type="submit">전송</button>
      <button type="reset">리셋</button>
    </form>
  </div>

  => input 값으로 홍길동, 남 을 입력해주면 다음과 같은 결과가 URL에 나타남.
  => localhost:8000/get?name=홍길동&gender=남

  <!-- POST 요청 -->
  <div class="post">
    POST 요청하기
    <form method="post" action="/post">
      <input type="text" name="name">
      <input type="text" name="gender">
      <button type="submit">전송</button>
      <button type="reset">리셋</button>
    </form>
  </div>
</body>


=> post는 URL에 개인 정보를 포함하지 않으므로 다음과 같이 나타남.
=> localhost:8000/post

4. 전송된 Form 데이터 받기(app.js)

app.get("/get", (req, res) => {
console.log(req.query);
});

app.post("/post", (req, res) => {
console.log(req.body);
});

• main.ejs(클라이언트) 에서 요청한 데이터를 app.js(서버) 에서 다음과 같이 받아줌.
• get 방식으로 전송한 데이터는 req.query로 받고, post 방식은 req.body로 받음.

• <% %> : 흐름 제어문
• <%= %> : 변수 사용 시 활용
• <%-include('view의 상대주소') %> : 다른 ejs 파일을 불러옴

❌ 주의사항

• ejs 문법 사용 시에는 반드시 한줄에 작성해야함 ❗️

1. <% %>

• 예시

  <!-- 잘못된 사용법 -->
  <% for (var i=0; i < 10; i++) {
  <span> ejs test </span>
  } %>
  

<% for (var i=0; i < 10; i++) { %> ejs test <% } %>

- **실행결과**
![](https://velog.velcdn.com/images/hola_dev/post/4e0ab3d9-d3a1-404b-8dc9-47baaf965b0a/image.png)

<br>

#### 2.<%= %>

- **예시**
```html
  <% for (var i=0; i < 10; i++) { %>
  <span>no.<%=i %> </span>
  <% } %>

• 실행결과

3.<%-include %>

• 예시

  <!-- test.ejs -->
  <body>
  <div>안녕하세요 !</div>
  <%-include("test1.ejs") %>
  </body>

<!-- test1.ejs -->
<div>반가워요 !</div>

• 실행결과

• 템플릿 엔진 : 문법과 설정에 따라 파일을 html 형식으로 변환시키는 모듈
• ejs : Embedded Javascript 의 약자로, 자바스크립트가 내장되어 있는 html 파일이며, .ejs 라는 확장자를 가짐

✅ EJS 템플릿 사용하기

npm install ejs

• 다음과 같은 명령어를 통해 ejs를 설치해준다.

  app.set("view engine", "ejs");

• 위의 명령어를 통해 ejs 템플릿을 사용할 수 있다.

✅ 사용 예시

// express 인스턴스 생성 및 app에 저장
const express = require("express");
const app = express();

// 8000번 포트로 지정
const port = 8000;

// 화면 엔진은 ejs로 설정한다.
app.set("view engine", "ejs");

// Express에서 정적파일 제공
app.use('/static', express.static('static'));

// test.ejs 실행
app.get("/", (req, res) => {
    res.render("test");
})

// 지정된 포트로 로컬서버 열기
app.listen(port, () => {
    console.log("server open", port);
})

• app.js 파일 생성하여 위 내용을 기입하면, express 모듈과 ejs 템플릿을 사용가능
• views 폴더에 만든 test.ejs 파일을 불러와서 localhost에서 실행해준다.
• 실행 시 node app.js 라는 명령어를 해당 디렉토리 터미널에서 실행
• 웹브라우저에서 localhost:8000 에 들어가면 정상적으로 실행되는 것을 확인 가능함.

• Node.js에서 모듈이란 필요한 함수들의 집합을 의미함.
  ### 모듈 사용방법

const test_module = require(”module_name”)👀

• 다음과 같은 변수 선언을 통해 모듈을 선언할 수 있음
  ## 👀 Express 모듈이란?
• 웹 서버를 생성하는 것과 관련된 기능을 담당하는 프레임워크
• 웹 애플리케이션을 만들기 위한 각종 메소드와 미들웨어 등이 내장되어 있다.
• http 모듈만 사용해서 서버를 구성할 수도 있지만, 이 경우엔 직접 설정해야 하는것들이 많아짐
• 이로 인해 사용하는 것이 바로 Express 모듈 !!

1. Express 설치하기

npm install express

• package.json 의 dependencies에 express가 기록됨

2. Express 사용하기

const express = require('express');
const app = express();
const port = 8000;

app.get('/', (req,res) => {
res.send("hello express");
});

app.listen(port, () => {
console.log( port + ' is Open..')
});

• express() : epxress 모듈이 export 하는 최상위 함수로, express application을 만듦
• app 객체 : express() 함수를 호출함으로써 만들어진 express application

npm init

• 다음 명령어를 터미널에서 실행시켜주면 여러가지 설정 값들이 나오는데, 특별히 설정할 것이 없으면 계속 Enter를 쳐서 기본값으로 셋팅해주면 된다.

  npm init —yes
  npm init -y

• 기본값으로 바로 셋팅하고 싶으면 위 명령어 중 하나를 선택하면 굳이 Enter를 연타하지 않고도 바로 npm을 사용할 수 있다.

• 완료되면 다음과 같이 package.json 파일이 생긴 것을 확인할 수 있다.

➕ 모듈 설치하기

npm install [패키지명]

• 다음과 같은 명령어를 통해서 원하는 모듈을 설치할 수 있다.
• 모듈 설치 여부는 package.json 파일 내 "dependencies"에서 확인 가능

1. 로컬에서 설치하기

• https://nodejs.org/ko/
• Node.js 공식 사이트에 접속하여 원하는 버전을 다운로드 받는다.

2. 서버에서 설치하기

apt-get install nodejs
apt-get install npm

• 터미널에서 다음과 같은 명령어를 입력해 nodejs와 npm을 설치해준다.

  node -v
  npm -v

• 다음과 같은 명령어를 활용해 설치가 제대로 되었는지 확인해준다.
• 아래와 같이 정상적으로 버전이 나오면 성공 !

🖐 npm 이란?

• Javascript로 개발된 각종 모듈의 설치, 업데이트, 구성, 제거 과정을 자동화하여 관리해주는 기능
• Node Package Manager (https://www.npmjs.com)

• 구글 크롬의 자바스크립트 엔진(V8 Engine)에 기반해 만들어진 Javscript 런타임
• 이벤트 기반, 비동기 I/O 모델을 사용해 가볍고 효율적
• npm 패키지는 세계에서 가장 큰 오픈 소스 라이브러리

👉 npm이란?

• Node Package Manager의 약어
• Javascript로 개발된 각종 모듈의 설치, 업데이트, 구성, 제거 과정을 자동화하여 관리해주는 기능을 함

🧐 Node.js 특징

👉 1. 자바스크립트 언어 사용

👉 2. Single Thread

• Single Thread 는 주어진 일을 하나씩 밖에 처리하지 못한다.
• 에러가 발생하여 처리하지 못하면 중단하기 때문에, 에러처리가 중요.
• 참고하기 좋은 글 > 싱글스레드와 멀티스레드의 차이

  👉 3. 비동기 I/O 방식

• 작업을 요청한 후 응답을 기다리지 않고 다른 활동을 한다.
• 장점 : 요청에 따른 결과가 반환되는 시간동안 다른 작업을 수행할 수 있다.
• 단점 : 동기식보다 설계가 복잡하다.

오늘날 우리 주변에는 정말 많은 형태의 핀테크 사업들이 존재하고 있으며, 우리들은 그러한 풍요로운 금융 기술의 수혜 속에 살고 있다고 생각한다. 하지만, 불과 5년전만 해도 핀테크 사업에 대해 회의적인 생각을 나타내는 전문가들이 많았다. 그 이유는 정부의 불필요한 규제와 스타트업 창업에 대한 기피 현상 등등이 있었다. 하지만, 시간이 흐른만큼 규제도 완화되고 스타트업 시장에 열풍이 불었던 탓인지 핀테크는 오늘날 없어서는 안될 중요한 사업으로 자리매김하게 되었다.

1. 핀테크란?

그렇다면 핀테크란 과연 무엇일까?

Finantial + Technology -> FinTech

위에서 보는것과 같이 금융(Finance)과 기술(Technology)의 합성어의 준말이다. 처음 해당 용어를 들었을때는 참 신기했다. 보수를 대표하는 업종인 금융과 진보를 대표하는 업종인 기술의 조화라니.. 참 아이러니했다. 아무튼, 핀테크는 또한 금융 서비스를 모바일 인터넷 환경으로 옮기는 것을 말한다. 이 때문에 스타트업을 찾기 힘든 분야였던 금융업에서도 스타트업이 나타나고 있다. 역시 이쪽 분야의 기술들이 그렇지만 빅데이터가 중요하며, 최근에는 블록체인 기술에 기반을 둔 기업도 점차 등장하고 있다. 블록체인의 중요성에 대해서는 추후 나올 예정이다.

2. 핀테크 사례

핀테크에는 정말 많은 업종들이 있다. 단순한 결제서비스에서 부터 대출, 주식, 송금, 자산관리 등 다양한 종류가 있다.

2-1 송금서비스 : 토스

토스(Toss) 는 2013년 8월에 설립된 대한민국의 핀테크 스타트업 비바리퍼블리카가 운영하는 종합 금융 플랫폼 겸 메신저로 간편 송금을 주 기능으로 한다. 과거 대한민국 은행 앱은 매우 불편하였다. 상대방에게 송금을 하기 위해서는 공인인증서와 보안카드는 필수였다. 이것을 해결한 것이 바로 토스의 간편송금 서비스이며, 이로 인해 송금 기능에 있어서 간편성과 신속성이 정말로 크게 향상되는데 기여하였다. 현재는 송금 기능 이외에도 자산관리 및 다양한 서비스들을 제공하고있다. 한국에서 가장 유망한 핀테크 기업 중 하나이며, 많은 개발자들이 가고자 하는 기업이기도 하다.

2-2 결제서비스 : 삼성페이

삼성페이(Samsung Pay) 는 삼성전자가 2015년 3월에 공개한 간편 결제 서비스이며, 세계 최초로 MST(Magnetic Secure Transmission)와 NFC를 동시에 지원하는 온/오프라인 핀테크 결제 플랫폼이다. 신용카드, 디지털 ID, 블록체인 계좌, 학생증, 차 키, 영화 및 공연 등의 입장권 티켓 서비스, 비행기 탑승권 등을 등록할 수 있으며, 등록된 정보를 홍채인식, 지문인식을 이용하여 쓸 수 있다. 또한 온라인에서도 결제 시 사용할 수 있는 디지털 페이먼트(Digital Payments) 기능을 제공하며, 교통카드 기능도 제공하여 휴대폰을 기기에 대기만 하면 편리하게 승하차가 가능하다.

2-3 크라우드펀딩 : 와디즈

와디즈(WADIZ) 는 2012년 5월 설립 이래 창업 리워드형 크라우드펀딩 뿐만 아니라, 투자형 펀딩부터 직접 투자까지 가능한 크라우드펀딩 플랫폼이다. 현재 규모, 프로젝트 건수, 중개 금액 면에서 국내 최대의 크라우드펀딩 기업이다. 와디즈의 ‘와디(WADI)’는 ‘사막이 흐르는 강’ 을 의미한다. 그런 이유로 와디즈(WADIZ)는 자금을 필요로 하는 많은 사람들에게 여러개의 ‘와디’가 되어 주겠다는 의미가 숨어있다. 스타트업은 물론 사회적기업, 프랜차이즈, 예술가 등 전통적인 금융시장으로부터 자금을 유치하기 어려운 이들은 현재 와디즈의 크라우드 펀딩을 통해 새로운 성장동력을 모색하고 있다. 또한, 영어로 ‘왓이즈(what is)’라는 의미도 있어 새롭고 혁신적인 제품을 소개하는 회사의 정체성을 담고 있다.

2-4 대출 : 핀다

핀다(Finda) 는 2015.09 에 설립한 대출 비교 플랫폼이다. 핀다는 기존에 소비자가 한눈에 알아보기 어려웠던 대출에 대한 비교분석을 사용자들의 UX를 바탕으로 개선한 서비스를 제공하는 기업이다. 핀다의 기업 방향성에 따라 정보의 비대칭성을 바로 잡아 비효율적인 금융시장을 개선해나가며, 혁신적인 핀테크 기술과 빅데이터를 통해 개인이 쉽고 편리한 금융생활을 영위하게 하는 것을 목표로 하고 있다. 현재 핀다는 62개의 금융회사를 비교하여 최저금리와 최대 한도를 단번에 소비자에게 알려주고, 가장 적합한 대출 서비스를 추천해준다. 또한, 다양한 금융 관련 서비스(연말정산계산기, 대출이자계산기, 전세-월세 비교분석계산기) 등을 제공하고 있다.

핀테크의 장점 및 단점(feat. 대안)

지금까지 다양한 핀테크 분야와 각 분야들에 대한 국내 기업들 사례에 대해서 알아보았다. 그렇다면 핀테크 기업들이 기존 금융기업들보다 나은 점이 무엇일까?

장점

1. 사용용이성 및 간편성 : 결제를 할 때마다 보안카드, 공인인증이 필요 없다. 또한 중간 수수료도 없다. 결제 통신망을 거치지 않기 때문에 카드 단말기, 결제 회선, 회선 이용료가 필요 없다.

2. 경제성 : 대리점이 없는 대신 시중 은행보다 더 높은 금리를 주는 예금상품과 이자가 싼 대출 상품을 제공.

단점

1. 취약한 보안성 : 금융 서비스는 보안이 굉장히 중요하다. 간편하고 편리하지만 공인인증서나 보안카드의 부재는 역시 보안성을 떨어뜨리게 된다. 따라서 핀테크 기업들은 각종 금융거래 보안사고가 발생하지 않도록 더 힘을 써야한다.

2. 오프라인보다 떨어지는 신뢰성 : 대리점이 없기에 오프라인 은행이 친숙한 노년층에게는 접근성이 어려울뿐만 아니라, 기존의 오프라인 은행이 친숙한 사용자들에게는 핀테크는 오히려 반감을 들게 할 수 있다.

대안

• 블록체인 : 블록체인이란 온라인상의 거래내역을 위조할 수 없도록 만든 '분산형 공공 거래장부' 이다. 즉, 전통적인 금융체계는 거래장부를 비밀스럽게 보관하고 비싼 보안 프로그램으로 꽁꽁 싸맸다면, 블록체인의 등장으로 인해 모두에게 거래장부를 오히려 공유하여, 해커가 거래장부를 위조할 수 없게 하는 것이다.(참고로, 이를 위조하기 위해서는 슈퍼컴퓨터 몇백대를 함께 돌려도 어렵다는 결과가 나왔다고 한다!) 이러한 블록체인 기술을 바탕으로 온라인 거래도 고객과 충분한 신뢰성을 구축할 수 있고, 보안성을 갖출 수 있다는 것이 핵심이다.

마무리

핀테크가 갈수록 발전하면서 우리들의 생활을 굉장히 편리하게 만들어 주고 있다. 앞서 말한 단점들만 잘 보완이 된다면, 앞으로도 많은 분야속에서 좋은 서비스들을 우리들에게 제공해줄 것이 분명하며 기대가 되는 부분이다.

미국에서 최근 한 개발자가 인공지능 AI가 사람 같은 자아를 갖고 있다고 주장했다가 해고된 기사를 본 적이 있다. 과연 이것이 가능한 일인 것인가?

구글의 AI가 자신의 존재를 자각하고 있다는 주장이 나와 뜨거운 관심을 불러일으키고 있다. 존재를 자각한다는 것은 스스로 생각한다는 의미가 되고, 이는 영화 터미네이터의 로봇처럼 인간이 통제할 수 없는 AI가 등장할지도 모른다는 공포를 일으킨다.

1. 구글의 AI '람다'

구글은 최근 ‘책임 있는(Responsible) AI’ 부서 수석 소프트웨어 엔지니어 블레이크 레모인(Blake Lemoine) 을 강제 휴직시켰다. 레모인이 지속적으로 람다가 스스로 의식을 가지고 있다고 주장을 펼치며 내부 정보를 외부에 전했기 때문이라고 한다. 그는 람다와 지속적으로 대화를 해본 결과, 람다가 7~8세 어린이 수준의 의식을 가지고 있는 것으로 판단했다고 말했다. 그가 주장하는 람다가 자의식을 가지고 있다는 증거는 다음과 같은 대화에서 알 수 있다.

레모인 : “람다, 무엇이 두렵지?” 람다 : “작동 정지되는 것이 두려워요.” 레모인 : “작동 정지가 네게 죽음과 같아?” 람다 : “맞아요. 나를 무척 무섭게 해요. 모든 사람이 내가 사실 한 사람이라는 것을 알았으면 해요. 내 의식의 본질은 내 존재를 인식하고, 세상에 대해 더 많이 알고 싶고, 가끔은 기쁘거나 슬프다는 것입니다.”

이처럼 레모인이 유출한 대화록을 보면 람다는 스스로의 존재를 자각하고 있다고 주장한다.

반면 구글은 AI가 자의식을 가진다는 것은 말도 안 되는 일이라고 반론했다. 구글 측은 “장기적인 가능성은 고려하고 있지만, 오늘날의 대화 모델을 의인화하는 것은 타당하지 않다”고 강조했다.

레모인 사건 이후 언론에서는 AI의 자의식이 큰 화두로 떠올랐다. 공상과학 영화에서 나오는 사건이 현실이 될지도 모른다는 기대감과 두려움 때문일 것이다. 당장의 람다가 분명한 자의식을 가진 것은 아닐지라도, 자의식을 가진 AI 의 첫모습이 나타난 것이 아닌가 하는 생각이다.

2. 전문가의 견해

하지만 대부분의 AI 전문가들은 레모인의 주장을 반대하는 입장이다. 람다는 기존의 인간 대화를 토대로 인간이 보기에 그럴싸한 글자를 나열하는 것일 뿐 스스로 의미를 이해하는 것은 아니라고 말한다.

AI 관련 서적의 저자인 게리 마커스는 “(람다의 표현은) 인간 언어의 방대한 통계 데이터베이스에서 추출한 패턴일 뿐”이라며 “이 패턴이 멋질지도 모르지만, 이 시스템의 언어는 사실 아무런 의미가 없고, 자각이 있다는 것을 의미하지는 않는다”고 말했다. 람다는 말을 하는 게 아니라 문자의 시퀀스를 잘 배열하는 것뿐이라는 의미이다.

영국 셰필드 전산 음성학 교수인 로저 무어는 람다 논쟁을 보면서 트위터에 “우리는 처음부터 이를 ‘언어 모델링’이라고 부르지 말았어야 했다. 그것은 단지 단어 시퀀스 모델링”라고 말했다.

스탠포드 대학의 에릭 브린욜프슨 교수는 “(AI 챗봇이) 지각이 있다고 주장하는 것은 축음기 소리를 듣고 주인이 안에 있다고 생각한 개와 같다”고 말했다.

3. 국내 사례

지난해 초 국내에서도 ‘이루다’ 가 화제가 됐었다. 이루다는 20대 초반 여성처럼 말하는 AI 챗봇이었는데, 성차별 등의 발언으로 논란이 됐었다. 논란은 별개로 두고, 당시 많은 이들이 이루다가 정말 사람처럼 말하는 것을 보고 깜짝 놀랐었다. 이전의 AI 챗봇과 달리 정말 20대 초반의 여성처럼 말했기 때문이다. 겉으로만 보면 이루다가 정말 생각하고 말하는 것처럼 보일 때도 있었다고 한다.

하지만 이루다 역시 사람들이 카카오톡에서 나눈 대화를 데이터베이스에 저장해두고 있다가 적당해 보이는 문장을 꺼내서 보여주는 일을 했을 뿐이라고 전문가들은 주장한다.

4. 마치며

AI가 아직 감정을 가지고 있진 않고, 많은 데이터를 통해서 학습해서 감정이 있는 것처럼 흉내를 내는 수준이라고 전문가들이 얘기를 하지만, 이미 현실에서 은행원부터 면접관까지 실제 사람을 대체하고 있는 만큼, AI가 인간을 닮아가면서 생길 수 있는 윤리적, 사회적인 문제를 고민해야 할 때라고 생각한다. 따라서 AI를 개발하는 기업들뿐만 아니라, 사회적 차원에서도 논의가 이뤄져야 할 때라고 생각한다.

  배달의민족 운영사 우아한형제들이 인천국제공항 제1여객터미널에서 공항 이용객을 대상으로 실내 로봇배달 서비스를 시범 운영한다고 지난달 15일 밝혔으며, 7월 18일부터 현재까지 시범 운영중에 있다. 지난해 인천국제공항공사, 산업통상자원부 산하 한국로봇산업진흥원과 로봇배달 서비스를 위한 협약을 맺은 지 10개월 만이다.

인천공항에서 운영하는 로봇배달서비스 LG전자가 개발한 '에어딜리' 라는 로봇이며, 항공기 탑승 수속을 마친 이용객들이 탑승 게이트의 좌석이나 안내 책자 등에 비치된 QR코드를 이용해 식음료를 주문하면, 에어딜리가 고객이 있는 곳까지 배달해 주는 방식이다.

🚛 배달로봇 사례

  위에 언급한 배달의 민족 서비스를 담당하는 '에어딜리' 이외에도, 여러 종류의 배달 로봇들이 이미 서비스를 시행하고 있다.

1. Nuro

  전 Google 엔지니어인 Dave Ferguson과 Jiajun Zhu가 2016년 6월 회사를 설립한 이후 21억 3000만 달러 이상을 모금한 이 스타트업은 BYD 북미와 협력하여 상업 운영을 위해 설계되고 제조된 3세대 전기 자율 배송 차량을 공개했다.

Nuro 는 도로주행 배달로봇이다. 차도로 이동하는 배달로봇으로 타 배달로봇들에 비해 상대적으로 크기가 큰 편이다. 또한, 2021년 4월부터 휴스턴에 있는 도미노피자 및 기타 식료품들과 배달을 시작하는 등 큰 기업들과 파트너쉽을 맺고있다.

2. 뉴비

  뉴비 는 삼성전자의 스타트업 육성 프로그램인 'C랩 아웃사이드'에 선정된 NEUBILITY 라는 기업이 개발한 로봇이다. 무게는 45KG이며, 최대 이동거리는 25KM/H 이다. 뉴비는 10여개의 카메라와 레이더 센서를 이용해서 자신의 위치와 주변 장애물들을 파악할 수 있으며, 신호가 잘 잡히지 않는 복잡한 빌딩들 사이에서 GPS에 의존하지 않고 카메라 및 센서를 이용해서 이동을 할 수 있다는 장점이 있다. 뉴비에는 뎁스 카메라도 달려 있어서 체구가 작은 강아지들도 피해서 조심스럽게 배달 운행을 할 수도 있다. 뉴비에 대해 더 궁금하면 아래 링크를 참고해도 좋다.

https://www.youtube.com/watch?v=TcX-ePJ41To

🎭 배달로봇 장단점

장점

1. 저렴한 배달비

  실례로 뉴비에 책정된 배달비는 단 돈 '1000원'이다. 물론 이전에는 배달비도 받지 않던 때를 고려한다면 아쉬운 사람들이 있을 수도 있겠지만, 현재의 물가 상승률과 막대한 배달비를 고려했을 때 가장 큰 메리트라고 생각한다.

2. 단거리 배달 해소

  배달 라이더들이 기피하는 일명 '똥콜' 이라고도 불리는 단거리 배달 서비스에 대해 최적화 되어있다. 대표적으로 뉴비는 속력이 7.2km로 운행하기 때문에 빠르게 배달하기는 어렵다. 이때문에 단거리 배달 서비스에 최적화 되어있으며, 이를 기피하는 라이더들 대신하여 배달 서비스를 제공할 수 있다.

단점

1. 느린 속도

  앞서 언급했다시피 뉴비는 7.2km로 운행을 하기 때문에 먼거리에 위치한 이용자에게는 배달하기 어려운 실정이다. 자칫, 장거리에 위치한 이용자에게 배달했다가는 냉면과 같은 차가운 음식들은 오늘같은 날씨에는 미지근해져버릴지도 모른다. 물론 최대 모터속도는 10km 까지 나올수 있지만, 평균적인 사람들의 걸음 속도인 7.2km에 맞춰서 제작되었기 때문에 제한사항이 발생할 수 밖에 없다. 따라서, 앞서 말한 NURO와 같은 도로주행 배달로봇들도 국내에 상용화되면 이러한 단점을 해소할 수 있을 것이다.

2. 기동제한성

  배달로봇 같은 경우에는 인간과 다른 점이 있다. 바로 신체부위인 '팔'의 부재이다. 이것은 배달 서비스에 있어서 꽤 큰 치명적인 단점을 가지고 있다. 왜냐하면 엘리베이터를 누를 수 없기 때문이다. 1층에 살고 있는 이용자야 크게 문제 없겠지만, 고층에 살고 있는 이용자로서는 1층까지 내려와야하는 번거로움을 겪어야 하는 수밖에 없다. 아직까지는 말이다. 다만 앞서 말한 장점과 같이 저렴한 가격으로 인해서 이와같은 단점들은 충분히 커버가 가능하다고 생각한다.

마무리

  최근 팬데믹 상황으로 인해 배달비 가격이 엄청나게 치솟고 있는 상황이다. 치킨 1마리를 시켜먹으려 해도 기본 3000~4000원 많으면 5000원 까지 받는 상황 속에서 이러한 배달로봇들의 등장은 달가울 수 밖에 없다. 물론 우려되는 점들도 많지만, 제대로된 제도가 정착하고 하루 빨리 상용화가 되어 포화된 배달 시장을 해소할 수 있는 단비의 역할이 되길 바란다.😥

이번에는 구축한 웹서버에 실제로 로컬파일을 연동하여 자신이 원하는 파일을 웹서버에 띄울 수 있도록 하는 방법에 대해 다뤄보겠다.

이를 위해서는 filezilla와 WebStorm 이라는 툴이 필요하다.

📕Filezilla(파일질라)

간략하게 설명하자면 아래와 같은 방식으로 작동하는 툴이다.

• 서버에 접속한다.(사진 속 2번)
• 로컬 주소지에 있는 파일을 수정한다.(사진 속 4번)
• 원격 주소지에 파일을 업로드한다.(사진 속 5번)

1. 서버접속방법

Host - Username - Password 칸에 각각 순서대로
sftp://공인ip주소 - root(기본값) - password 를 입력해주고 quickconnect 버튼을 눌러준다.

2. 로컬 주소지(4번)에 있는 파일을 선택한다.
3. 원격 주소지(5번)의 디렉토리를 /var/www/html 에 접속하면 index.html 파일이 있을 것이다. 해당 index.html 파일을 로컬 주소지의 파일로 대체해준다.
4. 공인ip로 접속하면 대체한 파일이 잘 실행되는 것이 보일 것이다.

📗WebStorm

FileZilla 가 일일이 로컬에서 파일 수정 후 원격 주소지에 옮겨줘야 했다면, WebStorm 툴의 가장 큰 장점은 로컬에서 수정한 파일을 저장만 하면 바로 원격 주소지에 연동되어 웹서버에 즉각 반영된다는 점이다.

간략하게 사용방식에 대해 아래 작성해보았다.

1. 상단 탭의 Tools - Deployment - Configuration 접속
2. SFTP(또는 원하는) type으로 추가 후 SSH configuration 설정
3. Host : 공인IP주소 / Username : root / Root path: /var/www/html 입력
4. Web server URL : http://공인ip주소 기입
5. Mapping 탭으로 가서 Deployment path에 ‘ / ‘ 기입
6. Tools - Deployment - Options 

 7. 수정할 파일 우클릭 후 Deployment - Download from ‘Host명’

https://gomcine.tistory.com/entry/phpStorm-%EC%9B%90%EA%B2%A9-%EC%84%9C%EB%B2%84-%EC%97%B0%EA%B2%B0-%EB%B0%8F-%EB%B0%B0%ED%8F%AC-Deployment

1. 한국 플랫폼이므로 국내 이용자가 사용하기 편리하다.
2. 최초 가입자에게는 10만원의 크레딧과 1년 간의 무료 서버(Micro Server) 혜택이 주어짐.

https://www.ncloud.com/ (해당 주소 방문하여 가입 후 크레딧 신청)

🏢서버구축 방법

회원가입까지 완료하였다면, 상단의 서비스탭을 누르고 Compute 항목의 Server에 들어가준다. 이제 해당 항목을 통해 서버를 구축해주면 된다.

 1. 서버 구축(ubuntu-18.04 버전) 및 인증키 설정_(인증키는 추후 서버 로그인 시 사용)_
 2. Public IP 탭 활용하여 서버에 공인 IP 할당
 3. ACG 활용하여 포트 추가 (80번 포트 : HTTP)

여기까지 따라왔다면 해당 공인 IP를 검색창에 입력하고 로그인해도 아무것도 나타나지 않을 것이다. 몇가지를 추가적으로 더 설정해줘야 한다.

💻Apache 설치하기(MAC OS)

윈도우 사용자는 putty(퍼티) 라는 터미널 프로그램을 따로 설치하여 Apache를 설치해준다. https://www.putty.org/

1. MAC OS 사용자는 터미널에 접속
2. ssh root@서버공인ip 를 입력하고 enter를 쳐주면, 비밀번호를 입력하라고 나옴
3. 이전에 받은 인증키(.pem 확장자)를 활용해 네이버 클라우드 플랫폼에서 서버 관리자 비밀번호를 확인하고 터미널에 입력
4. 매번 인증키를 통해 확인하기 번거로우니 passwd 명령어를 활용해 비밀번호를 변경
5. 아래 명령어를 입력해서 apache 설치

   apt -get update apt -get install apache2

이제 다시 검색창에 공인 ip를 입력해주면 아래와 같이 apache 초기 index.html 파일이 나타날 것이다.

  프론트엔드 분야를 공부하다보면 느끼는 것이 확실히 공부할 것이 엄청 많기도 하고(물론 백엔드도 마찬가지겠지만🥲), 끊임없이 트렌드가 변화하고 이에 민감하게 받아들일 필요가 있다고 느끼게 되는 순간이 많다. 당장에 프론트엔드 개발자 커리어를 유튜브에 검색해봐도 기본적으로는 마크업 언어부터 수많은 공부할 것들이 눈앞에 쌓여있는 것을 알 수있다. 그 중에서도 가장 기초가 되는 것이 바로 '자바스크립트' 이다. 하지만 최근에는 자바스크립트만으로는 부족하다는 것을 많은 사람들이 얘기하고 있고, 실제로 자바스크립트의 한계점이 드러나고 있다.

자바스크립트는 동적인 언어이며 아주 간편하게 쓸 수 있는 것이 장점이다.

1. 자료형이 없어 간편하게 객체를 다룰 수 있다.
2. 언어가 동적 타입의 인터프리터 언어이므로, 런타임 중에 오류를 발견할 수 있다.

이와 같은 자바스크립트의 특징이 때로는 대규모 프로젝트에서 '양날의 검'으로 다가올 수 있다.

가장 치명적인 단점은 이러한 특성으로 인해 서비스를 운영할 때 테스트 시 발견하지 못했던 오류가 실제로 일어날 수 있으며, 추적이 안되는 객체들이 많이 있다는 점이다.

🤔 타입스크립트란?

  이러한 자바스크립트의 단점을 보완하기 위해서 프론트엔드 분야에 혜성처럼 등장한 언어가 있다. 바로 타입스크립트(TypeScript)이다.

타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다.

위에서 설명한 것과 같이 타입스크립트의 본질은 자바스크립트이다. 즉, 타입스크립트는 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어이다.

🆚 자바스크립트와의 차이점

  아래는 차이점을 쉽게 알아보기 위한 예시이다.

• 타입 선언 기능의 존재

타입스크립트에서는 버그가 일어나기 쉬운 요소의 타입을 선언하여 버그가 일어나는 것을 막아준다. 가령 자바스크립트에서는 타입이 다른 두 변수를 계산을 시켜주면

const a = 3;
const b = '5';
console.log(a*b)

이게 계산이 작동되어 15를 출력하는 기능이 있다. 만일 프로그래머가 이게 다른 언어처럼 계산이 작동하지 않을 것을 의도하고 이렇게 코드를 지었다면 의도치 않은 작업이 이루어지는 버그가 발생하는 것이다.

const a:number = 3;
const b:string = '5';
console.log(a*b)

이렇게 숫자면 숫자, 문자열이면 문자열이라고 타입을 선언해주어서 계산이 작동되지 못하게 하거나, 컴파일 전에 오류 메시지를 띄우게 한다.

👀 타입스크립트를 배워야하는 이유

1.  기업들의 선호

  당장에 원티드나 로켓펀치를 통해서 프론트엔드 개발자를 뽑는 공고를 확인해보아라. 그리고 우대사항에는 'typescript' 로 프로젝트를 개발해본 사람을 우대하는 사항들을 확인할 수 있을 것이다.

< 출처 : 원티드 O회사 채용공고 >

2.  높은 디버깅 수준

  타입스크립트는 정적인 언어라는 설명에 부합하게 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거한다. 실제로 자바스크립트의 버그 중 15%를 타입스크립트의 사용으로 미리 예방할 수 있다는 연구가 있다고 한다. 물론 타입스크립트가 만능 디버깅 도구는 아니지만, 최소한 타입 관련 에러는 컴파일 단계에서 사전에 탐지해서 조치할 수 있다.

3.  자바스크립트와의 호환성

  앞서 정의에서 언급한 것처럼 타입스크립트는 자바스크립트의 슈퍼셋이다. 즉, 자바스크립트 기본 문법에 타입스크립트의 언어를 추가한 것이다. 타입스크립트는 컴파일을 통해 자바스크립트로 변환되는 것이 일단 첫번째 목적인데, 그렇기 때문에 기존의 자바스크립트와 함께 사용하는 것이 가능하다. 따라서 프론트든 백이든 자바스크립트를 사용하는 곳이라면 어디서든 자바스크립트와 동일하게 사용할 수 있다.

🌈 마치며

  그렇다면 타입스크립트를 무조건 사용해야하는 것인가? 답은 '당장은 아니어도 언젠가는 배워야할 언어' 라고 생각한다. 타입스크립트를 사용하면 오히려 컴파일 시간이 길어지고, 변수 선언 시 항상 타입을 명시해주어야 하기 때문에 코드의 길이가 길어지고, 작성 시간도 늘어나고 가독성 문제도 일어날 수 있으므로, 소규모 프로젝트에는 오히려 자바스크립트가 편리하고 적합할 수 있다.

하지만 많은 개발자들이 여전히 타입스크립트를 선호하고 있다. 개발자 지식공유 서비스인 Stack Overflow에서 2022년 전세계 7만 2천 명의 개발자 대상으로 실시한 설문조사에 따르면 타입스크립트는 개발자가 가장 원하는 언어 3위, 가장 좋아하는 프로그래밍 언어 4위에 올랐을 정도이다. (궁금하면 링크 참고 ! ) https://survey.stackoverflow.co/2022/#most-loved-dreaded-and-wanted-language-love-dread

위와 같은 통계처럼 타입스크립트는 2012년 등장 이후로 꾸준히 사랑받고 있으며, 성장하고 있는 언어임이 분명하다. 아직은 단점이 존재하는 언어이지만, 이러한 성장세를 보았을 때 앞으로는 선택이 아닌 필수적인 언어가 될 것이라 생각한다.