Dev50 [React Axios] Axios 호출 방법 2가지 | 기본호출, 인스턴스 Axios, 더 효율적으로 사용하는 방법: 기본 호출 vs 인스턴스1. 기본 Axios 호출 (axios.get)주석 처리된 코드에서 볼 수 있는 가장 기본적인 방식입니다.특징: 라이브러리에서 제공하는 기본 기능을 직접 사용합니다.장점: 별도의 설정 파일이 필요 없어 소규모 테스트나 단발성 요청에 간편합니다.단점:중복 발생: 모든 요청마다 전체 URL(https://...)을 반복해서 작성해야 합니다.유지보수 취약: 서버 주소가 변경될 경우, 프로젝트 내의 모든 호출 코드를 일일이 수정해야 합니다.설정 번거로움: 공통 헤더(인증 토큰 등)를 매번 설정해야 하므로 코드가 길어집니다.기본호출은 이전 페이지 참고2026.04.09 - [분류 전체보기] - [React axios] .then / async-aw.. 2026. 4. 9. [React Axios] .then / async-await 함수 비교 실습 1. .then() vs async/await (비동기 처리 방식)가장 핵심적인 차이입니다.주석 처리된 코드 (.then()): Promise 객체의 메서드를 체이닝(Chaining)하는 방식입니다. 비동기 작업이 끝나면 then 안의 콜백 함수를 실행하라고 예약하는 방식이죠. 단계가 많아질수록 코드가 오른쪽으로 밀리는 '콜백 지옥'과 비슷한 현상이 생길 수 있습니다.주석 안 된 코드 (async/await): 비동기 코드를 마치 **동기 코드(순서대로 실행되는 코드)**처럼 보이게 작성하는 최신 문법입니다. await를 붙이면 해당 작업이 끝날 때까지 기다렸다가 다음 줄을 실행하므로 흐름을 파악하기가 훨씬 쉽습니다.2. 에러 처리 방식 (catch vs try-catch)비동기 통신은 네트워크 문제 등.. 2026. 4. 9. [React] fetch + async + await 실습 비동기 통신 Axios fetch + async + await 1) Fetch 함수 – IE에서 지원이잘 안됨. : 원격 API를 간편하게 호출 할 수 있도록 브라우져에서 제공하는 fetch()함수 - window.fetch(url, option); 2) 외부 lib 사용(Promise기반의 Http 비동기 통신라이브러리) : 원격 API를 호출 하는 라이브러리 - jQuerylib - Axios lib비동기 통신 fetch +async + awaithttps://jsonplaceholder.typicode.com/users 백엔드가 없어서 일단 통신은 해당 url로 해준다. 2026. 4. 9. [React] 비동기 통신 Ajax 이해하기 | Axios 비교 Ajax: 비동기 웹 통신 기술의 핵심 이해하기 1. Ajax(Asynchronous JavaScript And XML)란?정의: 웹 페이지 전체를 새로고침하지 않고, 서버와 데이터를 비동기적으로 교환하여 페이지 일부만 갱신하는 기술적 개념.특징: 독립된 프로밍 언어가 아니라, 브라우저 내장 기능을 활용하는 방식임.장점: * 사용자 경험(UX) 향상: 화면 끊김 없는 자연스러운 인터랙션 제공.자원 효율성: 필요한 데이터만 주고받아 네트워크 부하 감소.대표 사례: 실시간 검색어, 무한 스크롤, 댓글 등록, 주식 시세 업데이트 등.2. 비동기 통신(Asynchronous)의 이해개념: 요청을 보낸 후 응답을 기다리는 동안 프로그램이 멈추지 않고, 다른 작업을 동시에 수행하는 방식.처리 방식: 응답이 도착하면.. 2026. 4. 9. [React] TodoList 실습으로 핵심 문법 - 데이터 전달과 CRUD 🚀 React 투두 리스트(Todo List) 구조 파헤치기: Props와 컴포넌트 계층리액트로 프로젝트를 만들 때 가장 중요한 것은 **"데이터를 어디에 두고, 어떻게 전달할 것인가?"**이다. 오늘은 간단한 투두 리스트 구조를 통해 리액트의 핵심 동작 원리를 정리1. 전체적인 컴포넌트 계층 구조이미지에서 볼 수 있듯이, 서비스는 최상위 부모인 App.jsx를 중심으로 4개의 주요 컴포넌트로 나뉩니다.Header: 앱의 제목이나 날짜를 표시 (정적 정보)Editor: 새로운 할 일을 입력하고 등록 (onCreate)List: 할 일 목록을 필터링하고 나열 (todos 데이터 사용)TodoItem: 개별 할 일의 수정(onUpdate) 및 삭제(onDelete) 담당2. 실습이 알아둬야할 개념과 문법 .. 2026. 4. 8. [React] Hooks 실습 예제 , useEffect , useMemo import React from 'react'import { useState } from 'react';function Ex03_Memo() { const[list, setList] = useState([1,2,3,4,5]); const[str, setStr] = useState("안녕"); const getSumResult = ()=>{ let sum=0; list.forEach((i)=>{ sum += i; }); return sum; } return ( Ex03_Memo { list.map((no,i)=>{no}) .. 2026. 4. 6. [React] ustState 예제 - 구조분해할당, Map 📌 React State 사용하기 – Form 입력 처리 (Ex03_Form02)회원 정보를 입력받는 폼을 만들고, 입력된 값을 profile이라는 하나의 객체(state)로 관리하는 방법을 정리해보자.1️⃣ 기본 개념이름, 나이, 이메일을 입력받는 input 태그 작성입력 시 inputUpdate 함수 호출입력된 값의 name과 value를 콘솔에 출력 const inputUpdate = (e) => { const { name, value } = e.target; console.log(name, value);}; 👉 객체 비구조화 할당 const { name, value } = e.target; e.target에 있는 name, value를 간편하게 추출코드 가독성이 좋아짐2️⃣ State를 사용하.. 2026. 4. 6. [React] 리액트 개요, 환경설정 | Nodejs 설치 | VS코드 확장플러그인 추천 index는 자동으로 열린다. 자바스크립트를 통해서 root id를 찾아서 화면을 그리는게 다 만들어진다. dom싱글페이지 어플리케이션 , 파일들이 다 다운로드 되어지고 vitrual dom이 생성된다. axios 외부의 api를 요청하는 것 , 외부의 api 스프링쪽 연동을 하기위해 데이터를 가지고 와서 javascript로 구현한다. ⚛️ 리액트(React) 핵심 요약1. Virtual DOM (가상 돔) : 효율적인 화면 업데이트실제 브라우저의 DOM을 직접 건드리지 않고, 메모리상에 띄운 자바스크립트 객체 복사본을 이용해 변경 사항을 적용하는 기술입니다.동작 순서:Re-render: 데이터가 바뀌면 전체 UI를 가상 돔에 일단 새로 그립니다.Diffing (비교): 변경 전의 가상 돔과 변경 .. 2026. 4. 2. 자바스크립트 함수선언방식 | 함수선언방식, 함수표현식, 화살표함수, function생성자 함수 , window객체 주요함수 1. 함수 선언 4가지 방법자바스크립트에서 함수를 만드는 방법은 크게 4가지가 있습니다.① 함수 선언문 (Function Declaration)가장 전통적인 방식입니다. **호이스팅(Hoisting)**이 적용되어 코드 상단에서 호출해도 에러가 나지 않습니다.정의: function 키워드 뒤에 함수 이름을 명시합니다.예제:JavaScript sayHello(); // 실행 가능 (호이스팅)function sayHello() { console.log("안녕하세요!");}② 함수 표현식 (Function Expression)함수를 변수에 할당하는 방식입니다. 변수 선언 방식(let, const)에 따라 호이스팅 규칙을 따릅니다.정의: 익명 함수를 변수에 담아 사용합니다.예제:JavaScript cons.. 2026. 3. 30. 자바스크립트 prmot 입력창 값 연산자를 알아보자 Let 사용방법 변수에 대해서 알아보자 -var vs let vs const 2026. 3. 26. 자바스크립트 var 변수 변수에 대해서 알아보자 -var vs let vs const 📒 자바스크립트 변수와 스코프 (var vs let vs const)1. 호이스팅 (Hoisting) 🚀호이스팅은 선언문이 코드의 최상단으로 끌어올려진 것처럼 동작하는 자바스크립트의 독특한 특징입니다.var: 선언과 초기화(undefined)가 동시에 호이스팅됩니다. 선언 전에 호출해도 에러가 나지 않고 undefined를 반환합니다.let / const: 선언은 호이스팅되지만, 초기화는 되지 않습니다. 선언 전에 접근하려고 하면 **참조 에러(ReferenceError)**가 발생합니다. 이를 TDZ(Temporal Dead Zone) 구간이라고 부릅니다.2. 스코프 (Scope) 🔍변수에 접근할 수 있는 유효 범위를 말합니다.. 2026. 3. 26. [JS] 등록form 이메일 유효성 체크 및 JavaScript 적용 예제 회원 가입 및 등록하는 form을 css와 JS를 연결해준다. Register 이름 이메일 연락처 비밀번호 비밀번호 확인 회원 가입 개인 기업 로그인 회원가입 스프링꿈나무 도룽이 Login .. 2026. 3. 26. 이전 1 2 3 4 5 다음
