백엔드 개발자의 실수 1. React 시작하기 /리액트와 뷰의 차이

GO 언어로 백엔드 초보 개발자로 지내다가

1년밖에 안돼서 퇴사... 

 

집에서 딩가 딩가 하다가 리액트 한 번 해볼까? 하는 마음에 한 번 건드려 본다!

 

 

재취업 하려면 준비할 것도 많은데... 

어이없게도 프론트 한 번 해보자고 

삽질을 시작하는 거라.. 

 

제목은 '백엔드 개발자의 실수'로 정했다.

 

뭐 여튼.. 

프론트라고는 HTML이랑 CSS, Javs script 조금씩밖에 모르지만

예전에 배울 때 재밌게 했던 기억이 있어서몇 가지 프로젝트를 혼자 해보려고 한다.

 

 

과연 'React'는 뭘까? 

예전 회사에서는 프론트 개발자들이

'Vue'를 썼는데 이 둘의 차이점은 또 뭘까? 

 

 

첫 번째 질문의 답은애초에 리액트 홈페이지 대문에 딱! 있었다. 

사용자 인터페이스를 만들어서 java script를 좀 더 효율적으로 사용하기 위한 아이였다. 

 

"컴포넌트"로 관리를 할 수 있기 때문에 

독립적인 렌더링으로 재사용성을 높일 수 있다.

 

사실 이렇게만 써놓으면 

아, 뭔가를 함축적으로 정의하여 사용할 수 있고 

재사용도 할 수 있도록 컴포넌트화 하는 거군 

 

이 정도로만 이해하고 넘어가련다.. 개인 프로젝트 몇 개를 하다보면 더 이해가 잘 되겠지~

 

 

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 (reactjs.org)

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

 

리액트 공식 홈페이지의 문서를 참조하세요. 

 

 

두 번째 질문이다. 

그럼 Vue랑 차이가 뭔데? 

 

Vue도 컴포넌트 기반 아키텍처를 사용해서

웹 애플리케이션을 개발하는데 이용하는 건 같을텐데 말이지. 

 

그리고 이 둘은 꽤나 공통점이 많다.

Virtual DOM을 사용하고 있는 점과 이 둘은 가벼움을 추구하고 

생명주기 메서드들을 개발자들이 사용할 수 있도록 노출되어 있다는 점~

 

 

 

 

Virtual DOM 설명

 

<유튜브 추천_ DOM?>

(31) 웹개발 필수개념! DOM이 뭔가요? (+ Web API) - YouTube

 

 

<유튜브 추천 _ virtual DOM ? >

(31) [10분 테코톡] 돔하디의 Virtual DOM - YouTube

 

 

 

 

 

생명주기 메서드 설명

 

<유튜브 추천_ 생명주기?>

(31) #04 React 기본 (상태관리, 생명주기) - YouTube

 

그리고 커뮤니티가 활성화되어 있어서 라이브러리나 툴들에 대한 업데이트가 지속적으로 이루어져 있다고 한다.

 

 

React and Vue market share trends in 2023

React vs. Vue.js vs. Angular usage statistics, July 2023 (w3techs.com)

React  VS. Vue market share 

 

점유율만 보면 

사실 현재 압도적인건 React이긴 한가보다.. 

아무래도 Vue를 만든 사람은 Evan You라는 사람으로 알 고 있는데, 

현재 Patreon, open collective 등 개인이랑 기업에 후원을 받으면서 

개발, 유지보수를 하고 있나보다.. 

 

아무래도 페이스북에서 만들고 관리하고 있는 

React에 비해서 좀 덜 체계적으로 관리되려나..?

사실 그건 잘 모르겠다~ 

 

뭐,, 여튼 리액트랑 뷰의 공통점 얘기하다가 여기까지 왔네 ;;

 

다시 돌아가서!! 그래서 차이점이 뭔데!! 

 

 

가장 큰 차이점은 

 

바로!! 

React는 라이브러리이고 

Vue는 프레임워크 이다!! 

 

이 말이 진짜 라이브러리이고 프레임워크라는 말은 아니고 비유이다... !

비유라면,, 이 뜻을 알아야겠지.. ?

 

 

 

라이브러리 vs. 프레임워크

 

그럼 다시 라이브러리와 프레임워크의 차이를 알아야 한다.

이건 내가 회사에서 막 입사했을 때 인턴이던 시절, 많이 찾아봤던 거다.. ㅋㅋ 

 

 

이해하기 쉽게 말하자면 

자바를 해봤던 분들이라면 

자바는 마치 스프링 프레임워크를 사용하기 위한 

언어일 뿐이라는,,, 

이런 생각을 지울 수가 없었을 것이다.

 

스프링!! 

이걸 우리는 "프레임워크"라고 부르지

"라이브러리"라고 부르진 않는다. 

 

프레임워크는 이미 골격이 형성되어 있는 집이라면

라이브러리는 그 골격을 형성하기 위해 필요한 재료라는 것이다.

 

여기에서의 '집'은 '제어 흐름'으로 바꿔말 할 수 있을 것이다.

프레임워크는 애플리케이션의 전체적인 구조와 흐름을 제어하는 것이다. 

라이브러리는 제어흐름을 갖기 위해 필요한 소스인 것이고,, 

 

어떻게 보면 프레임워크는 라이브러리의 집합이라고도 볼 수있다. 

이 말이 꼭 맞는 것은 아니지만 이 집합으로 인해 흐름 제어를 갖게 된다면

얼추 맞는 말이 될 것 같다. 

 

 

 

악!! 다시 돌아와서 뭐,

얼마나 단순함에 초점을 뒀냐에 따라서 저런 말이 오가는 것 같다. 

 

아무래도 Vue는 단순성에 정말 크게 초점을 둔 터라,,

'마치 프레임워크와도 같다' 라는 말이 나온 것 같다. 

 

 

 

아~~ 더 파면 팔수록 

그 경계가 모호해져만 간다.. 

뭐,, 차차 이 둘의 차이는 더 알아가도록 하고

 

앞으로는 리액트를 먼저 해볼 생각이다. 

그리곤 일렉트론으로 맥용으로 웹 애플리케이션까지 만들어 보련다. 

 

 

 첫 번째 개인 프로젝트는 

아주 간단한 TO DO LIST이다. 근데 또 너무 간단하면 재미 없으니까

재밌는 기능들도 벤치마킹해서 가져올 생각이다 ㅋ_ㅋ

 

 

회사 다녔을 당시 프론트 개발자 인턴분들이 과제로 하던 게 생각이나서 나도 한 번 해보련다... 

 

 

 

** 공부 중인 부분에 대한 포스팅입니다.

오류가 있을 수 있으니 댓글을 남겨주시면 수정하도록 하겠습니다. **