STUDY

React 맛보기

수밈 2023. 8. 28. 22:53

장고와 Python만 작업해보다가, 잠시 React 프로젝트를 살펴보게 되었습니다. 

예전에 Node.js 스터디를 해본적이있지만,  기억이 하나도 안나더라구요. 

보기전에 레포 로컬에 설치하면서 궁금했던 것 및 개념좀 정리해 보았습니다.

Javascript 

  1. 자바스크립트는 프로그래밍 언어중 하나로 웹 표준 (HTML/CSS/Javascript) 중 하나로 채택되어 사용됨
  2. HTML/CSS 는 정적인 언어로 한번 설정하면 못바꿈.
  3. 로그인을 하거나 페이지를 이동하기위한, 즉 이벤트가 발생했을때 변경해줄 수 있는 방법이 필요했음
  4. 이벤트로 변경이 필요한경우 Javascript 를 통해 동작을 변경
  5. 따라서 웹 브라우저에서 자바스크립트를 실행할 수 있는 런타임 환경을 제공함
  6. 결론은, 클라이언트에서 동적인 기능을 담당하고 있음.

Node.js 

  1. Node.js는 JavaScript를 브라우저 외부에서 실행할 수 있는 런타임 환경임.
  2. 옛날옛적, 서버를 자바스크립트를 사용해서 코드를 짜는게 어떻겠냐라는 흐름이 생김
  3. 서버는 PHP, Ruby, Python 등의 언어로 작성되며, 클라이언트는 HTML, CSS, JavaScript를 씀
  4. 에전에는 풀스택이기 때문에 여러 언어를 썼어야함. 나라도 프로그래밍 언어 하나만 이해하고 싶었을 것 같음. 
  5. 무튼 그래서 서버쪽에서 자바스크립트 사용이 필요해짐
  6. 관련 런타임 환경이 필요해졌고, 나온게 Node.js
  7. 서버에서 사용하다보니 서버에 필요한 로직들이 필요해짐
  8. 웹 서버 구축이나 데이터베이스, 파일 접근하는 로직등
  9. 이런 로직들을 만들어놓고, 갖다 쓸 수 있는 패키지 매니저가 제공함
  10. 그게 NPM(Node Package Manager)
  11. 여러 개발자들이 미리 만들어진 라이브러리 도구를 가져다 쓸 수 있는 도구임
  12. Package.json에 패키지들을 저장하고, `npm install` 명령어를 입력하면, 관련 라이브러리 모듈들이 깔림
  13. 이 .json 파일에 버전 및 어떤 의존성이 있는지 확인 가능

런타임

코드가 실행할 수 있는 환경을 의미합니다. 코드를 빌드하고 실행하는 작업을 제공해주는 환경이라고 생각하면됩니다.

React

  • 내생각에 html/css 가 각각 페이지마다 만들어지다보니, 중복 코드가 장난아니었을 것 같음
  • 그런 코드들을 하나의 컴포넌트로 관리하고, 좀 상태적인 처리가 필요했던것 같음. 
  • JSX를 사용함
  • 써보니까 javascript, html, css 한번에 짬뽕해서 한 페이지에 쓸수있는 문법임
  • 클라이언트 사이드 렌더링을 제공해준다함.
  • 리액트를 써서 만들면 브라우저에서 해당 코드들을 전부 짬뽕해서 조합해줌. 빠르다함 

Next.js

  1. react 위에서 작동하는 웹 개발 프레임워크
  2. 서버 사이드 렌더링을 제공함. 서버에서 웹 페이지를 렌더링함. 브라우저가 추가작업할 필요가 없음
  3. 서버사이드 렌더링을 안하더라도, 정적 페이지 생성을 제공하기 때문에 서버리스로 정적 파일을 생성하고 클라이언트에 전달하는 기능도 존재
  4. 이거때매 리액트에서 사용하는듯

React Framework

https://react.dev/learn/start-a-new-react-project

리액트 프로젝트를 시작하려고 사이트에 들어가보면, 풀스택 프레임워크 설치법을 알려준다.

node.js 위에서 사용된다

시작

npx create-next-app

npx 는 node.js 의 패키지 실행 도구이다. npm 이 node.js 패키지를 설치한다면, npx 는 일회성 작업을 실행하기 위해 사용된다. 

$ npm install
$ npm start

overview

component

리액트는 컴포넌트 단위로 이루어진다

function MyButton() { 
  return <Button> I'm a button</Button>
}

호출방법

<컴포넌트이름 />
<MyButton />

export default

파일의 구성요소를 지정한다

export default function Myapp () {
​
}
​
or
​
function Myapp(){}
​
export default Myapp;

파일 하나마다 지정하는건지 파악 필요

jsx

javscript 랑 html 을 같이 사용할 수 있도록 한 문법인듯?

{} 치고 내부 자바스크립트 사용 가능

스타일 추가

.class 문법은 .className 으로 사용 가능