Front-end 썸네일형 리스트형 [React] 키워드 추천 자동완성 기능 구현 1. 구현 내용사용자가 키워드를 입력하면 해당 키워드로 시작하는 제안 키워드가 나오고, tab 키를 누르면 제안 키워드가 입력되는 기능 2. 코드 import React, { useState } from "react";import menuList from "./MenuList.js";import "./App.css";function App() { const [menuName, setMenuName] = useState(""); const [filteredMenus, setFilteredMenus] = useState([]); // 메뉴명 필터링 결과(=자동 완성 리스트) const [suggestion, setSuggestion] = useState(""); // 메뉴명 자동완성 제안 텍스트 //.. 더보기 [React] 리액트 번들러 Webpack 번들러(Bundler)는 여러 개의 파일 및 종속성을 하나의 파일로 결합하고 최적화하는 도구입니다. 리액트 프로젝트에서 번들러는 주로 JavaScript 파일들 및 다양한 리소스들을 하나의 번들로 묶어서 브라우저에서 효율적으로 로딩되도록 도와줍니다. 주요한 리액트 프로젝트에서 사용되는 번들러 중 하나는 Webpack입니다. Webpack은 모듈 번들러로서 JavaScript 파일 뿐만 아니라, CSS, 이미지, 폰트 등 다양한 유형의 파일도 처리할 수 있습니다. Webpack은 프로젝트의 각 모듈 및 종속성 간의 의존성을 해결하고, 필요한 리소스를 번들로 묶어주며, 코드를 최적화하여 성능을 향상시킬 수 있습니다. Webpack은 일반적으로 다음과 같은 작업을 수행합니다: 번들링 (Bundling): 여러.. 더보기 [React] 리액트 프로젝트 생성하기 create react-app yarn$ yarn create react-app {프로젝트명} npm$ npm create react-app {프로젝트명} npxnpx는 npm 패키지를 실행하거나, 로컬에 설치하지 않고 일회성으로 실행할 때 사용하는 도구입니다. npx를 사용하면 매번 최신 버전의 패키지를 다운로드하여 사용할 수 있습니다.$ npx create react-app {프로젝트명} 발생한 에러 npm create react-app react_templatenpx: installed 64 in 2.899sYou are running Node 12.22.12.Create React App requires Node 14 or higher. Please update your version of Node. 원인현재 사용 중인 .. 더보기 [JavaScript] 자바스크립트 기본 - 연산자 산술 연산자 사칙 연산에 관련된 연산자 * / + -와 나머지 연산자 %, 거듭제곱 연산자 **가 대표적인 산술 연산자 할당 연산자 a = b 형태의 할당 연산자와 a *= 2 형태의 복합 할당 연산자가 있음 비트 연산자 인수를 32비트 정수로 변환하여 이진 연산 수행 조건부 연산자 매개변수가 3개인 연산자로 cond ? resultA : resultB와 같은 형태 cond가 true이면 resultA를 false이면 resultB 반환 논리 연산자 AND 연산자 &&, OR 연산자 || , NOT 연산자 ! 가 있음 nullish 병합 연산자 ??는 피연산자 중 실제 값이 정의된 피연산자를 찾는데 쓰임 a가 null 이나 undefined가 아니면 a ?? b 의 평가 결과는 a, a가 null 이나 .. 더보기 [JavaScript] 자바스크립트 기본 - 형변환(type conversion) 1. 형변환(type conversion) 함수와 연산자에 전달되는 값이 적절한 자료형으로 변환되는 것 전달받은 값을 의도적으로 원하는 타입으로 변환(명시적 변환) 2. 형변환 종류 1) 문자형으로 변환 문자형의 값이 필요한 경우 발생 alert 메서드는 매개변수로 문자형을 받기 때문에 매개변수로 들어오는 값을 문자형으로 형변환 함 String(value)을 사용하면 문자형으로 명시적 형변환 가능 원시 자료형을 문자형으로 변환할 때, 대부분 그 결과를 예상할 수 있을 정도로 명시적인 방식으로 일어남 let value = true; alert(typeof value); // boolean value = String(value); // 변수 value엔 문자열 "true"가 저장 alert(typeof va.. 더보기 [JavaScript] 자바스크립트 기본 - 자료형 자료형 자바스크립트는 8가지 기본 자료형을 갖음 특징 동적타입(dynamically typed)언어 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바뀔 수 있음 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있으며, 변수가 문자열일 수 있고 숫자가 될 수 도 있음 let message = "hello"; message = 12345; 1. 숫자형(number type) 정수 및 부동 소수점 숫자(floating point number)를 나타냄 숫자형의 종류 1) 일반적인 숫자 2) 특수 숫자값(special numeric value) Infinity, -Infinity 어떤 숫자보다 더 큰 특수 값, 무한대(♾️)를 나타냄 NaN 계산 중 에러 발생을 나타내주는 값 부정확하거나 .. 더보기 [React] 훅(Hook) - useNavigate - 페이지 이동을 도와줌 - 보통 변수에 저장해서 사용 import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'; function App() { let navigate = useNavigate(); return( { navigate('/detail')}}>Detail { navigate(-1)}}>뒤로 한 페이지 이동 { navigate(1)}}>앞으로 한 페이지 이동 ) } 더보기 [React] 훅(Hook) - useRef 1. 정의 - 레퍼런스(Reference)를 사용하기 위한 훅 리액트의 레퍼런스 특정 컴포넌트에 접근할 수 있는 객체 - useRef()훅은 레퍼런스 객체(ref object)를 반환 - 레퍼런스 객체에는 .current라는 속성이 있는데 이것은 현재 레퍼런스(참조)하고 있는 엘리먼트를 의미함 - 반환된 레퍼런스 객체넌 컴포넌트의 라이프타임(lifetime) 전체에 걸쳐서 유지됨(컴포넌트 마운트 해제 전까지 유지) - 변경 가능한 .current라는 속성을 가진 하나의 상자라고 생각하면됨 2. 사용방법 - 파라미터로 들어온 초기값(initail value)으로 초기화된 레퍼런스 객체를 반환 const refContainer = useRef(초기값); 더보기 이전 1 2 3 4 ··· 6 다음
