JavaScript (6) 썸네일형 리스트형 api 파일 분리 시 axios의 응답이 console에 안나오는 경우 문제상황 분리된 API 파일(StorePostApi.js)에서는 response 로그를 남길 경우 나오지만 react파일(StorePage.js)에서 res 값을 찍을 경우 나오지 않음 // StorePage.js API호출 부분 StorePostApi(data) .then(res =>{ console.log("res",res) if(res){ setUserCheck(true); setTimeout(() => { navigate('/signup/stores/pos'); }, 500); } else{ throw new Error("토큰이 없습니다") } }) .catch(err=>{ console.error('API 호출 또는 토큰 발급 실패:',err) }) 방법 (해결) StorePostApi 함수에서.. JavaScript - Axios 이용한 외부 데이터 연동 Axios : node.js와 브라우저를 위한 Promiss 기반 HTTP 클라이언트 서버사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpReauests를 사용 설치 node.js 설치 : https://nodejs.org/ko/download 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node.js 설치 확인 C:\>node -v v18.18.2 C:\>npm -v 9.8.1 작업 디렉터리를 생성 후 , 웹서버를 실행 C:\>mkdir react C:\>cd react C:\react> npm install -g h.. JavaScript - 함수( 화살표 , map(), reduce(),filter()) 1. 화살표 함수 (arrow function) : function 키워드 대신 화살표(=>)를 사용하여 간략한 방법으로 함수를 선언 // 익명 함수 표현식을 이용한 함수 정의 let add = function(a, b) { return a+b }; //화살표 함수 let add2 = (a, b) => { return a+b }; // 한줄일 경우 중괄호를 생략하면 화살표 오른쪽의 결과를 반환 let add3 = (a, b) => a+b; // 파라미터가 하나일 경우 파라미터를 감싸고 있는 소괄호도 생략 가능 let add4 = a => a+4; // 객체를 반환하는 경우에는 소괄호로 감싸야 함 let add5 = (a, b) => {return {result:a+b}}; let add6 = (a, b).. ES6(ECMAScript 6) - 단축 속성명 / 계산된 속성명 / 전개 연산자 / 비구조화 1. 단축 속성명(shorthand property names) : 객체의 속성값이 이미 변수로 존재한다면 변수이름만 사용하여 객체 생성 가능 let name = "John"; const obj = { age: 21, name: name, getName: function getName() { return this.name; } }; const obj = { age: 21, name,// 속성이름과 속성값을 가지고 있는 변수 이름이 동일한 경우 getName(){// 속성이름과 함수(메소드) 이름이 동일한 경우 => function 키워드와 함께 생략 return this.name; } }; 2. 계산된 속성명(computed property names) : 변수를 이용해서 객체 속성의 키를 생성 // 속.. JavaScript - 객체와 배열 객체 : 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합 // 객체 선언 let person = { "name": 'alswn', 'age': 26, isMarried: false, 'favorite color': ['빨강', '노랑'], hello: function() { return '안녕, 나는 ' + this.name + "이야"; } }; // 객체 참조 console.log(person.name);// 홍길동 console.log(person["name"]);// 홍길동 console.log(person.favorite color); // Uncaught SyntaxError: => key 에 공백이 있는 경우 console.log(person["favorite c.. JavaScript - 함수 선언 방식 1. 함수 선언식 (Function Declarations) : 일반적인 프로그래밍 언어에서의 함수 선언과 비슷 function 함수이름(){ ..... } function add(x , y){ // add => 함수 이름 정의 return x + y; } console.log(add(10,20)); //함수 이름으로 호출 2. 함수 표현식(Function Expressions ) : 자바스크립트 언어의 특징을 활용한 선언 // 익명 함수 표현식 let add = function(x,y){ return x + y; }; let sum = add; console.log(add(10,20)); // 30 console.log(sum(10,20)); // 30 // 기명 함수 표현식 let sum1 = fun.. 이전 1 다음
