요즘 프로젝트를 개발하면서 api 호출하는 부분에 대해서 최적화할 수 있는 부분이 있다면 조금씩 리팩토링해보는 중이다.그 중에서도 똑같은 내용으로 api 를 호출했을 때, 다시 응답을 새롭게 기다려야하는 부분을 개선해보고 싶었다. 캐싱 이란?캐싱이란 어떤 데이터를 한번 응답으로 받으면, 임시로 데이터를 다른 곳에 저장해서 필요시에 더 빠르게 불러와서 사용할 수 있는 프로세스를 말한다. 즉, 똑같은 요청을 또 하는 불필요한 요청을 줄일 수 있다. 캐싱을 어디에하지?localStorage, sessionStorage 등 다양한 곳에 저장할 수 있다.나는 브라우저가 닫히면 캐시 데이터 또한 깔끔하게 삭제되길 원했기에 sessionStorage에 저장하는 방법을 택했다. * 영구적으로 저장하고 싶으면 local..
프로젝트에서 메뉴 기능을 개발하면서 useRef 기능을 이 참에 잘 이해하고 써보려고 했다. 햄버거 모양의 메뉴 버튼을 클릭하면 → 메뉴가 펼쳐진다 햄버거 모양의 메뉴 버튼을 다시 클릭하면 → 메뉴가 닫힌다 펼쳐진 메뉴를 제외한 화면의 다른 부분을 클릭하면 → 메뉴가 닫힌다 👉 이걸 구현하고자 함!! useState, useRef, useEffect 훅을 사용해서 메뉴의 열림/닫힘/메뉴 바깥 영역 클릭시 메뉴 닫힘 기능을 구현해보자. const [isMenuOpen, setIsMenuOpen] = useState(false); const menuRef = useRef(); // 드롭다운 메뉴에 대한 참조 먼저 useState 훅을 사용해서 메뉴의 열림/닫힘 상태를 나타내는 isMenuOpen 이라는 상..
TailwindCSS 에 폰트 적용하는 법을 정리해보려한다! 이전에 했었는데 생각이 안나서 다시 찾아봤다. 나중에 또 안 찾아보도록 ... 폰드 다운로드와 저장 https://fonts.google.com/ Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 우선 위 사이트에서 폰트를 다운받는다 폰트 ttf 파일을 프로젝트에 넣어둔다. 나는 src > assets 폴더에 fonts 라는 폴더를 하나 만들어서 여기에 ttf 파일을 저장했다. font-face @font-face { font-family: "Roboto"; src: url("../src/..
문제 Vite로 생성한 React 프로젝트를 개발하는 과정에서 나는 react-router-dom 라이브러리를 활용해서 라우팅을 진행했다. import { Route, Routes } from "react-router-dom"; import TreeBranchView from "./pages/TreeBranchView"; import MemberBranchView from "./pages/MemberBranchView"; function App() { return ( ); } export default App; 코드를 모두 작성하고 Vercel 로 배포한 후 배포된 주소로 접속하는데 분명 로컬에서는 잘 라우팅 되어 접속되었던 주소가, Vercel로 배포한 주소로 들어갔을 때에는 404: NOT_FOUNT..
서비스 홍보 페이지를 만들면서 스크롤에 따라서 화면에 특정 컴포넌트가 나타날 때, 위에서 자연스럽게 올라오는 애니메이션을 적용해보고싶어졌습니다. 라이브러리 선택 구글링을 해보니 react-reveal 과 framer motion 이라는 2가지 라이브러리를 찾을 수 있었는데, react-reveal 은 마지막 업데이트가 오래되기도 했고 npm install 을 해보니 버전때문에 충돌이 나는 부분이 있어, framer motion 라이브러리를 선택했습니다. framer motion 설치 npm install framer-motion 적용 방법 일단 제가 구현하려는 것은 다음과 같았습니다. 스크롤에 따라서 화면에 자식 컴포넌트가 나타나면, 자식컴포넌트에 애니메이션이 실행될 것. 스크롤을 올려서 자식컴포넌트가 ..
관리자 페이지의 간단한 로그인 기능을 구현하려고 하는데 백엔드 없이 로그인 기능을 구현해야하는 상황이었다. 하지만 단순하게 특정 비밀번호를 입력했을 때 특정 페이지를 보여줄 수 있도록 코드를 짜면 새로고침 했을 때 다시 로그인을 해야한다는 불편함이 있었다. 그래서 어떤 방식을 쓸까 생각하다가 쿠키를 사용해보기로 했다. 나는 쿠키를 구현하는데 react-cookie(리액트 쿠키)를 사용했다. 쿠키란 localStorage 를 이전에 쓴 적이 있는데 이것과 유사하다고 느꼈다. 기본적으로 key와 value, 만료기한이 있는 저장소 개념이며, 브라우저에 저장이 된다. 브라우저(클라이언트)에 300개까지 저장이 가능하며 1개의 쿠키 당 4KB 정도의 크기를 가지고 있다고한다. 설치 npm install reac..
이번 프로젝트 로그인 부분을 내가 담당하게 됐는데, 로그인 방식 중에서 카카오 로그인을 구현하게 됐다. 리액트 카카오 로그인에 관련해서 정리된 글들이 많아 개발할 때 참고하면서 진행할 수 있었다. 하지만 까먹지 않고자 한번 정리하려 포스팅해본다. 방식 프론트엔드와 백엔드가 협업하면서 카카오 로그인을 구현하는 방식이 다를 수 있다. 나는 이런 방식으로 했다- 라는 정도로 참고하시면 좋을 것 같다. 나는 프론트엔드 담당이어서 프론트엔드 입장에서 서술해보려고한다. 프론트엔드에서 카카오 로그인 요청 / 인가 코드 받기 요청을 한다 카카오에서 redirect url 로 인가코드를 프론트엔드로 보내준다. 받은 인가코드를 백엔드에게 보낸다. 백엔드는 이 인가코드를 받아 처리해서 AccessToken 을 응답으로 프론..
로그인 여부에 따라서 접속할 수 있는 페이지를 제한하는 방법에 대해서 포스팅해보려한다. 나 같은 경우에는 '/' 경로는 홈 페이지 여서 로그인을 해도, 안해도 접근이 가능해야했고 그 외에 나머지 페이지들은 isLogin 상태가 true 일 경우에만 접근가능하도록 구현하고 싶었다. 전체 코드부터 보자 ... import { userInfoState } from "./recoil/atoms/userState"; import { useRecoilState } from "recoil"; function App() { const [userInfo] = useRecoilState(userInfoState); const isLogin = userInfo.isLogin; return ( {isLogin ? ( ) : ..
문제 프로젝트를 개발하면서 이렇게 여러개의 이미지 슬라이드를 구현할일이 생겼다. (백엔드랑 연동하기전이라 예시 데이터를 넣고 테스트하고 있었다.) 한번에 5개까지 보여줄 수 있도록 설정하고 데이터를 8~9개 정도 넣어놓고 테스트를 하고 있었다. 이때 settings 는 다음과 같았다. const settings = { dots: false, infinite: true, speed: 500, slidesToShow: 5, slidesToScroll: 3, arrows: true, // autoplay: true, }; 근데 예시 데이터를 2개로 줄이고 테스트하니 다음과 같이 이상하게 중복되어 나온다. 해결 구글링을 해보니까 나같은 문제를 겪는 사람들이 있는 것 같아 보였다. react-slick 레포지터리..
문제 axios 로 post 요청을 보내는데 자꾸 api 호출을 두번하는 문제가 생겼다. 다른 api 면 모르겠지만 내가 사용하는 api 는 두번 호출하면 중복된 code 여서 유효한 code 로 동작하지 않았기 때문에 문제를 해결해야했다. 해결 구글링을 하다보니 src/index.js 에서 React.StrictMode 를 지워보라는 말에 따라했더니 중복 호출을 막을 수 있었다.
개발을 하다가 날짜를 선택하는 기능을 구현할 일이 생겼다. 어떤걸 쓸까 찾아보는데 react-datepicker 라는 게 있었다. 근데... 좀 못생겼다? 물론 커스텀을 할 수는 있지만 지금 당장은 커스텀 없이도 좀 더 예쁜걸 사용하고 싶었다. 그러다 mui x 라는 걸 찾았다. https://mui.com/x/react-date-pickers/date-picker/ React Date Picker component - MUI X The Date Picker component lets the user select a date. mui.com 대충 이런식으로 생겼다. 설치 npm install @mui/x-date-pickers // Install date library (if not already ins..
https://stack94.tistory.com/entry/React-%EC%B9%B4%EC%B9%B4%EC%98%A4Kakao-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%B4%EB%B3%B4%EA%B8%B0 느린 개발자 프론트엔드 백엔드 학습정리 및 정보공유 블로그입니다. stack94.tistory.com 위의 글을 참고하면서 따라해보았다. https://developers.kakao.com/docs/latest/ko/kakaologin/common Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao..
통계 페이지를 개발하려하는데 차트를 그릴일이 필요했다. 내가 사용한 건 react-chartjs-2 ! 구글링을 해보다가 유명하다고 해서 한번 써봤다. 사용방법을 정리해봐야겠다 사용방법 npm install --save chart.js react-chartjs-2 https://react-chartjs-2.js.org/examples Examples | react-chartjs-2 List of react-chartjs-2 usage examples. react-chartjs-2.js.org 난 이 페이지에서 내게 필요한 차트 모양을 찾아서 들어갔다. 예를들어 나는 Line Chart 를 찾아 들어가서 예시 코드를 살펴봤다. App.tsx에 있는 코드들을 가져와준다. tsx 코드라서 js 파일에서 쓰기엔..
상태관리 라이브러리 없이 프로젝트를 하다가 아, 이건 안되겠다. 전역으로 상태관리해야겠다! 싶은 부분이 있었다. 근데 오늘 아침 다른 개발자분 티스토리 피드를 보다가 Recoil 을 추천하시는 글을 읽고 이 참에 Recoil을 써보자 생각했다. 설치 먼저 설치한다 npm install recoil Recoil을 사용하기 위해서는 애플리케이션의 최상위 컴포넌트에 컴포넌트를 사용해야한다. index.js 의 파일을 다음과 같이 수정해준다. index.js // index.js import React from 'react'; import ReactDOM from 'react-dom'; import { RecoilRoot } from 'recoil'; import App from './App'; ReactDOM..
채팅을 하다보면 내가 직접 스크롤을 내리지 않아도 새로 추가된 메세지에 대해서 아래로 자동 스크롤이 된다. 이 기능을 구현해보려고 한다. 방법 useRef, useEffect 훅을 사용하여 구현했다. const scrollRef = useRef(); useRef 훅을 사용하여 스크롤할 요소에 대한 scrollRef 라는 것을 만든다. 이 scrollRef는 스크롤할 컨포넌트를 가리키는데 사용된다. useEffect(() => { scrollToBottom(); }, [isTyping]); const scrollToBottom = () => { if (scrollRef.current) { scrollRef.current.scrollTop = scrollRef.current.scrollHeight; } };..
문제 채팅 리스트들을 보여주고, 채팅을 삭제할 수 있는 기능을 구현 중이었다. 채팅 리스트를 클릭하면 채팅을 확인하러 상세페이지로 이동하고, 삭제 버튼을 누르면 채팅 기록이 삭제가 되어야한다. {chats.map((chat) => ( handleChatItemClick(chat.chatId)} className="border-2 border-t-gray-300 p-5 flex justify-between text-sm" > {/* 채팅 생성 시간 */} {formatDate(chat.created_date)} handleDeleteOneChat(chat.chatId)} className="px-4 py-2 overflow-hidden" > 삭제 ))} 근데 삭제 버튼을 눌렀을 때 삭제가 되긴하지만 동시에..
React에서 fetch는 JavaScript의 내장 API인 fetch() 함수를 사용하여 서버와 데이터 통신을 수행하는 방법이다. fetch 함수는 ES6부터 기본적으로 제공되는 함수이며, React 애플리케이션에서 AJAX 요청을 보낼 때 많이 사용된다. AJAX 란? AJAX는 "Asynchronous JavaScript and XML"의 약자로, 웹 애플리케이션에서 비동기적으로 서버와 데이터를 교환하기 위한 기술입니다. AJAX를 사용하면 페이지 전체를 새로 고치지 않고도 서버로부터 데이터를 가져오거나 서버에 데이터를 보낼 수 있습니다. 기존에는 웹 페이지에서 사용자의 요청에 따라 새로운 페이지를 서버로부터 전체적으로 다시 받아오는 방식인 전통적인 동기적인 요청 방식이 일반적이었습니다. 하지만 ..
이렇게 마우스를 올려다 댔을 때 이게 어떤 버튼인지 미리 알 수 있는 문구가 나오게 하려면 tooltip 이라는 기능을 구현하면 된다. React에서 tooltip 을 구현하려면 여러 라이브러리를 활용해서 구현할 수 있는데 나는 그중에서도 react-tooltip 이라는 라이브러리를 사용해보려고 한다. https://react-tooltip.com/docs/getting-started Getting Started | React Tooltip This docs is related to V5, if you are using V4 please check here. react-tooltip.com 자세한 설명은 위에 나와있다. 본인도 공식문서를 보고 적용했기 때문에 빠르고 적용법만 보고싶은 분은 아래를 참고하시..
useDebugValue 란 React Hooks 중 하나로 개발자 도구 Dev Tools 에서 컴포넌트의 상태를 디버깅할 때 사용하는 함수이다. 사용법 useDebugValue 는 두개의 인자를 받음 첫번째 인자는 디버깅에 사용할 값(value) 두번째 인자는 옵션 객체이다. 예시 import { useDebugValue, useState } from 'react'; function useCounter(initialValue) { const [count, setCount] = useState(initialValue); useDebugValue(count, count => `Count: ${count}`); function handleIncrement() { setCount(count + 1); } fu..
useRef 란 useRef는 React에서 제공하는 Hook 함수 중 하나로, 일반적으로 DOM 요소를 선택하거나 컴포넌트에서 변경 가능한 값을 저장하는 데 사용된다. 예시 예를 들어, useRef를 사용하여 DOM 요소를 선택하는 경우 다음과 같이 코드를 작성할 수 있다. import React, { useRef, useEffect } from 'react'; function Example() { const inputRef = useRef(null); useEffect(() => { inputRef.current.focus(); }, []); return ; } 위의 코드에서 useRef를 사용하여 input 요소를 선택하고, useEffect를 사용하여 컴포넌트가 마운트될 때 input 요소에 자동..
useCallback 이란 React의 useCallback 훅은 성능 최적화를 위해 사용되는 훅 중 하나이다. 이 훅은 함수를 캐시(cache)하여 불필요한 함수 재생성을 방지하고, 성능을 최적화하는 데에 도움을 준다. 사용법 useCallback은 두 개의 인자를 받는다. 첫 번째 인자는 캐시할 함수이며, 두 번째 인자는 의존성 배열(dependency array)이다. 의존성 배열에는 캐시할 함수에서 참조하는 값들이 포함되며, 이 값들이 변경될 때마다 함수를 다시 생성한다. 예시 예를 들어, 다음과 같은 코드가 있다고 가정하자. import { useState } from 'react'; function MyComponent() { const [count, setCount] = useState(0)..
React에서 페이지 이동을 구현할 때, Link 와 useNavigate 이라는 개념을 사용한다. 하지만 둘의 분명한 차이점이 있는데, 사용하다보니 궁금해져서 정리해보고자한다. Link Link는 클릭할 때 바로 이동하는 로직을 구현할 때 사용된다. 원래 페이지가 새로고침되면 현재 렌더링되어있는 컴포넌트가 다 사라지고 새로 컴포넌트가 렌더링 되는데, 이때 state 들이 모두 날아간다. 하지만 Link 를 사용한 경우에는 렌더링된 컴포넌트의 state 가 유지되어서 SPA로 동작할 수 있다. 실제 해당 링크로 이동하는 것이 아니라, 에 지정된 컴포넌트를 렌더링한다. * v6 부터는 Link 로 props 를 전달하지 못한다. (이것때문에 한참 붙잡고 있었다...) 예시 예를 들어서 상품 리스트를 클릭했..
왜 쓰는 거야? React 에서 JSX 를 사용할 때 return 문에는 무조건 최상위 태그가 존재해야한다. React 는 하나의 컴포넌트만을 return 할 수 있기 때문이다. 이때, Fragment 라는 걸 사용할 수 있는데 이는 불필요한 div, span 등의 HTML 요소 없이 여러 개의 자식 요소를 렌더링 할 수 있도록 하는 기능이다. Fragment 를 사용하면 컴포넌트의 여러 요소를 그룹화할 수 있다. 예시 예를 들어 App() 에 Table() 이라는 컴포넌트를 넣어서 사용하고 싶은 경우를 생각해보자. Table 컴포넌트는 다음과 같다. function Table() { return ( Hello World ); } 여기서 Table 컴포넌트 내의 태그들을 묶기 위해 최상위 태그로 div ..
요소들을 리스트로 보여주는데, 제목이 너무 길어서 넘어가는 문제가 생겼다. 줄을 넘어가면 grid 가 흐트러지기도하고, 보기에도 통일성이 없어보여서 너무 길면 적당히 자르고 끝에 ... 을 붙이도록 해봤다. 현재는 위와 같은 상태이다. 맨 오른쪽 요소를 보면 제목이 너무 길어서 아래줄까지 침범했다. 저 제목 데이터는 name 이라는 변수에 들어있었는데, processedName 이라는 이름의 변수로 새로 만들어줬다. const processedName = name.length > 15 ? `${name.slice(0, 15)}...` : name; 나는 15자가 넘어갈 경우 문자열을 자르고, 끝에 ... 이 붙도록 코드를 작성해봤다. processedName 변수를 적용해서 다시 화면을 구성해보겠다. 원..
리액트 스터디를 진행하다가 CommonJS module 과 ES module 이 언급이 되었는데 정리해볼겸 포스팅한다. 자바스크립트는 파일마다 독립적인 Scope(범위)를 가지지 않고 하나의 전역객체를 공유해서 사용한다. 대신 이렇게 되면 전역변수가 중복이 되는 문제가 생길 수 있다. 이러한 문제점을 해결하기 위해서 Node.js 에서는 사실상 표준이라고 할 수 있는 CommonJS를 채택하였다. 따라서 각각의 모듈들은 각자의 Scope를 가질 수 있게 되었다. 하지만 브라우저에서는 이를 지원하지 않았다. 그래서 ES6에서 이를 해결하기 위해 모듈 기능을 추가하게 되었다. 비교 ES Modules - module loader 를 비동기 환경에서 실행, import / export 구문을 찾아서 파싱 - ..
작은 프로젝트를 개발하다가 사진 슬라이드를 구현해야할 일이 있어 Swiper 를 선택하게 되었다. https://swiperjs.com/react Swiper React Components Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 공식 문서에 들어가서 찬찬히 보면 된다. npm i swiper 일단 터미널에서 설치부터하고, 아래와 같이 사용하면 된다.(공식문서 예제다) // import Swiper core and required modules import { Navigation, Pagination, Scroll..
styled component 를 써오던 나였는데, 이번에 동기와 작은 프로젝트 개발을 하나 하면서 동기가 tailwind css 에 대해서 알려줬다. 일단 공식은 여기다 https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. tailwindcss.com 사용 방법 일단 터미널에서 설치부터 npm install -D tailwindcss npx tailwindcss init 그리고 tailwind.config.js 파일에다가 module..
문제 프로젝트를 개발하는데 overflow 시에 저렇게 스크롤바가 보이는게 싫어서 해결하고 싶었다. 해결 - 크롬 브라우저를 사용 - styled components 를 사용 ::-webkit-scrollbar { display: none; } 위와 같이 속성을 추가해주었다. 스크롤바가 사라진 모습.
혼자 강의를 듣다가 강사님이 function을 만들때 단축키를 사용하셔서 금방금방 만드시길래 찾아봤다. 이렇게 rfce를 치고 엔터를 치면 이렇게 바로 파일이름이랑 똑같은 Component 틀을 만들어준다. (이런거 너무 좋아...😆) 방법 vscode에서 익스텐션을 하나 설치하면 사용할 수 있다. ES7 이라고 치면 저런 익스텐션을 찾을 수 있는데, 설치하면 단축어 사용가능하다.
현재 서버 Node.js, 프론트 React.js 환경으로 프로젝트를 진행하는 강의를 듣고 있다. 서버랑 클라이언트를 원래는 따로 npm run을 해줘야하지만 concurrently 라는 라이브러리를 설치하면 동시에 실행시킬 수 있다고한다. 아는 게 많아지면... 손이 더 편하니까?! 한번 알아봤다. 설치 npm install concurrently --save 설치는 위와같이 터미널에서 해주고 루트 디렉토리에 있는 package.json에 scripts 부분을 보면 dev 부분이 있다. 저 부분을 아래처럼 작성해주면 원하는 명령어를 순차적으로 실행한다.
