What is JavaScript? And React?

JavsScript

JavaScript는 무엇인가?

정적인 웹에 활력을 불어넣어 동적인 웹을 구현해 주는 개발 언어

JavaScript의 기능

새로운 로드 작업없이 사용자가 요청한 기능 동작을 구현할 수 있다.

1. 동적 효과

• 새로운 요소, 내용, DOM의 추가, 삭제
• CSS의 이벤트를 변경하여 웹 화면을 실시간으로 변경

2. 프로그래밍적 기능

• 사용자 입력 데이터 확인 및 요청에 따른 유효성 검증 가능
• 웹 브라우저 제어 및 브라우저 쿠키 설정
• AJAX 기술을 이용한 웹 서버와의 통신

JavaScript의 특징

• 객체 기반의 스크립트 언어
• 동적이며 타입을 명시할 필요가 없는 인터프리터 언어로 웹 브라우저에 의해 해석되고 실행됨
• HTML 문서내에 내장되어 함께 처리되며 프로그래밍적 요소 추가 및 활용
• 객체 지향형 / 함수형 프로그래밍 모두 가능

JavaScript의 장단점

장점

• 컴파일 과정이 필요없다. 때문에 빠른 시간 안에 스크립트 코드를 작성할 수 있다. 컴파일이란? 사람의 언어를 컴퓨터 언어(이진코드)로 바꾸어 주는 과정
• 타 언어에 비해 단순한 구조로 배우기 쉽다.
• 사용 컴퓨터의 OS에 무관하게 프로그램이 수행된다.

단점

• 웹 브라우저에 컴파일 되지 않은 코드가 그대로 노출되므로 보안에 취약하다.
• 한정된 객체, 객체 함수를 제공

React

점점 웹의 규모가 커지면서 다양하고 복잡한 UI와 UX를 구현해야 하는 일이 늘어나고 있습니다. 이에 따라 기존의 웹 개발 방식으로는 웹사이트의 개발과 유지보수가 점점 어려워지고 있습니다. 특히 Facebook과 같은 대규모 웹 서비스에서는 사용자와 웹 사이의 상호작용이 많아지면서 원활한 웹 서비스 제공이 필요해졌습니다. 이러한 요구에 대응하기 위해 SPA(Single-Page Application)가 등장하였고, 이를 개발하기 위한 프레임워크와 라이브러리가 나오게 되었습니다.

 

이러한 요구에 대응하기 위해 SPA(Single-Page Application)가 등장하였고, 이를 개발하기 위한 프레임워크와 라이브러리  가 등장하였습니다.

 

React

SPA

SPA는 싱글 페이지 애플리케이션으로, 서버로부터 완전히 새로운 페이지를 불러오지 않고 필요한 데이터만 받아와서 동적으로 HTML 요소를 생성하여 해당 부분만 업데이트하는 방식의 현대적 웹입니다.

 

이를 통해 필요한 리소스만 부분적으로 로딩하고, 불필요한 부분의 리로드를 방지 및 더욱 매끄러운 UI를 제공할 수 있습니다. 이렇게 할 수 있는 이유는  기존의 클라이언트가 서버에 요청을 하고 서버에서 HTML을 보내 화면을 그려주는 방식과는 다르기 때문입니다. 

 

React는 SPA 개발을 위한 프레임워크 중 하나입니다. 다른 대표적인 프론트엔드프런트엔드 프레임워크로는 Angular와 Vue가 있습니다. Angular는 구글에서 개발한 프레임워크로, TypeScript 기반으로 안정적이고 탄탄한 프론트엔드 앱 개발이 가능하며 다양한 기능이 내장되어 있습니다. 하지만 무겁고 배우기 어렵다는 단점이 있습니다. Vue는 개인 개발자인 Evan You가 개발한 프레임워크로, 코드가 깔끔하고 배우기 쉬워 가장 최근에 등장했지만 성장 속도가 매우 빠릅니다.

 

CRA

CRA(Create-React-App) CRA는 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구입니다.

React는 UI 기능만 제공되기에 개발자가 직접 구축해야 할 것들이 많은데 직접 개발 환경을 구축하기에는 높은 난이도와 많은 시간이 소요되기 때문에 그래서 CRA(Create-React-App)가 만들어졌다.

 

CRA를 이용하면 간단하게 React 개발 환경을 순식간에 구축할 수 있는데. CRA에는 babel과 webpack과 같이 리액트 애플리케이션 실행에 필요한 다양한 패키지가 포함되어 있습니다. 물론 git 도 있습니다.

 

React Package

 

CRA 설치

 

cd Desktop/wecode my-app 프로젝트 설치

npx create-react-app westagram-react my-app 프로젝트 진입

cd westagram-react 로컬 서버 띄우기

npm run start / yarn start

Component

Component는 React의 핵심입니다. 이는 재사용 가능한 UI 구성 단위로, 웹 페이지를 개발할 때 Component로 나눌 수 있습니다. 예를 들어, 하나의 웹 페이지를 만든다고 할 때 Navbar 컴포넌트, Main 컴포넌트, Aside 컴포넌트 등으로 나눌 수 있습니다.  웹 개발에서 재사용 가능한 부분은 컴포넌트로 나누어 사용할 수 있습니다.

 

Component의 특징

 

재사용 가능 

 

컴포넌트는 다른 곳에서도 재사용할 수 있습니다. 따라서 코드의 재사용성이 높아지며 개발 시간을 단축시킬 수 있습니다.

 

코드 유지 보수에 좋음

 

컴포넌트 기반 개발은 코드의 모듈화를 가능하게 합니다. 각 컴포넌트는 독립적으로 작동하므로 수정이 필요한 경우 해당 컴포넌트만 수정하면 됩니다. 이는 코드 유지 보수를 용이하게 만들어 줍니다. 구성 파악 용이: 컴포넌트를 사용하면 해당 페이지가 어떻게 구성되어 있는지 쉽게 파악할 수 있습니다. 각 컴포넌트는 독립적인 역할과 책임을 가지며, 이를 조합하여 전체 페이지를 구성합니다. 이는 코드의 가독성을 높이고 협업 시에도 효율적인 소통을 가능하게 합니다.

 

중첩 구조

 

컴포넌트는 다른 컴포넌트를 포함할 수 있습니다. 이는 부모 컴포넌트와 자식 컴포넌트의 관계를 형성하여 복잡한 UI를 구성할 수 있게 해 줍니다. 부모 컴포넌트는 자식 컴포넌트에게 데이터를 전달하고, 자식 컴포넌트는 이를 활용하여 화면을 구성합니다. 이러한 컴포넌트 간의 상호작용은 웹 애플리케이션 개발에 매우 유용합니다. 이와 같은 이유로 React에서는 Component를 중심으로 개발을 진행하며, 이를 통해 재사용성과 코드의 유지 보수성을 높이고 개발 생산성을 향상할 수 있습니다.

JSX

JavaScript Syntax Extension JSX란 리액트에서 사용하는 자바스크립트 확장 문법입니다. JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 Babel을 사용하여 일반 자바스크립트 형태의 코드로 변환되어 더욱 쉽게 리액트로 개발할수 있습니다.

 

JSX 특징

 

HTML 태그를 그대로 사용하기 때문에 보기 쉽고 동시에 JavaScript도 JSX 안에서 동작하게 할 수 있다.

class를 className으로 작성해야 하며 inline Styling이 가능합니다.

 

무조건 최상단 / 최하단에 모든 내부 요소를 감싸는 태그가 있어야 한다.