작심삼일 개발이야기

여러 라이브러리를 사용해서 만들어서 사용하는 것보다 훨씬 간단하게 사용할 수 있으나... 분명 한 번은 css 커스텀에서 막히는 일이 생겨서 차라리 한번 만들어보자 싶어 직접 만들어 보았습니다.  함께 사용한 라이브러리입니다.- Dayjs- emotion 폴더구조- calender   - date      - CalendarDate.styled.ts      - CalendarDate.tsx   - hooks      - useCalendar.ts      - useMonth.ts   - Calendar.steyld.ts   - Calendar.tsx  Calendar 컴포넌트는 Calendar.tsx와 CalendarDate.tsx로 구성되어있습니다.CalendarDate는 Calender 내부에서 날..

폼을 작성하는 페이지에서 다른 페이지로 이동하려는 시도 시, 이동 전에 현재 작성된 내용이 손실될 수 있다는 경고 메시지가 나타나는 UI는 많은 사용자들이 익히 본 경험이 있습니다. 이러한 상황에서 사용자에게 명확한 선택을 요청하는 UI는 중요한 사용자 경험의 일부입니다. 아래의 사진과 같이 브라우저에서 지원하는 UI를 사용할 수도 있으며 커스텀하여 원하는 UI를 사용할 수도 있습니다. react-router-dom의 6.21.0 버전을 사용하여 커스텀 컴포넌트를 사용할 수 있도록 usePrompt 예시 코드입니다.현재 프로젝트에서 react-router-dom의 버전을 꼭 확인하시기 바랍니다. 아래의 usePrompt 코드를 확인한 후 설명을 이어서 하겠습니다.import { useEffect } fr..

클린 코드 책을 읽다 지연 초기화에 대해 조금 더 알아봤다. 마침 리액트 최적화에 관련된 글을 찾아서 정리해봤다. 아래의 두 코드를 비교해보자 코드 1 const Counter = () => { const [count, setCount] = useState( Number.parseInt(window.localStorage.getItem(cacheKey)), ) useEffect(() => { window.localStorage.setItem(cacheKey, count) }, [cacheKey, count]) return ( Count: {count} setCount((prevCount) => prevCount - 1)}>- setCount((prevCount) => prevCount + 1)}>+ ) ..

만약 링크를 통해 웹 페이지에 접근할 때 해당 페이지에서 로그인 정보가 필요하다면 로그인 페이지로 바로 이동시켜준다. 로그인을 성공하게 되었을 때 처음 링크를 통해 접근한 페이지로 이동하는 방법을 적어두려 합니다. 여기서 소개하는 방법이 정답이라고 할 수는 없으니 다른 방법을 아시는 분 있으면 댓글에 알려주시면 감사하겠습니다. 사용한 기술스택 react react-router-dom V6 js-cookie 로직 순서 private 페이지(로그인이 필요한 페이지)에 접근했을 때 cookie를 통한 유저 token 확인 cookie에 유저 token이 없는 것을 확인 로그인 페이지로 이동하기 전 현재의 path를 useNavigate의 state로 저장 후 로그인 페이지로 이동 로그인 실행 useNaviga..

1. Render Props란 "render prop"란, React 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용하는 간단한 테크닉입니다. Render Props – React A JavaScript library for building user interfaces ko.reactjs.org Render Props에 대해 React 공식문서에 이렇게 나온다. render props 패턴으로 구현된 컴포넌트는 자체적으로 렌더링 로직을 구현하는 대신 react 엘리먼트 요소를 반환하고 이를 호출하는 함수를 사용한다. ( Hello {data.target} )}/> 2. 예시 공식문서를 바탕으로 함수형으로 만들어봤다. Mouse 컴포넌트는 마우스가 움직일 때마다 좌표를 알 수 있는 컴포넌트다. ..

이번에는 Redux Toolkit과 Redux Saga를 함께 사용했다. Toolkit이 잘 기억나지 않는다면 이전 글을 확인하고 와도 된다. 사실 별거 없다.https://choisuhyeok.tistory.com/54 [Redux Toolkit] 지저분한 리덕스, RTK로 정리하자리덕스를 쓰다 보면 정말 코드가 길어진다... 준비해야 할 코드도 많고 RTK로 조금 더 쉽고 깔끔하게 사용해보자아 사실 리덕스 안 쓴 지 오래돼서... 기억도 가물가물하다 내가 이해한 그대로 작choisuhyeok.tistory.com Redux Saga를 사용하는 이유Redux는 동기적으로 실행되기 때문에 비동기적 요청을 하기 위해서Redux Saga의 여러 메소드를 사용하기 위해서 예제에서는 비동기 요청은 하지 않고 d..

리덕스를 쓰다 보면 정말 코드가 길어진다...준비해야 할 코드도 많고 RTK로 조금 더 쉽고 깔끔하게 사용해보자아 사실 리덕스 안 쓴 지 오래돼서... 기억도 가물가물하다 내가 이해한 그대로 작성하려하니 틀린 점이 있으면 알려주면 감사하겠습니다. 일단 고 Toolkit 에서 사용할 함수configureStoreconst store = configureStore({ reducer: counter})configureStore 함수가 createStore()를 래핑하고 있기 때문에 createStore과 동일한 기능을 제공한다.reducer함수를 reducer라는 이름으로 전달해야 한다. createSliceexport const todoSlice = createSlice({ name: 'todo', ..

state를 이용해서 간단하게 Tab UI를 구현했다. 여기서 소개하는 방법이 정답은 아니므로 다른 구현 방법이 있으면 댓글에 남겨주세요.위의 사진처럼 이전, 다음 버튼을 클릭하면 이전, 다음 뷰를 보여준다. 가장 먼저 베이스가 되는 TabUI.jsx 파일의 소스코드이다. (css는 styled-components를 사용했다.)import React, { useState } from "react";import styled from "styled-components";import Page1 from "./Page1";import Page2 from "./Page2";export default function TabUI() { // 현재 보여주는 페이지 const [pageState, setPageSta..

여러 컴포넌트를 만들다 보면 반복되는 코드를 발견할 수 있을 것이다. 반복되는 것을 줄여주면 코드가 훨씬 깔끔하고 보기 좋아지기 때문에 커스텀 Hooks를 만들어 보고자 한다. 내가 발견한 반복되는 코드는 GET api 요청하는 로직이다.주로 api 요청 후 얻어오는 데이터를 사용해서 뷰를 만들어 준다. const [ data, setData ] = useState('');const getData = async () => { try { const res = await axios.get('url 주소'); setData(res); } catch(err) { console.log(err) }};useEffect(() => { getData();}, []);위의 코드처럼 ..

useState와 매우 비슷하다.첫 번째 값은 현재 상태두 번째 값은 업데이트 함수이다.  // 설치 방법npm install immer use-immer 상태값이 객체일 때import { useImmer } from 'use-immer';// 상태값이 객체일 때function App() { const [person, updatePerson] = useImmer({ name: "suhyeok", age: "27" }); const updateName = (name) => { updatePerson(draft => { draft.name = name; }); } const plusAge = () => { updatePerson(draft => { draft.age++; }); }}상태값이..