gggimmin 개발 블로그 gggimmin 개발 블로그

axios는 node.js와 브라우저를 위한 Promise 기반 http 클라이언트이다. 다시 말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지이다. 우선 axios를 통해 서버 통신 실습을 하기 위해 axios, json-server 환경을 설치해보도록 하자. yarn add axios yarn add json-server 설치 확인은 package.json 에서 확인 가능하다. 다음으로 임의의 db.json 파일을 생성해 json-server에서 확인해보도록 하자. ( db.json 은 루트 경로에 파일 생성 ) // db.json { "todos": [ { "id": "2", "title": "스프링 공부하기", "contents": "인강 열심히 들어보기!!", "isDone": tr..

Vite는 프론트엔드 개발을 위한 하나의 툴이다. Vite는 6가지의 장점을 내세우는데, 1. 즉각적인 서버 시작 : 네이티브 ESM을 이용한 번들링 없는 온디맨드 파일 제공. 2. 번개처럼 빠른 HMR : 앱 크기에 상관없는 Hot Module Replacement(HMR) 언제나 빠르게 작동. 3. 풍부한 기능 : 추가적인 모듈 설치 없이 TypeScript, JSX, CSS 등 사용가능. 4. 최적화된 빌드 : 웹앱 및 라이브러리 빌드 최적화를 위한 기본 설정 제공. 5. 범용 플러그인 : 개발 서버 및 빌드 과정 모두 사용 가능한 Rollup 플러그인 인터페이스 제공. 6. 완전한 유형의 API : 유연하게 작성된 API는 TypeScript 역시 완벽하게 지원. 내가 느끼기에 가장 좋았던 부분은..

JSON 이란? 1.개념 : JSON = JavaScript Object Notation / 자바스크립트 객체 문법에 토대를 둔, 문자 기반의 데이터 교환 형식 2. 구조 : 일반적인 JSON 구조는 자바스크립트 객체 리터럴 작성법을 따른다. 자바스크립트의 원시 자료형인 문자열, 숫자, 불리언을 가질 수 있고 중첩된 계층 구조 또한 가질 수 있다. { "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [ { "name": "Molecule Man", "age": 29, "secretIde..

리덕스는 "중앙 state 관리소" 이다. 리덕스는 전역 상태관리 라이브러리 라고 많이 표현한다. 전역 상태, 즉 Global State를 의미하고 그것을 관리하게 도와주는 라이브러리 (패키지) 이기 때문이다. useState 로 생성한 State = Local State, Redux에서 생성한 State는 Global State 이다. 1. 리덕스 설치 yarn add redux react-redux # 위 코드는 아래의 두개를 한번에 설치한 것과 같은 의미 yarn add redux yarn add react-redux 2. 폴더 구조 1. src 폴더 안에 redux 폴더 생성 2. redux 폴더 안에 config, modules 폴더를 생성 3. config 폴더 안에 configStore.js..

리렌더링의 조건은 다음과 같다. 1. 컴포넌트에서 state가 바뀌었을 때 2. 컴포넌트가 내려받은 props가 변경되었을 때 3. 부모 컴포넌트가 리렌더링 된 경우 자식 컴포넌트는 모두 리렌더링 리액트에서 리렌더링이 빈번하게, 자주 일어난다는 것은 좋지 않은 사실이다. 리렌더링이 자주 일어나는만큼 비용이 많이 발생하기 때문이다. 이러한 문제를 해결하는 것이 최적화(Optimization) 이라고 부른다. 불필요한 렌더링이 발생하지 않도록 최적화하는 대표적인 방법은 - memo (React.memo) : 컴포넌트를 캐싱 - useCallback : 함수를 캐싱 - useMemo : 값을 캐싱 이렇게 3가지이다. 오늘은 memo (React.memo) 에 대해 알아보려한다. - 1번 컴포넌트가 리렌더링 된..

예제와 함께 학습을 진행하다보면 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해줄때 데이터가 필요없는 중간 컴포넌트를 거치고 거쳐 데이터를 전달해주는 경우도 많았다. 이 부분에 대해 불편함을 느끼던 중, 이런 문제를 해결할 유용한 React hook 이 있다는 것을 알았다. " useContext " 'useContext' 는 React 에서 제공하는 훅 중 하나로, React 컨텍스트(Context)를 사용하여 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 데 사용된다. 컨텍스트는 React 애플리케이션 내에서 전역적으로 데이터를 공유하고, 컴포넌트 간에 데이터를 전달하기 위한 방법을 제공한다. 'useContext' 를 사용하면 컨텍스트에 저장된 값을 읽어와서 사용할 수 있다. context ..

useRef 는 DOM 요소에 접근할 수 있도록 하는 React Hook 이다. 리액트에서도 DOM을 선택해야 할 상황이 생기는데 예를들자면, 특정 input 태그를 focusing 해야 하는 경우다. import "./App.css"; import { useRef } from "react"; function App() { const ref = useRef("초기값"); console.log("ref", ref); return ( useRef에 대한 이야기에요. ); } export default App; 위 코드는 useRef hook의 사용법이다. 콘솔을 확인해본다면 ref 에는 값이 저렇게 담겨있는걸 볼 수 있다. 그리고 ref 에 담겨있는 값을 변경도 가능하다. import "./App.css";..

useEffect ? useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. - 어떤 컴포넌트가 화면에 보여질때 내가 무언가를 실행하고 싶다면 - 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면 위와 같은 상황이 있을 때 useEffect 를 사용한다. ( useState 와 마찬가지로 import 해서 사용해야한다. ) // src/App.js import React, { useEffect } from "react"; const App = () => { useEffect(() => { // 이 부분이 실행된다. console.log("hello useEffect"); }); return Home; } export default App; ..