React 쓰는 이유

 React 쓰는 이유




React 장점


React는 모바일 App처럼 새로고침 현상 없이 부드럽게 동작합니다.

React로 웹을 만들지만 앱 처럼 동작하기 때문에 wep-app 이라고 부릅니다.

웹앱을 쉽게 만들 수 있는 라이브러리는 총 세 가지가 있습니다.

  • React
  • Angular
  • Vue

저 세가지 중에서 가장 많이 쓰이고 있는 것이 React 입니다.

React-native로 모바일 앱으로 발행이 쉽고 앱 처럼 빠른 동작 덕분에 쇼핑몰 같은 곳에서는 일반 웹 사이트보다 구매율이 더 높다고 합니다. 그래서 요즘은 React로 웹앱을 많이 만들기 때문에 웹 개발자들의 필수 스킬이 되어버렸습니다.

React 단점

React는 문법이 좀 어렵습니다. hook 함수를 외워야 하고 작동 원리를 배워야 합니다.

옛날에는 class문법을 써서 많이 복잡했는데 요즘은 함수형으로 나와서 많이 간편해졌지만 React를 처음 접하는 사람에게는 생소하기 때문에 좀 어렵습니다.

자바스크립트 기초와 HTML/CSS를 알아둬야 하기 때문에 공부하는 기간이 늘어 공부만 하다가 언제 취업하지 하고 포기 하실 수도 있습니다.

저는 퍼블리싱을 1년정도 했었기 때문에 HTML/CSS는 수월했지만 자바스크립트를 잘 몰랐기 때문에 시간이 조금 걸렸습니다.

React와 같이 공부 하면 좋은것들

Redux-Toolkit

Redux-Toolkit은 Redux를 좀 더 간편하게 쓰기 위해 나온 상태 라이브러리입니다. Redux 말고도 요즘엔 recoil도 많이 쓰이는것 같습니다.

Redux-Toolkit(상태라이브러리)을 쓰는 이유

복잡한 props문법 대신 쉽고 깔끔하게 사용 할 수 있습니다.
state 변경 관리할 때 씁니다.

Next.js

React는 프레임워크가 아닌 라이브러리 입니다. 이 라이브러리를 좀 더 간편하게 쓰기 위해 Next.js 프레임워크가 나왔습니다.

그러나 Next.js가 프론트엔드 기술스텍이 아닙니다. 요즘은 인건비 때문에 풀스텍 개발자를 많이 찾는 추세라 프론트엔드 기술만으로 롱런하기가 조금 어렵습니다.

그래서 나온것이 Next.js 프레임워크입니다. 이 프레임워크는 풀스텍개발용으로 나왔습니다.

Next.js의 장점은 서버사이드렌더링입니다. React는 클라이언트사이드렌더링입니다.

client-side Rendering이란?

서버가 아니라 유저 브라우저에서 실시간으로 데이터를 만들어줍니다.

그러면 앱처럼 부드럽게 동작을 하게 됩니다.

client-side Rendering의 단점

  • 구글 검색노출이 오래 걸려서 어려움
  • 첫페이지 로딩속도 느림

server-side Rendering이란?

서버에서 html을 미리 다 만들어서 유저 브라우저에 보내주기 때문에 조금 더 가볍고 구글 검색 노출이 잘되며 페이지 로딩 속도도 빠릅니다. 그리고 원하는 페이지에서 client-side rendering이 가능합니다.

Next.js의 장점

  • 자동 라우팅 기반 - 프로젝트에 폴더를 만들면 그 폴더를 기반으로 페이지가 만들어집니다.
  • 클라이언트 사이드 렌더링이 가능합니다.
  • 캐싱이 쉽습니다.
  • 최적화된 이미지를 쓸 수 있습니다.

Next.js의 단점

폴더기반 라우팅 때문에 자바스크립트 파일이 많아집니다.

React의 미완성 기능들이 도입되어서 언제 지원이 되는지 모릅니다.

서버사이드컴포넌트에서는 자바스크립트 문법을 쓸 수 없어서 클라이언트 컴포넌트를 따로 만들어야 하기 때문에 js 파일이 많아져서 복잡해집니다.

websocket, webRTC 등등 같은 것들은 서버를 하나 더 만들어야 합니다.

React를 공부 해보고 Next.js도 공부해두면 좋을것 같습니다.

-

댓글

댓글 쓰기

이 블로그의 인기 게시물

[정보처리기사] OSI 7계층 정리

 [정보처리기사] OSI 7계층 정리  7계층 - 응용계층 데이터 또는 프로그램 사용장비: 없음 6계층 - 표현계층 압축, 암호화 사용장비: 없음 5계층 - 세션계층 연결(로그인등) 사용장비: 없음 4계층 전송계층(트랜스포트 계층) 양종단간 신뢰성 전달 TCP/UDP 7,6,5 계층에서 내려온 데이터에 헤더를 붙이고 이것을 세그먼트라고 함 사용장비: 없음 3계층 네트워크계층 빠르게 연결 IP 세그먼트를 내려 받아서 헤더를 붙이고 이것을 패킷이라고 한다. 사용장비: 라우터(패킷을 목적지까지 최적의 경로를 통해 전달) 라우터 프로토콜의 종류 정적 라우터: 관리자가 직접 입력 동적 라우터  - IGP(내부 라우터) 거리 벡터 알고리즘(Distance Vector)          RIP: 벨만-포드 알고리즘 사용                  홉 수 기반 라우팅 프로토콜이며 최대 15홉수 지원 링크상태 알고리즘(Link-State Vector)         OSPF: 다익스트라 알고리즘 기반                    링크 상태 변화 시 라우팅 정보 전송 - EGP(외부 라우터)         BGP: 대규모 네트워크에 적합한 Path Vector 기반  2계층 - 데이터 계층 인접한 노드간에 신뢰성 전달 패킷을 내려 받아서 헤더를 붙이고 이것을 프레임이라고 한다. 사용장비: 스위칭허브(허브 기능에 스위치 기능 추가), 브리지(두 개 이상의 LAN을 연결하여 하나의 확장된 네트워크를 형성) 1계층 - 물리계층 데이터를 비트 형태로 바꿔서 전달 사용장비: NIC(랜카드), 더미허브(네트워크 내에 여러 노드를 연결), 리피터(증폭기) 7...
자세한 내용 보기

블로그스팟 상위노출 시작하기

이미지
블로그스팟 상위노출 검색엔진 최적화를 위해서 해야하는 두가지 작업이 있습니다. 바로 sitemap과 rss를 구글서치콘솔에 제출해야 합니다. rss와 sitemap을 등록하는 이유는 검색로봇이 주기적으로 재방문하여 내 사이트의 글을 적극적으로 알리는 덕분에 내가 블로그에 글을 작성하면 주기적으로 수집을 해줍니다. 구글에 상위노출을 하려면 구글서치콘솔에서 제출해야하고 네이버에서 상위노출을 하기 위해서는 서치어드바이저에서 제출하면 됩니다. sitemap이란? 사이트맵은 구글이나 네이버와같은 검색엔진에 색인 할 모든 페이지를 나열한 XML 파일입니다. 색인(index)이란? "색인은 책 속의 낱말이나 구절, 또 이에 관련한 지시자를 찾아보기 쉽도록 일정한 순서로 나열한 목록을 가르킨다. 인덱스(index)라고도 한다" - 위키백과 즉 알아보기 쉽도록 표시해둔 목록이라는 말입니다. 웹에서의 색인은 데이터를 기록할 때 데이터의 이름이나 크기 등의 데이터를 보여주는 속성과 이러한 데이터를 기록한 장소등을 보기쉽게 표시하는 것으로 데이터에 대한 참조용 데이터 를 색인이라고 합니다. 특히 검색엔진에서 색인이라는 말은 검색을 더욱 빠르게 하기 위해서 데이터를 저장하는 장소입니다. 알아보기 쉽도록 표시해둔 색인이 없다면 어떠한 단어를 검색 했을 때 모든 문서를 뒤져야 찾아야 할 것이기 때문에 데이터 검색이 매우 느리거나 원하는 데이터를 찾는데 많은 시간을 쏟을 수 있습니다. sitemap.xml 파일을 열어보면 위의 이미지처럼 게시글의 정보가 담겨있습니다. RSS란? RSS는 Real Simple Syndication의 약자입니다. 웹사이트에 신규로 등록되는 최신 콘텐츠에 대한 요약된 정보를 빠르게 제공하기 위한 포멧으로 블로그, 뉴스, 칼럼 등 업데이트가 잦은 콘텐츠들을 사용자가 편하게 볼 수 있도록 만들어진 규약입니다.  RSS가 등장하기 전에는 원하는 정보를 얻기 위해 해당 사이트를 직접 방문해야 했지만 RSS를 이용하여 자동 수집이 가능해졌기 때문에 사...
자세한 내용 보기

데이터베이스 데이터 정의어(DDL), 자료형(데이터 타입)

이미지
데이터베이스 데이터 정의어(DDL), 자료형(데이터 타입) 데이터 정의어(DDL) 데이터 정의어(DDL : Data Definition Language) 데이터베이스 구조를 정의하고 변경하는 언어 입니다.  스키마를 정의하거나 수정 또는 삭제 하기 위해 사용합니다. 쉽게 설명하면 테이블(표)를 만드는 것입니다. 질의문 끝에는 세미콜론(;) 으로 문장의 끝을 표시해야합니다. SQL 질의문은 대소문자를 구분하지 않지만 보기쉽게 포스팅에는 대문자로 표기하겠습니다. 테이블 생성 CREATE TABLE 테이블명 고객 테이블을 생성하는 예제를 만들어보겠습니다. CREATE TABLE 고객 ( 고객번호 INT NOT NULL, 속성명: 고객번호, 타입: INT, NOT NULL: NULL값 허용안함 아이디 VARCHAR (30), 속성명: 아이디, 타입: VARCHAR(글자수 30), NULL값 허용 등급 VARCHAR (30), 속성명: 등급, 타입: VARCHAR(글자수 30), NULL값 허용 이름 VARCHAR (100) NOT NULL, 속성명: 이름, 타입: VARCHAR(글자수 100), NULL값 허용안함 나이 INT NOT NULL, 속성명: 나이, 타입: INT, NULL값 허용안함 성별 VARCHAR(1) NOT NULL, 속성명: 성별, 타입: VARCHAR(글자수 1), NULL값 허용안함 주소 VARCHAR(255) NOT NULL, 속성명: 주소, 타입: VARCHAR(글자수 255), NULL값 허용안함 상세주소 VARCHAR(255) NOT NULL,   속성명: 상세주소, 타입: VARCHAR(글자수 255), NULL값 허용안함 연락처 VARCHAR(18) NOT NULL, 속성명: 연락처, 타입: VARCHAR(글자수 18), NULL값 허용안함 비상연락망 VARCHAR(18) DEFAULT '' 속성명: 비상연락망, 타입: VARCHAR(글자수 18), NULL값 허용, DEFAULT(기본값): 공백 PRIM...
자세한 내용 보기