'DEVELOP > ALGORITHM' 카테고리의 다른 글

Graph 최단거리 알고리즘 정리  (0) 2021.03.08
백준 2667번 단지번호 붙이기 (BFS)  (0) 2020.01.18
완전이진트리 중위 순회 문제  (0) 2020.01.16
단순 2진 암호코드  (0) 2020.01.14
View 조망권 문제  (0) 2020.01.14

 

트리를 이해하는 문제이다

이문제는 완전 이진트리를 중위 순회 하는 방법이다

 

중위 순회는 루트 노드를 중간에 읽는 방법이다

LEFT자식 -> ROOT -> RIGHT 자식

 

참고로

전위 순회 : ROOT -> LEFT -> RIGHT

후위 순회 : LEFT -> RIGHT ->ROOT

 

 

 

 

해당 문제에서 input이 이런식으로 들어오므로 input을 받을 때 주의 해야한다.

 

8
1 W 2 3
2 F 4 5
3 R 6 7
4 O 8
5 T
6 A
7 E
8 S

 

하지만 완전이진트리에서는 이걸 감안할 필요가 없다 트리에 들어가는 순서가 일정하기 때문이다.

그러므로 index와 value값만 받고 나머지는 무시해준다 ^_^;;

 

그래서 해당 tree 테이블에 해당 index값에 value값을 넣어주고

그다음 중위 순회 하는 function을 call 해준다.

 

먼저 해당 function을 나가는 조건을 명시해준다.

1. node가 tree의 수를 벗어나거나

2. tree에 값이 없다

 

 

그리고 참고로

tree는 인덱스가 0이 아닌 1부터 시작하도록 설계해주었다

완전이진 트리이므로

그리고 숫자 계산하기도 이게더 편하다.

 

 

그리고 먼저 LEFT를 먼저 뽑아줄거니깐

*2를해서 inOrder 메소드를 호출하고

그다음 출력 (ROOT)

그다음 오른쪽 자식 호출 *2+1

 

 

전위, 후위 순위는 이 출력하는 라인만 순서만 바꾸어 주면된다

 

 

다음은 input , output 파일이다.

 

 

inorder_input.txt
0.00MB
inorder_output.txt
0.00MB

'DEVELOP > ALGORITHM' 카테고리의 다른 글

백준 2667번 단지번호 붙이기 (BFS)  (0) 2020.01.18
카드교환 문제 (순열)  (0) 2020.01.17
단순 2진 암호코드  (0) 2020.01.14
View 조망권 문제  (0) 2020.01.14
KOITP 동맹의 동맹은 동맹  (0) 2018.06.12

 

이문제는 사실 이해만 하면 그닥 어렵지않다

처음에 풀었던 코드에서

좀더 성능좋게 해서 고쳐봤다

 

 

 

 

'DEVELOP > ALGORITHM' 카테고리의 다른 글

카드교환 문제 (순열)  (0) 2020.01.17
완전이진트리 중위 순회 문제  (0) 2020.01.16
View 조망권 문제  (0) 2020.01.14
KOITP 동맹의 동맹은 동맹  (0) 2018.06.12
KOITP - BFS / DFS 문제 풀기  (0) 2018.06.11

 

 

 

 

 

다음 문제를 풀어보겠다

무척 쉬운문제다 ;; 

 

 

findAns 함수가 핵심인데

 

우선 나는 한 중앙 아이를 잡고

거기서 앞뒤 1칸, 두칸의 아이들을 비교하였다

그런데, 조망권이 확보되려면 중앙 아이가 

양쪽의 아이들보다 커야 하므로,

그걸 먼저 검사해주었다 그 function이 isBig이고

 

그래서 검사하는 아이가 양쪽보다 크면 그제서야 조망권이 몇인지 체크한다.

 

조망권은 네개값 비교한것중 가장 작은 값으로 설정하면된다.

왜냐하면 하나라도 걸리면 조망권이 확보가 안되므로

 

그래서 Math.min값으로 구해주었다.

그런데 이 값은 항상 isBig이 네번 호출되므로 그닥 좋은 성능은 아닌거 같다

ㅋ_ㅋ;;

 

 

 

'DEVELOP > ALGORITHM' 카테고리의 다른 글

완전이진트리 중위 순회 문제  (0) 2020.01.16
단순 2진 암호코드  (0) 2020.01.14
KOITP 동맹의 동맹은 동맹  (0) 2018.06.12
KOITP - BFS / DFS 문제 풀기  (0) 2018.06.11
KOITP 가장 많은수 ( count sort)  (0) 2018.06.08

 

Oauth 2.0 는 무엇인가,, 알아보겠다 

이전엔 보통 open api를 이용할때 토큰을 받아와서 헤더값이 넣어주는 걸

즉, 토큰값을 받아오는걸 구현한 방식이 OAuth 라고 알고있었다

이것도 맞지만 더 자세히 알아보고자 한다 :-)

 

OAuth 2.0은 인가를 위한 프레임워크이다 

즉, 접근할 있는 권한을 주는 것이다.

 

여기서 헷갈리는 건 인증과 인가의 차이점이다.

인증은 Authentication : 본인여부를 확인 하는것  

인가는 Authorization : 서비스나 시스템에 접근 할 수 있도록 권한이 주어지는것 

 


 

OAuth 에는 네가지 역할이 있는데 그것은 다음과 같다.

4가지 실물

  1. Resource Owner (사용자,) : 서비스 이용자
  2. Client (G마켓) : 서비스 제공자
  3. Authorization Server (네이버-매표소)  : 토큰 발급 , 인가의 주체자
  4. Resource Server (네이버-검표하는곳) : 토큰 확인 , 리소스 접근심의 문지기

 

이렇게 정리 할 수 있는데,

이해할 수 있도록 설명을 덧붙이자면..

 

사용자가 G마켓이라는 서비스를 이용하고자 하는데

G마켓을 가입할때 직접 가입하지않고 요새 많이 이용하는 네이버,페이스북, 구글 ID로 로그인 하는걸 

이용해서 가입하고자 한다

 

그러면 나라는 사용자는 Resource Owner이고

사용하고자 하는 서비스는 Client G마켓이다.

 

그리고 Authorization Server는 네이버나 인증을 도와주는 곳인데 이곳에서는 토큰만 발급해준다.

그이후, 발급한 토큰을 가지고 네이버에서 원하는 정보를 가져오는데

이 토큰을 확인하는 것이 Resource Server이다.

 


Grant Type (허가 유형) 
- Client가 Authorization Server에게 토큰 발행을 요청하는 유형

 

토큰을 발행하는 과정에서 다양한 정보를 주고 받는데,

어떤 정보를 주고 받는가?를 알아보겠다

 

1. Client_id, client_secret


- Id와 pw 역할


2. Redirect_uri


- Client 가 authorization server에 토큰 발행을 요청할 때 브라우저를 아예 redirect하는
경우도 있다. 토큰을 발행하는 과정에서 client는 필요 시, 인가 되었을 타이밍에 redirect되어야 할
Uri 정보를 authorization server에게 넘겨준다.

 

3. Response_type


- Client가 authorization server에게 토큰발행 요청 했을 때, 응답을 정의 (request에 대한 response를 정의)
- 5가지 grant type중 2가지 방식에서만 사용 ( Implicit , Authorization code)
○ Implicit : client-> Authorization server 최초요청만으로 토큰 발행 : response_type 은 token
○ Authorization code는 최초 요청에 code 리턴  

 

4. Grant_type

밑에서 자세히 설명하겠다 이건 

 

5. Scope (optional)


- Client가 접근 가능하도록 승인된 내 리소스의 범위
- Client가 authorization server에 토큰을 발급받은 이후, Resource Server를 지나서 실제
Resource에 접근하려고 할때, client별로 접근이 가능한 리소스를 구별해놓은 정보
( 예를들어 G마켓에서 네이버로 접근할때, 전화번호만가능, 생일까지 가능 이런?)

 

6. State (optional)

- Sate는 csrf 공격을 막기위한 정보 ???

 

 



Grant Type 5가지


1. Authorization code

 

- 가장 복잡한 방식이지만 가장 범용적으로 사용

- 인가 받은 code값을 토대로 토큰을 요청하는 방식
- Authorization Server에게 토큰을 발행 받기 위해 code값을 요청하고 이 code값을 
바탕으로 토큰을 발급 받는 방식
- Resonse_type = code


2. Implicit

- Client가 토큰발행을 요청하면 최초의 요청만으로 Authorization Server가 토큰 발행
- Response_type = token
- 쿼리스트링에 토큰 노출-> 모바일앱 또는 단말기에서 동작하는 웹 애플리케이션에서 주로 사용

 

3. Client Credentials

 

- 너무너무 신뢰가는 Client라서 Authorization Server가 묻지도 따지지도 않고 토큰 발행
- Resource Owner가 아닌 Client가 요청함

 

4. Resource Owner Password Credentials


- Resource Owner가 Client에게 id/password 전달함
- 토큰발행 요청하는 방식이 GET
- Resource Owner와 Client의 일급비밀(password/secret)을 모아서 토큰발행 요청 

 

5. Refresh 

 

- 최초에 token 받았을 때, 발급되는 refresh token으로 token 만료시, 재 발행 요청

- Authorization Code / Client Credentials Grant type 만 가능

DB에 대해서 알아보다가

RDB와 NoSql은 각각 장단점이 명확해서

이거를 아우를 수 있는 NewSql이 있다는걸 알았다!

 

오늘은 이걸 알아보고자 한당 ㅎ_ㅎ


NewSql 이란?

 

2011년에 처음나온 개념이다 (얼마안되었네..!)

간단히 말하자면,

NewSql = RDB + NoSql

 

RDB처럼 ANSI SQL문법과 ACID(트랜잭션)을 지원하고,

NOSql처럼 Scale-out을 지원한다.

 

 

MIT 마이클 스톤 브레이커 교수는 NewSql에 대해서 5가지로 정의 내렸다.

 

정의

1.SQL 기반 상호작용

- SQL 문법을 사용한다

 

2. 트랜잭션을 위한 ACID 지원

- 트랜잭션 커밋(Commit)을 위한 필요속성인 ACID( 원자성, 일관성, 고립성, 지속성)을 지원

  • 원자성(Atomicity) : 트랜잭션과 관련된 작업들이 부분적으로 실행되다가 중단되지 않는 것을 보장하는 능력
  • 일관성(Consistency): 트랜잭션이 실행을 성공적으로 완료하면 언제나 일관성 있는 데이터베이스 상태로 유지
  • 고립성(Isolation): 트랜잭션을 수행 시 다른 트랜잭션의 연산 작업이 끼어들지 못하도록 보장
  • 지속성(Durability): 성공적으로 수행된 트랜잭션은 영원히 반영되어야 함

 

3. 비잠금 동시성 제어

- 데이터 무결성 처리를 위해 지원하는 트랜잭션 동시제어 잠금처리와 관련해 기존 방식과는 다른 Non-locking 구조를 지원

- 락을 걸지않고 단일 스케줄을 통해 동시성 제어를 한다.

 

4. 노드 단위 고성능

- 각 단일 DBMS 서버 노드 단위로 확장해 고성능 보장

- 네트워크를 통한 처리가 없고 Node 단위로 확장하여 성능을 높일 수 있다.

 

5. 병렬, 비공유 아키텍쳐

- 병렬적으로 수행해서 데이터를 고성능으로 처리 할 수 있어야하고, 분산 처리 시 데이터가 각 서버에 중복되지 않고 독립적으로 존재해야 한다.

- CPU, RAM, DISK 같은 하드웨어 자원을 서로 공유하지 않고 개별적으로 사용한다.

 

 

이걸로만으론 그렇게 와닿지가 않는다..! 더 찾아보자

 

특성

1. Partitioning/Sharding

Sharding를 통해 Scale-out을 지원한다.

- Sharding : 같은 테이블 스키마를 가진 데이터를 다수의 데이터베이스에 분산하여 저장하는 방법

- ex) 전 세계의 고객 데이터를 저장하는 DB를 분산한다면, 아시아면 샤드A, 유럽이면 샤드B... 이런식으로 저장한다.

- 테이블을 컬럼 값을 기초로하여 나눈다.

 

 

2. Concurrency Control

MVCC(Multi Version Concorrencty Control) 기법 적용

- NewSql은 트랜잭션에 의해 데이터 갱신이 발생 할때, 생성된 사본에 데이터를 갱신하는 연산을 수행하므로

다른 트랜잭션에 영향을 끼치지 않으면서 빠른 성능을 구현 할 수 있다.

 

 

3. Crash Recovery 

시스템이 무너졌을때, 데이터를 복구하고 상태를 유지하는 기능이 있다.

 

 

4. In-Memory DB

실시간 저장 및 처리를 위해서 인메모리 DB 아키텍처이다.

- 모든 NewSql이 인메모리 DB는 아니지만, 대부분 지원한다.

- 비싼 메모리 가격과 메모리 용량으로 인해 실시간 데이터 처리가 필요한 특정업무에만 제한적으로 사용돼 왔다.

- 메인 메모리 속성인 휘발성 때문에 디스크 백업이 필요한 제약을 극복하기 위한 연구 진행중이다.

 

 

 

RDB, NoSql, NewSql 비교

특성 RDB NoSql NewSql
ACID특성 O X(BASE 제공) O
인메모리 DB X O O
빅데이터 X O O
스케일 아웃 X O O
H/A O O O
리플리케이션 * O O O
성능 X O O
SQL지원 O X O
Relational O X O
join O X O

 

 

*리플리케이션 (replication) : 두개이상의 DBMS시스템을 Master/ Slave로 나눠서 동일한 데이터를 저장하는 방식

 

 

 

 

 


참고사이트

http://www.itworld.co.kr/news/111071

https://www.predictiveanalyticstoday.com/newsql-databases/

https://bitnine.tistory.com/entry/NewSQL%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC

'DEVELOP > DB' 카테고리의 다른 글

[MariaDB] general log 설정하기  (0) 2020.05.25
DB (mysql) 설정 변경  (0) 2020.03.13
NoSql DB 종류  (0) 2019.12.13
DB(database)의 종류  (0) 2019.12.11
Liquibase 사용법 및 개념  (0) 2019.06.12

저번 시간에는 RDB와 NoSql을 비교해서 이해해 보았다면,

이번에는 NoSql의 종류를 좀 더 상세히 이해해 보고자 한다.

 


NoSQL이란?

대용량 웹 서비스를 위하여 만들어진 데이터 저장소로 관계형 데이터 모델이 아닌 분산된 데이터를 저장 및 조회,

스키마가 없거나 느슨한 스키마를 제공한다.

1. Key-Value DB

- 간단한 키-값 메소드를 사용하여 데이터를 저장하는 비관계형 데이터 베이스 유형

- 키를 고유한 식별자로 사용하는 키-값 쌍의 집함으로 저장

- 키-값DB는 파티셔닝이 가능하고, 다른유형의 DB로는 불가능한 범위까지 수평확장 가능

 

사용사례

- 세션 스토어 : 세션 관련데이터를 주 메모리또는 DB에 저장하는데, 속도가 빠른 키-값 저장소가 적합하다. 키-값DB는 RDB보다 페이지당 제공하는 오버헤드가 적다

- 장바구니: 키-값DB는 분산처리 및 저장을 통해 수백만명의 사용자에게 서비스 제공, 동시에 대량의 데이터 처리및 상태변경 가능 또한, DB 내에 내장형 중복기능이 있어 스토리지 노드 손실 방지 

-Redis

 

Key Value
K1 AAA, BBB, CCC
K2 AAA, BBB
K3  DDD, CCC
K4 AAA, 222, 3333
K5 ZZZZ, 3 , 5555

2. Document DB

- JSON 유사 형식의 문서로 데이터 저장 및 쿼리하도록 설꼐된 비관계형 데이터베이스

- 개발자들이 어플리케이션 코드에서 사용하는것과 동일한 문서 모델 형식을 사용하여 손쉽게 데이터 저장, 쿼리 가능

- 유연한 인덱싱, 강력한 임시 쿼리 , 문서 모음에 대한 분석 지원

 

사용사례

- 콘텐츠 관리 : 어플리케이션이 추적하는 각 엔터티를 단일 문서로 저장 가능 

- 카탈로그 : Doc DB는 효율적 , 효과적으로 저장 가능. 각 상품의 속성을 단일 문서로 기술하여 관리가 쉽고 , 읽기 속도도 빠르다.

- MongoDB, CouchDB

[ 
    { 
        "year" : 2013, 
        "title" : "Turn It Down, Or Else!", 
        "info" : { 
            "directors" : [ "Alice Smith", "Bob Jones"], 
            "release_date" : "2013-01-18T00:00:00Z", 
            "rating" : 6.2, 
            "genres" : ["Comedy", "Drama"], 
            "image_url" : "http://~~~.com", 
            "plot" : "A rock band plays their music at high volumes, annoying the neighbors.", 
            "actors" : ["David Matthewman", "Jonathan G. Neff"] 
        } 
    }, 
    { 
        "year": 2015, 
        "title": "The Big New Movie", 
        "info": { 
            "plot": "Nothing happens at all.", 
            "rating": 0 
        } 
    } 
]

 

3. Graph DB

- 데이터베이스는 노드를 사용하여 데이터 엔터티를 저장하고 엔지로는 엔터티간의 관계를 저장한다.

- 엣지는 항상 시작 노드, 끝노드, 유형과 방향을 가지며 상-하위 관계, 동작, 소유자등을 문서화 한다. 

 

사용사례

- 이상탐지 : 정교한 이상탐지와 예방기능이 있다. 관계를 사용하여 거의 실시간으로 금융이나 구매 트랜잭션 처리 가능

- 추천 엔진: 고객 관심 분야, 친구 , 구매이력과 같은 정보 카테고리들 사이의 그래프 관계 저장

- Neo4j, InfoGrid , Infinite Graph

4. In-Memory DB

- 모든 데이터를 주메모리에 저장하여 Disk에 접근하는 것을 제외해서 즉각적인 반응이 올 수 있는 DB

- micro 초 반응, 많은 트래픽이 요하는 어플리케이션에 적합하다.

 

사용사례

- Real-time Bidding

- 게이밍 리더보즈 : realtime으로 정렬된 데이터를 빠르게 가져 올 수 있다.

- 캐시 : 보통 RAM에 저장해서 빠르게 접근 가능

 

 

5. Search-Engine DB

- 비슷한 주제로 분류한 인덱스를 사용하며, 길고 구조화 되지 않은 데이터를 다루는데 최적화 되어있다. 아주 길거나 복잡한 text를 다루는데 좋다.

 

사용사례

- Text Search : Search-Engine DB를 쓰면 RDB보다 full-text를 찾는게 더 빠르고 관련있는 결과들을 정렬 가능

- 로그와 분석 : 로그를 더 효율적으로 관리 가능, 여러 다른 어플리케이션의 로그들을 중앙에서 관리 가능

-ElasticSearch

 

 

6. Column Family Store

- Key-Value 모델이 발전한 형태이다.

- key는 여러 컬럼을 가리키며, 컬럼은 컬럼 패밀리(슈퍼 컬럼)에 따라 정렬된다.

- 여러 서버의 분산된 수많은 데이터를 저장, 처리하기 위해 만들어졌다.

- Join이 되지 않는다. 신규데이터가 추가 될때, 구조를 변경하지않고 Column Family 테이블에 입력하면 된다. 

- Cassnadra, HBase

테이블명 사원
CF : 공통사항

성명

주민번호

CF:최종학력

학교명

전공

졸업년월일

CF:전화번호

집 전화번호

모바일 전화번호

사무실 전화번호

 


참고사이트

https://aws.amazon.com/ko/nosql/

https://subokim.wordpress.com/2011/05/31/nosql-db-four-type/

https://12bme.tistory.com/323

'DEVELOP > DB' 카테고리의 다른 글

[MariaDB] general log 설정하기  (0) 2020.05.25
DB (mysql) 설정 변경  (0) 2020.03.13
NewSql 이란? All in one DBMS  (0) 2019.12.16
DB(database)의 종류  (0) 2019.12.11
Liquibase 사용법 및 개념  (0) 2019.06.12

이번 시간엔 데이터베이스 종류에 대해 알아보겠다

일반적으론 관계형 데이터베이스(RDB)를 가장 많이 쓰는데 요새는 NoSql이라는 것도 많이 쓰인다.

 

학부 수업시간에는 RDB에 대해서만 배웠었는데

IT 직무에 있으면서 사실 데이터베이스를 모르면 전혀 업무를 할 수 없는 수준이라서 

반드시 알아야 하는 부분이다.

 

나는 RDB에서는 익숙하지만 NoSql에 대해서는 생소한 부분이 있기 때문에 두가지를 

비교해서 이해해보도록 하겠다.

 

 


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

- 가장 많이 사용

- 행(Column)과 열(Row)로 표현되는 테이블간의 관계를 나타냄

- 엄격한 스키마 (=structure)

- SQL 질의문을 통해 요청 처리

- Mysql , Oracle, PostgreSql

 

 

2. NoSQL ( Not Only SQL)

- 스키마, 관계없음

- RDB의 확장성 이슈 해결하기 위해 나옴

- MongoDB,hBase

- 보통 key-value 형태

 

가) Document 방식

- Json,XML 과같은 collection 데이터 모델 구조 사용

- MongoDB , CouchDB

 

나) Key-Value 방식

- key-value 의 데이터가 쌍으로 저장

- Redis , Memchached : im-memory DB

 

다) Big Table DB

- key-value 형태에서 발전, column family 데이터 모델 구조사용

- HBase, Cassandra, Hypertable, ScyllaDB

 

 

 

3. 비교

  RDB NoSql
특징

Scale-up

(성능을 높이려면 하드웨어를 고성능으로 교체)

 

중복 불가

Scale-out

(분산컴퓨팅으로 DB성능 높일수 있다)

 

중복 허용

장점

명확하게 정의된 스키마

데이터 무결성 보장

스키마가 없어서 유연, 언제든지 데이터 저장 새 필드 추가 가능

데이터는 어플리케이션이 필요로 하는 형식으로 저장, 따라서 속도가 빠르다.

 

 

단점

유연X, 데이터스키마 항상 사전에 정의 되어야한다.

관계가 있으므로 JOIN문이 많은 복잡한 쿼리

수평적 확장(scale-out)어렵다.

유연성때문에 데이터구조 결정을 하지못한다.

데이터가 여러 컬렉션에 중복되어 있어서 수정을 해야할 경우 모든 컬렌션에서 수정해야한다.

 

 

언제 사용?

관계를 맺고있는 데이터가 수정이 자주 되는 경우 

스키마가 변경 가능성이 적을 때

정확한 데이터 구조를 알 수 없거나, 변경/확장이 될 수 있는 경우

 

Read는 자주하지만 update는 자주 하지 않는 경우

 

막대한 양의 데이터를 다루는 경우(scale-out이 필요한 경우)

 

4. 결론

다양한 경우가 있겠지만,

나라면 RDB와 NoSql을 적당히 섞어서 쓸거 같다.

 

우선 RDB를 사용하되,

특히 고정적인 스키마가 필요한 경우, update가 자주 일어나는 경우에는 RDB를 사용하고

 

빅데이터나, 데이터 구조가 일관적이지 않은 부분은 NoSql을 사용할거 같다

 

그러는 것이 수정할때도, 데이터를 가져올 때의 성능도 좋을 것으로 보인다.

 

 

 


참고 블로그

https://honeyteacs.tistory.com/19

https://siyoon210.tistory.com/130

https://toma0912.tistory.com/83

'DEVELOP > DB' 카테고리의 다른 글

[MariaDB] general log 설정하기  (0) 2020.05.25
DB (mysql) 설정 변경  (0) 2020.03.13
NewSql 이란? All in one DBMS  (0) 2019.12.16
NoSql DB 종류  (0) 2019.12.13
Liquibase 사용법 및 개념  (0) 2019.06.12
 

Angular

React

Vue

출시

2010년에 Google에서

2013년에 Facebook에서

2014Google직원인 Evan You

 

TypeScript

X

X

DOM

Real DOM

Virtual DOM

Virtual DOM

바인딩

단방향 , 양방향 데이터바인딩

단방향 데이터 바인딩

단방향 , 양방향 데이터바인딩

Template

HTML파일에 마크업을 작성

JSX 기술

HTML파일에 마크업을 작성

Popularity

3.

1.

2.

Usercase

Google, The Guardian , Weather.com

Facebook, Twitter, Whatsapp, Instagram

9Gag, GitLab

develop

Angular CLI

Create React App

Vue CLI

 

저번주에는 개념적인것만 공부했다면 

이번주에는 각각 샘플 프로젝트를 해보며 직접 무엇이 다른지 경험해보았다.

 

 

 

1. Angular

 

다른언어랑 비교 했을때 가장 다른 점은

Typescript 를 사용한다는 점이고, 더 객체 지향적인 관점에서 개발되는거 같다

 

직접 해본 느낌은 자바 MVC 패턴으로 개발하는거랑 정말 크게 다르지 않은 느낌이다..

자바가 javascript로 바뀐정도 느낌이랄까

 

특히 service를 이용해서 구현한부분에서 그렇게 느꼈다.

 

 

 

 

2. React

 

JSX를 이용하여 자바스크립트에서 DOM 생성

state는 불변이라 data를 변경시에 setState()를 이용해서 변경한다.

React Native가 있어 Mobile 앱에서 강점이 있다.

 

다른언어는 html 파일에 마크업방식으로 template을 구성한다면

React는 html 태그에 js 문법도 같이 들어가있는 jsx을 이용한다는게 문법적으로 많이 다르다.

 

그리고 vue.js와 크게 다른건 

뒤에서 얘기하겠지만..

vue.js 는 data를 직접 변경이 가능하지만 React는 불가능하고 setState()라는 function을 이용한다.

 

 

기존에 Vue.js는 해봤어서 

React를 해보니 느낀건 문법적인거 말고는 크게 다른게 없는데..??

부모 자식 컴포넌트 간에 props, emit하는것도 비슷하고 

다 비슷한데??

 

그런데 JSX하는게 가장크게 다르고 

그거에 따라 건드려 줄수 있는게 더 많다고 한다 ㅎㅎ;; 더 해봐야 알겠지만..

 

그리고 Vue.js에 있는 개념과 비슷하게

 shouldComponentUpdate() 이런 function이 있는데 이부분은 더 공부 해봐야겠다..

 

 

3. Vue.js

 

한 컴포넌트에 template, script, style 이 모두 들어가 있다.

그리고 앞에서 얘기한거처럼 data를 직접 변경 가능하고

랜더링이 빠르다.

 

확실히 Vue가 더 가볍고 쉬운건 확실히 맞는거 같다

 

Vue를 먼저 배워서 그런지 그이후 파생되는 React도 조그만 보면 알 수 있을거 같다

Angular는 내 느낌상 자바 객체지향 개념이 있다보니

또 이것 또한 아는 부분이라

금방 할 수 있을거 같긴한데 

 

 

결론

개발자의 숙련도에 따라 결정한다.

 

초급 개발자 위주이면 Vue.js

중급 개발자 이상이 대다수이면 React

- ThirdParty Library를 잘 조합할 수 있다면 React 그런것이 번거롭다면 Angular

Angular : 프로젝트 규모가 크고 타입스크립트를 선호

-유지보수가 좋다. MVC패턴

-

React : 거대한 생태계와 유연성을 선호 , Native 앱에서 사용가능

-Popularity

Vue.js : 쉽고 가벼운 프레임워크

 

Front end Framework 3개중 고민하는 사람이 많을 것으로 생각한다.

예전에는 Angular가 대세였지만 요새는 React와 Vue 중에서 고민을 하는거같다

 

그래서 세개를 다양한 관점에서 비교해 봤다.

해당 사이트를 요약해서 표로 만들어 봤다 

(https://hackernoon.com/angular-vs-react-vs-vue-which-is-the-best-choice-for-2019-16ce0deb3847)

 

 

  Angular React Vue
Popularity 3. 1. 2.
Introduction to the background Released in 2010
by Google
Released in 2013
by Facebook
Released in 2014 by Evan you who is an ex-engineer
of Google
Performance Uses real DOM Uses virtual DOM Uses virtual DOM
Use Cases Google, The Guardian , Weather.com Facebook, Twitter, Whatsapp, Instagram 9Gag, GitLab
Framework size Heavyweight application Suitable for light-weight application The lightest
Learning curve 3. need to learn typescript 1?? 2??
Flexibility Offers you need
but not much flexible
The most flexible Not much opinionated
or flexible
Component based Yes Yes Yes

 

 

결론은,

Vue and React offers better performance and flexibility than Angular.

Vue and react are more suited for light-weight applications and angular is the best for large UI applications.

Angular is highly opinionated and unlike Vue and React, it offers everything
from routing, templates to testing utilities in its package.

Vue is the most popular, loved and growing framework of Javascript.

 

 

개인적인 의견을 붙여보자면,

저는 vue만 해봤는데 ..

해당 사이트에서는 react가 learning curve가 제일 낮다고 했지만 내 생각엔 vue가 제일 낮은거 같다

react를 안해봤지만 vue를 상당히 쉽게 배웠기 때문이다

 

react를 해보고 다시 리뷰해보자 ㅎㅎ '-'

react는 React Native가 있어 모바일앱을 구현하기 좋아서 모바일을 커버하고 싶다면 

react를 선택하는것도 좋을거 같다

 

 

그럼이만

 

 

+ Recent posts