🗂 WIL/📁 React

추상화란..

:) 지난 스터디에서 내가 정리한 아티클을 공유하고, 정X님이 '추상화란 무엇인가?' 에 대한 질문에 명확하게 답변을 말하지 못했었다.. ~이지 않을까요? 정도로 마무리를 했었는데 찾다보니 이 부분도 스포티파이 블로그에 이미 관련한 글이 있어서 이번주는 추상화 관련해서 정리하고자 한다! 😊 Abstraction - 더 복잡한 개념을 간단하게 만든 버전을 의미 - 복잡한 세부사항을 숨기고, 사용자가 더 쉽게 이해하고 사용할 수 있도록 시스템을 단순화하는 과정 - FE 개발에서의 추상화 개념 1. 낮은 수준의 추상화 : 개발자가 HTML, CSS 코드에 직접 접근하고 조작. 예를 들어, 웹 페이지의 특정 버튼에 스타일을 적용하고자 할 때, 개발자는 직접 해당 HTML 요소를 찾고, CSS를 사용하여 스타일(..

클로저와 useState

1. 클로저란? 클로저는 중첩 함수에서 내부 함수가 외부 함수의 내부 변수를 참조할 수 있는 현상이다! nayeon1을 호출하게 되면 nayeon1 실행 컨텍스트가 생성되어서 콜 스택에 담기고, nayeon1 실행 컨텍스트에서 제거되면, y에 대한 정보는 없는 것이 아닐까? (전역 실행컨텍스트는 제거 X) 그런데, 이런 현상은 왜 일어날까 ? 스코프, 그중에서도 스코프 체인, 렉시컬 스코프, 실행 컨텍스트의 렉시컬 환경을 하나씩 이해하고 나니, 클로저에 대해 조금은 이해하고 있구나..를 느낄 수 있었다. 하나씩 정리해보자. 1-1. 스코프 스코프는 어떤 변수들에 접근할 수 있는 유효 범위다. 간단한 예시 코드를 작성해보았다. 변수 x는 전역 변수이기 때문에 nayeon1 함수와 내부 함수인 nayeon2..

React Query (이젠 TanStack Query 라고 불리는 ..) 적용 (2)

1. 적용해보자. useQuery hook는 서버에서 데이터를 가져올 때 사용하는 훅이기 때문에, todo 목록 / todo 상세 내용을 불러올 때 사용하였다. useMutation hook은 데이터를 생성/수정/삭제할 때 사용하기 때문에, todo 생성/삭제/업데이트에서 사용하였다. import { useQuery } from '@tanstack/react-query'; import { getTodoById } from '../api/todoApi'; import { TodoId } from '../common/types'; const useGetTodoById = (id: TodoId) => { return useQuery(['todos', id], () => getTodoById(id)); }; e..

Private Routes 적용해보자.

추석 연휴 이틀 동안 열심히 잘 먹고 잘 쉬었지만.. 마음 한편에 '근데.. 나 취준생인데 이렇게 쉬어도 되나..' 하는 생각이 들었다. 다이어리에 빼곡히 적혀 있는 해야 할 일들 중에 미루고 미루던 Private Route를 빠르게 적용해보자. Todo 구현 조건 다음번에 로그인 시 토큰이 존재한다면 루트 경로로 리다이렉트. 어떤 경우든 토큰이 유효하지 않다면 사용자에게 알리고 로그인 페이지로 리다이렉트. # Private Routes를 적용하기 전 위의 조건에 만족하기 위해 recoil과 recoil-persist를 사용했다. (3차 프로젝트에서 적용한 로직과 거의 똑같이 구현했다.) 1. 사용자가 로그인에 성공하면 userState atom 은 true 값으로 업데이트된다. 2. 로그인한 사용자만 ..

Axios Interceptors ?

# Axios Interceptors ? 매번 요청때마다, 중복되는 URL 이 있거나 혹은 동일한 헤더값 (content-type , token..) 를 넣거나, 에러가 발생했을 때 공통으로 처리를 하고 싶거나 할때 해결방법이 있을까? 의 물음에 대한 해결방법이 바로 Axios Interceptors 다! 나의 경우에는 Todo를 구현하면서 base URL 과 동일한 헤더값 처리를 위해 Axios Interceptors 를 사용하게 되었다. // Add a request interceptor axios.interceptors.request.use(function (config) { // Do something before request is sent return config; }, function (er..

TDD 도전해보자.(2) - TypeScript 에 적용

TDD 도전해보자.(1) - React Testing Library ? Jest ? TDD를 적용해야 하는 일이 생겨서 공부를 시작했는데, React 에는 이미 Testing Library 가 존재한다고 한다!? # React Testing Library ✔️ 설치 방법도 기존 CRA와 똑같다! 그리고 설치가 끝나면 npm test 명.. nayeon-zip.tistory.com 지난 글에 이어서 빠르게 두 번째 ✌️ 사실 이전 글을 끝으로 다음 글은 TDD 후기이지 않을까 생각했는데... 나의 착각..... CRA 설치를 하면 자동적으로 React Testing Library와 jest 가 자동 설치되기 때문에, 따로 새로운 설치는 필요 없다고 생각했는데, test를 실행하면 오류들이 발생했고, 알아보..

TDD 도전해보자.(1) - React Testing Library ? Jest ?

TDD를 적용해야 하는 일이 생겨서 공부를 시작했는데, React 에는 이미 Testing Library 가 존재한다고 한다!? # React Testing Library ✔️ 설치 방법도 기존 CRA와 똑같다! 그리고 설치가 끝나면 npm test 명령어에 대한 설명이 기재되어있었다...! ✔️ npm test 를 실행하면, 아래와 같이 명령어들이 나온다. a를 실행하면...! App.test.js 가 실행되고, Pass 되는 것을 볼 수 있다. ✔️ 그럼? App.test.js 에서 무엇을 테스트한 것일까? ( App.test.js 파일은 그저 매번 CRA 설치 후 삭제했던 파일이었지 어떤 파일인지는 알아보지 않았었다.😮‍💨 ) test('renders learn react link', () => {..

Scroll 이벤트 대신 Intersection Observer API 이용하자!

📅 본 글은 2022년 7월 23일 개인 github에 작성된 글입니다. 🚀 Scroll 이벤트 대신 Intersection Observer API 이용하자! 3차 프로젝트 리팩토링! 🖱 Scroll 이벤트를 활용한 무한 스크롤! 전체 일기 보여주는 페이지를 커서 기반 무한 스크롤로 구현하였는데, 이때 window 객체에 scroll 이벤트를 연결하여 특정 지점에 스크롤이 되었을 때, 서버에 다음 일기 리스트를 요청하고 이때 파라미터에 cursor 값을 보내는 형식으로 하였다! // handleScroll.js export const handleScroll = () => { const scrollHeight = document.documentElement.scrollHeight; const scrollT..