[springboot+jwt+react#3] login / React Hook Form

이전 포스팅 2023.07.21 - [spring+jwt+react] - [springboot+jwt+react#1] react cra frontend 초기설정 2023.07.22 - [spring+jwt+react] - [springboot+jwt+react#2] react layout / react-dom 오늘 만들것 React Hook Form을 이용한 로그인 폼 사전에 알아야 할것 react-hook-form 걸리는 시간 20분 실습 저번시간에 이어서,, login 기능을 만들어보도록 하자 우선 로그인form을 만들어야하므로 router에 login path를 추가하고 page를 하나 생성하도록 한다. 로그인 빈껍데기부터 만들고 /pages/LoginPage.tsx const LoginPage =..

• format_list_bulleted Programming/spring+jwt+react
• · 2023. 7. 23.
• textsms

[springboot+jwt+react#2] react layout / react-dom

2023.07.21 - [spring+jwt+react] - [springboot+jwt+react] react cra frontend 초기설정 오늘 만들것 리액트 react-dom과 layout 잡기 (아래와 같이) 사전에 알면 좋은것 react-dom 실습 우선 src 폴더 아래에 compoenents 폴더를 생성하고 다시 Layout 이라는 디렉토리를 만들어준다 여기에 Layout.tsx 파일과 Navigation.tsx 파일을 생성해준다. Layout.tsx import React, {Fragment} from "react"; import Navigation from "./Navigation"; import Footer from "./Footer"; type Props = { children?: ..

• format_list_bulleted Programming/spring+jwt+react
• · 2023. 7. 22.
• textsms

[springboot+jwt+react#1] react cra frontend 초기설정

시작전에 백엔드부터 진행했어야하나,, 백엔드는 추후에 다시 블로그로 포스팅하겠습니다. 작업의흐름대로 남겨놓는 블로그라 추후에 재편집해서 재포스팅될수 있습니다. 본 프로젝트는 springboot + jwt + react.js + typescript를 이용하여 회원기능이 있는 간단한 메모장을 만드는것을 목표로 합니다. 진행하다 궁금한점은 댓글로 문의주세요~ 오늘 만들것 cra를 이용한 react + typescript 프로젝트 생성 twailwind css 적용 필요한것 약간의 시간 react cra를 시작할수 있는 환경 (node, npm etc....) 설치 (with typescript) 프로젝트 생성을 원하는 경로 밑에서 아래 명령어로 설치 (중간에 client는 원하는 프로젝트명으로 설정) npx ..

• format_list_bulleted Programming/spring+jwt+react
• · 2023. 7. 21.
• textsms

[react] Select-react / wanning 문구 처리

Warning: Prop `id` did not match. Server: "react-select-46-live-region" Client: "react-select-3-live-region" react-select를 사용중인데 위와같은 에러가 난다면 select tag에 instanceId를 유니크하게 설정해주면 경고문구가 사라진다. 혹은 아래와 같이 useId를 이용해도 된다. import React, { useId } from 'react'; import Select from 'react-select'; export default function StableSelect({ ...props }) { return ; }

• format_list_bulleted Programming/react
• · 2023. 6. 30.
• textsms

react > tailwindcss 적용하기

리액트 프로젝트 생성 > npx create-next-app@latest --typescript 생성된 프로젝트에서 아래 명령어 실행 > npm install -D tailwindcss postcss autoprefixer > npx tailwindcss init

• format_list_bulleted Programming/Front-End
• · 2022. 7. 7.
• textsms