0011. Front-end 공부하기2 - 리액트 소개, 리액트 시작하기(Feat. 인프런, 처음 만난 리액트 with 챗GPT)

섹션 1. 리액트 소개

1강 : 리액트는 무엇인가?

• 정의 :
  A JavaScript library for building user interfaces. 
  사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리

라이브러리 : 자주 사용되는 기능들을 정리해 모아 놓은 것

• 문자열 관련 기능
• 숫자 관련 기능
• 날짜 관련 기능

사용자 인터페이스(User Interface, UI) 

• 사용자와 컴퓨터 프로그램이 상호작용을 하기 위해 중간에서 서로 간의 입력과 출력을 제어해 주는 것
• 버튼, 텍스트 입력창 등이 모두 UI

UI 라이브러리 : 사용자 인터페이스를 만들기 위한 기능 모음집, 화면을 만들기 위한 기능들을 모아 놓은 것.

• React JS: 대표적인 자바스크립트 UI 라이브러리
  - 메타(페이스북)에서 만든 오픈소스 자바스크립트 UI 라이브러리
  - 가장 많이 사용되는 자바스크립트 UI 라이브러리가 됨
• NGULARJS : 구글에서 만든 오픈소스 프로젝트로 JavaScript 기반의 웹 개발 프레임워크
  - 2022년 공식적인 지원 종료 
• Vue.js : Evan Yu라는 중국인 개발자 한 명이 시작한 오픈소스 프로젝트
  - React와 함께 언급되는 자바스크립트 대표 프레임워크 

프레임워크 vs 라이브러리 : 프로그램 흐름의 제어 권한

• 프레임워크 : 제어 권한을 프레임워크가 갖고 있음
• 라이브러리 : 제어 권한을 개발자가 갖고 있음(흐름에 대한 제어를 하지 않고, 개발자가 필요한 것만 가져다 쓰는 것)

웹 개발의 트렌드

- 웹사이트의 작동 원리와 흐름을 함께 이해하는 것이 중요하다.

 

 

2강 : 리액트의 장점과 단점

리액트의 장점 

장점 1. 빠른 업데이트와 렌더링 속도 

• 렌더링 : 웹사이트를 탐색할 때 화면에 나타나는 내용이 바뀌는 것 

Virtual DOM

• 가상의 DOM
• DOM(Document Object Model) : 웹페이지를 정의하는 하나의 객체
  하나의 웹사이트에 대한 정보를 모두 담고 있는 큰 그릇 
• 업데이트해야 할 최소한의 부분을 검색하여 해당 부분만 업데이트하고 렌더링 하면서 변경된 내용을 빠르게 사용자에게 보여줄 수 있음 

장점 2. 컴포넌트 기반 Component-Based

• 컴포넌트 : 구성 요소
  - 하나의 컴포넌트는 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있음 
  - 작은 레고블록이 모여서 큰 블록이 되는 것과 마찬가지임 
• 재사용성(Reusability) : 컴포넌트 기반 구조의 특성 
  - 객체 지향 프로그래밍에서 중요한 개념 
  - 다시 사용 가능한 성재를 다시 사용하는 것 
  - 개발 기간이 단축된다.
  - 유지보수가 용이하다. 
• 리액트와 재사용성
  - 리액트는 컴포넌트 기반, 하나의 컴포넌트가 계속해서 재사용될 수 있음

장점 3. 메타라는 든든한 지원군

• 자본이 있어야 오픈 소스 프로젝트도 유지할 수 있기 때문에 스폰서가 있는 게 중요하다.

 

장점 4. 활발한 지식공유와 커뮤니티

• 개발 생태계가 잘 갖춰져 있음
• 매우 큰 개발자 커뮤니티, Stack overflow와 GitHub만 봐도 알 수 있음.
• 개발을 하다 막히면 도움을 청할 곳이 매우 많음

장점 5. 리액트 네이티브 프레임웍을 통해 모바일 앱 개발 가능

• 안드로이드는 Kotlin, IOS는 Swift라는 프로그래밍 언어와 프레임워크를 배워야 개발할 수 있음 
• 리액트는 자바스크립트로 한 번에 코딩해서 안드로이드, iOS의 앱을 동시에 만들 수 있음 

 

리액트의 단점

단점 1. 방대한 학습량

• Vitual DOM, JSX, Component, State, Props 등 새로운 개념들이 많음
• 뭔가 계속 바뀐다. 버전업데이트가 꾸준히 되면서 새로운 내용이 계속 발생함.
• 새로 공부해야 하며, 개발자의 숙명임. 

단점 2. 높은 상태관리 복잡도 

• State : 리액트 컴포넌트의 상태
• 성능 최적화를 위해 state를 관리하는 것이 중요한데 쉽지 않음.
• 복잡도가 올라가면 외부 상태관리 라이브러리까지 사용해야 함.
• 이런 라이브러리까지 알려면 공부량이 많아짐

 

섹션 2. 리액트 시작하기

(실습) 직접 리액트 연동하기

• HTML만으로 간단한 웹사이트 만들기
• 뼈대를 만드는 작업

메모장이나 VS에서 코드만 작성해서 index.html로 작성하면 아래와 같은 웹사이트가 만들어진다.

 

헤드와 바디만 들어간 모습

 

(실습) CSS를 사용하여 웹사이트 스타일링하기

• 만들어진 뼈대 위에 살을 붙이는 작업

css코드를 작성해서 style.css로 작성하고 html 코드에서 불러온다.

css파일을 link로 불러온다.

 

위와 같이 html 파일에 추가로 코드를 넣고 저장한 뒤 다시 html파일을 열어보면 h1에 폰트가 적용된 것이 보인다.

 

(실습) 웹사이트에 React.js 추가하기

DOM Container 추가하기 (Root DOM Node)

이것 만으로는 바뀌지 않는다. React 컴포넌트를 만들지 않았기 때문.

 

 

오류가 생겼는데 도무지 못 찾겠어서 챗 GPT에게 물어봤더니 3가지나 틀렸다고 지적을 해줬다.

그래도 버튼이 보이지 않아서 다시 물어봤더니

 

드디어 버튼이 생겼다!

오타로 인해서 기능이 작동 안 하는 게 매우 킹 받는 와중에 챗GPT의 성능을 보고 한번 더 킹 받게 되었다. 

 

클릭하면 클릭됐다고 상태가 변한다.

 

이러는데도 코딩이랑 챗GPT를 하지 않으면 요즘 같은 세상에서 손해 보는 게 많을 것 같다는 게 느껴졌다.

 

 

(실습) creat-react-app, CRA

Node.js와 npm, VS Code를 사용한다.

 

Creat React App은 npx 명령어를 이용하여 실행한다.

• npx(execute npm package binaries)
  npm 패키지를 설치한 이후에 곧바로 실행, 엑스큐트까지 해주는 명령어이다.
  약어를 지네 멋대로 지은 거 같은데..

명령어 : npx creat-react-app my-app

• my-app 부분에는 내가 원하는 이름을 지정해도 무관하다.

그런데, 위의 과정을 진행하는 도중에 여러 에러가 발생했다.

위와 같은 에러가 발생했는데, 필자는 당연히 뭔지 모른다. 그러면 뭐다? 챗 GPT에게 울며 달려갔다.

 

 

이를 찾다 보니, 환경 변수에 문제가 있는 것을 발견했다.

 

그런데, 이 답변은 마음에 들지 않았다. 이미 환경 변수에 추가되어 있었기 때문이다.

 

 

결국, 해결책은 '재부팅'이었다. 재부팅을 하고 오니, 다른 에러가 발생했다.

 

 

 

확인해 본 결과, 지금의 에러는 npm 폴더가 없어서 생긴 것이 원인이었다. 그래서 위에서 솔루션을 준 대로 C:\Users\fortr\AppData\Roaming\npm 폴더를 생성했고, VS code에서 다시 명령어를 실행해 보니 실행이 되었다!

 

이렇게 에러가 나던 것이 챗GPT의 솔루션을 받고 달라졌다.

설치가 완료되면 어플리케이션 명령어를 친절하게 안내해준다.

 

<명령어>

• cd(change directory) : 현재 커맨드라인 도구가 위치한 경로를 변경하는 역할
  - 폴더를 더블클릭해서 안으로 들어가거나 뒤로 가기를 눌러서 폴더를 빠져나오는 역할과 같은 것 
• npm start : 애플리케이션을 실행시키는 명령어
  - cd 명령어를 사용해서 기존에 생성한 my -app 프로젝트 폴더 안으로 들어가서 npm start 명령어를 통해 React 애플리케이션을 실행함

npm start를 명령하면 위와 같은 멋진 로고의 알 수 없는 페이지가 실행된다.

 

이것이 리액트 애플리케이션을 생성하고, 실행하는 명령어다. 즉, 리액트 애플리케이션이 실행된 것이다.

 

앱이 성공적으로 설치되면 이렇게 나온다.

 

자세한 내용은

https://reactjs.org/docs/create-a-new-react-app.html 

Start a New React Project – React

해당 링크에 접속하면 React 앱을 생성하는 방법에 대한 자세한 내용을 살펴볼 수 있다.

 

 

<오늘의 소감>

공부를 하면서 느낀 것은, 코딩과 챗GPT를 동시에 알면 파급력이 엄청날 것이라는 점이었다. 시간이 지나면서 코딩에 대한 진입장벽이 점점 낮아진다고 하는데, 그 말을 제대로 실감할 수 있는 날이었다. 필자가 모르는 것이 있으면 언제든 챗GPT가 퀄리티 높은 답변을 준다. 그러면서 외부에 강의도 많고, 툴도 많아져서 이제는 코딩을 배우기가 너무 쉽고, 오히려 모르면 바보가 될 가능성이 높아진 시대에 살고 있는 듯싶다.

 

지금 코딩을 배우는 것에 매우 감사하며, 앞으로 게임처럼 재밌고 신나게 할 수 있을 것 같다.