와, 티스토리 블로그 만들어 놓고 진짜! 오랜만에 글을 써봐요..이번이 두번째 글이네요
일단 React(=리액트)가 뭔지 부터 다시한번 짚어보고 오늘 주제에 따른 내용을 기록해볼게요
I. 리액트란?
어, 그러니까 우리가 사용하는 웹이나 앱의 화면,버튼 같은것들 있잖아요? 그걸 보통 인터페이스라고 해요, 그냥 화면이라고 볼수도 있고 사용자가 편리하게 서비스를 이용할수 있게 색상이나 각종 단추나 검색창같은것들을 화면에 그리거나 배치시키는거 말이에요,
리액트는 크게 2가지로 구분하면 되거든요,
- 리액트(React)
- 리액트 네이티브(R.N : React Native)
우선 웹은 리액트, 앱은 리액트 네이티브 이렇게 구분하시면 됩니다. 일단, 리액트 네이티브는..이후에 주제로 다루고 본 글의 주제인 리액트에 대해서 Step by Step으로 알아가는 시리즈를 먼저 작성할거거든요
II. 리액트 개발환경
우선 리액트는 웹의 '사용자 인터페이스'를 만들기 위한 도구인건데요, 기본적으로 리액트를 사용하려면 javascript(자바스크립트, 이하 js)를 알고 있어야 합니다.
그리고! 보통은 js를 알고 있다면 HTML, CSS 라는 것도 알고 있어요. 그래서 이렇게 세가지 용어가 웹에 대해서 배우거나 이걸 통해서 직업을 찾거나 하는 사람들이 먼저 접하실거에요
그러니까, HTML+CSS+Javascript 알면, 리액트를 알수 있는 준비가 되었다고 보면 되겠죠? 곧, 시리즈로 하나씩 내용을 작성해나가볼텐데, 시간이 좀 더 필요하겠네요 (블로그 사용하는거랑 작성하는건 또 다른문제라..ㅠ)
자, 우선 리액트를 이용해 웹 사용자를 위한 인터페이스를 만들려면 아래와 같은 준비가 필요합니다.
- Node.JS (노드js)
- IDE (리액트 개발을 위한 코드 작성/편집 도구)
- 크롬/엣지 (웹브라우저)
1) Node.JS 다운로드 및 설치
가급적 LTS 버전을 다운받으시고 실행(=설치)하는게 좋아요, 2023년 2월 현재, v18.x LTS가 최신 버전이고요 시간이 지나면서 새로운 패치나 업데이트가 나오다 보면 버전 숫자가 달라지겠죠?
LTS는 Long Term Service 였나? 그러니까 프로그램을 자주 변경하지 않고, 배포 후에 긴 시간동안 업데이트/패치를 제공해주는 버전이라는 뜻이죠!
Node.JS가 잘 설치 되었나 확인까지 해볼까요? 요건, 아래 순서를 따라서 직접 해보셔야해요!
- 윈도우 키 + R, cmd (엔터)
- node -v (엔터)
- npm -v (엔터)
추가적으로 간단 설명하자면, node 는 javascript 개발환경중 코드 입력, 실행을 해볼수 있는 REPL(Read Evaluate Print Loop) 도구를 뜻하고, npm은 node package manager의 약어로 node 환경(Node.js)에서 사용하는 여러가지 패키지라고 하는것들을 관리하는 도구를 의미합니다. 아~ 그리고 -v는 스위치 인데, 그러니까 verbose (자세히) 정보를 표시 하라는 명령이에요!
2) IDE 설치 및 다운로드
보통, 리액트라는 건 , 주로 js 문법을 이용해서 무언가를 작성하는건데 우선 그러기 위해서는 작성 도구 즉! IDE 도구가 있어야 하거든요
IDE는 통합 개발 환경(Integrated Development Environment, IDE)이란 공통된 개발자 툴을 하나의 그래픽 사용자 인터페이스(Graphical User Interface, GUI)로 결합하는 애플리케이션을 구축하기 위한 소프트웨어 라고, 검색이 되네요.
제가 사용하는거를 먼저 추천을 하는게 맞겠죠? 여러가지 소프트웨어가 있지만, 전 가볍고 빠르게 실행되는게 좋더라구요!
[Download for Windows] 단추를 클릭하면, 사용자 PC 환경에 맞게 설치가능한 버전?을 추천해서 자동으로 다운로드 받게 해줍니다. 다운받은 설치프로그램은 실행하셔서 설치하시면 되고요!
visual studio code (이하, VSC)가 실행되면 버전에 따라(=최신 버전은) 처음에 영어로 화면을 표시하다가 설치 직후 실행하면 한글로 쉽게 언어를 바꿀수 있도록 설정을 자동으로 해줄거에요!
만약, 언어에 대한 뭔가가 자동으로 실행안되면 VSC를 실행하신 뒤 키보드의 단축키 [CTRL]+[Shift]+[p]를 눌러보세요, 그리고 lang 이라고 입력합니다.
추가하고자 하는 언어가 있다면 클릭해서 설치하시면 설정도 되고요, 언제든 위 단축키를 눌러서 원하는 언어로 표시를 하셔서 사용해보세요!
3) 크롬 / 엣지
웹브라우저는 우리 각자의 PC에 설치가 되어있을거구, 없다면 설치하시면 되겠죠~ (요건 각자에게 맡겨요)
자, 여기까지!
설치하거나 다운로드받는 그런 영상은 따로 첨부하진 못했어요, 그만큼 간단하고 쉽게 준비할수 있으니까요~ 꼭 필요하다고 하시면, 따로 준비는 해볼게요
아참, 그리고~ 이제 리액트를 사용해보려면 VSC가 실행된 상태에서 [파일 > 폴더 열기...] 또는 [File > Open Folder...] 명령을 선택하시고 연습할 곳을 하나 정해두어야 하거든요, 그래야 앞으로 따라서 연습할 수 있으니까요
작업할 폴더 위치를 하나 생성하신 뒤 선택하시면, VSC가 해당 위치에서 이제 만들어질 파일이나 폴더등을 관리해주게 되니까, 오늘의 개발환경 구축은 여기까지가 끝이다~ 라고 할수 있겠네요!
혹시나, VSC 버전에 따라서 아래와 같이 신뢰합니까? 이렇게 물어볼수 있겠는데요, 영문이면 trust 어쩌구 그렇겠죠?
그러면, 아무튼 VSC는 이렇게 화면이 변경됩니다. 앞으로는 아래 이미지처럼, 지정된 위치에서 공부를 해보면 됩니다.
다음편은 기본적인 react 문법에 대해서 알아보고 관련된 문법(HTML,CSS,Javascript)도 함께 다뤄보도록 할게요!
'Front-End > React v18' 카테고리의 다른 글
| React.js | Vite로 시작하기 (0) | 2024.03.18 |
|---|---|
| React 준비운동! (1) | 2023.02.02 |
| React Step by Step. 시작해볼까요?! (0) | 2022.05.13 |
