-
개발공부 32일차 [유데미 리엑트 강의]개인공부 2023. 2. 27. 14:48
Node.js란
기능별로 파일을 분리하고 모듈로 가져오는 방법
Common JS
// 계산 기능을 하는 파일 (calc.js) const add = (a, b) => a + b; const sub = (a, b) => a - b; module.exports = { //모듈을 내보낼 수 있다. moduleName: "calc module", add: add, sub: sub }
// index.js const calc = require("./calc"); //require()외부 모듈을 가져올 수 있다. console.log(calc.add(1, 2)) console.log(calc.add(4, 5)) console.log(calc.sub(10, 2)) //3 //9 //8
패키지 - 누군가 따로 만들어놓은 node.js 모듈
package.json
main → 진입파일
scripts → 자주실행해야하는 명령어를 사전에 정리해둘 수 있는 곳
ex)
“scripts{
“start”: “node index.js”
}
터미널에 npm srart만 입력해도 node index.js가 실행이 된다.
npmjs 오픈사이트
nodejs package의 쇼핑몰
npm
Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java
www.npmjs.com
ex)
- 검색에 randomcolor를 검색한다.
- 원하는 모듈을 클릭한다.
- 설치방법을 확인한다.
4. 설치하고자 하는 폴더를 확인 후 모듈을 터미널에 설치해준다.
💡설치할땐 꼭 앞에 npm을 적어야한다!설치 후 사용방법은 위 링크에 자세히 나와있고 그대로 작성만 하면된다.
const randomColor = require('randomcolor'); let color1 = randomColor(); let color2 = randomColor(); let color3 = randomColor(); console.log(color1, color2, color3) //#eac66b #d1213e #59c109
React 입문
React는 왜 필요한걸까?
1번째 이유
html로만 코드를 작성하면 중복코드가 발생한다. 중복코드를 수정해야하거나 제거해야 할 경우 유지보수하는데에 문제가 생긴다.
각각 중복되는 것들을 모듈로 넣어서 필요한곳마다 모듈만 넣어놓으면 한번에 수정이 가능하다.
만약 header위치가 문제가 생겨서 수정을 해야할 경우 기존에는 각 파일마다 header를 수정을 해줬어야 했는데 컴포넌트화 방식으로 사용 할 경우 모듈에 저장된 header만 수정해도 각 페이지에 header이 수정된다.
2번째 이유
minus를 눌렀을때 -1씩 감소되고 plus를 눌렀을때 1씩 증가되는데
간단한 코드의 절차를 하나하나 다 나열해야하는걸 명령형 프로그래밍이라고 한다.
리엑트를 사용해서 선언형 프로그래밍으로 목적을 바로 말을 해서 코드를 간단하게 한다.
3번째 이유
Virtual DOM (가상돔)
돔이란?
Docment Obfect Model
웹브라우저가 html을 해석해서 보여주면 트리형태로 보여준다.
add버튼을 누르면 addItem()함수가 실행되면서 5개씩 보이게 되고 누를때마다 계속 위에 리얼돔이 실행이 되고 append가 실행될때마다 리얼돔이 실행이되서 잦은 업데이트로 브라우저는 필요이상으로 연산을 실행해야하고 성능적으로 저하된다.
리엑트로 Virtual DOM을 사용하게되면 업데이트 될 수 있는 요소들을 모아서 가상돔에 실행시키고 그다음 한번에 업데이트를 시키는 리얼돔에 업데이트를 시키는 방법으로 과부화되는걸 막을 수 있다.
npx → 설치되어있지 않은 패키지를 딱 한번만 쓰고 싶을 때 사용한다.
npx create-react-app reactexam1(설치할 이름)
lender - 화면에 그리다.
리엑트앱이 실행이 되고 src디렉토리 밑에 index.js가 실행이되면서
index.html에 있는 id가 root인 태그 아래로 app.js안에 있는 App함수가 들어있는 내용들이 들어간다.
만약 node_modules가 실수로 지우거나 없으면 터미널에 npm i 를 다시 설치해 주면된다.
public디렉토리
favicon.ico → 웹페이지에 탭상단에 홈페이지 아이콘이다.
manifest.json
모바일환경에서 웹브라우저를 볼때 홈화면을 누르면 아이콘을 추가한다던가 뭔가 눌렀을때 옵션을 줄때 사용한다.
robots.txt
웹사이트를 수집할때 검색엔진을 띄워주는건데 수집할수있는 내용, 없는내용을 경로를 기준으로 알려주는 파일
src디렉토리
App.css
스타일파일
App.test.js
테스트를 위해 사용하는 파일
import './App.css'; function App() { let name = "유리" return ( <div className="App"> <header className="App-header"> <h2>안녕 리엑트 {name}</h2> </header> </div> ); } export default App; //ex모듈 시스템 //이렇게 내보내는 App함수는 다른 파일에서 import App from './App'; 이렇게 사용이 된다.
자바스크립트와 html을 합쳐서 사용하는 자바스크립트 표현식 jsx문법
리엑트에서는 jsx문법을 사용해서 웹에 필요한 html문서를 만들어 낸다.
진짜 띠용이다.. 너무 어렵다 이해도 안되고 ..ㅠㅠ 어려우니까 졸리고 집중안되고 이를 어찌하지..
대략 아..아..하면서 듣고 있는데도 어렵다.. 이전에 나왔던 단어들도 까먹어서 아..? 이러면서 듣고있고..
다 듣고 한번 더 듣거나 실습해보면 이해가 되려나 싶다
'개인공부' 카테고리의 다른 글
개발공부 35일차 [유데미 리엑트 강의] (1) 2023.03.03 개발공부 34일차 [유데미 리엑트 강의] (0) 2023.02.27 개발공부 31일차 [노데미 자바스크립트 응용] (0) 2023.02.25 개발공부 29일,30일차 [유데미 자바스크립트기본 및 응용 강의] (0) 2023.02.23 개발공부 29일,30일차 [유데미 자바스크립트기본 강의] (0) 2023.02.23