고정 헤더 영역
상세 컨텐츠
본문 제목
89일 - node.js 배우는 이유(복습), react App 생성하기 (feat. npx), index, header, footer 컴포넌트 분리, ★Router, Switch, Route
본문
728x90
* 복습 *
Q. 리액트를 배우다 말고 node.js 배우고, webpack 개념을 또 배우는 이유.
-> 리액트 - bind 개념 있었었지
Node.js 배우는 이유는 webPack을 사용하기 위해
- webPack 실행하기 위해 node.js가 필요한 것
Q. webPack은 왜 배우지?
- js는 모듈 시스템이 지원되지 않아서 (그럼 실행코드나 리소스가 공유되지 않는 문제 발생)
-> 그 대안이 webPack
webPack이 bundel.js를 제공 (이름은 내가 명명). 요지는 한꺼번에 가지고 올 수 있게 된다.
- bundle.js가 클라이언트한테 가는 것
이거로 리액트 어플리케이션을 실행
요지는 '개발할때만' webPack과 nodeJS를 사용.
나중에 bundle.js 만들때까지만.
js는 언어 따로, 실행 환경(node.js) 따로여서 낯설게 느껴지는 것ㅎㅎㅎ
- 그런데 java에서도 java 실행환경이 있었듯이 js도 node.js에서 실행해야한다는 점. 이렇게 이해하면 된다.
React만 가지고도 만들 수 있는 것
- RestAPI 통해서
백엔드만 할지 프론트만 할지 선택해야함.
SPA vs MPA
- 프론트엔드는 SPA를 만드는 것 (창 하나! 뜨면 그 안에서 다 스크립트로 이뤄지는 것)
- MPA (각 페이지마다! 스크립트를 사용) - 서버에서 완벽하게 데이터를 얻어 온 다음에! 페이지를 만듦
대부분은 MPA
web은 거의 다 백엔드로 만드는게 맞고
web + mobile 이면 보통 백엔드 + Native 정도
- react/angualr/native로 하면 프론트엔드로 한 번에 구현할 수도
일단 기본은 web + js + DOM을 잘하자!
리액트를 사용했다 = 무조건 webPack 사용한 것
cf) 리액트는 바벨 스크립트스크리다보니 꼭 사용해야하는 것
node.js를 알아보자.
react App 생성하기
- 스프링으로 따지면 boot 생성하는 것과 마찬가지인 과정
- 리액트를 개발하기 위한 환경을 만드는 과정을 살펴보는 것 (이건 내 워딩)
폴더 새로 만들어서 vs로 열기
//
terminal 열어서
https://reactjs.org/docs/create-a-new-react-app.html
npx create-react-app my-app
cd my-app
npm start
다운로드 + 실행 = npx
npx create-react-app 까지만 복사하고 그 이후에는 newlecture-app 등 이렇게 명명
-> 그럼 뭐가 막 설치될 것
어디로 갈때는 이거 빼고 들고가면 됨
//
터미널에서
cd newlecture-app (이름 다르게 해줬으면 그 이름으로 해줘야겠지)
npm start
그럼 이렇게 뜬다.
- 근데 진짜 서버가 아니라는 점!
- '개발 서버'로서 vs에서 잠시 open 해주듯, 열어주는 것임
public 폴더 - css
src - 컨트롤러, view
// 나머지는 jsx 컴포넌트로
index.html의 root에다가 렌더링해주는 곳 -> index.js
- <App>을 가져다가 root에 넣어주는 중
주의점 : 바벨 스크립트에 맞게 써주기!
// 필요없는거 지워주자
index.html에서 주석 처리들
오른쪽에서부터 이제 시작하는 것
//
이제 헤더도 프로그램 영역으로
- App.js 안에다가 다 가져다 놓을 것 (ex - 로그인하면 헤더 영역도 바뀌고 그러니까)
- 달라지는 부분 -> '라우팅' 해줘야 함.
계층 구조를 잘 생각해야함.
- 리액트는 <div> 하나씩 막 더 들어가기 때문에 css 깨지지 않도록 잘 봐야함
html(1) 파일 압축 풀어서, 필요한 것만 넣어줌
//
<body> '안'을 전체 (/body 전까지) 복사해서 넣는데,
주의할 점은 이 내용을 '전체적으로 감싸줘야 함'
// 이제 빨간색줄 고치기
1) header, footer는 별도의 '컴포넌트'로 분리하자.
- header 부분 잘라내기
- src> component 폴더 만들기 > header.js 파일 만들기 (cf - 옛날 확장자 이름은 jsx)
컴포넌트 종류 2가지
1) 클래스형 컴포넌트 -> state를 이용한 데이터 바인딩이 필요한 경우
2) 함수형 컴포넌트 -> state 필요없이 가볍게 사용할 경우 (근데 간간히 state 필요한 경우, Hook라는걸 사용해서 state를 사용할 수 있기도 하다.)
header의 특징은 : function으로 쉽게 하자.
//
이제 App에 있는 <header> 부분을 가지고 오는데, 오류들이 많이 나지~
알맞게 고쳐줘보자!
주석을 이렇게 처리하고~
ctrl +c / ctrl f 누르고
- 저기 화살표 눌러서 replace all 버튼 (오른쪽에) 누르면 됨
class -> className으로 바꿔주고~
// footer도 빼서 해주기
footer에서는 이렇게 단일 태그 (이미지에서) 닫는게 있었음
//
ctrl c 누르면 -> Y/N 묻는거 나옴. 거기서 Y누르고
npm start 눌러서 local 3000 거기서 확인하기
//
가운데 내용이 바뀌어야 함
header, footer가 잘 붙여져 나왔다 :)
Index도 위에 header, footer 해준 것처럼 바꿔주고 ~
고객센터 폴더 하나 만들자
스위칭을 하자.
App.js에서의 Index하고 layout.js을 바꾸려는것.
이렇게 해주고,
router 라이브러리 설치
- 주의할점은 newlecture-app 이 위치에서!!! install 해줘야 함.
이 밖의 위치에 잘못 설치해주면 지호님같은 오류가 남 (막 삭제해주고 다시 설치해주고 그래야함)
//
둘 중 하나만 나오도록 스위칭 할 것
-> 스위칭 구문을 넣어보자
라우터 - 전체 감싸도록 해야함 (애가! 실질적으로 스위치 해주는 녀석임. 그래서 밖에서 둘러싸줘야함)
라우트 - url에 맞게 컴포넌트 연결
스위치 - 둘 중 하나? (여러개 들어가도 된다고 함)
- 스위치는 그냥 바꿀 것만 감싸주면 됨
이 경로가 오면 index 나타나게 하고
이 경로가 오면 이걸 나타나겠다.
//
path 안에는
header.js
지금 url 2개 매칭해준것
1) 이리로 가면 index 나오고
2) 저리로 가면 customer 나오도록
// 실행
지금은 Index 내용 (환영합니다!) 나오는데,
그리고 '고객센터' 클릭해보기
cf) Layout.js 지금 아무것도 없어서 만드는 중
//
다시 실행해보고, '고객센터' 누르는데
1) url은 바뀌는데 리로드가 안된다는 점 (이런게 SPA 군~~)
Q. 왜 안바뀔까?
- 패턴 url 이라서
ex) / 이게 오면 / 이게 다 맞는 것
Q. 17, 18번째줄 순서를 바꾸면?
-> 음.... 잘되는건 아님.
바꾸지 않는 다른 방법 사용하자.
exact 추가!
- 패턴의 개념을 없애버림
// 나 결과봐야 함
'고객센터' 누르면 -> url 변하고 layoyut.js에 쓴 '공지사항 레이아웃 페이지'도 나오는데 리로드 되지 않는다는 점.
이거를 스프링에다가 얹어서 배포 (or Node.js에다가?)
- 요지는 '웹서버'가 배포 역할을 해야하고, 백엔드가 필요하다.
p.s 내거 결과 안나온 이유. 철자!! (위에서 캡쳐한게 내거 캡쳐한거기 때문에 아래 철자를 고쳐야 함)
1) rout가 아니라 route 임
2) custmer가 아니라 customer!
정리
- 백엔드 : 스프링
- 프론트엔드 : 리액트
문서를 백엔드에서 만들어주는 것보다, 프론트에서 다루는게 좋겠다 - 고 계속 느끼게 될 것.
- 스타트업들은 그래서 프론트단에서 하는거고. 큰 기업들은 js를 그냥 정말 얹는 느낌으로 사용하는 정도고.
프론트엔드 개발자 = app 개발자라고 생각하기.
- 다만 그 기술이 web 기술을 활용해서 만드는거다.
비전을 볼 때는 '줄어드는 쪽이냐 vs 늘어나는 쪽이냐'를 보면 됨
- 그런면에서 리액트, 하라~!
cf) 지호님 질문
- 이렇게 하면 다른 js에서 객체를 받아 사용 가능
// es5 방법
// ex6 방법은 많은데 우선 이거.
/test.js/로 들어오게 해서 test.jsp로 가게 하는 것 (이건 파일명만 이렇지 html, js, css...로도 할 수 있는 것)
728x90
반응형
