Jaybon 의 지식창고

https://nextjs.org/docs/advanced-features/middleware Advanced Features: Middleware (Beta) | Next.js Learn how to use Middleware in Next.js to run code before a request is completed. nextjs.org import { NextFetchEvent, NextRequest, NextResponse } from "next/server"; import jwtDecode from "jwt-decode"; import CustomJwtPayload from "@/util/jwt/CustomJwtPayload"; // 리프레시 토큰 관리를 위한 미들웨어 제작 export fun..

https://velog.io/@himprover/NextJs-env.local-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%84%9C-%EC%A4%91%EC%9A%94-%EB%B3%80%EC%88%98-%EC%88%A8%EA%B8%B0%EA%B8%B0-feat.-api-key NextJS env.local 사용해서 중요 변수 숨기기 (feat. api key) 보통 오픈소스를 개발하면 github에 많이 업로드 한다.오픈소스 중에는 openApi를 사용해서 개발하는 경우도 있는데 이 때 api 인증키가 사용된다.api에 따라 다르지만, 대부분 api 인증키가 본인 이외 velog.io

리액트에서 A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. 에러가 발생할 경우 값변경이 제대로 되지 않는 경우가 있다 이 경우는 받아온 DTO나 state가 null일 경우이다 value={dto.name} 이렇게 들어간 코드를 value={dto.name || ''} 이런식으로 널처리를 해주면..

세팅 www.yuts.me/posts/settingEslintOnIdea Setting up Eslint + Prettier + Typescript + React to IntelliJ Idea - Blog by Yuta Yanagisawa No one wants to see messy code. Writing readable codes makes you a good programmer but how can you know when your code is “Readable”? And here comes the lint to help you. Linting is very important when it comes to tidying up your own code, and there ar www.yuts.me..

react 적용시 bigexecution.tistory.com/6 React 게시판 만들기 : React-Quill (4) 리액트 에디터로 Quill을 사용하기로 했다. 무료로 사용 가능하다. npm install react-quill 우선 react-quill을 설치한다. npm install react-quill package.json 파일 dependencies 에 아래와 같이 설치됨 확.. bigexecution.tistory.com (위의 코드와 아래의 코드를 참고하여 같이 사용하면 쉽게 만들 수 있음) next 적용시 아래 블로그에서 시행착오를 겪은 마지막 코드를 이용하고 툴바는 위의 코드를 이용하면 됨 m.blog.naver.com/choirj91/222044740530 next, react..

타입 스크립트 버전으로 설치 next js (ts 버전) 설치 npx create-next-app 앱이름 --ts # or yarn create next-app 앱이름 --typescript 작동 해당 앱폴더로 이동하여 npm dev #or yarn dev 상대경로 -> 절대경로로 바꾸기 tsconfig.json 파일에 아래를 추가 { [기타내용], "compilerOptions": { [기타내용], "baseUrl": ".", "paths": { "@/*": [ "./*" ] } }, [기타내용], } mobx 설치 yarn add mobx 또는 npm install --save mobx 설치 후 작동이 안될 경우 .next / node_modules / package-lock.json 을 지우고 ya..

참고 https://github.com/codingspecialist/react-redux-example codingspecialist/react-redux-example Contribute to codingspecialist/react-redux-example development by creating an account on GitHub. github.com 현재 프로젝트 https://github.com/jaybon1/react/tree/master/bitc_react/react-redux/redux-app jaybon1/react Contribute to jaybon1/react development by creating an account on GitHub. github.com esrint pr..

자바는 타 클래스의 함수를 사용하기 위해서는 객체(레퍼런스)를 넘겨야 한다 자바스크립트(리액트)에서는 함수를 넘길 수 있다 (1급객체) 그런데 객체를 여러 단계로 넘기면 복잡해진다 객체지향에서 제일 어려운 것이 오브젝트를 넘기는 것이다 그러한 점을 해결하기위해 스프링에서는 IOC를 사용한다 스프링은 IOC공간에서 클래스타입으로 객체를 찾아낸다 -> 객체 안의 함수 모두를 가져올 수 있다 자바스크립트에서는 store에서 String값으로 함수를 찾아낸다(Action명) -> 다른 화면에서 건드릴 것들을 예상해서 액션명을 미리 만들어둔다 아래는 store 공간에 만든 액션명들이다 [이벤트]를 등록하는데 다른화면에서 건드릴 것들 최상위화면(A)에서 store를 만들고 자식들에게 props로 넘긴다 store(..

더보기 Detail.js 하트 좋아요 1 댓글수 2 기본댓글1 내용 기본댓글2 내용 훅스 useState App.js에 Detail.js state 1 comment 배열 2개 2 likeCount 하트를 클릭하면 좋아요 카운트를 올리고 useEffect를 이용해서 색깔이 변하고 좋아요 수가 2로 변함 나중에 댓글을 쓰면 부모의 state 값을 바꿔야한다 import React, { useState, useRef, useEffect } from "react"; import emptyimg from "./img/empty_heart.png"; import fillimg from "./img/fill_heart.png"; const Detail = () => { const [like, setLike] = u..

handleChange = (e) => { this.setState({ [e.target.name]: e.target.value }) } https://velopert.com/3634 누구든지 하는 리액트 6편: input 상태 관리하기 | VELOPERT.LOG 이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요. 자, 우리가 지금까지 배웠던것들을 요약해봅시다. 컴포넌트 만들기 props 와 state LifeCycle API 딱� velopert.com 훅스로 바꾸기 Computed property names