예를 들어 Redis 를 다운받을 경우 공식 문서의 명령어를 그대로 실행하면 에러가 발생함 wget 이 없기 때문에 먼저 wget 을 다운로드 받은 후에 redis 를 받아야 함 wget http://download.redis.io/releases/redis-6.0.4.tar.gz tar xzf redis-6.0.4.tar.gz cd redis-6.0.4 make 이렇게 특정 프로그램을 다운로드 할 때 부수적인 것들도 함께 다운로드 받아야 하기 때문에 설치 과정이 복잡해지고 에러 발생 가능성이 높아짐 docker run -it redis 도커를 이용해 Redis 를 다운받는 경우 설치 과정이 간단해지고 예상치 못한 에러를 방지할 수 있음 Docker 컨테이너를 사용하여 응용 프로그램을 더 쉽게 제작/배포..

SWR 데이터를 가져오기 위한 React Hooks 요청을 하는 동안 캐시되어 있는 데이터를 먼저 보여줌 import useSWR from 'swr' function Profile() { const { data, error, isLoading } = useSWR('/api/user', fetcher) if (error) return failed to load if (isLoading) return loading... return hello {data.name}! } useSWR hook 은 key, fetcher 함수, options 를 전달받고 data, error 를 반환함 key: 데이터의 고유한 식별자 (일반적으로 API URL) fetcher: 데이터를 반환하는 비동기 함수 options: S..

배포 링크 : go-together 원본 저장소: Github 마지막 UXUI + 프론트엔드 + 백엔드 + 기업 협업 프로젝트는...!! 바로 시니어층 패키지 그룹 여행 서비스 고투게더 리뉴얼! 이렇게 많은 부분을 협업하는 건 처음이라 걱정이 한바가지였다....ㅠㅠㅠㅠ UXUI 분들께서 피그마로 화면을 만들어주신 후에.... 백엔드 분들께서 api 를 만들어주신 후에..... 프론트엔드에서 웹 페이지를 제대로 만들 수 있기 때문에 약 한 달이라는 기간이 너무 빠듯했다... 🥹 (거의 3주가 넘어서야 피그마가 나왔고... 심지어 안나온 화면도 있어서 프론트엔드에서 만들어야 했다....ㅎㅎㅎㅎ허허허허허ㅓ) 또르륵 ... 그래도 팀원들끼리 열심히 영 차 영 차 영 차 .......... ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ..

react-query / devtools 설치 npm install @tanstack/react-query @tanstack/react-query-devtools QueryClientProvier / devtools 추가 import { QueryClient, QueryClientProvider } from 'react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; // client 생성 const queryClient = new QueryClient(); export default function App() { return ( // 앱에 client 제공 // devtools ) } useQuery import ..

배포 링크 : credit-market (현재 서버가 닫혀서 기능 작동X) 원본 저장소: Github 전체 시연 영상: Youtube 이번에 하게 된 프로젝트는 금융 상품 추천 서비스 !!! 🐰🐰⭐️⭐️⭐️⭐️⭐️ 금융 상품에는 카드, 대출 등의 선택지가 있었는데, 우리 팀은 대출 상품으로 정했다. 상품 데이터는 백엔드에서 api 를 이용해 데이터를 저장한 후에 사용하게 되었다. 이번 프로젝트에서도 내가 팀장을 맡게 되어서, 프로젝트 환경 셋팅을 진행했다. 지금까지는 CRA 로 리액트 앱 초기 설정을 했었는데, 이번에는 처음으로 vite 를 이용해 리액트 + 타입스크립트 프로젝트 셋팅을 해보았다. 아래의 항목들을 미리 반영해 두어서 팀원들이 사용하기 편하도록 했다. axios 인스턴스 생성 유틸 함수 생..

브라우저의 렌더링 과정브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받음브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성함브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환하여 생성함이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있음변경된 DOM과 CSSOM은 다시 렌더 트리로 결합됨렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고브라우저 화면에 HTML 요소를 페인팅함요청과 응답브라우저의 핵심 기능필요한 ..