본문 바로가기

Computer Programming

리액트 기능구현 스터디- 3. Infinite Scroll 리팩토링 회고 (vs react-virtualized)☀️
Computer Programming/React 2023. 7. 10. 리액트 기능구현 스터디- 3. Infinite Scroll 리팩토링 회고 (vs react-virtualized)☀️ 1. 주제 소개 1) 완성 조건 STEP 1 : 리스트 구현 + 리스트 아래에 목록 추가 STEP 2 : 스크롤이 맨 바닥을 바라보면 로드 STEP 3 : 확대 축소를 해도 문제없이 되는지 2) 시간 - 07.08 토요일 오후 3시~ 오후 8시 3) 사용기술과 라이브러리 - React, styled-components, font awesome icons, react-loader-spinners 4) 폴더 구조 이번에는 간단하게 필요한 부분만 넣었다. 5) 전체 회고 인피니티 스크롤을 구현하는데에는 크게 두가지 방법이 있다. 1) Scroll Event로 핸들링하기 2) Intersection Observer API를 이용하기 다음 프로젝트 때에도 인피니티 스크롤을 구현하게 될텐데 이때는 이벤트를 핸들링하..
CPU와 메모리 그리고 M1, M2 chip
Computer Programming/CS 2023. 7. 7. CPU와 메모리 그리고 M1, M2 chip 1.컴퓨터의 구조 1) CPU CPU는 컴퓨터의 두뇌로, 메모리에 저장된 명령어를 읽어들이고, 읽어 들인 명령어를 해석해 실행하는 부품이다. CPU를 구성하는 가장 중요한 세 가지는 산술논리연산장치(ALU), 레지스터, 제어장치(CU)이다. -구조 1) ALU : = 계산기. 오직 연산만을 위해 존재하는 부품으로 컴퓨터 내부에서 수행되는 대부분의 계산을 도맡아한다. 2) 레지스터: CPU 내부의 작은 임시 저장장치. 프로그램을 실행하는데 필요한 값들을 임시로 저장한다. CPU 안에는 하나가 아닌 여러개의 레지스터가 존재하고 각각 다른 역할을 한다. 레지스터에는 다음과 같은 종류가 있다. 메모리 주소 레지스터: (MAR) : 읽고 쓰기 위한 주기억장치의 주소 저장 프로그램 카운터 (PC) : 다음에 수행할..
카카오 개발자들의 React Query 선택 이유 | react-query 사용법
Computer Programming/React 2023. 7. 6. 카카오 개발자들의 React Query 선택 이유 | react-query 사용법 1. React Query란? 1) 기존 미들웨어의 문제점? 이전까지 API 통신을 리덕스와 사용하기 위해서는 리덕스 툴킷의 Redux-thunk, 또는 Redux-saga라는 라이브러리를 채택해서 사용했다. 하지만 이 두가지는 리덕스의 라이브러리이고, 리덕스는 전역상태관리 전용이기때문에 다수의 API 통신에 사용하기에는 어려움이 있었다. 다수의 컴포넌트에서 동일한 API를 호출하거나, 특정 컴포넌트에서의 API응답이 다른 컴포넌트의 API 응답에 영향을 미치는 경우 등 사용자의 시나리오에 대응하기가 적합하지 않았다. 코드량이 너무 많고 복잡할 뿐더러 리덕스가 비동기 데이터 관리를 전문적으로 해주지 않아 이러한 라이브러리를 사용할 때 규격화가 잘 안되어 있어 오류를 발생시키기도 했다. redux tool..
인증/인가 (세션, 토큰, JWT)
Computer Programming/CS 2023. 7. 5. 인증/인가 (세션, 토큰, JWT) 1. 세션 vs 토큰 1) 세션 id를 이용하는 방식 (세션 기반 인증 시스템) 유저가 로그인할 때 서버는 세션을 생성한 후, 그 세션의 id를 클라이언트에 보내준다. 클라이언트는 이 id를 브라우저에 저장해두었다가 인증이 필요한 데이터를 가져올 때 서버에 id값을 같이 보내면 서버는 그 id를 통해 세션 데이터베이스에서 이 세션이 유효한지 확인하는 방식으로 인증한다. 2) JWT를 이용하는 방식 (토큰 기반 인증 시스템) 유저가 로그인할 때 서버가 인증 정보를 보내주는데 (사진 참고), 암호화나 시그니처 추가가 가능한 데이터 패키지 안에 인증 정보를 담아서 보내준다. (세션보다 정보가 많음) 이 패키지가 JWT(JSON Web Token) 이다. 여기서 담기는 정보 중 accessToken과 refre..
리액트가 Virtual DOM을 사용하는 이유?
Computer Programming/React 2023. 7. 5. 리액트가 Virtual DOM을 사용하는 이유? 1. DOM 조작의 비효율성과 Virtual DOM의 등장 우선 DOM이란 무엇일까? https://nayoungkim00.tistory.com/47 [Browser] DOM (Document Object Model) https://nayoungkim00.tistory.com/44 브라우저의 구조와 렌더링 엔진의 working process 에 관한 글을 먼저 작성했습니다. 이후 DOM 에 관해 모던 자바스크립트 Deep dive 책을 읽고 정리해보았습니다. 프론트엔드 nayoungkim00.tistory.com DOM은 객체를 문서구조로 표현하는 방식으로, XML이나 HTML로 작성된다. 웹 브라우저는 이 DOM을 활용해 객체에 자바스크립트와 CSS를 적용한다. 추가 ) 브라우저의 렌더링 과정 http..
CSS display: -webkit-box 란? (투두리스트 리팩토링 2☀️)
Computer Programming/CSS 2023. 7. 5. CSS display: -webkit-box 란? (투두리스트 리팩토링 2☀️) 이번 투두리스트 코드리뷰에서 페어팀이 아이템 안의 텍스트 (title, text)가 길어질수록 길어진 상태 그대로 보여진다는 점을 지적해주셨다. 원하는 기능을 추가하지 못한것도 문제이지만, 그것보다 이미 사용자가 사용하고 있는 만들어진 기능에서 UI/UX 적인 부분에서 문제가 있다는게 더 심각...... 어떤 행동, 어떤 입력이 들어올지 모르니 나중에 프로젝트를 할때도 다양한 피드백을 받는게 좋을 것 같다. 아무튼 그래서 텍스트가 일정 길이 이상 길어지면 ...으로 표시되게 하고, 상세페이지로 들어오게 유도한 다음 상세페이지에서 조금 더 길게 보여주게 구현했다. 물론 상세페이지에서도 3줄 이상 길어지면 ...으로 표시된다. 하지만 충분히 (약 55자 정도) 쓸 수 있다. 만약 이게 조금 좁다는 의견이 있..
[리액트를 다루는 기술]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..

티스토리툴바