리스트 : 콘텐츠가 있으면 최근 5건을 불러옵니다.
-
Next.js 프레임워크를 쓰는 이유기타 공부 2024.05.25 19:45
Next.js 기본개념Next.js는 React 기반 프레임워크로 주로 서버 사이드 렌더링(SSR)의 서비스를 구현할 때 사용한다. SSR에 관한 간단한 설명은 아래 링크에 있다. https://lemonjade.tistory.com/39 SSR(Server-side Rendering)과 CSR(Client-side Rendering)1. SSR(Server-side Rendering)SSR 설명서버사이드렌더링.서버쪽에서 렌더링을 하여 화면을 보여주는 방식을 말한다. 서버로부터 미리 생성된 페이지를 렌더링하기 때문에 첫 화면 로딩 속도가 빠르다. lemonjade.tistory.com Next.js 장점1. 검색 엔진 최적화(SEO) 우수기본적으로 서버에서 페이지에 대한 마크업이 생성되며, 검색 엔진에서..
-
React Query를 쓰는 이유와 기본 사용법기타 공부 2024.05.25 18:20
리액트 쿼리(React Query)란React를 사용할 비동기 데이터 페칭, 캐싱, 동기화, 업데이트를 돕는다. 쉽게 말해 서버에서 데이터를 가져오고 관리하는 작업을 쉽게 처리하도록 도와주는 라이브러리다. 왜 리액트 쿼리인가?useState, useEffect로도 충분히 상태관리가 가능하다. 왜 React Query를 쓰는가? 우선 React Query에서 제공하는 기능은 다음과 같다.- 자동 캐싱 및 자동 리페칭- 에러 핸들링- 로딩, 성공, 에러 등의 상태 관리- 뮤테이션 (생성, 수정, 삭제) 여러 가지 이유가 있겠지만 요약하자면 React Query로 대체할 시 장점이 3가지가 있다.1. 캐싱 및 성능 최적화2. 개발자 부담이 크게 줄어듬3. 우수한 코드의 가독성과 유지보수성 자세하게 알아보..
-
Callback 함수는 어떻게, 그리고 왜 사용되는가?기타 공부 2024.05.17 21:43
콜백(callback) 함수는 전달인자(argument)로 다른 함수에 전달되는 함수이다. 그게 무슨 말일까? 콜백 함수가 뭔지, 왜 쓰이는지 차근차근 알아가보자.function eat(){console.log("eat");}function rest(){console.log("rest");}function run(){console.log("run");} eat, rest, 그리고 run라는 함수가 있다.먼저, 일반 함수 예시를 보자. 1. 일반 함수function checkIfEmpty(stomach){ if (stomach === "empty"){ eat(); } else { rest(); }}checkIfEmpty("empty"); // eatcheckIfEmpty(..
-
[개인 프로젝트] 맛집 애플리케이션프로젝트 2024.05.08 19:59
📌 React를 사용하여 제작을 한 사이트입니다. UseEffect와 UseMemo 같은 hooks를 통한 상태 관리로 코드의 흐름이 명확해 가독성이 좋았고, 에러가 났을 때에 코드의 관리가 수월했습니다. 📌 지도 페이지의 렌더링의 경우 가져오는 식당 데이터의 변경이 없기 때문에 매번 서버에 요청을 하여 가져오기 보단 SSG 방식을 사용하여 응답 속도가 약 400ms에서 4ms 정도로 줄였습니다. 반면에 수정이 가능한 맛집 목록의 경우 동적 데이터가 들어가므로 SSR 방식으로 렌더링을 하였습니다. 📌 React-hook-form을 사용하였습니다. 폼 유효성 검사 및 에러 처리를 useForm을 통해서 할 수 있었습니다.비제어 컴포넌트 방식으로, 변경된 폼 필드만 렌더링하여 사용자 입력 폼이 많은 ..
-
UseEffect의 dependency(의존성) 관리프로젝트 2024.05.08 18:53
React로 개발을 하다보면 component가 렌더링 될때마다 특정 작업, 혹은 'side-effect'을 실행할 수 있도록 하는 useEffect hook을 사용하게 된다. UseEffect를 사용할 때에는, 1. 첫 번째 인자로 실행하고자 하는 함수를 주고,2. 두 번째 인자로 의존성 배열(deps)을 부여해준다. 여기서 잠시 useEffect의 deps에 대하여 알아보자면, 빈 배열: 처음에만 함수 호출 의존값 존재 : 처음과 지정값이 변경될 때 호출 아예 없는 경우 : 컴포넌트가 리렌더링 될 때마다 호출 내가 개발한 맛집 애플리케이션을 예로 들어보겠다. 위의 이미지에서는 loadKakaoMarkers()라는 함수와 loadKakaoMarkers, map 의존성을 주었다. 사실 처음에는 아..