소개
개발자로서의 경력을 다음 단계로 끌어 올리려면 도구 벨트에 React 및 React Native가 있어야 합니다. 크로스 플랫폼 프레임 워크를 사용하여 모바일 앱을 만드는 것은 요즘 개발 추세가 되었습니다.
React Native와 같은 크로스 플랫폼 앱 프레임 워크는 Android 및 iOS 기기 모두에서 작동하는 네이티브 모바일 앱을 개발하는 데 도움이 될 수 있습니다.
이 가이드에서는 React Native를 시작하기 전에 갖추어야 할 기술과 기술을 나열 할 것입니다.
React Native는 무엇입니까?
React Native는 크로스 플랫폼, 네이티브 렌더링 애플리케이션을 빌드 하는 데 사용되는 JavaScript 프레임 워크입니다. Facebook에서 만든 React 라이브러리를 기반으로 합니다.
React와 마찬가지로 React Native는 사용자 인터페이스 구성 요소를 구축하는 데 사용되며 추가 이점이 있습니다. React Native는 브라우저 뿐만 아니라 다양한 플랫폼에서 UI를 렌더링 할 수 있습니다.
웹 기반 앱뿐만 아니라 React Native를 사용하여 Android, iOS, macOS 및 Windows 용 앱을 빌드 할 수 있습니다.
React Native는 UI 구성 요소를 빌드하기 위한 표준 API 세트를 제공하므로 개발자가 코드를 한 번만 작성하고 여러 플랫폼에서 실행할 수 있습니다.
React Native는 웹 개발 배경에서 온 사람에게 배우기 매우 쉽습니다.
React를 아는 개발자는 React Native에서 지원하는 모든 플랫폼을 대상으로 앱을 빌드하고 만들 수 있습니다. HTML, CSS 및 JavaScript는 React를 배우는 데 필요한 웹의 핵심 기술입니다.
React는 UI 구성 요소를 만들기 위해 JSX라는 HTML과 유사한 구문을 사용하여 순전히 JavaScript로 작성되었습니다. CSS를 사용하면 다양한 스타일 규칙을 적용하여 사용자 인터페이스 구성 요소의 스타일을 지정할 수 있습니다.
React를 기반으로 하기 때문에 React Native에도 동일한 기술이 필요합니다.
이제 React Native를 배우기 전에 준비하는 방법에 대한 더 나은 아이디어를 얻을 수 있도록 이러한 기술을 개별적으로 자세히 살펴 보겠습니다.
HTML 및 CSS
HTML과 CSS는 웹 개발의 핵심 기술입니다. HTML은 웹 페이지의 요소와 레이아웃을 만드는 뼈대이며 CSS는 이러한 다양한 요소와 레이아웃에 스타일을 추가합니다.
HTML 및 CSS를 마스터하는 것은 다음 기술 (및 일반적으로 웹 개발)의 기초가 되기 때문에 중요한 단계입니다.
HTML 및 CSS 학습을 위한 리소스
JavaScript
HTML과 CSS에 익숙해지면 JavaScript 학습을 시작할 수 있습니다. JavaScript는 웹 페이지에 상호 작용 및 논리를 추가 할 수 있는 스크립팅 언어입니다.
JavaScript를 사용하면 버튼 클릭 또는 입력 포커스와 같은 이벤트를 "수신"하고 앱에 상호 작용을 추가 할 수 있습니다.
마찬가지로 React Native에서 다양한 이벤트를 수신하고, 네이티브 API에 액세스하고, JavaScript를 사용하여 핵심 비즈니스 로직을 작성할 수 있습니다. 따라서 React Native를 배우기 전에 JavaScript에 익숙해지는 것이 중요합니다.
자바 스크립트 기초
JavaScript에서 가장 먼저 다루어야 할 것은 언어의 기본입니다. 이는 구문과 기본 작업에 익숙해지고, 변수와 객체를 선언하는 방법을 이해하고, 함수를 정의하고 호출하는 것을 의미합니다.
또한 JavaScript의 기본 제공 메서드를 사용하여 객체, 배열, 문자열 및 날짜로 작업하는 방법을 배워야 합니다.
DOM 조작
JavaScript를 작성할 때 가장 일반적인 작업 중 하나는 DOM을 조작하는 것입니다.
DOM (Document Object Model)은 현재 웹 페이지를 나타내는 트리 구조입니다. 브라우저 DOM API를 사용하면 개발자가 프로그래밍 방식으로 HTML 요소에 액세스하여 필요한 비즈니스 로직을 추가 할 수 있습니다.
예를 들어, 마우스 포인터가 위에 있을 때 텍스트의 색상을 변경할 수 있습니다.
<span id="sampleText">
Hello World
</span>
const text = document.getElementById("sampleText");
text.addEventListener("mouseover", function(){
text.style.color = 'red'
});문서 객체에는 HTML 요소에 액세스하고 상호 작용을 추가하는 다른 방법이 있습니다. 여기에서 DOM 조작을 더 자세히 확인할 수 있습니다.
최신 기능 (ES6 +)
JavaScript는 처음부터 먼 길을 왔습니다. 새로운 기능은 매년 활발하게 추가되고 있으며 JavaScript 개발자로서 이러한 기능을 따라 잡아야 합니다.
2015 년부터 화살표 함수, 객체 및 배열 분해, const 및 let 변수 선언과 같은 많은 기능이 도입되었으며 React와 같은 라이브러리에서 작업 할 때 일반적으로 사용됩니다.
학습해야 할 또 다른 중요한 기능은 Fetch API를 사용하여 데이터를 가져오고 외부 서비스로 보내는 방법입니다. 이는 대부분의 웹 및 모바일 애플리케이션에서 매우 일반적인 요구 사항입니다.
JavaScript 기본 사항과 ES6 + 기능을 배우면 탄탄한 기반을 제공하고 React Native의 핵심 개념을 더 잘 이해할 수 있습니다.
지금까지 언급 한 기술은 웹 개발에서 매우 일반적입니다. 여기에서 React와 같은 JavaScript 라이브러리 나 Vue 또는 Angular와 같은 프레임 워크를 마스터하도록 선택할 수 있습니다. 이때 JavaScript 세계에 깊이 빠져들 수 있습니다.
그러나 프레임 워크로 이동하기 전에 HTML, CSS 및 JavaScript에 대한 철저한 지식이 있어야 합니다. 이러한 기술은 개발 과정에서 추가로 필요한 기본 기술입니다.
JavaScript 학습을 위한 리소스
React
React는 개발자가 사용자 인터페이스 구성 요소를 만들 수 있는 JavaScript 라이브러리입니다. 기존 웹 페이지는 HTML과 CSS를 사용하여 UI를 빌드하지만 React를 사용하면 UI는 순전히 JavaScript를 사용하여 빌드됩니다.
React는 DOM을 직접 조작하는 대신 사용되는 가상 DOM을 포함하는 것으로도 알려져 있습니다.
React Native를 배우기 전에 React를 마스터하면 작업이 매우 쉬워집니다. React와 React Native는 서로 다른 플랫폼 용 애플리케이션을 개발하는 데 사용되지만 구문은 매우 유사합니다. 또한 동일한 프로그래밍 언어 인 JavaScript를 기반으로 합니다.
가상 DOM
React는 웹 페이지에서 렌더링 할 DOM 구조의 객체 표현 인 가상 DOM (VDOM)을 생성합니다. React가 내부적으로 어떻게 작동하는지 더 깊이 이해하고 싶다면 VDOM에 대해 배워야 합니다.
Virtual DOM은 프레임 워크에 구애 받지 않는 개념이므로 Vue와 같은 다른 프레임 워크에서도 사용됩니다.
JSX
React를 사용하면 재사용 가능한 UI 구성 요소를 빌드하고 이들간에 데이터를 전달할 수 있습니다. 구성 요소는 JSX (JavaScript XML)라는 특수 JavaScript 구문 확장을 사용하여 작성됩니다.
JSX는 HTML 구문과 유사하며 JavaScript 표현식을 처리 할 수 있다는 점에서 매우 강력합니다. JSX에서는 HTML 속성 대신에 소품을 사용하여 부모 구성 요소에서 자식 구성 요소로 데이터를 전달합니다.
데이터 처리
구성 요소는 상태를 사용하여 내부적으로 데이터를 처리 할 수도 있습니다. props와 state는 React에서 매우 중요한 두 가지 개념입니다. React에서 데이터 처리가 수행되는 방식을 명확하게 이해하는 것은 매우 자주 수행 할 작업이므로 매우 중요합니다.
React 구성 요소
구성 요소에는 클래스 구성 요소와 함수 구성 요소의 두 가지 유형이 있습니다. React 클래스 구성 요소에는 렌더링 프로세스 중에 호출되는 다른 수명주기 메서드가 있습니다.
React 함수 구성 요소는 후크를 활용하여 다양한 상태를 처리 할 수 있습니다. 두 구성 요소 유형 모두 장단점이 있으며 사용 사례에 적합한 유형을 알아야 합니다.
추가 학습
React 기본 사항을 다룬 후에는 컨텍스트, 구성 요소 패턴, 포털 및 구성 요소 테스트와 같은 고급 주제에 대해 알아볼 수 있습니다. 또한 Redux, Material UI 또는 Axios와 같은 다른 타사 라이브러리를 사용해 볼 수 있습니다.
패키지를 자주 다룰 것이므로 npm 또는 yarn 패키지 설치 프로그램에 익숙해집니다.
React를 배우기에 가장 좋은 곳은 공식 문서입니다. 독서가 당신의 일이 아니라면 YouTube와 Udemy에서 많은 리소스를 찾을 수 있습니다.
JSX, 컴포넌트, 라이프 사이클 메소드, 후크 및 상태 관리와 같은 주제는 React Native를 사용한 앱 개발의 핵심 요소입니다.
React Native 개발자로서 매일 위에서 언급 한 주제를 작업하게 되므로 React Native를 배우기 전에 익숙해 져야 합니다.
결론
지금 쯤이면 React Native에 들어가기 전에 배워야 할 주제와 기술에 대한 명확한 아이디어가 있기를 바랍니다.
이 가이드에서는 HTML, CSS, JavaScript, React와 같은 웹 기술을 배우는 것이 React Native를 배우는 데 어떻게 도움이 되는지 논의했습니다.
React Native에서 사용되는 프로그래밍 언어이므로 JavaScript에 익숙해지기를 강력히 권장합니다. 탄탄한 기반을 갖추면 학습을 시작하고 문제를 더 빨리 디버깅하고 해결하는 데 도움이 됩니다.
React Native 학습을 준비하기 위해 Java 및 Swift 또는 Objective-C 언어가 Android 및 iOS 개발을 위한 기본 기본 프로그래밍 언어이기 때문에 약간 배울 수 있습니다.
이론 만 하는 것만으로는 충분하지 않습니다. 구문에 익숙해지면 팁 계산기 또는 암호 생성기와 같은 미니 프로젝트를 만드는 것으로 시작하십시오. 연습할수록 더 많이 이해하고 도전에 직면하게 됩니다.
문제를 더 많이 해결할수록 더 좋습니다. 문제가 발생하면 대부분의 솔루션을 이미 사용할 수 있으므로 웹에서 검색 할 수 있습니다.
등록된 댓글이 없습니다.
