프리노트

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용합니다. 설치 npm install axios 선언 방법 import axios from 'axios' 사용 방법 기본적으로 사용하는 형태 function App(){ return ( { axios.get('URL') .then((결과)=>{ console.log(결과.data) }) .catch(()=>{ console.log('실패함') }) }}>버튼 ) } GET 요청 서버에서 데이터를 가져와서 보여준다거나 하는 용도이다. GET메서드는 값이나 상태등을 바꿀 수 없다. axios.get('URL') POST 요청 로그인, 회원가입 ..

Developer/React 2022. 12. 18. 11:40

fetch() 함수 비동기로 처리된다. fetch('URL'); //Promise 함수 형태로 나온다 Promise 함수 대부분 비동기적으로 동작하는 함수다. 2가지의 메소드를 가지고 있다. (then, catch) then() 메소드 와 catch() 메소드 fetch('URL') .then(function(response){ // 성공적으로 받아왔을 경우 return response.json(); //JSON 형태의 데이터 파일을 script에서 사용 가능한 자료형으로 변형 }) .then(function(data){ }) .catch(function(reason){ // 실패했을 경우 }) 성공적으로 데이터를 가져왔을때 JSON 형태이기 때문에 javascript에서 사용 가능한 자료형으로 변형 시..

Developer/Javascript 2022. 12. 17. 17:14

각각의 컴포넌트에는 라이프 사이클 즉, 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비과정에서 시작하여 페이지가 사라질때 끝이난다. 라이프사이클의 분류 크게 세가지 유형으로 나눌 수 있다 마운트 (생성 될때) 업데이트 (업데이트 할때) 언마운트 (제거 할때) 마운트는 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻한다. 언마운트는 DOM에서 제거되는것을 뜻한다. 업데이트는 다음과 같은 4가지 상황에서 발생한다. props가 바뀔 때 state가 바귈 때 부모 컴포넌트가 리렌더링 될때 this.forceUpdate로 강제로 렌더링을 트리거할 때 라이프 사이클 메서드 1.constructor(생성자) 이것을 자바와 마찬가지로 컴포넌트를 만들 때 처음으로 실행된다. 이 메..

Developer/React 2022. 12. 2. 12:06

사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각할 수 있다. 리액트에서는 라우팅 관련 라이브러리가 많이 있는데, 이중 가장 많이 사용한다. 설치 //기본적인 설치 방법 npm install react-router-dom //버전 업데이트 방법 (@버전) npm install react-router-dom@6 선언 방법 //최상단에 선언 import { BrowserRouter } from 'react-router-dom'; //사용할 곳에 선언 (index에 감싸주지 않았으면 BrowserRouter를 최상단에 감싸줘야한다.) import { BrowserRouter, Routes, Route, useNavigate, Outlet } from 'react-router-d..

카테고리 없음 2022. 11. 30. 23:29

filter() 함수는 특정 조건에 맞는 값들을 모두 걸러준다. find() 함수는 특정 조건에 맞는 값이 나오는 첫번째 요소 값만 걸러내준다. filter() 구성 arr.filter(callback(element[, index[, array]])[, thisArg]) filter()사용 예시 const arr1 = [10, 20, 30, 40, 50]; //값이 30 이상인 값 구하기 const result1 = arr1.filter(item => item>30); console.log(result1); // [40, 50] //값이 40 인 값 구하기 const result2 = arr1.filter(item => item === 40); console.log(result2); // [40] //값..

카테고리 없음 2022. 11. 29. 23:22

for-in(객체 순환) : 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성을 반복 for-of(배열 값 순환) : 반복 가능한 객체(Array , Map (en-US) , Set , String , TypedArray , arguments)를 탐색한다 for-in(객체 순환) const obj = { a:1, b:2, c:3, data:{ d:4, e:5, f:6 } }; for(let item in obj){ console.log(item); } //a, b, c, data for(let item in obj.data){ console.log(`${item}: ${obj.data[item]}`); } //d: 4, e: 5, f: 6 for-of(배열 값 순환) let arry = ["가", "..

Developer/Javascript 2022. 11. 29. 22:44

참조 타입의 데이터는 복사 시 데이터의 값이 아닌 '값이 저장된 메모리의 주소'가 저장된다. 따라서 참조 타입의 복사 방법은 얕은 복사(Shallow Copy)와 깊은 복사(deep copy)로 나뉜다. 얕은 복사(Shallow copy)는 참조 타입 데이터가 저장한 '메모리 주소 값'을 복사한 것을 의미 깊은 복사(Deep copy)는 새로운 메모리 공간을 확보해 완전히 복사하는 것을 의미 /* 얕은 복사시 주의❗❗❗ */ let origin = ["a", "b", ["c"]]; let copy = origin.slice(); copy[2].push("d"); console.log(origin); //["a", "b", ["c", "d"]]; // 원본까지 바뀌어버림 console.log(copy); ..

Developer/Javascript 2022. 11. 26. 23:51

배열, 함수, 객체 등을 다루는데 있어서 매우 편리한 기능이다. 배열, 문자열, 객체 등 반복 가능한 객체(Object)를 개별 요소로 분리할 수 있다. 기본 문법 // Array var arr1 = [1, 2, 3, 4, 5]; var arr2 = [...arr1, 6, 7, 8, 9]; console.log(arr2); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ] // String var str1 = 'paper block'; var str2 = [...str1]; console.log(str2); // [ "p", "a", "p", "e", "r", " ", "b", "l", "o", "c", "k" ] 스프레드 연산자는 ****연결, 복사 등의 용도로 꽤 활용도가 높은 편이다. 배열..

Developer/Javascript 2022. 11. 25. 03:02