npm

: node package manager라는 뜻. 모듈 관리(설치, 업데이트, 삭제 등)을 위한 매니저

 

 

npm init : package.json 생성 -> 프로젝트 의존 모듈 관리(모듈 이름, 버전), 프로젝트 정보

npm install 모듈명 --save : save 옵션 시 자동으로 package.json에 등록

 

페이스북에서 개발한 yarn 이 더 빠르다고 한다. 여기

 

Home

Fast, reliable, and secure dependency management.

yarnpkg.com

 

스크립트 작성 시 간편하게 사용 가능.

예) yarn dev 입력 시 클라이언트와 서버가 동시에 실행 가능하게 만듬.

"scripts": {
        "client": "cd client && yarn start",
        "server": "nodemon server.js",
        "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
    }

 

'프로그래밍 > Node.js' 카테고리의 다른 글

SQL 파라미터 매핑 / 다중 쿼리 처리  (0) 2020.03.19

React

 

반응형 웹페이지를 만들어 보고 싶었다. 

리액트로 캐치마인드 멀티플레이 게임 사이트를 만드는 것을 단기 목표로 잡았다.

 

최종적으로는 리액트를 활용하여 일본어 단어 암기를 위한 사이트와 Swift로 앱을 만들어 연결해 보려고 한다. 

데이터베이스로는 PostgreDB를 사용해볼 생각이다. 

 

_끗

 

DBMS (Database Management System)


Database

데이터베이스란?

대량의 정보를 컴퓨터가 효율적으로 접근할 수 있도록 가공 및 저장한 것.

 

DBMS란?

데이터베이스를 관리하고 다수의 사용자가 데이터베이스 내의 데이터를 공유하며

사용할 수 있는 환경을 제공하는 소프트웨어.

 

DBMS를 사용하지 않는다면

  • 다수의 사람이 데이터를 공유하기 어려움.
  • 대량의 데이터를 다루기 어려움.
  • 읽기/쓰기를 자동화하려면 프로그래밍 기술이 필요.
  • 만일의 사고에 대응하기 어려움 (보안, 백업)

 

관계형 데이터베이스 (Relational Database)


현재 가장 많이 사용되고 있는 데이터베이스의 한 종류이며 현대 데이터베이스 시스템들의 기준.

 

관계형 데이터베이스는 테이블(table)로 이루어져 있으며, 이 테이블 안에서 키(key) 와 값(value)의 간단한 관계를

2차원 형식으로 나타낸다. 하나의 데이터베이스 안에는 여러 개의 테이블이 존재할 수 있다.

 

테이블의 행(row)은 레코드(record)라고도 부르며, 데이터 한 건에 해당한다.

테이블의 열에 해당하는 컬럼(column)은 데이터를 구분하기 쉽게 이름을 붙혀 분류한다. (ex: 제목, 장르, 시간 등)

또한 각 컬럼은 특정한 데이터 타입을 가진다. (ex. 평점의 데이터 타입은 DOUBLE)

 

 

관계형 데이터베이스의 특징

  1. 데이터의 분류, 정렬, 탐색 속도가 빠름.
  2. 오랫동안 사용된 만큼 신뢰성이 높고, 어떤 상황에서도 데이터의 무결성을 보장.
  3. 데이터는 관계를 통해서 연결된 여러 개의 테이블에 분산됨.
  4. 기존에 작성된 스키마(Structure)를 수정하기가 어려움.
  5. 데이터베이스의 부하를 분석하는 것이 어려움.

 

RDMBS ( Relational Database Management System)

: 관계형 데이터베이스를 생성, 갱신, 관리하기 위한 시스템.

 

Client가 데이터를 조회하고 싶을 때, SQL로 요청을 RDMBS에 보내면 RDMBS는 요청된 데이터를

2차원 표 형태로 반환.

 

RDMBS server and SQL

 

대표적인 RDMBS

  • ORACLE DB : 가장 오래되었고 신뢰도가 높다. 뛰어난 기술력과 안정성. 은행에서 많이 쓰이며 유료.
  • MySQL : 오픈 소스 기반으로 무료. 썬마이크로시스템즈를 거쳐 현재 오라클에 흡수합병.
  • Microsoft SQL Server : 마이크로소프트가 개발한 RDMBS. 윈도우 시스템 환경을 지원.
  • PostgreSQL : 버클리 대학의 프로젝트로 만들어진 오픈 소스 ORDBMS이다. (객체 - 관계형 DB)
  • Maria DB : MySQL 5.5를 기반으로 만들어졌다.
  • SQLite : DB를 서버가 아닌 파일로 저장한다. 가벼운 DB를 저장하는 목적으로 설계되어 스마트폰에 사용된다.

 

SQL, Structured Query Language


관계형 데이터베이스 시스템(RDBMS : relational database management system)의 데이터를 관리하기 위해

설계된 특수 목적의 프로그래밍 언어(쿼리)이다.

 

SQL을 사용하면 RDBMS에서 데이터의 저장, 수정, 삭제 및 검색을 할 수 있다.

 

 

중요한 SQL 명령어

  • SELECT - 데이터베이스에서 데이터 추출
  • INSERT INTO - 데이터베이스에 새로운 데이터 삽입
  • UPDATE - 데이터베이스의 데이터 갱신
  • DELETE - 데이터 삭제
  • CREATE DATABASE- 새로운 데이터베이스 생성
  • ALTER DATABASE - 데이터베이스 변경
  • CREATE TABLE - 테이블 생성
  • ALTER TABLE - 테이블 변경
  • DROP TABLE - 테이블 삭제
  • CREATE INDEX- 인덱스 생성
  • DROP INDEX - 인덱스 삭제

Chapter 3 Transport Layer

Computer Networking : A Top Down Approach 7th Edition, Global Edition Jim Kurose, Keith Ross

3.1 Transport-layer services

7계층 응용 계층 (Application Layer) Application (TELNET, FTP, HTTP, SMTP)
6계층 표현 계층 (Presentation Layer)
5계층 세션 계층 (Session Layer)
4계층 전송 계층 (Transport Layer) Transport (TCP, UDP)
3계층 네트워크 계층 (Network Layer) Internet (IP)
2계층 데이터 링크 계층 (DataLink Layer)

Network Access (네트워크 드라이버, 하드웨어)

1계층 물리 계층 (Physical Layer)

 

트랜스포트 계층 프로토콜은 서로 다른 호스트에서 동작하는 애플리케이션 프로세스들 간의 논리적 통신을 제공.

Provide logical communication between app processes running on different hosts.

 

    ※논리적 통신 : 애플리케이션의 관점에서 프로세스가 동작하는 호스끼리 직접 연결된 것처럼 보이는 것

 

트랜스포트 계층 프로토콜은 네트워크 라우터가 아닌 종단 시스템(end systems)에서 구현되어 있음.

Transport protocols run in end systems

 

  1. 송신 측의 트랜스포트 계층은 송신 애플리케이션 프로세스로부터 수신한 메세지 앞에 트랜스포트 계층의 Header를 붙히고 이것을 세그먼트(Segments) 단위로 변환. 이후 아래 계층인 네트워크 계층으로 세그먼트를 전달한다.
  2. 네트워크 계층은 받은 세그먼트를 데이터그램(Datagram)으로 변환 후, 링크 계층으로 전달한다.
  3. 링크 계층은 받은 데이터그램을 프레임(Frame)으로 변환 후 수신측으로 전송한다. 

Data packaging in different layers

 이후, 이것을 받은 수신자는 링크계층 부터 애플리케이션 계층까지 순차적으로 Header을 읽어나가며

최종 데이터를 전송 받게 된다.

 

네트워크가 가능한 애플리케이션에서는 하나 이상의 전송 계층 프로토콜 사용이 가능하다. 

More than one transport protocol available to apps

 Ex) Internet : TCP, UDP

 

3.1.1 Transport vs network layer

  • Network layer : logical communication between hosts
  • Transport layer : logical comunication between processes

Post Box

예) 두 집에 각각 6명의 아이, 총 12명의 아이가 있음. 한 집은 Ann이, 다른 한 집은 Bill이 아이들의 보호자이다.

두 집에 따로 살고 있는 아이들이 서로에게 편지를 쓰려고 한다.

 

  이때, 집은 host, 아이들은 그 집의 processes로 볼 수 있다.

집에서 서로 편지를 보내는 것은 host 사이의 이루어지는 일이므로 Network layer에 해당한다.

편지를 받는 집(host)에 있는 Ann과 Bill은 편지에 적혀져 있는 아이들의 이름에 맞게 편지를 전달해주어야 하니,

Transport layer로 볼 수 있다.

 

  편지를 받지 못하면 나눠주지 못한다. 따라서 Transport layer이 제공할 수 있는 서비스는

Network layer의 서비스의 제약을 받는다.

예를 들어, Network layer에서 전송되는 Segments에 대한 delay guarantees나 bandwidth guarantees를

보장할 수 없다면 Transport layer 역시 이러한 서비스를 제공할 수 없다.

 

3.1.2 Internet transport-layer protocals

TCP/IP (TCP와 IP는 별개) 네트워크는 애플리케이션 계층에게 두가지 트랜스포트 계층 프로토콜을 제공한다.

  • TCP(Transmission Control Protocol) : 신뢰적, 연결기향형 서비스, reliable, in-order delivery
  • UDP(User Datagram Protocol) : 비신뢰적 비연결형 서비스, unreliable, unordered delivery

UDP의 한 예) IP

 IP : Internet Protocol의 약자. 호스트 간에 논리적 통신을 제공하는 '최선형' 전달 서비스(best-effort delivery Service).

즉, Segment 전달을 위해 최대한 노력하나 어떠한 보장도 하지 않는다는 것. Segment를 순서대로 전달하는 것도 보장하지 않는다. 또한, Segment 내부 데이터의 무결성(Integrity)을 보장하지 않음. 이처럼 IP는 unreliable service 이다.

 

 

애플리케이션 개발자는 소켓을 생성할 시, TCP와 UDP 중 하나를 선택해야 한다.

 


sidongmen

코로나19(COVID-19)로 인해, 학교에 가지 않고 재택 수업을 하게 되었다.

전공 수업을 따로 혼자서 공부해야 하는 상황이 되어서 공부했던 내용은 정리해서 블로그에 올릴 생각이다.

 

_끗

크로스 플랫폼의 탄생

" 어플을 만들어보자! 라는 목표를 가진 시동맨이 있다고 하자. 시동맨은 이제 두가지를 떠올릴 것이다. 안드로이드 그리고 ios. 역시 ios보단 안드로이드가 쉬우니 안드로이드로 어플을 개발하기로 한다. 몇날 며칠 꼬박꼬박 밤을 새워 가며 짠! 하고 어플을 만들고 어플을 앱스토어에 올렸다. 어플의 성공을 기다리고 있던 얼마 후, 어플의 사용자인 김아무개는 '아이폰에는 없나요?' 라는 피드백을 올린다. 다섯 글자에 시동맨은 땀을 흘리기 시작한다. 그렇다. 이 어플은 안드로이드용 앱이기 때문에 아이폰에서는 쓸 수가 없는 것이다! 그래서 피드백을 반영해 똑같은 디자인과 똑같은 기능을 가진 아이폰용 어플을 Swift로 개발하기로 한다. 즉, 포팅(Porting)을 하기로 한다. 몇날 며칠 또 한번 꼬박꼬박 밤을 새워서 짠! ios용 어플을 개발하였다. 결국 어플을 하나 만드려고 각기 다른 언어로 싹 다시 만든 것이다! 심지어 ios용 어플을 개발하기 위해 거금을 들여 맥북까지 구입하게 되었다. 으악 :< 아니, 도대체 이 세상에는 한번의 코딩 작업으로 안드로이드 ios 환경에서 모두 실행 할 수 있는 뭐 그런 건 없는 것인가? "

 

플러터(Flutter)

구글(Google)에서 개발한 크로스 플팻폼, 플러터(Flutter)

  플러터는 구글에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크이다. 구글에서 만들었으니 당연히 사용되는 언어 또한 구글에서 개발한 dart 라는 언어를 사용한다. 한번 dart로 작성한 것은 안드로이드와 ios 환경 양쪽에서 실행이 가능하다. (물론 ios 시뮬은 맥북이 있어야 하지만... 그래서 내가 맥북 질렀다 쓰바) 

 

  나는 2020년 1월 중반부터 이 플러터를 사용하기 시작하였는데, 플러터를 사용하면서 느낀 장점을 써보겠다.

지극히 내가 느낀 장점이니 굉장히 주관적이고, 아마 빠진 부분이 많을 것이다.

 

1. UI Rendering

  플러터에서는 기본적으로 각 플랫폼(Android, ios) 의 디자인을 그대로 제공한다. 즉, 안드로이드에서는 material 디자인과 ripple Animation 을,  ios에서는 cupertino 디자인을 볼 수 있다. 즉, 플랫폼에 따라 디자인 가이드에 맞게 화면을 그려주는 것이다. 이것은 마치 네이티브 언어로 작성한 것 같은 착각을 불러올 정도로 기분이 좋다. 또한 프로토타입의 UI 앱 화면 그대로를 구현하는 것도 자유자재로 할 수 있었다.

 

2. Fast development

  위에서 말했듯, 플러터는 dart라는 언어를 사용한다. 이전에 있었던 개발 경험(이라고 해도 거창한 게 아닌 대학교 과제)은 대부분 C언어나 자바로 개발하였다. 그래서 나는 새로운 언어인 dart를 배우는 데 어느정도 시간이 걸릴 것이라 생각했으나, 작은 어플을 하나 만드는 데 생각보다 오래 걸리지 않아서 놀랐다.

 

  플러터에서는 위젯(widget)이라는 것이 있는데, 이 것의 사용법, 작성 구조만 파악한다면 자바와 같은 객체지향 언어 개발 경험이 사람은 아마 해가 떠서 해가 지기 전까지는 충분히 배울 수 있을 것 같다. 플러터는 개발 속도가 빨랐는데, 그 이유는 dart언어가 배우기 쉽다는 것도 있지만 플러터에서 hot reload를 제공한다는 것이다.

 

실시간으로 작성된 코드가 반영된다.

  즉, 코드를 작성하거나 수정하면 그 즉시 에뮬레이터에서 실시간으로 바뀐 화면을 띄어준다. 덕분에 UI를 구현하는데 굉장히 간편했고 시간도 많이 절약할 수 있었다. (맥북에서는 VS Code로 개발 중인데 hot reload도 안되고 빌드도 안되서 실행은 Xcode에서 하는 중ㅜㅜ 아마도 안드로이드 스튜디오에서만 되는 듯.)

 

 

3. Flutter.dev, Youtube...etc

  구글에서는 정리하고 알려주는 걸 참 좋아하는 것 같다. 플러터로 어플을 개발하다가 구글링을 해야하는 순간이 오곤 하는데, 그럴 때마다 구글에 검색하면 거의 90퍼 이상은 해결된다. 도움이 되었던 사이트는

 

1. 스택오버플로우

 

Stack Overflow - Where Developers Learn, Share, & Build Careers

Stack Overflow | The World’s Largest Online Community for Developers

stackoverflow.com

  공식 홈페이지에서는 위젯이나 메소드의 자세한 설명과 예제를 제공한다. Yotube 계정에서는 '이 주의 위젯' 이라고 해서 매주 영상이 올라오는데, 한글 번역도 있어서 보는 재미가 쏠쏠하다.

2. 플러터 공식 홈페이지

 

Flutter - Beautiful native apps in record time

Flutter is Google's UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open sour

flutter.dev

  나는 특히, 유투브로 많이 찾아 보았는데, 국내 유투버에서는 코딩파파(The Coding PaPa)님이 좋은 영상들을 올려주시는데 많은 도움을 받았다.

 

The Coding Papa 더코딩파파

한국의 IT산업의 미래를 위해!!

www.youtube.com

 

 

단점

  플러터는 단점 또한 분명히 있었는데, 플러터로 개발하다가 디자인 부분이 아니라, 기능적 측면에서 구현을 하다보면 내가 원하는 기능을 구현하려면 어쩔 수 없이 네이티브 언어를 써야할 때가 존재하게 된다... 특히, 까다로운 작업을 필요로 하는 어플인 경우에는 플랫폼의 의존성이 크기 때문에 더욱이 그럴 것이다.

 

  내 경우에는 휴대폰에서 갤러리 사진을 다중으로 선택하는 기능을 구현하는 것이였다. 사진 1개를 선택하는 기능 정도는 image_picker 라는 패키지를 사용하면 되었으나, 다중으로 선택하기 위해서 우선 갤러리에 있는 사진을 모두 gridview에 띄우려고 하였다. 그런데 용량이 큰 사진을 load 하면서 memory가 부족하게 되어 어플에 crush가 일어났다.

 

  그래서 구글로 찾아보다가 gridview에 띄울 때에는 원본 사진의 용량을 줄인 thumbnail 사진을 써야 한다는 것을 알게 되었다. 그렇게 어떻게 사진을 압축해서 저장할까 찾아보다가 안드로이드 MediaStore thumbnail 을 사용하기 위해 네이티브로 작성하여 channel을 만들고 플러터와 연결하는 노가다를 했다. 플랫폼에 맞게 해주는 작업 또한 추가적으로 생긴 것이다. '근데 이럴꺼면 애시당초에 플러터를 안쓰지' 라는 생각에 다른 패키지를 찾아보다가 다중 선택을 지원하는 multi_image_picker 을 찾아서 쓰게 되었다. 이 패키지를 뜯어서 썸네일을 생성하는 부분만 사용하려고 했으나, 이 패키지 또한 안드로이드와 ios에서 채널로 연결되어 있어서 그냥 그대로 사용했다...

 

  크로스 플랫폼에 대한 큰 기대를 하기는 아직 시대적으로 맞지 않나? 네이버 라인에서도 플러터를 이용해 어플을 만드려다가 결국 네이티브로 개발하였다라는 글이 있다. 여기

 

 

Flutter, 왜 선택하지 못했나 - LINE ENGINEERING

안녕하세요. LINE Biz+ Pay App Dev 팀에서 앱 클라이언트의 iOS 버전을 개발하고 있는 박혁준입니다. 저는 얼마 전 열렸던 LINE Developers Meetup에서 제가 발표했던 내용을 공유하려고 합니다. Flutter를 새로운 프로젝트에 사용해 보려고 조사했던 내용과 적용하려고 했던 이유, 그리고 적용하지 못했던 이유까지 한 번 짚어보겠습니다. 특히 Flutter에 대해 잘 모르거나 적용해 보면 어떨까 고민했던 분들에게 도움이 되었으

engineering.linecorp.com

 

(역시 네이티브 언어가 답인가...)

 

왼쪽부터 키자루, 아카이누, 아오키지이며 해군본부의 3대장이다.

  앱스토어에 들어가 보면 하루에도 수백개의 어플이 올라와 install 버튼을 눌러달라고 한다. 하지만 사람들이 쓰는 어플은 정해져 있다. 인스타그램, 페이스북, 카톡... 3대장이다 즉, 사람은 자신이 평소 사용하는 어플만 쓰지 새로운 어플을 다운받아서 써보는 일은 손에 꼽는다는 것이다.

 

  이런 현실 속에서 개발팀이 앱을 개발하면서는 굉장한 시간적, 금전적 비용이 들게 되는데, 플러터를 사용하게 되면 빠른 기간 내에 어플을 만들어 볼 수 있으며, 크로스 플랫폼이기 때문에 안드로이드, ios 두 가지를 개발하는 것 보다 비용 또한 줄어들게 된다. 위에서 말한 단점이 분명 존재하지만 총알의 갯수가 적은 스타트 업이나, 개인 개발자들에게 있어서는 좋은 프레임워크인 것 같다.

 

 

 

sidongmen

  나는 올해 초부터 취업용 포토폴리오를 위해 플러터를 이용해 Optio라는 앱을 만들고 있다. 이 어플이 이후에는 맥북을 샀으니 두고 두고 Swift를 공부하게 될 터이기에 플러터를 쓸 일이 없을 것 같지만, 현재 개발하고 있으니 중간 중간에 알게 된 내용을 블로그에 적어 기록해 두려고 한다.

 

_끗

 

 

 

'프로그래밍 > Flutter' 카테고리의 다른 글

Shared Preferences  (1) 2020.04.28
Cupertino ActionSheet  (0) 2020.04.05
image shake animation  (0) 2020.04.04
flutter_staggered_grid_view  (0) 2020.03.15
Flutter Search-bar 구현  (0) 2020.03.13

+ Recent posts