이번 글에서는 React 사용 시 가장 중요한 개념인 State, 생명 주기 (Life-cycle) 관련된 설명을 드리도록 하겠습니다. React 설치가 아직 안되신 분들은 아래 글을 먼저 참고해주시길 바랍니다. React 프로젝트 생성 방법 (create-react-app) 일단 시계를 작동시키는 간단한 React 예제로 시작하겠습니다. 아래 코드는 보시면 쉽게 이해가 가능하실 겁니다. const root = ReactDOM.createRoot(document.getElementById(‘root’)); function tick() { const element = ( … Read more

이번 글에서는 React에서 사용되는 JSX 문법에 대해 알아보겠습니다. React 설치가 아직 되시지 않은 분들은 아래 글을 참고해서 React 설치를 먼저 진행해주시길 바랍니다. React 프로젝트 생성 방법 (create-react-app) React JSX const element = <h1>Hello, world!</h1>; 이 재미있는 태그 구문은 문자열도 HTML도 아닙니다. 이는 JSX라고 하며 JavaScript의 구문 확장입니다. JSX 문법은 UI가 어떻게 보여야 하는지 설명하는 역할을 하게 … Read more

이번 글에서는 Expo App 생성 방법에 대해 알아보도록 하겠습니다. Expo 설치가 필요하신 분들은 먼저 아래 글을 참고하시길 바랍니다. Expo 설치 방법 (npx expo -h) 새로운 Expo App 생성 방법 새 Expo 앱을 만들기 전에는 아래 사항들을 먼저 확인해야 합니다. 만약 이 부분이 제대로 되어 있지 않다면 앞선 Expo 설치 방법 글을 참고해서 Expo CLI, Expo Go … Read more

이번 글에서는 Expo 설치 방법, App 생성 방법에 대해 알아보도록 하겠습니다. React Native가 생소하신 분들은 아래 문서를 먼저 참고하시길 바랍니다. React Native 장점, 설치 방법 (npx create-expo-app) Expo로 애플리케이션을 개발하려면 두 가지 도구가 필요합니다. 프로젝트를 제공하는 Expo CLI라는 명령줄 도구와 Android 및 iOS 플랫폼에서 프로젝트를 여는 Expo Go라는 모바일 클라이언트 앱. 또한 모든 웹 브라우저를 사용하여 웹에서 프로젝트를 실행할 수 있습니다. Expo CLI Expo CLI는 개발자와 다른 Expo 도구 간의 기본 인터페이스인 명령줄 도구입니다. 개발 중인 프로젝트 제공, 로그 보기, 에뮬레이터 또는 물리적 장치에서 앱 열기 등과 같은 프로젝트의 … Read more

이번 글에서는 React Native의 장점과 설치 방법에 대해 알아보겠습니다. React Native를 처음 시작하시는 분들은 주로 Expo를 쓰는데 npx create-expo-app를 통해 쉽게 프로젝트 설치가 가능합니다. React Native란? 리액트 네이티브(React Native)는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크입니다. React Native는 네이티브 개발의 가장 좋은 부분을 사용자 인터페이스 구축을 위한 동급 최고의 JavaScript 라이브러리인 React와 결합합니다. 리액트 네이티브를 사용하면 Android와 … Read more

이번 글에서는 React 프로젝트 생성 방법에 대해 알아보겠습니다. 흔히 아시는 ‘create-react-app’ 커맨드를 쓰면 되는데 그 전후로 정확히 어떤 프로세스로 진행해야 하는지 참고하시면 좋을 듯 합니다. React란? 먼저 React에 대해 간단히 알아야겠죠. React를 쓰면 html 파일을 1개만 쓰면서도 다른 페이지를 보여주고 싶을 때 html 부분만 갈아치워서 보여줄 수가 있습니다. 그래서 기존 프론트엔드 결과물들보다는 훨씬 부드럽게 동작하게 … Read more