react7 [React Native] Expo 이용해서 프로젝트 만들기 리엑트 네이티브를 이용해서 앱을 만들어볼 예정이다. 공부를 하면서 만들 예정이므로 잘 모르는 부분과 헤매는 부분들이 많을 것을 예상된다. 그럼에도 불구하고 블로그를 남기는 이유는 내가 헤매는 부분들은 다른 사람들도 겪을 수 있는 일들이기 때문에 기록하기 위함이다. 이번 포스팅에서는 Expo 를 이용해서 리엑트 네이티브 앱을 간단하게 설치해보고 프로젝트를 생성하려 한다. Expo 란 무엇인가 Expo는 IOS, Android 애플리케이션을 더 쉽게 구현하고 실행할 수 있도록 하는 오픈소스 프레임워크다. 리액트 네이티브를 이용해서 만들 수도 있지만 엑스포 앱을 통해서 더 쉽게 할 수 있는 일들이 많다. Expo 사이트: https://docs.expo.dev Expo를 이용해서 React Native 프로젝.. 2023. 4. 2. [React] useState (1): 렌더링 업데이트 사용하기 지난 포스팅에서는 리엑트(React)에서 엘리먼트를 렌더링 해서 화면에 뿌려주는 방법을 알아보았습니다. 최종적으로는 root라는 id의 div 태그 내부에 프로그래머가 개발한 소스가 들어가게 됩니다. 그렇다면 데이터 업데이트는 어떻게 할까요? 이번 포스팅에서는 useState를 이용해서 렌더링 된 값을 변경해서 업데이트하는 방법을 알아보겠습니다. useState를 사용해야 하는 이유 리엑트(React)는 이전 포스팅에서 말씀드렸듯이 한번 렌더링 되어 root 내부에 삽입된 엘리멘트들은 화면을 새로고침 하거나 ReactDOM을 다시 렌더링 하지 않는 이상 업데이트가 되지 않습니다. 그래서 내부의 어떤 값을 변경하기 위해서 사용하는 함수가 바로 useState() 함수입니다. 그럼 이 함수를 이용해서 어떻게.. 2021. 6. 30. [React] JSX 문법 살펴보기. Javascript? HTML? 엘리먼트? React를 사용하기 위해서는 기본적인 구조를 알아야 합니다. 또, Javascript는 기본으로 알면 더욱 좋지만 React를 하면서 배워도 괜찮습니다. 다만, JSX라는 것이 등장합니다. 이번 포스팅에서는 React에서 사용하는 JSX에 대해서 알아보도록 하겠습니다. React에서 사용하는 JSX란 우선 아래 형태를 볼게요. const element = Hello, world; element라는 변수에 HTML 태그가 저장되어 있습니다. 이러한 형태는 사실 Javascript도, HTML도 아닙니다. 이 둘을 모두 포함하고 있는 형태로 볼 수 있죠. JSX는 Javascript를 확장한 문법입니다. 따라서 Javascript의 모든 기능이 포함되어 있으면서도 HTML과 같은 엘리먼튼를 생성할 수도 있.. 2021. 6. 8. [React] React구조와 Hello, World 출력하기 앞선 React 포스팅에서는 Node.js를 설치하고 React 라이브러리를 설치한 이후에 React 앱을 만들어서 실행해 보았어요. 2021.06.02 - [쿤즈 Dev/React] - [React] 새로운 React 앱 만드는 방법 앱을 만들 때는 간단한 패키지 관리자인 npx를 이용해서 만들었고 실행도 npm을 이용해서 진행했습니다. 이번 포스팅에서는 간단히 Hello, World를 출력해보겠습니다. 목차 React 내부 구조 React를 설치한 디렉터리를 VSCode를 이용해서 열어보았습니다. * VSCode외 다른 개발 툴을 이용해도 됩니다. 이 포스팅에서는 VSCode를 이용합니다. 디렉터리(폴더) 구조 열어서 구조를 보시면 아래와 같이 구성되어 있습니다. node_modules은 설치된 모듈.. 2021. 6. 4. [React] 새로운 React 앱 만드는 방법(React 시작하기) 웹 프로그래밍을 하기 위해서 최근 가장 많이 사용하는 라이브러리 중 하나가 React(리액트)입니다. React는 Node.js 기반으로 동작합니다. 즉 Javascript를 이용한 라이브러리이기 때문에 Javascript를 안다면 쉽게 배울 수 있는 라이브러리입니다. 이번 포스팅에서는 React를 이용해서 앱을 만들기 위한 시작방법을 알아보도록 하겠습니다. React(리액트) 환경 구성하기 기본적으로 React를 사용하기 위해서는 Node.js가 우선적으로 설치가 되어 있어야 합니다. Node.js 설치 방법은 아래 링크에서 확인하실 수 있습니다. 2021.03.19 - [쿤즈 Dev/Nodejs] - [Nodejs] NodeJS 설치 및 프로젝트 생성하기(feat. Windows & macOS) [N.. 2021. 6. 3. [React] 갑자기 발생하는 에러. ENOSPC System limit for number of file watchers reached 리액트(React)를 이용해서 개발을 하다보면 중간중간 에러를 잡기 위해서 열심히 확인해야 하는 부분들이 발생합니다. 저도 공부를 하던 도중에 발생되는 에러때문에 이런저런 로그들을 봐야할 때가 있죠. 오늘은 리액트(React)에서 start를 해주었을때 발생되는 에러 로그를 해결하는 방법에 대해서 알아볼까 합니다. 갑자기 발생되는 에러 ENOSPC 저는 공부를 하기 위해서 로컬에서는 Docker Container에서 작업을 진행하고 배포를 해보기 위해서 아마존 AWS 무료 서버를 가입해서 사용하고 있습니다. 로컬에서는 문제가 없었지만 갑자기 아마존 AWS에서 다음과 같은 에러가 발생합니다. Error: ENOSPC: System limit for number of file watchers reached .. 2021. 2. 9. [React] 리액트 실행할 때 포트 변경 하는 방법 웹 프로그램을 진행하기 위해서 사용하는 플랫폼중 하나가 바로 React(리액트)입니다. 이것 저것 테스트를 위해서 React를 두 개를 띄우려 하는 순간부터 문제가 발생합니다. 바로 포트가 겹치는 현상입니다. 이번 포스팅에서는 알면 간단한 React(리액트)에서 실행하는 포트를 변경하는 방법에 대해서 알아보겠습니다. React(리액트)란 무엇인가 React(리액트)는 사용자 인터페이스를 만들기 위한 Javascript 라이브러리입니다. 웹 프로그래밍을 하기 위해서 기본적으로 알아야 할 3가지 요소가 바로 Html, Css, Javascript죠. 이때, Html의 요소와 Javascript의 요소를 하나로 묶어서 Javascript로 만들어 사용하는 플랫폼입니다. 아래는 리액트를 알아보고 배워볼 수 있는.. 2021. 2. 2. 이전 1 다음
