[React.js] 실습 준비하기

1.  새로운 리액트 앱 생성npm create vite@latestsection05react 선택javescript 선택   2. 폴더열기파일 - 폴더열기 - 금방 만든 section05파일 열기  3. dependencies 다운로드npm install  4. 리액트 실행npm run dev 5. 불필요한 파일 삭제  1. /src/App.jsx에서 상단 svg 파일 사용 하지 않기 때문에 파일, impor문 모두 삭제하나는 퍼블릭, 하나는 에셋 폴더에 들어가 있다. 2. useState 삭제 import { useState } from 'react'const [count, setCount] = useState(0)  3. App()을 리턴하고 있는 Div 모두 삭제 후 리턴문 수정div> a hre..

• format_list_bulleted React/한입크기로 잘라먹는 리액트
• · 2025. 2. 26.
• textsms

[React.js] 리액트의 구동 원리

1. localhost:5173 으로 접속 할 수 있었던 이유- 리액트 앱에 웹서버가 내장 되어 있어 npm run dev는 리액트 서버 가동 명령어이기 때문- 포트번호 : 하나의 컴퓨터에서 여러 대의 서버를 동작시키기 위해 필요한 주소  → 프로그램이 실행 될 때마다 컴퓨터가 자동으로 고유한 포트번호를 지정해 줌  2. 화면에 요소를 랜더링 하는 원리- 우리가 localhost:5173 으로 접속을 하면 리액트는 index.html 파일을 브라우저에 보여준다.  index.html  main.jsxcreateRoot(document.getElementById('root')).render( ,) index.html 에 연결 된 스크립트파일 main.jsx에서 root라는 ..

• format_list_bulleted React/한입크기로 잘라먹는 리액트
• · 2025. 2. 20.
• textsms

[React.js] React App 생성하기

1. 터미널 열어서 vite 다운 npm create vite@latest 2. 라이브러리 설치하기pakage.json 의 dependencies와 devDependencies 을 기반으로 라이브러리를 별도 설치 해 줘야 함터미널 열기 : 커멘드 + jnpm install혹은npm i  혹시 위와 같은 에러가 난다면 현재 위치를 잘 확인하자 cd 로 selection04 경로로 들어가서 npm install을 해줘야한다 3.  설치 파일의 용도 1. public 폴더이미지 파일, 폰트, 영상 같은 파일들을 저장하는 곳 2. src 폴더실제로 작성하게 될 코드를 보관하는 곳 2-1 src - assets - .jsx리액트 코드가 작성 되는 곳 2-3 src - assets - React.svg이미지, 폴더..

• format_list_bulleted React/한입크기로 잘라먹는 리액트
• · 2025. 2. 19.
• textsms

[React.js] React.js란

1. 컴포넌트를 기반으로 UI를 표현- 중복코드 제거의 장점이 있음.- 유지보수 용이 2. 화면 업데이트 구현이 쉬움- 선언형 프로그래밍 방식 (목적만 간결히 명시하는 방법)- 컴포넌트의 State 변수의 값에 따라 랜더링 결과가 달라지기 때문에 업데이트 구현이 쉬움  3. 화면 업데이트가 빠르게 처리 됨- DOM을 한번에 모아서 처리

• format_list_bulleted React/한입크기로 잘라먹는 리액트
• · 2025. 1. 22.
• textsms

[Node.js] 라이브러리 사용하기

https://www.npmjs.com/ npm | HomeBring 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 Javawww.npmjs.com  1. random color 라이브러리 설치하기 검색창에 random color 검색 후 오른쪽 Install 을 위한 명령어를 vscode에서 입력  2. 라이브러리 ..

• format_list_bulleted React/한입크기로 잘라먹는 리액트
• · 2025. 1. 20.
• textsms

[Node.js] 모듈 시스템 이해하기

1. CommonJS 방식1. 다른 js파일에 있는 함수를 가져오기math.js에 있는 함수를 index.js에서 쓸 때 math.js//math 모듈function add(a,b){ return a+b;}function sub(a,b){ return a-b;}// Common.js 모듈 시스템 이용// 모듈 내장 객체에 exports라는 프로퍼티 값으로 객체 저장//모듈 내보내기module.exports= { //add : add, //sub : sub, //변수의 키/값이 같다면 하나만 적어도 됨 add, sub,};  idnex.js//모듈을 불러오기require("./math");//불러온 모듈을 변수에 담아보기const moduleData = require("./math"..

• format_list_bulleted React/한입크기로 잘라먹는 리액트
• · 2025. 1. 10.
• textsms