React
-
0 3000 Next.js 15 + Spring Boot 3.4 연동 방법
Next.js 15 + Spring Boot 3.3 연동 방법 Next.js 15(App Router)과 Spring Boot 3.3을 연동할 때, 인증(Authentication) 및 API 통신을 고려해야 합니다. 일…
-
0 2840 Shadcn UI & Next JS - tailwindcss shadcn으로 대시보드 만들기 프로젝트 - ★ Shadcn UI ★
Shadcn UI & Next.js - 대시보드 만들기 프로젝트 기본 기능라이트 / 다크 모드 전환로그인 및 회원가입 페이지로그인 폼 및 유효성…
-
0 1730 React -처음 만난 리액트 - 2 Handling Events,Conditional Rendering,List and Keys,Forms,Lifting State Up,Composition vs Inheritance,Context
수강하기 ---> 처음 만난 리액트(React) 강의를 책으로도 볼 수 있도록강의 내용을 고스란히 책에 담았습니다.동영상…
-
0 1483 만들면서 배우는 리액트 (진유림) - 1- 고양이 짦방앱 만들기 : 리액트 앱 바닥부터 만들기, 컴포넌트
초급자를 위해 준비한[웹 개발, 프론트엔드] 강의입니다.리액트를 가장 쉽고 빠르게 배울 수 있는 리액트 입문 강의입니다. 토이 프로젝트를 …
-
0 1469 React - 만들고 비교하며 학습하는 리액트 - 1- 준비편, 순수JS , 2-리액트 소개편
초급자를 위해 준비한[웹 개발, 프론트엔드] 강의입니다.리액트는 실무에서 가장 많이 찾는 인기있는 프론트엔드 기술입니다. 리액트 기술을 이용…
-
5 1452 ★★★ Nextjs 인증가이드 - Nextjs 15 + Next Auth V5 + typescript + shadcn 를 oauth 인증, Credential Provider 사용, Next.js + Prisma + Supabase 조합+MongoDB 적용,미들웨어 , 커스텀 백엔드로 토큰 관리하기
1.Next.js 인증 - Next-Auth V5를 사용한 Google & GitHub 로그인 소스 : https://github.com/braverokmc79/macaronics_react_next_auth/tree/chap1 1. 개요 및…
-
0 1388 ★리액트 next.js ckeditor 5 적용하기
참고: https://ccomccomhan.tistory.com/284 다음 링크에서 원하는 설정을 통해 ckeditor 를 설정한다.https://ckeditor.com/ckeditor-5/builder/ CKEditor 5는 …
-
0 1371 만들면서 배우는 리액트 (진유림) - 2- 고양이 짦방앱 만들기 : 리액트 앱
초급자를 위해 준비한[웹 개발, 프론트엔드] 강의입니다.리액트를 가장 쉽고 빠르게 배울 수 있는 리액트 입문 강의입니다. 토이 프로젝트를 …
-
0 1261 React github 를 서버로 사용, github pages 이용방법
1. react-router-dom 라이브러리가 설치 되어 있지 않다면 설치 한다. npm install react-router-dom 설치하는 이유는 깃허브 서버 주소를 …
-
0 819 React(Nextjs) 따라하며 배우는 리액트 A-Z - 11- 1 도커를 이용한 리액트 실행 , EC2 에서 도커 설치 및 실행
따라하며 배우는 리액트 A-Z [프론트엔드, 웹 개발] 강의입니다.이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념…
-
4 만들면서 배우는 리액트 (진유림) - 1- 고양이 짦방앱 만들기 : 리액트 앱 바닥부터 만들기, 컴포넌트
초급자를 위해 준비한[웹 개발, 프론트엔드] 강의입니다.리액트를 가장 쉽고 빠르게 배울 수 있는 리액트 입문 강의입니다. 토이 프로젝트를 …
-
4 만들면서 배우는 리액트 (진유림) - 2- 고양이 짦방앱 만들기 : 리액트 앱
초급자를 위해 준비한[웹 개발, 프론트엔드] 강의입니다.리액트를 가장 쉽고 빠르게 배울 수 있는 리액트 입문 강의입니다. 토이 프로젝트를 …
-
4 React github 를 서버로 사용, github pages 이용방법
1. react-router-dom 라이브러리가 설치 되어 있지 않다면 설치 한다. npm install react-router-dom 설치하는 이유는 깃허브 서버 주소를 …
-
4 React - 만들고 비교하며 학습하는 리액트 - 1- 준비편, 순수JS , 2-리액트 소개편
초급자를 위해 준비한[웹 개발, 프론트엔드] 강의입니다.리액트는 실무에서 가장 많이 찾는 인기있는 프론트엔드 기술입니다. 리액트 기술을 이용…
-
4 react 기본문법
vscode 확장 패키지 추가1. - Auto Import - ES6, TS, JSX, TSX2. - Reactjs code snippets3. - ESLint4. - Prettier - Code formatter App.css.hello{ color: red; } .box-sty…
-
4 react redux 적용
1. redux 설치& yarn add redux react-redux 2. createStore deprecate 로 인하여 React Redux Toolkit 설치$ yarn…
-
4 react 목록 불러오기
home.jsimport React, { useEffect, useState } from 'react'; import { Container } from "react-bootstrap"; import BookItem from './../../components/BookItem'; c…
-
4 react 글쓰기
saveForm.jsimport { useState } from 'react'; import { Container, Form, Button } from "react-bootstrap"; import { useNavigate } from 'react-router-dom'; const SaveF…
-
4 react 상세보기
Detail.js import React, { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; import { Container } from "react-bootstrap"; const…
-
4 react 수정삭제하기
Detail.jsimport React, { useEffect, useState } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; import { Button, Container } from "react-bootstrap&…
-
⭕백엔드 strapi 를 사용한 Next.js 15 Open AI 웹구축
AI 프로젝트 개요 요약 특징Next.js 15새로운 /app감독,라우팅, 레이아웃, 중첩 레이아웃 및 레이아웃 그룹데이터 페치, 캐싱 및 변형UI 로딩 중…
-
✅ “Next.js + Capacitor + FCM 푸시 알림 연동 튜토리얼” 웹개발 및 웹앱으로 배포처리
⭕ Next.js 개발 완료된 상태에서 앱으로 변경 배포 시간 ???? Next.js + Capacitor 앱 배포만은 1~2일,????푸시 알림 기능까지 완전하게 연동 하…
-
✅넥스트프레임워크 15 백엔드 스프링부트 ,strapi , 넥스트 프레임워크 검색 처리 개발 방법⭕검색 처리 로직 ⭕, 디바운스, 자동검색필터링
Next.js 15 App Router의 Server Component 철학에 충실하면서도, 백엔드 서버와 안정적으로 통신하고, 검색 확장성도 우수한 설계입니다. &n…
-
✅❤️백엔드(스프링부트,strapi, nestjs,django), 프론트엔드로 NextJS 개발시 최적화 개발 방법론, ⭕ Webhook 기반 캐시 무효화 및 실시간 데이터 갱신 전략⭕
다음은 NextJS 프레임워크를 풀스택이 아닌 프론트엔드로 개발시 최적화 방법론이다. 1. 목적백엔드 서버에서 새로운 리뷰 데이터가 생길 …
-
⭕NextJS, generateStaticParams, generateMetadata 정적 경로 생성과 SEO 메타데이터 설정, ✅동적인 페이지 SEO 최적화 작업 및 리액트 쿼리 사용⭕
✅ generateStaticParams동적 라우트([id].tsx 같은 파일)에서 정적 경로를 미리 생성할 때 사용합니다.getStaticPaths(Next 12 이하)와 유사한 기능입니다.사용 …
-
Next JS - 개발 가이드 프로젝트-2탄
1: 넥스트 시작 소스 : https://github.com/braverokmc79/macaronics_nextjs_the_complete_developers_guide 2: 데이터 변경하기 - 뮤테이션 활용 (Changing Data w…
-
★ Nextjs app route + shadcn Data Table - ★ data-table-pagination 공통 페이징 처리 컴포넌트 ★
shadcn/ui : https://ui.shadcn.com/docs/components/data-table 소스 : https://github.dev/braverokmc79/nextjs-shadcn-app …
-
shadcn Drawer 컴포넌 상하 좌우 나오게 하기, shadcn 으로 모바일 햄버거 메뉴 만들기 , drawer.tsx
https://ui.shadcn.com/docs/components/drawer 설치 pnpm dlx shadcn@latest add drawer Drawer 컴포넌트를 다음과 같이 변경합니다. 1)모바일 메뉴 좌우 50% …
-
Next.js 15에서 Supabase를 설치하고 연동하는 방법
1. Supabase 프로젝트 생성https://supabase.com/ Supabase에 로그인 후 New Project를 생성합니다. 프로젝트가 생성되면 Project URL과 anon public API Key를 확인…
-
■ Nextjs 백엔드 설정에 따른 비교 : Next.js + Prisma vs Next.js + Spring Boot vs Spring Boot + Next.js (프론트 분리) + MSA vs Next.js + Supabase
● 어떤 경우에 어떤 조합을 선택할까?1.스타트업/소규모 프로젝트 → Next.js + Prisma빠른 개발이 필요할 때서버리스 환경을 활용하고 싶…
