전체 글 (6368) 썸네일형 리스트형 1부. 프로젝트 구조와 React 앱 기본 구조 (#8 - React 앱 전체 실행 흐름 정리) #8 - React 앱 전체 실행 흐름 정리지금까지 React 앱이 시작되는 과정과 각 파일의 역할을 하나씩 살펴봤습니다.이번 글에서는 지금까지 배운 내용을 한 번에 연결해서 React 앱이 처음 실행되고 실제 로또 앱 화면이 표시되기까지의 전체 흐름을 정리해보겠습니다.처음 React 프로젝트를 보면 파일이 여러 개라서도대체 어디서부터 실행되는 거지?라는 생각이 들 수 있습니다.하지만 실행 순서를 하나씩 따라가면 구조는 생각보다 단순합니다.React 앱의 기본 실행 흐름은 다음과 같습니다.index.html ↓main.jsx ↓App.jsx ↓Home.jsx ↓각 Component이번 글에서는 이 흐름을 처음부터 끝까지 다시 연결해보겠습니다.1. 전체 프로젝트 구조 먼저 보기먼저 로.. 1부. 프로젝트 구조와 React 앱 기본 구조 (#7 - import / export 구조 이해하기) #7 - import / export 구조 이해하기지난 글에서는 React의 컴포넌트(Component)에 대해 알아봤습니다.로또 앱도 하나의 파일에 모든 기능을 작성하는 것이 아니라 여러 컴포넌트로 나누어 만들 수 있습니다.예를 들어 다음과 같은 구조입니다.src/│├─ components/│ ├─ CurrentLotto.jsx│ ├─ SmartGenerator.jsx│ ├─ ManualSelector.jsx│ └─ BottomNav.jsx│├─ pages/│ └─ Home.jsx│├─ App.jsx└─ main.jsx그런데 여기서 궁금한 점이 생깁니다.BottomNav.jsx에서 만든 BottomNav 컴포넌트를 Home.jsx에서는 어떻게 사용할 수 있을까요?바로 이때 사용하는 것.. 1부. 프로젝트 구조와 React 앱 기본 구조 (#6 - 컴포넌트란 무엇인가?) #6 - 컴포넌트란 무엇인가?앞에서는 App.jsx에서 Home.jsx를 불러와 화면에 표시하는 과정을 살펴봤습니다.App.jsx ↓ ↓Home.jsx여기서 을 컴포넌트(Component)라고 했습니다.React를 공부하다 보면 컴포넌트라는 말을 계속 만나게 됩니다.이번 글에서는 컴포넌트가 무엇인지, 왜 사용하는지, 그리고 로또 앱에서는 어떻게 활용할 수 있는지 알아보겠습니다.1. 컴포넌트란?컴포넌트를 가장 간단하게 표현하면화면을 구성하는 독립적인 조각이라고 할 수 있습니다.예를 들어 로또 앱의 메인 화면이 다음과 같이 구성되어 있다고 생각해보겠습니다.┌─────────────────────────┐│ 로또 앱 │├─────────────────────────┤│ .. 1부. 프로젝트 구조와 React 앱 기본 구조 (#5 - App.jsx와 Home.jsx 연결 구조) #5 - App.jsx와 Home.jsx 연결 구조지난 글에서는 main.jsx가 index.html의 root 영역을 찾아 React 애플리케이션을 시작하고 을 렌더링하는 과정을 살펴봤습니다.지금까지의 실행 흐름은 다음과 같습니다.index.html ↓main.jsx ↓ ↓App.jsx이번에는 여기서 한 단계 더 들어가겠습니다.실제 로또 앱의 메인 화면을 Home.jsx로 만들고 App.jsx에서 Home.jsx를 어떻게 불러와 화면에 표시하는지 알아보겠습니다.이번 글까지 이해하면 React 애플리케이션이 시작해서 실제 메인 화면이 나타나는 전체 흐름을 이해할 수 있습니다.1. App.jsx는 무슨 역할을 할까?지난 글의 main.jsx에는 다음과 같은 코드가 있었습니다.import A.. 1부. 프로젝트 구조와 React 앱 기본 구조 (#4 - main.jsx에서 React 앱이 시작되는 과정) #4 - main.jsx에서 React 앱이 시작되는 과정지난 글에서는 index.html의 역할을 살펴봤습니다.React 애플리케이션의 기본 실행 흐름은 다음과 같습니다.index.html ↓main.jsx ↓App.jsx ↓화면 컴포넌트이번에는 그중에서 main.jsx가 어떤 역할을 하는지 알아보겠습니다.main.jsx는 간단히 말하면HTML과 React 애플리케이션을 연결해주는 시작 파일이라고 볼 수 있습니다.1. main.jsx는 어떻게 실행될까?먼저 지난 글에서 살펴봤던 index.html을 다시 보겠습니다. 여기에는 중요한 코드가 두 개 있습니다.React가 화면을 표시할 영역입니다.그리고를 통해 main.jsx를 불러옵니다.따라서 브라우저에서 처음 실행되는 흐름은브라우저.. 1부. 프로젝트 구조와 React 앱 기본 구조 (#3 - index.html은 무슨 역할을 할까?) #3 - index.html은 무슨 역할을 할까?지난 글에서는 Vite로 React 프로젝트를 생성하고 기본적인 프로젝트 구조를 살펴봤습니다.이번에는 프로젝트 최상위에 있는 index.html이 어떤 역할을 하는지 알아보겠습니다.React로 개발하다 보면 대부분 src 폴더 안의 App.jsx, 컴포넌트, CSS 등을 수정하기 때문에 index.html을 직접 수정할 일은 많지 않습니다.그래서 React를 사용해봤어도 index.html이 정확히 무슨 일을 하는지 모르고 넘어가는 경우가 있습니다.하지만 React 앱이 어디에서 시작해서 어떻게 화면에 나타나는지 이해하려면 index.html의 역할을 알아두는 것이 좋습니다.1. index.html은 어디에 있을까?Vite로 React 프로젝트를 생성하면 .. 1부. 프로젝트 구조와 React 앱 기본 구조 (#2 - 프로젝트 생성과 기본 폴더 구조) #2 - 프로젝트 생성과 기본 폴더 구조지난 글에서는 React를 이용해 로또 앱을 만들고, 최종적으로 Capacitor를 이용해 Android 앱까지 만들어보는 전체적인 방향을 살펴봤습니다.이번에는 실제로 React 프로젝트를 생성하고 프로젝트 안에 만들어지는 폴더와 파일들이 어떤 역할을 하는지 알아보겠습니다.React 프로젝트를 처음 열어보면 파일이 많아 복잡해 보이지만, 처음부터 모든 파일을 알 필요는 없습니다.우선 자주 사용하는 파일이 무엇인지부터 알아두면 프로젝트 구조를 이해하기가 훨씬 쉽습니다.1. Vite를 이용해 React 프로젝트 생성하기이번 프로젝트에서는 React 개발 환경을 구성하기 위해 Vite를 사용합니다.터미널에서 다음 명령어를 실행합니다.npm create vite@lates.. 1부. 프로젝트 구조와 React 앱 기본 구조 (#1 - React로 로또 앱 만들기 시작하기) #1 - React로 로또 앱 만들기 시작하기이번에는 React를 이용해 로또 번호 생성 앱을 만들어보려고 합니다.단순히 번호 6개를 랜덤으로 생성하는 기능에서 끝내지 않고, 실제 스마트폰에서 사용할 수 있는 Android 앱으로 만들어 Google Play에 출시하는 것까지 진행해보겠습니다.무엇을 만들까?최종적으로 다음과 같은 기능을 가진 로또 앱을 만드는 것이 목표입니다.최신 로또 당첨번호 확인로또 번호 자동 생성원하는 번호 직접 선택생성한 번호 저장회차별 내 번호 관리당첨번호와 내 번호 비교로또 번호 통계QR 당첨조회로또 판매점 찾기처음에는 React 웹 애플리케이션으로 개발하고, 이후 Capacitor를 이용해 Android 앱으로 변환할 예정입니다.전체적인 개발 구조는 다음과 같습니다.React.. 이전 1 2 3 4 ··· 796 다음