React
-
0 3500 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 3196 Shadcn UI & Next JS - tailwindcss shadcn으로 대시보드 만들기 프로젝트 - ★ Shadcn UI ★
Shadcn UI & Next.js - 대시보드 만들기 프로젝트 기본 기능라이트 / 다크 모드 전환로그인 및 회원가입 페이지로그인 폼 및 유효성…
-
0 1740 React -처음 만난 리액트 - 2 Handling Events,Conditional Rendering,List and Keys,Forms,Lifting State Up,Composition vs Inheritance,Context
수강하기 ---> 처음 만난 리액트(React) 강의를 책으로도 볼 수 있도록강의 내용을 고스란히 책에 담았습니다.동영상…
-
5 1576 ★★★ 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 1558 ★리액트 next.js ckeditor 5 적용하기
참고: https://ccomccomhan.tistory.com/284 다음 링크에서 원하는 설정을 통해 ckeditor 를 설정한다.https://ckeditor.com/ckeditor-5/builder/ CKEditor 5는 …
-
0 1487 만들면서 배우는 리액트 (진유림) - 1- 고양이 짦방앱 만들기 : 리액트 앱 바닥부터 만들기, 컴포넌트
초급자를 위해 준비한[웹 개발, 프론트엔드] 강의입니다.리액트를 가장 쉽고 빠르게 배울 수 있는 리액트 입문 강의입니다. 토이 프로젝트를 …
-
0 1477 React - 만들고 비교하며 학습하는 리액트 - 1- 준비편, 순수JS , 2-리액트 소개편
초급자를 위해 준비한[웹 개발, 프론트엔드] 강의입니다.리액트는 실무에서 가장 많이 찾는 인기있는 프론트엔드 기술입니다. 리액트 기술을 이용…
-
0 1381 만들면서 배우는 리액트 (진유림) - 2- 고양이 짦방앱 만들기 : 리액트 앱
초급자를 위해 준비한[웹 개발, 프론트엔드] 강의입니다.리액트를 가장 쉽고 빠르게 배울 수 있는 리액트 입문 강의입니다. 토이 프로젝트를 …
-
0 1269 React github 를 서버로 사용, github pages 이용방법
1. react-router-dom 라이브러리가 설치 되어 있지 않다면 설치 한다. npm install react-router-dom 설치하는 이유는 깃허브 서버 주소를 …
-
0 862 ★★★리액트 넥스트 NextAuth를 이용한 갱신 토큰 발급 및 업데이트 처리 방법
NextAuth를 사용하여 JWT 기반 인증을 구현하면서, 접근 토큰(access token)과 갱신 토큰(refresh token) 로직을 구현하는 과정은 중요합니다.이 작업은 특히 …
-
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&…
-
★★React 유튜브 클론 시리즈 ( John Ahn) ) 1 - Boiler Plate 설정
John Ahn 인프런 ==> 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기 유튜브 강의…
-
React 따라하며 배우는 노드, 리액트 시리즈(John Ahn) - 3 Redux (리덕스 ), 로그인 , 회원 가입 , 인증 체크
동영상 34개기초 노드 리액트 강의John Ahn 인프런 ==> 따라하며-배우는-노드-리액트-기본 …
-
React 따라하며 배우는 노드, 리액트 시리즈(John Ahn) - 2 리액트란, 리액트설치,npm 과 npx차이,릭액트구조,CRA to Our Boilerplate,React Router Dom,Proxy ServerCORS 이슈, Proxy 설정,데이터 Flow & Axios,Concurrently
동영상 34개기초 노드 리액트 강의John Ahn 인프런 ==> 따라하며-배우는-노드-리액트-기본 강의 자료…
-
React 따라하며 배우는 노드, 리액트 시리즈(John Ahn) - 1 NODE JS 와 EXPRESS JS 다운로드 하기,몽고 DB 연결,MongoDB Model & Schema,GIT 설치,SSH를 이용해 GITHUB 연결,BodyParser & PostMan & 회원 가입 기능,Nodemon 설치
동영상 34개기초 노드 리액트 강의John Ahn 인프런 ==> 따라하며-배우는-노드-리액트-기본 강의 자료…
-
Next js 강좌 - 강아지분양소 프로젝트 - (코딩앙마) - 페이지 레이아웃 (Intro, Page layout),Dynamic Routes, next/link, Server-side Rendering/SSR/Dynamic Rendering,에러 페이지, 환경 변수,etStaticProps, getStaticPaths,API Routes, 로그인 구현
코딩앙마 강의 목록 : https://www.youtube.com/playlist?list=PLZKTXPmaJk8Lx3TqPlcEAzTL8zcpBz7NP vscode 확장 패키지 추가1. …
-
React 영단어장 개발 프로젝트 (초보자를 위한 리액트 - 코딩악마) -2 json-server, REST API ,useEffect, fetch()로 API 호출,Custom Hooks,PUT(수정), DELET,POST(생성), useHistory() ,리액트 타입스크립트 적용
코딩앙마 강의 목록 : https://www.youtube.com/playlist?list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7- vscode 확장 패키지 추가1. - Auto Import - E…
-
React 영단어장 개발 프로젝트 (초보자를 위한 리액트 - 코딩악마) -1 , 리액트설치, 컴포넌트, JSX ,리액트 css 적용법,이벤트 처리,state, useState, props,더미 데이터 구현, map() 반복문,라우터 구현 react-router-dom
코딩앙마 강의 목록 : https://www.youtube.com/playlist?list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7- vscode 확장 패키지 추가1. - Auto Import - E…
-
React - 기초 익히기 기본 강좌 (코지코더 ) 3 - React router,NavLink 사용하기, axios,로딩 Spinner 추가하기,routes 파일 만들기
코지 코더 Kossie Code 모두 재생리액트js (Reactjs) 기초 익히기 기본 강좌동영상 30개조회수 88,303회최종 업데이트: 2021. 4. 6. https://www.yout…
-
React - 기초 익히기 기본 강좌 (코지코더 ) 2 - 컴포넌트와 props 데이터 보내기,깊은복사,폼 validation, 리액트 데이터 삭제, React router
코지 코더 Kossie Code 모두 재생리액트js (Reactjs) 기초 익히기 기본 강좌동영상 30개조회수 88,303회최종 업데이트: 2021. 4. 6. https://www.yout…
-
React - 기초 익히기 기본 강좌 (코지코더 ) 1 - 리액트 설치하기,리액트 폴더구조 & 컴포넌트 소개, 이벤트 핸들링 (onClick & onKeyUp),useState 사용하기,useEffect 사용하기 ,컴포넌트로 반복 제거,리액트 Props,조건 렌더링,리액트 반복문
코지 코더 Kossie Code 모두 재생리액트js (Reactjs) 기초 익히기 기본 강좌동영상 30개조회수 88,303회최종 업데이트: 2021. 4. 6. https://www.yout…
