본문 바로가기

분류 전체보기

[리액트를 다루는 기술]18. 미들웨어 비동기 작업 2 (thunk with API | connect() | createRequestThunk | loading module)
Computer Programming/[리액트를 다루는 기술] 2023. 7. 4. [리액트를 다루는 기술]18. 미들웨어 비동기 작업 2 (thunk with API | connect() | createRequestThunk | loading module) 1. 웹 요청 비동기 작업 처리하기 우선 api.js에 각 api를 모두 함수화해서 모아둔다. import axios from "axios"; export const getPostById = (id) => { return axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`); }; export const getUsers = () => { return axios.get(`https://jsonplaceholder.typicode.com/users`); }; 각 api를 호출하는 함수를 따로 작성하면, 나중에 가독성과 유지보수에 좋다. 이번 스터디에서 어떤 분이 이렇게 하나하나 작성하셨는데 이유가 있었다... 역시 민버지 다음은 thunk 함수를 생성..
[리액트를 다루는 기술] 18. 미들웨어비동기 작업 1 (react-actions | redux-logger | thunk 기본 사용법)
Computer Programming/[리액트를 다루는 기술] 2023. 7. 4. [리액트를 다루는 기술] 18. 미들웨어비동기 작업 1 (react-actions | redux-logger | thunk 기본 사용법) 1. redux-actions 사용하기 1) createAction import { createAction } from '@reduxjs/toolkit' const increment = createAction('counter/increment') let action = increment() // { type: 'counter/increment' } action = increment(3) // returns { type: 'counter/increment', payload: 3 } return 값을 참고하면 createAction을 통한 액션함수 생성이 훨씬 간결하다. 2) handleActions const initialState = 0; //꼭 객체일 필요는 없음. ({num : 0}도 상관없음) //..
axios instance와 interceptor | toolkit + thunk로 API 비동기 처리
Computer Programming/React 2023. 7. 3. axios instance와 interceptor | toolkit + thunk로 API 비동기 처리 1. instance 생성 /.axios/api.js 에서 api 가공하기 import axios from "axios"; const instance = axios.create({ baseURL: process.env.REACT_APP_SERVER_URL, }); export default instance; 이후 axios 를 사용하려면 Import 해와서 import api from "./axios/api"; const { data } = await api.get("/todos"); axios => api로 변경해주면 된다. 그리고 baseURL을 지정해놨기 때문에 /todos 까지만 작성해도 된다. 2. interceptor 생성 import axios from "axios"; const instan..
React 기능 구현 스터디 - 2.검색 기능 (리팩토링 회고) ☀️
Computer Programming/React 2023. 7. 3. React 기능 구현 스터디 - 2.검색 기능 (리팩토링 회고) ☀️ 1. 주제 소개 1) 완성 조건 STEP 1 : 검색어를 입력하여 데이터를 가져와서 뿌려주기 STEP 2 : 검색어를 입력하면 자동완성창 혹은 연관검색어 검색창완성 STEP 3 : option 드롭다운으로 옵션선택할수있게하기 2) 시간 - 07.01 토요일 오후 3시~ 오후 9시 (1시간동안 밥 먹음. 그리고 후회함) 3) 사용기술과 라이브러리 - React, react-router-dom, lodash, styled-components, material-ui icons 4) 폴더 구조 5) 전체 회고 이번 코드에서도 Flux 패턴을 적용해 각 컴포넌트와 컨테이너의 기능들을 명확히 하려고 노력했다. 짧은 시간이었어서 아쉽게도 렌더링 최적화와와 env 파일을 활용하지 못해서 아쉬웠지만, 정해진 시간이 지나..
React 기능 구현 스터디 - 2. 검색 기능 (리팩토링 회고) ☀️
프로젝트 회고 🌊 2023. 7. 3. React 기능 구현 스터디 - 2. 검색 기능 (리팩토링 회고) ☀️ 1. 주제 소개 1) 완성 조건 STEP 1 : 검색어를 입력하여 데이터를 가져와서 뿌려주기 STEP 2 : 검색어를 입력하면 자동완성창 혹은 연관검색어 검색창완성 STEP 3 : option 드롭다운으로 옵션선택할수있게하기 2) 시간 - 07.01 토요일 오후 3시~ 오후 9시 (1시간동안 밥 먹음. 그리고 후회함) 3) 사용기술과 라이브러리 - React, react-router-dom, styled-components, material-ui icons 4) 폴더 구조 5) 전체 회고 이번 코드에서도 Flux 패턴을 적용해 각 컴포넌트와 컨테이너의 기능들을 명확히 하려고 노력했다. 짧은 시간이었어서 아쉽게도 렌더링 최적화와와 env 파일을 활용하지 못해서 아쉬웠지만, 정해진 시간이 지나고 스터디 팀원..
'www.google.com'을 브라우저 주소창에 입력하면 일어나는 일 (웹의 동작 방식)
Computer Programming/CS 2023. 7. 3. 'www.google.com'을 브라우저 주소창에 입력하면 일어나는 일 (웹의 동작 방식) 인터넷이 웹페이지를 부르기 위해 어떻게 작동을 하고 주고 받는지 이해하는 것이 필요하다고 생각해서 정리하게 되었다. 내가 열심히 짠 코드를 이 기계친구들이 어떻게 보여주는지 알고있으면 좋겠다는 생각이 들었다. 클라이언트가 서버에 요청을 보내면 서버는 해당 요청에 대해 응답한다. 해당 동작 순서는 이렇다. 1. 사용자가 www.google.com을 브라우저 주소창에 입력한다. - 브라우저는 프로토콜인 "http://"을 감지한다. - 이를 통해 브라우저는 웹 서버에 접속할 것임을 알고, 이에 따라 HTTP요청을 준비한다. 2. 브라우저는 도메인 이름인 'www.google.com'을 IP 주소로 변환하기 위해 DNS 서버에 DNS 조회 요청을 보낸다. - DNS(Domain Name System Serve..
json-server 사용해보기
Computer Programming/Javascript 2023. 6. 30. json-server 사용해보기 json-server는 fake server의 대표적인 예시로, 간단한 DB와 API 서버를 생성해주는 패키지이다. BE에서 먼저 API server 가 구축되어야 FE에서 실제 데이터로 작업할 수 있기 때문에 만약 그 시간을 기다린다면 낭비가 될 것이다. 그래서 mock data를 이 json-server를 통해 생성하고 미리 작업하고 있을 수 있다. (배포까지 가능) npm install -g json-server 패키지 설치하고 최상위 폴더에 db.json 파일을 생성하고 아래의 json 방식의 코드를 입력한다. { "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body"..
Redux Toolkit 으로 카운터 | 투두 리팩토링 ☀️
Computer Programming/React 2023. 6. 30. Redux Toolkit 으로 카운터 | 투두 리팩토링 ☀️ 리액트에서 리덕스를 편하게 이용할 수 있도록 Redux toolkit 라이브러리를 사용해보자 1. store (configStore.js) 변경하기 import counter from "../modules/counter"; import { configureStore } from "@reduxjs/toolkit"; // const rootReducer = combineReducers({ // counter, // }); // const store = createStore(rootReducer); const store = configureStore({ reducer: { counter: counter, }, }); export default store; combineReducers 와 createStore을..
Storybook 스토리북이란?
Computer Programming/React 2023. 6. 29. Storybook 스토리북이란? 1. Storybook이란? Story북이란 컴포넌트 단위의 UI 개발환경을 지원하는 도구이다. 우리가 잘 알고있는 다양한 조직의 웹페이지에서 컴포넌트가 어떻게 구성되어있는지 확인할 수 있고, 내가 원하는 텍스트나 디자인으로 변경해서 사용할수도 있다. 스토리북을 사용함으로서 개발자들은 컴포넌트를 분리하고 독립적으로 테스트할 수 있으며, 컴포넌트를 쉽게 재사용하고 유지 관리하는데 도움을 준다. 또한 docs 탭에 가면 컴포넌트를 문서화해서 저장할 수 있기 때문에 해당 컴포넌트 자체 혹은 Props에 어떤 기능을 수행하는지 등의 설명을 확인할 수 있다. 2. Storybook 사용하기 1) 프로젝트 생성 - 컴포넌트를 모아 둘 리액트 프로젝트를 생성한다. npm create-react-app react-st..

티스토리툴바