좋은 개발자가 되자

1. 모바일

Objective-C 는 Swift에 의해 밀려나고 있다. 애플이 Objective-C에서 Swift로 공식 언어를 변경했기에 머지 않아 사라질지도...

하이브리드 플랫폼에는 2가지가 있다. Ionic같은 구형 하이브리드는 대부분 웹으로 모든걸 만들고 웹 폼으로 감싸주기만 하는 웹 앱.

그리고 React Native, Flutter같은 네이티브 소스코드를 생성해주는 프레임워크. 물론, 네이티브 언어를 배우는 것 보다는 성능이 떨어지고 제약이 생길 수 밖에 없다. 하지만 한 번에 2가지 앱이 모두 만들어져 규모가 작은 회사에서 비용이 적게 들어 네이티브 앱개발보다 많이 사용된다. 물론 회사가 커지면 전담인력으로 Swift 네이티브 개발자를 두겠지만...

웹앱이 가지는 장점은 간단한 수정은 웹을 수정하면 되기 때문에 매번 앱스토어에 인증받고 버전업하는 절차가 필요 없다. 대신 웹의 한계로 구현 능력이나 성능이 네이티브 방식에 비해 현저히 떨어진다. 따라서 웹으로 구현이 가능한 경우는 웹앱으로, 그렇지 않은 경우는 네이티브로 개발을 한다.

하이브리드라고 통칭하지만 실제로는 두 분류가 있다고 봅니다.

1 웹 사이트를 개발하고 웹뷰 껍데기만 씌워서 스토어에 올리는 경우

2 웹개발하듯 개발하지만 결과물은 Android/IOS 네이티브 코드로 생성해주는 경우

첫번째 질문은 이 부분을 혼동하시는것 같네요.

1번은 웹사이트를 브라우저(웹뷰)에서 돌리는 것과 별로 다를 바 없습니다.

브라우저 호환성 고려하듯 OS, 웹뷰 호환성만 고려하시면 됩니다.

2번은 사실상 네이티브 앱입니다. 네이티브 개발하듯 설계하시면 됩니다.

단지 웹개발자 접근성과 멀티플랫폼 지원이 용이하다는게 장점이죠.

가장 많이 들어본 것은 React Native와 Flutter인데, React Native는 페이스북에서 개발했고, Flutter는 구글에서 개발했다.

Flutter는 Dart라는 새로운 언얼르 배워야 하는 것이 가장 큰 진입장벽. Flutter쪽이 좀 더 유망하다고 하지만 아직까진 규모로 보나 트러블로 보나 React Native가 절대적으로 우위다. 특히, TypeScript, Node.js 연동까지 생각한다면 React Native가 좋다.

과거 안드로이드가 Dalvik 머신으로 돌아갔는데, 이는 JVM 라이센스를 피하기 위해 구글에서 개발했지만 32비트만 지원되고, 실행할 때마다 컴파일하고, CPU, 메모리, 용량 낭비가 크며 이로 인해 배터리 소모도 컸다. 그래서 JVM에서 돌아가는 Kotlin 언어(JetBrain이 개발. JVM에 자바를 돌리는 것처럼 JVM에 Kotlin을 돌린다.)를 구글이 기본 언어로 채택하였고, 라이센스 문제도 해결하고 속도도 높이기 위해 Fuchsia라는 오픈소스 운영체제를 만들고 있다. 크롬 OS는 물론 안드로이드까지 다 Fuchsia로 넘어가 하나의 운영체제로 통합될지도... 여기에 모바일 웹 앱 개발 프레임워크인 Flutter가 메인 개발 환경으로 포함된 것은 이미 공식적으로 확인되었고, 자바 라이센스 탈피를 위해 언어로써는 Go, Rust, Python, TypeScript, 심지어 Swift까지 포함된 것이 유출되었다. Swift에 가장 많은 영향을 준 것 역시 Rust인데... 아무튼 Go, Swift, Python, TypeScript는 차세대 언어로 급부상 할 것 같다.

참고 : 안드로이드, 크롬OS는 리눅스 커널을 사용하지만 퓨시아는 LK마이크로 커널을 이용해 자체 개발한 지르콘(Zircon)이라는 마이크로커널을 사용한다. Swift는 LLVM 컴파일러를 사용하는데, 이는 크리스 래트너의 'LLVM 오픈소스 컴파일러'라는 석사 논문으로 출발한 프로젝트로 애플이 스카웃 하며 발전했다. 그는 이후 스위프트를 만드는데 큰 공을 들였다고... 그리고 이 LLVM 프로젝트는 Clang(클랭)을 프론트엔드로 구성한다.

2. 데스트탑

Python (파이썬)으로도 PyQT, Kivy, Tkinter 등으로 앱 개발이 가능하지만 인터프리터 언어라 느려서 거의 안 쓰는 것 같다.

3. 웹

닷넷은 마이크로소프트에서 자바를 잡기 위해 만든 언어로 자바와 구조나 환경이 매우 비슷하다. 문법도 비슷하다고 한다(안 써봐서 온라인에 의하면...). 그리고 JVM 위에 돌아가는 것처럼 CLR이라는 런타임을 이용해 돌아간다.

Java(Language) + Java(Platform) + JVM(Runtime environment engine) + Oracle(Database)가 하나의 오라클 생태계고,

C#(Language) + .NET(Platform) + CLR(Runtime environment engine) + MS SQL Server(Database)가 하나의 MS 생태계다.

한국은 전자정부프레임워크 영향으로 자바를 많이 사용하고, 미국, 유럽에서는 C#과 .NET을 많이 사용한다.

Java, C# : javac(자바의 컴파일러), csc.exe(C#의 컴파일러)의 도움을 받는 High level language로 속도와 자원에서 손해를 보는 대신 이식성이 좋다. 또한 Java와 C#의 장점은 개발자가 빨리 개발할 수 있고, 쉽게 개발할 수 있다.

4. C, C++, C# 차이

C : 가장 Low level language다. 매우 빠르고, 매우 한정된 자원에서도 작동한다.

C++(.class가 추가됨) 개발자의 의도는... C++이 C의 Superset(확장판)이 되길 바라고 만들었지만... 

C가 반드시 필요한 환경들이 있어서 C++이 C의 모든 수요를 흡수하지는 못 했다.

참고로 Superset의 개념은 JavaScript와 TypeScript에서는 정확히 들어맞는다.

TypeScript는 JavaScript의 Superset

C++에는 C에 없는 .class가 추가되고 OOP 개념이 생겨났다. C와 마찬가지로 Low level compiler language라서 속도가 매우 빠르며 OOP 개념과 .class로 인해 코드 개발이 많이 쉬워졌다. 단, 이로 인해 C보다 시스템 자원을 많이 필요로 해 임베디드 쪽에선 아직도 C를 주로 사용하고, 자원이 충분한 데스크탑 쪽에서는 C++을 주로 사용한다.

C#은 C나 C++과 많이 다르다. Java와 비슷하다.

C# 을 한 줄로 설명하자면 '마이크로소프트가 만든 Java' 기업용으로 개발되었다. (자바와의 자세한 비교는 위 3번 웹을 참고)

C#으로 백엔드, 프론트엔드를 만들 수 있다. 또한 unity 3D(비디오게임 엔진)을 사용하는 엑스박스, 플레이스테이션, ios와 안드로이드 웹용 게임들 다 만들 수 있다. 하지만 C#은 자바가 JVM 도움을 받는 것 처럼 CLR의 도움을 많이 받기 때문에 속도에서 손해를 본다.

5. 컴파일/인터프리터 언어

컴파일 언어는 미리 번역된 컴파일러가 존재해 매우 빠르다. 바면 인터프리터 언어는 JIT로 인터프리터가 직접 번역해 실행하기 때문에 매우 느리다.

VM을 사용하는 Java, C#의 경우는 VM이 읽을 수 있는 바이트 코드로 컴파일되고, 이 바이트 코드는 다시 기계어로 컴파일된다.

이에 대해 좀 더 자세한 것은 다음을 참고한다 : greendreamtrre.tistory.com/65

C, C++, Objective-C, Swift, Go는 Low level compiler language로 이미 컴파일된 언어로 되어 있어서 매우 빠르다.

C, C++은 개발하기가 힘들다... 개발자가 갈려나가며 일일히 구현해야해서... 당연히 최적화도 힘들고... C는 C++보다 더욱 끝판왕이다... 대신 컴퓨터는 좋다한다... 가볍고 빠르니까...

파이썬, 자바스크립트는 인터프리터 언어라 가장 느리다.

Tag. 바이트 코드, 바이트코드, byte code, bytecode, 바이너리 코드, 바이너리코드, binary code, binarycode

자바 시험을 봤고

딥러닝을 학습시키는 것을 배웠다.

일반 csv 자료는 별로 다르지 않은 것 같다.

자바스크립트로 데이터 읽어와 구글차트 그리는 것을 했다.

C -> Insert -> POST
R - Select -> GET
U - Update -> PUT
D - Delete -> DELETE

Request Type 별로 분리한 방식

1. app.js

var express = require('express');
var http = require('http');
var app = express();
var server = http.createServer(app).listen(80);
var mysql = require('mysql');
console.log("Server is running...")

var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({limit: '50mb', extended: false}));
app.use(bodyParser.json({limit: '50mb'}));

var connection = mysql.createConnection({
	host: 'localhost'
	, port: 3308
	, user: 'root'
	, password: '1234'
	, database: 'javascript'
});


app.get('/', function (req, res) {
  res.sendfile("newsList.html");
});
app.get('/newsListPage', function (req, res) {
  res.sendfile("newsList.html");
});
app.get('/newsPostPage', function (req, res) {
  res.sendfile("newsPost.html");
});
app.get('/newsUpdatePage', function (req, res) {
  res.sendfile("newsUpdate.html");
});

app.get('/news', function (req, res) {
	if(req.query.no) {
		var q = `select * from news where no = ${req.query.no}`;
	  connection.query(q,
	    function (err, rows, fields) {
	      if (err) throw err;
	      res.send(rows);
	    }
	  );
	}
	else {
		var q = 'select * from news';
	  connection.query(q,
	    function (err, rows, fields) {
	      if (err) throw err;
	      res.send(rows);
	    }
	  );
	}
});

app.post('/news', function (req, res) {
	var title = req.body.title;
	var content = req.body.content;
	var q = `insert into news (title, content) values ("${title}", "${content}")`
  connection.query(q,
    function (err, rows, fields) {
      if (err) throw err;
      res.send(rows);
    }
  );
});

app.put('/news', function (req, res) {
	var no = req.body.no;
	var title = req.body.title;
	var content = req.body.content;
	var q = `update news set title="${title}", content="${content}" where no = ${no}`
  connection.query(q,
    function (err, rows, fields) {
      if (err) throw err;
      res.send(rows);
    }
  );
});

app.delete('/news', function (req, res) {
	var no = req.body.no;
	var q = `delete from news where no=${no}`;

  connection.query(q,
    function (err, rows, fields) {
      if (err) throw err;
      res.send(rows);
    }
  );
});

2. newsList.html (http://localhost/)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="newsListArea"></div>
    <input type="button" value="글쓰기" id="goToPostBtn">
  </body>

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript">
    $.ajax({
      url:'/news',
      data:"",
      success:function(res){
        for(var i=0;i<res.length;i++) {
          var news = res[i];
          $("#newsListArea").append(`제목 : ${news.title}
            <input type="button" value="수정" onclick="updateNews(${news.no})">
            <input type="button" value="삭제" onclick="deleteNews(${news.no})">
            <br> 내용 : ${news.content} <br><br>`);
        }
      }
    });

    $("#goToPostBtn").click(function(){
      location.href = "/newsPostPage";
    });

    function updateNews(no) {
      location.href = "/newsUpdatePage?" + no;
    }

    function deleteNews(no) {
      if(confirm("삭제하시겠습니까?")) {
        //삭제
        $.ajax({
          url:'/news',
          type:"DELETE",
          data:{
            no: no
          },
          success:function(res){
            location.href = "/";
          }
        });
      }
    }

  </script>
</html>

3. newsPost.html (http://localhost/newsPostPage)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      textarea{ resize: none;}
    </style>
    <title></title>
  </head>
  <body>
    <!-- <input type="text" id="title">
    <input type="text" id="content"> -->
    <input type="text" placeholder="기사 제목을 입력하세요." id="title" style="width:500px"><br><br>
    <textarea cols="69" rows="15" placeholder="기사 내용을 입력하세요." id="content"></textarea>
    <input type="button" value="글쓰기" id="postNews">
    <input type="button" value="돌아가기" id="backToListBtn">
  </body>

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript">
    $.ajax({
      url:'/',
      data:"",
      success:function(res){
      }
    });

    $("#backToListBtn").click(function(){
      location.href = "/";
    });

    $("#postNews").click(function(){
      $.ajax({
        url:'/news',
        type:"POST",
        data:{
          title: $("#title").val(),
          content: $("#content").val(),
        },
        success:function(res){
          alert("글 등록이 완료되었습니다.");
          location.href = "/";
        }
      });
    });

  </script>
</html>

4. newsUpdate.html (http://localhost/newsUpdatePage)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      textarea{ resize: none;}
    </style>
    <title></title>
  </head>
  <body>
    <!-- <input type="text" id="title">
    <input type="text" id="content"> -->
    <input type="text" placeholder="title" id="title" style="width:500px"><br><br>
    <textarea cols="69" rows="15" placeholder="기사 내용을 입력하세요." id="content"></textarea>
    <input type="button" value="수정하기" id="updateNewsBtn">
    <input type="button" value="돌아가기" id="backToListBtn">
  </body>

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript">
    var no = location.href.split("?")[1];

    $.ajax({
      url:'/news',
      data:{
        no: no
      },
      success:function(res){
        var news = res[0];
        $("#title").val(news.title);
        $("#content").val(news.content);
      }
    });

    $("#backToListBtn").click(function(){
      location.href = "/";
    });

    $("#updateNewsBtn").click(function(){
      $.ajax({
        url:'/news',
        type:"PUT",
        data:{
          no: no,
          title: $("#title").val(),
          content: $("#content").val(),
        },
        success:function(res){
          alert("글이 수정되었습니다.");
          location.href = "/";
        }
      });
    });

  </script>
</html>

한계 / 고쳐야할 점
1 ) 제목이나 내용에 ' ' 같이 따옴표가 들어갈 경우 쿼리문을 쏠 때 에러가 발생한다.    ex) 38도 '찜통'... X
2 ) <br>태그 등에 대한 줄나눔 처리가 안 된다.

DB

더보기

Database : MySQL / Database Name : javascript / Table Name : news

CREATE TABLE javascript.news (
	`no` INT auto_increment NOT NULL,
	title varchar(100) NULL,
	content varchar(5000) NULL,
	CONSTRAINT news_PK PRIMARY KEY (`no`)
)
ENGINE=InnoDB
DEFAULT CHARSET=utf8
COLLATE=utf8_general_ci;