전체 글 126

React 레퍼런스 실습

한글 음식명, 영어 음식명을 입력하여 추가 버튼을 누르면 아래 결과에서 한글 음식명(영어 음식명)으로 표현하는 리스트 구현 리스트에서 체크박스로 삭제 버튼을 누르면 해당 리스트가 삭제 ☆ Codeimport React, { useRef, useState } from 'react';const FoodContainer = () => { const style = { listStyle : "none" }; const inputRef = useRef([]) const [foods, setFoods] = useState([]); const [checked, setChecked] = useState([]); const foodList = foods.map(({kor, eng}, i) => ..

React 2024.12.11

NODE http 모듈

http 모듈     - HTTP Protocol을 구현할 수 있는       Node.js의 가장 기본적인 웹 모듈     - HTTP Web Server 및 Client를 생성하는 모든 기능 담당     - 보유 객체         server         response         request var http = require('http');var options = { host: 'localhost', port: '10002', path: '/index.html'};// Callback Functionvar callback = function(res){ var content = ''; res.on('data', function(data){ content..

Node 2024.12.08

NODE 개념

Node js의 특징(1) 비동기 IO 처리 / 이벤트 위주     Node.js의 라이브러리의 모든 API는 비동기 방식-non blocking     API가 실행되었을 때, 데이터를 반환할 때까지 기다리지 않고     다음 API를 실행     실행했던 API가 결과값을 반환 시, Node.js의 이벤트 알림     메커니즘을 통해 결과값을 수신 (2) 빠른 속도     구글의 V8 자바스크립트 엔진 사용 (3) 단일 스레드 / 뛰어난 확장성     이벤트 루프 + 단일 스레드     이벤트 루프는 서버가 멈추지 않고 반응하도록 해 줌     -> 서버의 확장성을 키워줌     -> 아파치에 비해 스레드를 한 개만 사용함으로써        더 많은 요청 처리 가능 (4) No Buffering   ..

Node 2024.12.08

React map함수

리액트에서는 변화를 감지하여 랜더링을 하기 때문에, 기존 자바스크립트에서 쓰던 forEach대신 새로운 배열을 반환하는map함수를 사용하게 된다. ☆ Code ★ Food.jsximport React from 'react';const Food = ({food}) => { const {id, name} = food; return ( {id}, {name} );};export default Food; ★ FoodContainer.jsimport React from 'react';import Food from './Food';const FoodContainer = () => { const style = { listStyle : ..

React 2024.12.07

React 개념

ReactJs란? - 복잡한 사용자 인터페이스(UI)를 쉽게 구축하기 위해 페이스북에서 제작된 자바스크립트 기반 라이브러리 - 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 주로 사용된다. - 특정 데이터에 변화가 생길 때 매번 변화를 주기 위한 코드를 작성하는 것이 아닌, 기존 코드를 없애고 다시 새롭게 랜더링한다. ☆ Codeimport React from 'react';const Jsx03 = () => { const name = '홍길동' const message = '환영합니다😁' return ( {name}님 {message} );};export default Jsx03;

React 2024.12.05