신속하게 Vanilla JS, React JS, React Native 학습하기(feat.노마드코더)
< 빠른 학습엔 3분할 뷰 >
JS와 JS 프레임워크를 독파하고있다.
새로운 언어나 프레임워크를 학습하는 데 있어서
탐구자형 ~ 실속형의 스펙트럼이 있다면
이번 러닝 사이클은 전부 실속형에 치중했다.
Vanilla JS
Django fullstack 사이드 프로젝트를 하면서
기초적인 html + css + js를 학습했는데
웹 브라우저의 기초인 만큼
vanilla js를 좀 더 체계적으로 기억하기 위해
노마드 코더의 vanilla JS 2주 챌린지를 신청했다.
Python 기반으로 개발을 했었기 때문에
js의 동적 타이핑 문법이 이질적이지 않았고
맨 땅에 헤딩식으로 진행한 사이드 프로젝트의
html + css + js 경험 덕에
이틀 안에 50% 이상의 강의를 수강했다.
3일째 되는 날, 수강을 전부 끝내고
남은 React JS, React Native를 실습 할 예정이다.
JS Framework로 작성한 소스 코드는
곧 JS로 변환되어 실행되기 때문에
프레임워크 학습 이전에 선행하는 것이 좋다.
React JS
Frontend Framework
html로 작성한 class, id 명을 js에서 검색하여 따르기보다
js로 직접 동적으로 문서 객체를 생성한다.
참조하기도 간편하고
관리하기도 쉬우며
raw value를 하드코딩하는 것을 줄여
개발자의 실수를 줄인다.
react
React element의 interaction.
element 생성, event listener 등록 등
react-dom
React element를 html에 두는 역할.
React Native
메타(구 facebook)에서 만들고 관리하는
오픈소스 모바일 애플리케이션 프레임워크.
Typescript(JS확장)으로 개발할 수 있고
Flutter처럼 iOS Android 2가지 플랫폼을 동시에 개발할 수 있다.
React JS와 유사하기에 React JS에서 진입하기 쉽다.
선수 지식은 위와 같이
JS , TS , React JS.
2가지 모바일 플랫폼을 동시에 개발할 수 있다는 점,
그리고 React JS와의 유사성 때문에 선택하였다.
이를 가능하게 하는 기본적인 골자는 다음과 같다.
JS Thread가 Native Bridge를 통하여 Native Thread와 통신한다.
JS Thread <-> Native Bridge <-> Native Thread
중간에 Bridge가 있기 때문에
iOS - Swift
Android - Kotlin 의 Native 방식보다는 성능이 떨어진다.
React JS vs React Native
React DOM <-> React Native AppRegistry
HTML <-> React Native's components
CSS <-> JS'S Stylesheet
결론, 학습 방법 추천
"다른 프로그래밍 언어 개발 경험이 있다"(특히 동적 타이핑 언어)
"그 언어로 작성된 프레임워크로 개발 경험이 있다."
면 다음 학습 방법을 추천한다.
1. ( JS + React JS 병행 학습 )
2. ( Typescript + React Native 병행 학습 )
댓글
댓글 쓰기