'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 |
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 파일이다.
백준 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 |
이문제는 사실 이해만 하면 그닥 어렵지않다
처음에 풀었던 코드에서
좀더 성능좋게 해서 고쳐봤다
카드교환 문제 (순열) (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이 네번 호출되므로 그닥 좋은 성능은 아닌거 같다
ㅋ_ㅋ;;
완전이진트리 중위 순회 문제 (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 에는 네가지 역할이 있는데 그것은 다음과 같다.
이렇게 정리 할 수 있는데,
이해할 수 있도록 설명을 덧붙이자면..
사용자가 G마켓이라는 서비스를 이용하고자 하는데
G마켓을 가입할때 직접 가입하지않고 요새 많이 이용하는 네이버,페이스북, 구글 ID로 로그인 하는걸
이용해서 가입하고자 한다
그러면 나라는 사용자는 Resource Owner이고
사용하고자 하는 서비스는 Client G마켓이다.
그리고 Authorization Server는 네이버나 인증을 도와주는 곳인데 이곳에서는 토큰만 발급해준다.
그이후, 발급한 토큰을 가지고 네이버에서 원하는 정보를 가져오는데
이 토큰을 확인하는 것이 Resource Server이다.
Grant Type (허가 유형)
- Client가 Authorization Server에게 토큰 발행을 요청하는 유형
토큰을 발행하는 과정에서 다양한 정보를 주고 받는데,
어떤 정보를 주고 받는가?를 알아보겠다
- Id와 pw 역할
- Client 가 authorization server에 토큰 발행을 요청할 때 브라우저를 아예 redirect하는
경우도 있다. 토큰을 발행하는 과정에서 client는 필요 시, 인가 되었을 타이밍에 redirect되어야 할
Uri 정보를 authorization server에게 넘겨준다.
- Client가 authorization server에게 토큰발행 요청 했을 때, 응답을 정의 (request에 대한 response를 정의)
- 5가지 grant type중 2가지 방식에서만 사용 ( Implicit , Authorization code)
○ Implicit : client-> Authorization server 최초요청만으로 토큰 발행 : response_type 은 token
○ Authorization code는 최초 요청에 code 리턴
밑에서 자세히 설명하겠다 이건
- Client가 접근 가능하도록 승인된 내 리소스의 범위
- Client가 authorization server에 토큰을 발급받은 이후, Resource Server를 지나서 실제
Resource에 접근하려고 할때, client별로 접근이 가능한 리소스를 구별해놓은 정보
( 예를들어 G마켓에서 네이버로 접근할때, 전화번호만가능, 생일까지 가능 이런?)
- Sate는 csrf 공격을 막기위한 정보 ???
- 가장 복잡한 방식이지만 가장 범용적으로 사용
- 인가 받은 code값을 토대로 토큰을 요청하는 방식
- Authorization Server에게 토큰을 발행 받기 위해 code값을 요청하고 이 code값을
바탕으로 토큰을 발급 받는 방식
- Resonse_type = code
- Client가 토큰발행을 요청하면 최초의 요청만으로 Authorization Server가 토큰 발행
- Response_type = token
- 쿼리스트링에 토큰 노출-> 모바일앱 또는 단말기에서 동작하는 웹 애플리케이션에서 주로 사용
- 너무너무 신뢰가는 Client라서 Authorization Server가 묻지도 따지지도 않고 토큰 발행
- Resource Owner가 아닌 Client가 요청함
- Resource Owner가 Client에게 id/password 전달함
- 토큰발행 요청하는 방식이 GET
- Resource Owner와 Client의 일급비밀(password/secret)을 모아서 토큰발행 요청
- 최초에 token 받았을 때, 발급되는 refresh token으로 token 만료시, 재 발행 요청
- Authorization Code / Client Credentials Grant type 만 가능
강화학습이란? ( feat. 지도학습) (1) | 2020.10.30 |
---|---|
[Security] 사용자 인증방식 종류와 결정 (0) | 2020.05.26 |
리눅스 alias 등록 방법 (0) | 2020.05.18 |
Feign 사용법 ( Neflix의 Rest Client 라이브러리) API GET/POST 하기~ (0) | 2020.03.12 |
OSI 7 계층 이해하기!! (0) | 2020.01.21 |
DB에 대해서 알아보다가
RDB와 NoSql은 각각 장단점이 명확해서
이거를 아우를 수 있는 NewSql이 있다는걸 알았다!
오늘은 이걸 알아보고자 한당 ㅎ_ㅎ
2011년에 처음나온 개념이다 (얼마안되었네..!)
간단히 말하자면,
NewSql = RDB + NoSql
RDB처럼 ANSI SQL문법과 ACID(트랜잭션)을 지원하고,
NOSql처럼 Scale-out을 지원한다.
MIT 마이클 스톤 브레이커 교수는 NewSql에 대해서 5가지로 정의 내렸다.
1.SQL 기반 상호작용
- SQL 문법을 사용한다
2. 트랜잭션을 위한 ACID 지원
- 트랜잭션 커밋(Commit)을 위한 필요속성인 ACID( 원자성, 일관성, 고립성, 지속성)을 지원
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 |
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
[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의 종류를 좀 더 상세히 이해해 보고자 한다.
대용량 웹 서비스를 위하여 만들어진 데이터 저장소로 관계형 데이터 모델이 아닌 분산된 데이터를 저장 및 조회,
스키마가 없거나 느슨한 스키마를 제공한다.
- 간단한 키-값 메소드를 사용하여 데이터를 저장하는 비관계형 데이터 베이스 유형
- 키를 고유한 식별자로 사용하는 키-값 쌍의 집함으로 저장
- 키-값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 |
- 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 } } ] |
- 데이터베이스는 노드를 사용하여 데이터 엔터티를 저장하고 엔지로는 엔터티간의 관계를 저장한다.
- 엣지는 항상 시작 노드, 끝노드, 유형과 방향을 가지며 상-하위 관계, 동작, 소유자등을 문서화 한다.
사용사례
- 이상탐지 : 정교한 이상탐지와 예방기능이 있다. 관계를 사용하여 거의 실시간으로 금융이나 구매 트랜잭션 처리 가능
- 추천 엔진: 고객 관심 분야, 친구 , 구매이력과 같은 정보 카테고리들 사이의 그래프 관계 저장
- Neo4j, InfoGrid , Infinite Graph
- 모든 데이터를 주메모리에 저장하여 Disk에 접근하는 것을 제외해서 즉각적인 반응이 올 수 있는 DB
- micro 초 반응, 많은 트래픽이 요하는 어플리케이션에 적합하다.
사용사례
- Real-time Bidding
- 게이밍 리더보즈 : realtime으로 정렬된 데이터를 빠르게 가져 올 수 있다.
- 캐시 : 보통 RAM에 저장해서 빠르게 접근 가능
- 비슷한 주제로 분류한 인덱스를 사용하며, 길고 구조화 되지 않은 데이터를 다루는데 최적화 되어있다. 아주 길거나 복잡한 text를 다루는데 좋다.
사용사례
- Text Search : Search-Engine DB를 쓰면 RDB보다 full-text를 찾는게 더 빠르고 관련있는 결과들을 정렬 가능
- 로그와 분석 : 로그를 더 효율적으로 관리 가능, 여러 다른 어플리케이션의 로그들을 중앙에서 관리 가능
-ElasticSearch
- 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/
[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에 대해서는 생소한 부분이 있기 때문에 두가지를
비교해서 이해해보도록 하겠다.
- 가장 많이 사용
- 행(Column)과 열(Row)로 표현되는 테이블간의 관계를 나타냄
- 엄격한 스키마 (=structure)
- SQL 질의문을 통해 요청 처리
- Mysql , Oracle, PostgreSql
- 스키마, 관계없음
- 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
RDB | NoSql | |
특징 |
Scale-up (성능을 높이려면 하드웨어를 고성능으로 교체)
중복 불가 |
Scale-out (분산컴퓨팅으로 DB성능 높일수 있다)
중복 허용 |
장점 |
명확하게 정의된 스키마 데이터 무결성 보장 |
스키마가 없어서 유연, 언제든지 데이터 저장 새 필드 추가 가능 데이터는 어플리케이션이 필요로 하는 형식으로 저장, 따라서 속도가 빠르다.
|
단점 |
유연X, 데이터스키마 항상 사전에 정의 되어야한다. 관계가 있으므로 JOIN문이 많은 복잡한 쿼리 수평적 확장(scale-out)어렵다. |
유연성때문에 데이터구조 결정을 하지못한다. 데이터가 여러 컬렉션에 중복되어 있어서 수정을 해야할 경우 모든 컬렌션에서 수정해야한다.
|
언제 사용? |
관계를 맺고있는 데이터가 수정이 자주 되는 경우 스키마가 변경 가능성이 적을 때 |
정확한 데이터 구조를 알 수 없거나, 변경/확장이 될 수 있는 경우
Read는 자주하지만 update는 자주 하지 않는 경우
막대한 양의 데이터를 다루는 경우(scale-out이 필요한 경우) |
다양한 경우가 있겠지만,
나라면 RDB와 NoSql을 적당히 섞어서 쓸거 같다.
우선 RDB를 사용하되,
특히 고정적인 스키마가 필요한 경우, update가 자주 일어나는 경우에는 RDB를 사용하고
빅데이터나, 데이터 구조가 일관적이지 않은 부분은 NoSql을 사용할거 같다
그러는 것이 수정할때도, 데이터를 가져올 때의 성능도 좋을 것으로 보인다.
참고 블로그
https://honeyteacs.tistory.com/19
[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에서 |
2014년 Google직원인 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 : 쉽고 가벼운 프레임워크
[Vue] Component Force Rerendering 하기 (강제로 rerender) (4) | 2021.10.26 |
---|---|
[Vue] computed , watch 중에서 뭐써야하지??? 헷갈리네 (0) | 2020.10.30 |
[Vue] 컴포넌트를 특정부분만 수정해서 쓰고싶다면? Slot ( 컴포넌트 재사용하기) (0) | 2020.06.25 |
React : Functional component 와 Class component의 차이점 (0) | 2020.03.24 |
Angular vs React vs Vue 비교 (0) | 2019.11.25 |
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를 선택하는것도 좋을거 같다
그럼이만
뿅
[Vue] Component Force Rerendering 하기 (강제로 rerender) (4) | 2021.10.26 |
---|---|
[Vue] computed , watch 중에서 뭐써야하지??? 헷갈리네 (0) | 2020.10.30 |
[Vue] 컴포넌트를 특정부분만 수정해서 쓰고싶다면? Slot ( 컴포넌트 재사용하기) (0) | 2020.06.25 |
React : Functional component 와 Class component의 차이점 (0) | 2020.03.24 |
Angular vs React vs Vue.js 비교 (0) | 2019.12.06 |