본문 바로가기

분류 전체보기

 (290)
카카오페이 API 연동 import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; import { useParams } from "react-router-dom"; import { fetchFundingDetail } from "../../../api/api"; // 펀딩 상세 정보를 가져오는 API 함수 import import Navbar from "../../../components/Navbar"; // 추가된 코드 import { useDispatch, useSelector } from "react-redux"; // 추가된 코드 import { userLogout } from "../../../red..
11_데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은? ✅ 데이터가 많은 무한 스크롤(infinite scroll)을 구현할 때 가장 중요하게 고려해야 할 7가지 포인트 1️⃣ 성능 최적화: 많은 양의 데이터를 처리할 때 성능이 중요합니다. 스크롤 동작이 부드럽고 빠르게 이루어져야 합니다. 데이터를 효율적으로 관리하고, 필요한 만큼만 로드하도록 최적화된 알고리즘을 사용해야 합니다. 2️⃣ 가상화(Virtualization): 대규모 데이터를 가진 리스트나 테이블을 표시할 때 가상화 기술을 사용하면 성능을 향상시킬 수 있습니다. 화면에 보이는 부분만 렌더링하여 메모리 사용량을 최소화하고 스크롤 속도를 높일 수 있습니다. 3️⃣ 데이터 청크(chunk): 모든 데이터를 한 번에 로드하는 것이 아니라 청크(chunk) 단위로 나누어서 로드하는 방식을 사용할 수 있..
10_ 연산자 == & 연산자 === ✅ '=='와 '==='는 비교 연산을 수행하는 데 사용됩니다. ✅ '==' 연산자 (동등 연산자): '==' 연산자는 두 피연산자가 동등한지 비교합니다. 두 값의 타입이 다르면 타입 변환을 수행한 후 비교합니다. 이러한 형 변환을 '타입 강제 변환' 또는 '타입 강제 형변환'이라고 합니다. '==' 연산자는 타입 강제 변환으로 인해 예기치 않은 동작을 일으킬 수 있으므로 주의해서 사용해야 합니다. 예를 들어, '1' == 1은 true로 평가됩니다. 여기서 문자열 '1'이 숫자 1로 형 변환되어 비교됩니다. ✅ '===' 연산자 (일치 연산자): '===' 연산자는 엄격한 동등성(strict equality)을 검사합니다. 두 값의 타입과 값이 완전히 같은지를 비교합니다. 타입 강제 변환을 수행하지 않..
9_Arrow Function 무엇인가? ✅ Arrow Function은 ECMAScript 6(ES6)에서 도입된 새로운 함수 표현 방식으로 기존의 함수 표현식과는 다르게 간결하고 명료한 문법을 제공하여 코드를 더 읽기 쉽고 작성하기 쉽게 만듭니다. // 일반 함수 표현식 function multiply(a, b) { return a * b; } // Arrow Function const multiply = (a, b) => a * b; ✅ Arrow Function의 주요 특징: 1️⃣ 간결한 문법: 일반 함수 표현식보다 더 간결한 문법을 가지고 있습니다. 2️⃣ Lexical this 바인딩: Arrow Function 내에서 this는 함수를 감싸는 외부 스코프의 this와 동일합니다. 이를 Lexical this 바인딩이라고 합니다. ..
8_Async/Await & Promise의 차이 Async/Await와 Promise는 JavaScript에서 비동기 코드를 다룰 때 사용되는 두 가지 기능입니다. ✅ Promise Promise는 JavaScript에서 비동기 작업을 처리하는데 사용되는 객체입니다. Promise는 비동기 작업이 완료되었을 때 성공 또는 실패를 나타내는 대기(pending), 이행(fulfilled), 거부(rejected)의 세 가지 상태 중 하나를 가집니다. Promise는 성공 또는 실패와 관련된 처리기(Handler)를 등록할 수 있습니다. .then()을 사용하여 성공 처리기를 등록하고, .catch()를 사용하여 실패 처리기를 등록할 수 있습니다. ✅ Async/Await async 함수는 Promise를 사용하여 비동기적으로 동작하는 함수를 정의하는 방법..
수정, 삭제, 완료 API 연결 import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { fundingCreate } from '../../../api/api'; // 펀딩 생성 API import import { useParams } from 'react-router-dom'; import CreateModal from './Modal/CreateModal'; import Navbar from '../../../components/Navbar'; // 추가된 코드 import { useDispatch, useSelector } from 'react-redux'; // 추가된 코드 import { userLogout }..
입력한 post -> get 디테일 페이지에 출력 import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { fundingCreate } from '../../../api/api'; // 펀딩 생성 API import import { useParams } from 'react-router-dom'; import CreateModal from './Modal/CreateModal'; import { MainContainer, LeftContainer, Logo, P, Button, RightContainer, Navbar, NavbarBtn, ProducImgtDiv, InputTag, FundingImg, // PlusImg, Body, ..
모달창 Url 입력 -> 이미지 출력 import React, { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { MainContainer, LeftContainer, Logo, P, Button, RightContainer, Navbar, NavbarBtn, ProducImgtDiv, InputTag, FundingImg, // PlusImg, Body, FundingDiv, SponserDiv, RadioInput, SponserComment, TogetherDiv, } from './FundingCreateStyles'; import CreateModal from './Modal/CreateModal'; import {..
7_변수 선언 키워드 var : let : const 차이 var는 ES6 이전의 구식 방식이므로, 보통 let 또는 const를 사용하여 블록 스코프를 지향합니다. 값을 변경할 필요가 없는 경우에는 const를 사용하여 의도를 명확히 할 수 있습니다. 1️⃣ var: 함수 스코프를 가집니다. 즉, 함수 내에서 선언된 var 변수는 해당 함수 내에서만 유효합니다. 호이스팅(hoisting)이 발생합니다. 변수 선언 전에 변수를 사용해도 에러가 발생하지 않고 undefined로 초기화됩니다. 재선언이 가능합니다. 동일한 변수명으로 여러 번 선언해도 문제가 발생하지 않습니다. 2️⃣ let: 블록 스코프를 가집니다. 즉, 블록({}) 내에서 선언된 let 변수는 해당 블록 내에서만 유효합니다. 호이스팅(hoisting)이 발생합니다. 하지만 선언 전에 변수를 사용하..
6_useEffect 실행 순서 useEffect 훅은 함수 컴포넌트가 렌더링될 때마다 특정 작업을 수행하거나 호출되는데, 컴포넌트의 상태나 속성(props) 값이 변경될 때 두 가지 상황에서 실행됩니다. 1. 초기 렌더링(initial render): 컴포넌트가 처음 렌더링될 때 useEffect 훅이 실행됩니다. 이때 useEffect의 두 번째 매개변수로 전달된 배열(dependency array)의 값이 비어 있거나, 배열이 전달되지 않은 경우입니다. 이때 useEffect 훅은 컴포넌트가 화면에 처음 렌더링될 때 한 번만 실행됩니다. 2. 의존성 배열(dependency array)의 값이 변경될 때: useEffect의 두 번째 매개변수로 전달된 배열(dependency array)에 포함된 값이 변경될 때마다 useEffe..

티스토리툴바