공부하자

프론트엔드 프로젝트에서 styled-components와 TypeScript로 디자인 시스템 설정하기 프로젝트를 시작할 때 먼저 설정하면 편한 것들이 있다.prettier, lint 설정이라던지 절대경로 설정이라던지... 그 중 하나인 디자인 시스템 설정을 해보자!프론트로 개발을 할 때 피그마 보고 눈대중으로 값을 지정해서 개발을 하면 절대 안 된다 ㅎ 디자이너가 피그마에서 정해진 색상의 종류, 폰트의 종류를 고려하여 디자인 해야한다! 우리 프로젝트는 밑에 사진처럼 디자인 가이드가 나와있었다. 많이 쓰이는 색상이나 폰트, 크기, 행간을 설정해두고 디자인을 하는 경우거나 자주 사용하는 디자인이 있을 경우 이를 전역에 지정해두고 쓰는 것이 편하다!  이걸 지정해두지 않으면 모든 컴포넌트마다 font-size..

리액트(React)에서 폼을 다루다 보면, "Controlled"와 "Uncontrolled" 컴포넌트라는 용어를 접할 수 있다.제어 컴포넌트 / 비제어 컴포넌트라고 다들 알고있을 것이다!이 두 가지 패턴은 입력 요소의 상태를 관리하는 방법에서 큰 차이를 보인다.React-Hook-Form 같은 걸 쓸 때 아무렇게나 쓰지 말고 잘 쓰기 위해서 Controlled와 Uncontrolled 컴포넌트의 차이점, 장단점, 그리고 사용 예시를 살펴보자. Controlled 컴포넌트Controlled 컴포넌트는 상태가 컴포넌트의 state에 의해 제어되는 입력 요소이다. 이러한 패턴에서는 입력 요소의 값(value)이 컴포넌트의 state에 저장되고, 입력 요소가 변경될 때마다 state가 업데이트된다.예시 코드i..

usestate 남발 코드를 react-hook-form로 리팩토링 하기로 하였다현재 코드는 비밀번호 재설정 기능을 구현하고 있는 상태 기존 코드import { EMAIL_DOMAIN } from '@/constants/email.constant';import { BoxButton, SuffixTextField } from '@yourssu/design-system-react';import { StyledEmailContainer, StyledSubTitleText, StyledTitleText } from './EmailInput.style';import { useState } from 'react';import { postAuthVerificationEmail } from '@/home/apis/au..

const observer = useRef();...const lastMovieElementRef = useCallback( (node) => { if (observer.current) observer.current.disconnect(); observer.current = new IntersectionObserver((entries) => { if (entries[0].isIntersecting && hasMore) { setPage((prevPage) => prevPage + 1); } }); if (node) observer.current.observe(node); }, [hasMore]);동작 과정useCallback 설정: lastMovi..

umc 6주차 과제중 Debounce와 Throttling이라는 개념을 배웠다! Debounce : 연속된 이벤트 호출을 제한하여 마지막 이벤트만 처리하도록 하는 기술→ 연속된 이벤트가 발생할 때마다 타이머를 리셋하고, 일정 시간이 지난 후에 이벤트를 처리Debounce는 주로 어디에 사용하나요?ex) 검색어 자동 완성 기능에서 사용자가 입력을 멈춘 후에만 서버에 요청을 보냄사용자 입력 필드에서 입력이 끝난 후 일정 시간 동안 입력이 없을 때만 서버에 요청을 보내는 경우적용 과정1. debounce hook 만들기2. 적용하기 1. useDebounce.js hook 구현import { useState, useEffect } from "react";export const useDebounce = (val..

유어슈 pr 리뷰 중에 좋은 걸 배워서 기록해봄 쭌 감사링 나중에 보여줘야징 ㅎㅎ 이전 상태에 기반하여 상태를 업데이트 해야할 때 update function 사용이 더 낫다는 의견이 있었다! 그의 리뷰,,지금은 코드가 문제없이 동작하지만 추후에 비동기 로직등이 handleCheckAgree() 함수에 추가되면 상태 업데이트가 예상치 못하게 이루어질 수 있을 것 같아요!handleCheckAgree()와 같이 이전 상태에 기반하여 상태를 업데이트 해야할 때는 update function을 쓰는게 좋은 습관인 것 같습니다.   기존 코드const [agreed, setAgreed] = useState(false);...const handleCheckAgree = () => { setAgreed(!ag..

면접 질문들 같다 ㅎ 일단 적어둠 Q1. DOM과 Virtual DOM을 설명해주세요 - DOM (Document Object Model): HTML이란 코드로 설계된 웹페이지가 브라우저 안에서 화면에 나타나고, 이벤트에 반응하며 값을 입력받는 등 기능들을 수행할 객체들로 실체화된 형태를 의미한다. (DOM은 HTML, XML 또는 XHTML로 작성된 문서의 객체 지향 표현이라는 뜻) 웹 브라우저가 HTML 문서를 로드할 때, 각 요소(element)는 객체가 되고, 스크립트를 통해 이 객체들을 조작할 수 있다. + DOM 조작의 비효율성 예를 들어 유저가 어떤 포스트에 좋아요를 누르거나 담아둔 장바구니 목록에서 상품을 하나 삭제하면 전체 노드들이 처음부터 다시 그려지게 된다! -> 불필요한 반복이 반복..

wanted 프론트엔드 프리온보딩 과정을 위한 사전과제 Redux를 사용해 todo list 만들기 과제 내용 : Add와 Delete 기능 2 가지를 만듭니다. input 창에 list1을 입력 후 Add 버튼을 누르면 input 창 하단에 list1 컴포넌트가 뜹니다. 각 list의 delete 버튼을 누르면 해당 list 컴포넌트가 삭제됩니다. 디자인은 자유롭게 해도 됩니다. 위의 2가지 버튼과 그에 따른 기능이 있으면 됩니다. 가능하면 컴포넌트를 만듭니다. (작은 단위라도 좋습니다.) 전역상태를 관리해주세요.(가능한 Redux나 Redux-toolkit을 이용해주세요.) 폴더 구조 /src /components /List /store App.tsx index.tsx 할 일 1. 컴포넌트 구조 미리..

사실 상태관리를 이렇게 빨리 공부할 마음은 없었다... 핳 훅도 제대로 못 쓰는 내가 상태관리를?! 그것도 리덕스를?!!! context랑 recoil만 공부하고 다른 거 더 깊이 공부하고 redux를 쓰던 zustand를 쓰던 jotai를 쓰던 하려고 했는데... 과제에서 redux를 쓰라네? ㅠㅠ 이론 공부 쓱 하고 최소한의 정도로만 공부를 해봐야겠다는 생각에 오늘도,,, (뚠뚠) 솔미는,,, (뚠뚠) 글을 쓰네,,, (뚠뚠) 공부 할 것들... redux 공부 -> useReducer -> useRef Redux란? Redux는 JavaScript 애플리케이션에서 상태 관리를 위한 패턴과 라이브러리이다. Redux의 주요 목표는 애플리케이션의 상태를 예측 가능하고 효율적으로 관리하는 것이다. Red..

이어지는글 https://5ffthewall.tistory.com/73 [React] 리액트 recoil 예제 만들어 사용해보기 이어지는 글 https://5ffthewall.tistory.com/72 [React] recoil로 전역 상태 관리하기 https://5ffthewall.tistory.com/71 [React] 리액트 context API의 리렌더링 방지를 통한 성능 최적화 하기 / useMemo 사용하기 https://5ffthewa 5ffthewall.tistory.com recoil 예제까지 만들면서 recoil에 대한 공부를 했다. 이젠 context API로 상태 관리를 했던 내 코드를 recoil로 변경해 볼 것이다. recoil을 선택한 이유 recoil은 클라이언트의 상태를 관..