본문 바로가기
반응형
SMALL

분류 전체보기

 (46)
Webpack 폴더 및 파일 구조 생성, import 구현하기 webpack은 크게 dist와 src 두 개의 디렉토리 구조를 갖는다고 한다. dist는 배포할 파일들 모이는 곳이고, (react에서 npm run build 하면 생기는 파일들의 공간, 아무튼 이 안에 데이터가 있어야 웹에서 보) src는 코드 작성하는 곳이다. Import 기능 구현 - 이것도 웹팩이 해주던 거다. 맨드러보자 1. randomAddress.js 파일을 만들었다. 아래 그림 보자 2. index.js에서 가져와서 콘솔창 확인해봤다. 원래 다른 파일에서 가져오고 하려면 index.html에서 script 태그에 module 속성 넣어주면 되는 걸로 알고 있다. 근데 webpack 쓸거니까 그런거 하지말자. 서비스 커지면 module 넣다가 인생 끝날지도 모른다. 3. webpack 설..
Webpack 알아보자 오픈 소스 자바스크립트 모듈 번들러 이다. 여러개의 파일들을 자바스크립트 코드로 압축, 최적화해주는 라이브러리이다. 장점 코드 압축을 해줘서 용량이 작아진다 => 네트워크 덜 사용한다 => 이득 모듈 단위 개발 가능하다 => 가독성 유지보수 쉬워진다 => 이득 create-react-app 으로 React 설치하면 웹팩 설정 알아서 해준다. 그래서 지금까지는 아주 편하게 함수 자동 import, 이미지, CSS 알아서 척척 다 됐다. CRA 안쓰고 Webpack 설정 배워보자 설정하는 부분은 몇 가지 부분으로 나뉘는데 Entry : 의존성 그래프 시작점, (대충 홈 페이지 여기라고 알려주는 거임, 웹팩한테) Output : 엔트리에 설정한 자바스크립트 파일을 시작으로 하나로 묶는다. 그 후 번들된 결과물..
React에서 zustand 써보기 2(비동기처리, 스토리지저장, 데브툴즈) 어제 저녁까지 공부한 내용인데, zustand가 사용성이 굉장히 좋은 것 같다. recoil아니면 zustand가 사용성도 좋고, react 문법과 구조도 비슷해서 편리한 것 같다. 솔직히 근본은 redux라고 하던데, redux는 너무 복잡하게 느껴진다. 아무튼, 이번글에서는 zustand에서 다양한 기능들을 알아볼 것이다. 지난번글에서는 zustand를 이용해서 store를 만들고, 저장하고, 가져와서 사용했었는데, 실제로는 더 다양한 기능들이 있겠지만, 기본적인 기능들을 알아보도록하자. 1. 스토리지저장 스토리지저장은 persist라는 메소드를 사용하면 된다. persist는 zustand/middleware 안에 있고, zustand 설치했으면 그냥 사용할 수 있다. - 사용법은 zustand로 ..
React에서 zustand 써보기 리액트에서 쥬스탄드를 써보자 이것도 쉬운편인것같다. 1. npm i zustand 통해서 라이브러리 받아온다. 2. store.js 만든다. 3. create를 통해서 store를 생성한다. - create는 set이라는 걸 가지고 있다. - set은 state들을 가지고 있는데, 여기서는 count 밖에 없다. import { create } from "zustand"; export const useConterStore = create((set) => { return { count: 0, increment: () => set((state) => ({ count: state.count + 1 })), reset: () => set({count: 0}), setNumber: (number) => set({..
React에서 Recoil 써보기 React에서 다른 상태관리 라이브러리 쓰는거보다 이질감없이 사용할 수 있어서 좋았다. Todo List를 만들어 보았는데, 내용을 따라가면서 정리해보도록하자. 1. npm install recoil 명령어를 통해서 recoil 라이브러리를 받아온다. 2. index.js안에 App 컴포넌트를 RecoilRoot 로 감싸준다. - 그럼 전역에서 Recoil로 만든 상태를 쓰는 준비는 끝이다. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { Reco..
React에서 MobX 사용해보기 3(react context 사용해서 observable 공유하기 mobx 사용해보기 1에서 연장된 내용으로 보면된다. context 를 사용하면 여러 곳에서 상태를 공유할 수 있는데, 기억이 잘 안난다. 다시 한번 찾아봐야 할 것 같다. 아무튼 사용방법을 정리하자면 context 생성 -> provider에 props로 store 공유하기 -> usecontext 로 원하는 곳에서 state사용하기 뭐 이런 식인데 코드를 보자 1. context 생성 - 일단 여기서는 context 생성만 보도록 하자 - react에서 createContext 가져와서 만들어준다. import { createContext, useContext } from "react"; // Context 생성 export const CounterContext = createContext(); //..
React에서 mobx 사용해보기 2 (decorator) mobx 옛날 버전에는 decorator라는 걸 이용했다는데 지금은 첫번째 글에 있는것 처럼 사용하는걸 추천한다고 한다. 그래도 옛날 꺼 읽을 줄 알아야하니까 써봤다. react에서 javascript로 쓰려면 webpack이랑 bable 설정하고 package 다운받아야할 것도 많은데, 잘 따라해봤다. 근데 typescript쓰면 그냥 된다고 한다. 맨아래 부분에 package.json이랑 webpack,babel 설정 내용 복붙해놓겠다. 아무튼 중요한 건 그거 설정하는게 아니다. 왜냐면 이젠 안쓰는걸 지향하기 때문이란다. 그래서 decorator라는 걸 쓰는 예전 방식은 뭐가 다른지 알아보자 [index.js] - store 인스턴스 만들어서 props로 App컴포넌트에 내려주는거 동일하 import..
React에서 MobX 사용해보기 1. npx create-react-app 으로 리엑트 설치하기 2. npm install mobx 로 몹엑스 설치하기 - countStore.js를 생성했다. - class로 생성하라고 강의에서 알려줬다. - 여러가지 기능이 있는거 같은데 observable이 공유할 녀석이다. - computed 는 계산에 따른거, 여기서는 count의 상태에 따라 바뀔 것 인거 같다. - action은 동작 - 나머지 잘 만들어주면 된다. import { action, computed, makeObservable, observable } from "mobx"; export default class counterStore { count = 0; constructor() { makeObservable(this, { co..
반응형
LIST

티스토리툴바