SG의 개발 공부로그

React는 무엇인가? 리엑트는 자바스크립트 라이브러리이다. 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리 정의는 간단하다. 사용자 인터페이스 구축을 도와주는 자바스크립트 프로그랭밍 언어의 라이브러리이다. 정확히 말하면, 클라이언트 측 라이브러리. 즉, 방문자의 브라우저에서 실행되는 자바스크립트코드이다. 웹페이지에서 로딩이 된 후에 화면을 변경하려면 브라우저상에 자바스크립트를 사용해야 하기 때문에 다채롭고 상호작용이 뛰어난 사용자 인터페이스를 구현할 수 있다. 동작들이 아주 매끄럽고 빠르게 진행되는 것처럼 느껴진다. 새 HTML페이지를 요청하지 않았고, 서버로부터 생성되기를 기다릴 필요도 없다. 자바스크립트가 내부적으로 작업을 수행하면서 화면을 업데이트하기 때문에 가능한 일이다. 그래서 UI 도 ..

API 모듈화 / src / api / todoAxio.js import Axios from "axios"; const axiosInstance = Axios.create({ baseURL: process.env.REACT_APP_TODO, timeout: 5000, }); Axios.create 로 생성한다. api를 불러올 url 주소는 노출방지를 위해서 .env 환경변수로 저장해서 넣어주었다. Axios interceptors 생성한 인스턴스를 인터셉터해서 처리되도록 한다. //요청 인터셉터 axiosInstance.interceptors.request.use( (config) => { //요청 보내기 전에 수행 로직 return config; }, (err) => { //요청 에러 시 수행 로직 ..

처음 react를 접했을 때 주변에서 리엑트 훅훅! 거리길래 훅이 뭐냐고 했다가 복싱 원투 훅 맞을 뻔했다. 농담이고 훅이 뭔지 알아볼거다. 복잡한거 싫으니 간단하게 HOOKS 이 뭔지 요약하면 간단 요약 Class형 방식의 컴포넌트 기능들을 Function형 컴포넌트에서 사용할 수 있도록 해준 기능들을 Hooks 라 하기로 했나보다. . 2019년도쯤에 추가된 공식 라이브러리이며, Class 형 컴포넌트에서만 쓸 수 있었던 state와 life cycle 등을 function 형 컴포넌트에서도 사용 가능하게 해 주었다. (고마워 페이스북 더 열일해 줘) React공식문서에서도 Class보다 function 형 컴포넌트를 권장하고 있다. 그래서 Class의 개념이 약한 사람도 react 에도 쉽게 입문할..

작업을 하다보면, 클라이언트와 서버간의 데이터를 주고 받기 위해서 HTTP 통신을 하게 된다. 비동기 HTTP 통신에 쓰이는 Ajax, Axios, Fetch 의 차이점을 알아볼거다 일단 먼저 Ajax Asyncchronous Javascript And XML 의 약자이다. 약자대로 javascript 를 사용한 비동기 HTTP 통신 기술이다. 비동기적으로 통신으로 인해 페이지전체를 로딩하지 않고, 일부분만 갱신 할 수 있다. 통신이란 response 와 request 를 비동기로 다룰 수 있다는 것이다. 그리고 ajax가 jquery 와 묶여서 불리는 경우가 많다. 나 또한 처음에 그랬다. 근데 잘못된것이였다. ajax 를 더 편리하게 jquery로 사용함으로써 묶어서 말 할때가 많은 것 뿐. 그래서 ..