sm 기술 블로그

Axios Fetch 요청 객체에 url이 있다. 요청 객체에 url이 없다. 써드파티 라이브러리로 설치가 필요 현대 브라우저에 빌트인이라 설치 필요 없음 XSRF 보호를 해준다. 별도 보호 없음 data 속성을 사용 body 속성을 사용 data는 object를 포함한다 body는 문자열화 되어있다 status가 200이고 statusText가 ‘OK’이면 성공이다 응답객체가 ok 속성을 포함하면 성공이다 자동으로 JSON데이터 형식으로 변환된다 .json()메서드를 사용해야 한다. 요청을 취소할 수 있고 타임아웃을 걸 수 있다. 해당 기능 존재 하지않음 HTTP 요청을 가로챌수 있음 기본적으로 제공하지 않음 download진행에 대해 기본적인 지원을 함 지원하지 않음 좀더 많은 브라우저에 지원됨 Ch..

변수 (동적변수) const [num, setNum] = useState(0); const [arr, setArr] = useState([]); usdState(0) : 0을 초기값으로 둔다. useState([]) : 배열을 사용하겠다. 선택상자 setNum(e.target.valueAsNumber)} /> 값이 변경될 때 마다 새로만든다. onChange={(e) => setNum(e.target.valueAsNumber) 에서 e 는 매개변수이다. (마음대로 설정 가능) 버튼 (저장, 취소) const save = () => { setNum(0); setArr([...arr, num]); }; 저장 setNum(0)}>취소 setArr[...arr,num] : 배열에 num값을 저장함 (num) ※..

State 변수 기존에 const(변하는것 불허), let var(변하는것 허용) 으로 변수를 지정하였다. 하지만 정적 변수를 사용하면 사용자가 직접 수정하고 리로드를 해야하는 번거로움이 발생한다. 이때, State변수 동적 변수를 사용하면 자동적으로 리로드 된다. 예시 const [num1, setNum1] = useState(0); 기본구조로 외워야 한다. num1 이라는 변수는 State 변수로 지정해 주었고 초기값은 0이다. value={num1} onChange={(e) => setNum1(e.target.valueAsNumber)} value에는 num1을 집어 넣을거다. 그러나 만약 변화가 발생하면 (onChange) 동적 함수를 변화 시키고 리로드를 한다. onChange의 기본 형태는 아..

리액트란? UI를 효과적으로 구축하기 위해 사용하는 자바스크립트 기반의 라이브러리. 따라서 자바스크립트와 HTML을 할 수 있다면 리액트는 어렵지 않게 사용할 수 있다. 또한, 오픈소스 커뮤니티가 매우 방대하다. 리액트 특징 선언적 : 리액트는 대화형 UI에 작성하기에 유리하다. 즉, 데이터가 변경되었을 때 효율적으로 렌더링을 수행할 수 있다. 컴포넌트 기반 : 캡슐화된 컴포넌트가 상태를 관리하고 UI를 효과적으로 구성할 수 있다. 한번 배우고 어디서나 사용 가능 : 기존의 소스코드를 불피룡하게 다시 작성하지 않고 새로운 기능을 개발할 수 있다. 추가 프론트엔드 분야에서는 객체지향적인 기법을 이용하여 작성하지 않았고, 백엔드 분야에서나 객체 지향 기법을 따라서 개발을 진행했다. 하지만 리액트가 등장하면서..