서버 액션(Server Actions)은 React 18에서 새롭게 도입된 기능으로, 서버에서 실행되는 코드를 클라이언트에서 쉽게 호출할 수 있게 해준다. 이는 서버에서 직접 액션을 처리하고, 그 결과를 클라이언트로 반환하는 방식으로 작동하여 클라이언트에서 복잡한 상태 관리나 비동기 처리를 덜어주는 장점을 가지고 있다  React 서버 액션의 주요 특징 1. React 컴포넌트에서 호출 가능서버 액션은 React 컴포넌트 내에서 호출할 수 있으며, 서버 액션이 완료되면 결과값을 받아 렌더링할 수 있습니다. 이를 통해 클라이언트에서 복잡한 로직을 구현할 필요 없이 서버에서 처리된 데이터를 바로 사용할 수 있습니다. 2. 직접적인 서버와 클라이언트 통신서버 액션은 클라이언트가 직접 호출하는 서버 함수입니다...

현재 진행하고 있는 프로젝트의 메인화면이다페이지를 구현하기 전에 먼저 머리속에서 순서를 정해보았다 1. 레시피 정보가 담긴 배열을 만든다.API에서 받아와야 하지만 당장은 api가 없기 때문에 임시 Mock Data를 만들어 사용하자.//Mock Dataconst items = [ { imgFile: 'https://homecuisine.co.kr/files/attach/images/140/868/087/c936189e03c496989162bf511a99b12e.JPG', recipeName: '마라떡볶이', NickName: '소연', recipeDesc: '마라맛이 나는 떡볶이' }, { imgFile: 'https://www.sbfoods-worldwide.com/k..

Redux와 React Query의 차이점 Redux주된 목적: 클라이언트 측 상태 관리. 주로 사용자가 직접 생성하고 관리해야 하는 전역 상태(예: 사용자 입력, UI 상태, 인증 상태 등)를 다루기 위한 라이브러리입니다.데이터 관리: 모든 종류의 상태(비동기 또는 동기, 클라이언트 내부에서만 사용하는 상태)를 관리하는 데 사용됩니다.전역 상태: 상태를 하나의 스토어에 저장하고, 전역에서 액세스 및 업데이트할 수 있도록 합니다.설정 복잡성: 전통적인 Redux는 비동기 처리나 상태 관리 로직이 다소 복잡할 수 있습니다. 이를 간소화하기 위해 Redux Toolkit을 많이 사용합니다.비동기 처리: 비동기 처리는 Redux 미들웨어(예: redux-thunk 또는 redux-saga)를 통해 처리해야 하..

💡 React 강의를 보며 프로젝트를 만들던 도중 강의에서 React Router 라이브러리를 사용하는데, 이에 대해 정확이 이해하고 공부하기 위해 React Route에 대해 정리하려고 합니다.리액트 라우터(React Router)에 대한 정확한 정보는 공식문서를 통해 확인하는 것이 가장 좋고, 이 글은 공식문서와 여러 블로그를 참고하여 작성하였습니다.   React Router는 Client Side Routing을 가능하게 한다. Client Side Routing을 통해 서버에서 다른 문서를 요청하지 않고도 링크를 클릭함으로써 URL을 업데이터할 수 있다. 즉시 새 UI를 렌더링 하고 fetch를 통해 데이터 요청을 수행하여 페이지를 새 정보로 업데이트 할 수 있다. 브라우저가 다음 페이지에 대..

Context란?리액트에서는 값을 관리할 때 useState를 사용해서 값을 선언하고 상태를 관리한다.const [a,setA] = useState(''); useState는 컴포넌트 안에서 선언하고, 이렇게 선언한 값은 컴포넌트 내에서만 사용이 가능하다만약 컴포넌트에게 자식이 있다면 자식에게 props를 사용해서 값을 전달 해 주는 것이 가능하다  만약 위와 같이 컴포넌트들을 만들었다고 가정하자컴포넌트 A에서도 쓰고 B에서도 쓰고 C, D, E에서도 써야하는 값이 있다면 어떻게 해야할까? 최상위 컴포넌트인 App에서 useState로 상태를 만든 다음A에게 Props로 전달해주고, B에게 Props로 전달해주고, B의 자식 컴포넌트인 C와 D에도 Props로 전달해주고, C의 자식 컴포넌트인 E에도 P..

Next.js는 대충 React의 업그레이드 버전이라고만 알고 있었는데, 이번에 제대로 두 개의 차이를 정리해보려고 한다.   React 란?리액트(React)는 페이스북에서 개발한 UI를 담당하는 JavaSrcipt 기반의 SPA 웹 프레임워크이다.컴포넌트를 활용하여 UI를 쉽고 효율적으로 만들 수 있다.리액트는 SPA, CSR, Virtual DOM 등 몇 가지 대표적인 특징들을 가지고 있다.   SPA(Single Page Application)단 하나의 페이지를 통해 유저의 요청을 처리해주는 방식이다.필요한 모든 정적 리소스를 최초에 한 번 다운로드한다.페이지간 이동 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있다.전체 페이지를 다시..

오늘은 동기 비동기 통신에 대해 공부했다 간단하게 동기 통신은 서버 컴퓨터가 작업이 끝날 때 까지 기다리는 통신이고 비동기 통신은 안기다리는 건데 비동기 통신은 요청(request)들이 서로 기다릴 필요가 없을 대 사용한다. 비동기 통신이 더 효율적이며 동기 통신은 필요할 때 사용하면 된다. JavaScript는 기본적으로 동기적으로 작동하지만, 최신 라이브러리(설치해서 쓰는 애들)들은 기본적으로 비동기로 작동한다. (비동기가 더 효율적이기 때문에) VS code에서 동기 / 비동기 통신 사용하기 실습을 위해 아래 페이지의 API를 사용할 것이다 https://koreanjson.com/ Korean JSON { Korean JSON } Super simple JSON API in Korean. Requ..

React + JavaScript를 사용해 카카오지도를 구현했다. 전체코드 import React, { useEffect, useState, useMemo } from "react"; import Marker from "../components/Marker"; const { kakao } = window; export default function StudyMap() { // 현재위치 담는 곳 const [location, setLocation] = useState(""); const [map, setMap] = useState(); // 현재위치 세부조정 var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }; // 현재 위치..

문제 새로고침을 했더니 'className did not match' 에러가 뜨며 css가 모두 사라져 버리는 현상 발생 이유는 서버에서 받은 해시 + 클래스명과 새로고침 후 클라이언트에서 받은 해시+클래스명이 달라서 발생하는 문제였다. 해결방법 1. 바벨 플러그인 설치 yarn add babel-plugin-styled-components 2. .babelrc설정 파일 생성 후 아래 코드 작성 { "presets": ["next/babel"], "plugins": ["babel-plugin-styled-components"] } 참고 https://velog.io/@hongdol/Next.js-TS-%EB%A6%AC%EB%A0%8C%EB%8D%94%EB%A7%81%EC%8B%9C-Styled-Compo..