[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

[Node.js] Node.js 사용하기

1. 패키지의 루트폴더 만들기  - 폴더를 만든 후 vs code에서 파일 - 폴더열기 - 생성한 폴더를 열어줌 2. 패키지 생성 - vs code에서 컨트롤 + J를 눌러서 터미널 연 뒤 패키지를 초기화 및 생성하기 위해 npm init  명령어를 입력- 오류발생 - 해결방법  vs code의 파일 - 기본설정 - 설정에 들어간 뒤 window profile 검색    null로 되어있는 터미널 기본 프로필을 command prompt로 변경 후 vscode 재시작    또 오류 발생    windows powershell 을 관리자로 실행 한 후 get-ExecutionPolicy 검색 시 Restricted 인 경우 로컬에서 작성한 스크립트를 실행 할 수 없는 상태이기 때문에 오류가 발생 권한 상태..

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