React 기초 다지기 - 1편 - (React 시작하기)

IT 일기/React

somej 2024. 7. 9. 22:46

React를 효율적으로 배우기 위해서는 다음과 같은 기술들을 미리 학습하는 것이 좋습니다:

HTML/CSS:
- HTML: 웹 페이지의 구조를 구성하는 언어입니다. 요소(element), 속성(attribute), 태그(tag) 등을 이해해야 합니다.
- CSS: 웹 페이지의 스타일을 정의하는 언어입니다. 선택자(selector), 속성(property), 레이아웃(layout) 등을 이해하고 있어야 합니다.
JavaScript:
- React는 JavaScript 라이브러리이기 때문에, JavaScript에 대한 기본적인 이해가 필요합니다.
- 변수(variable), 함수(function), 조건문(conditional statements), 반복문(loop), 배열(array), 객체(object) 등을 잘 이해하고 있어야 합니다.
- ES6+ (ECMAScript 2015 이상): 최신 JavaScript 기능들, 예를 들어 화살표 함수(arrow functions), 비구조화 할당(destructuring assignment), 템플릿 리터럴(template literals), 클래스(class), 모듈(module) 등에 대해 익숙해져야 합니다.
JavaScript 라이브러리와 프레임워크:
- DOM 조작: Vanilla JavaScript 또는 jQuery를 사용해 DOM(Document Object Model)을 조작하는 방법을 이해하고 있으면 좋습니다.
- AJAX/Fetch API: 비동기적으로 서버와 데이터를 주고받는 방법을 이해해야 합니다.

React를 사용하기 위해서는 다음과 같은 도구들이 필요합니다:

Node.js 및 npm:
- Node.js: 서버 사이드 JavaScript 런타임 환경입니다. React 개발에 필요한 도구들을 설치하고 실행하기 위해 사용됩니다.
  
  Node.js 다운로드 홈페이지 URL
  https://nodejs.org/en/
- npm (Node Package Manager): Node.js 패키지 관리자입니다. React 및 관련 패키지들을 설치하고 관리하는 데 사용됩니다.
Code Editor:
- Visual Studio Code (VSCode): 많은 개발자들이 사용하는 코드 편집기입니다. React 개발에 유용한 확장 기능들이 많습니다.
  
  Visual Studio Code 다운로드 홈페이지 URL
  https://code.visualstudio.com/
- Sublime Text, Atom 등 다른 편집기들도 사용 가능합니다.
Create React App:
- React 애플리케이션을 빠르게 생성할 수 있는 도구입니다. 초기 설정을 자동으로 해주어 바로 코딩을 시작할 수 있게 도와줍니다.
- 설치 명령어: npx create-react-app my-app
Version Control System:
- Git: 소스 코드를 관리하고 버전을 컨트롤할 수 있는 도구입니다. GitHub, GitLab 등의 플랫폼과 함께 사용됩니다.

React를 배우는 데 유용한 리소스들을 소개해드립니다:

공식 문서:
- React 공식 문서(영어): https://reactjs.org/
- React 공식 문서(한국어): https://ko.reactjs.org/
온라인 강의:
- Udemy: React 강의를 제공하는 다양한 온라인 학습 플랫폼입니다.
- freeCodeCamp: 무료로 제공되는 코딩 교육 사이트입니다.
블로그 및 유튜브:
- 다양한 블로그와 유튜브 채널에서 React 관련 튜토리얼을 제공합니다. 검색해서 다양한 자료를 찾아볼 수 있습니다.

이제 준비가 되셨다면 React 학습을 시작해보세요! React는 초기 학습 곡선이 있을 수 있지만, 한 번 익히면 강력하고 유연한 웹 애플리케이션을 만드는 데 큰 도움이 될 것입니다.

다음 글에서는 간단하게 프로젝트 생성 및 react 실행 하는 방법에 대해서 진행하도록 하겠습니다!