react (18) 썸네일형 리스트형 React - Redux Toolkit 사용하여 Login 정보 store에 저장해서 필요할 때 사용하는 방법 ! https://ko.redux.js.org/introduction/getting-started/ https://hanamon.kr/redux%EB%9E%80-%EB%A6%AC%EB%8D%95%EC%8A%A4-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/ Redux(리덕스)란? (상태 관리 라이브러리) - 하나몬 Redux(리덕스)란? 무엇인지 부터 간단한 실습까지 (상태 관리 라이브러리 리덕스 알아보기) ⚡️ Redux(리덕스)란? Redux(리덕스)란 JavaScript(자바스트립트) 상태관리 라이브러리이다. Redux(리덕스)의 hanamon.kr 이 분 블로그 너무 잘 설명 되어있습니다. Red.. React 기반 MERN 웹 로그인 할 때 firebase Authentication 사용법 자세히 알려드립니다. (회원가입 , 로그인 코드) https://firebase.google.com/?hl=ko Firebase | Google’s Mobile and Web App Development PlatformDiscover Firebase, Google’s mobile and web app development platform that helps developers build apps and games that users will love.firebase.google.comFireBase 홈페이지 가서 시작해봅시다프로젝트를 만듭니다. 웹 페이지 개발이니까 웹으로 시작합니다. SDK를 복사 합니다 .client 쪽에서 firebase를 설치해준다 ! src > firebase.js 파일 생성하여 SDK 코드를 추가해 준다. 시작하기 ! SDK .. Next.js HTML 파일 JSX 형식으로 변환하는 방법 https://www.youtube.com/watch?v=eHB6hMiv0lw html로 대부분 작업된 웹 개발 환경을 너무너무너무 react 환경으로 바꾸고 싶은데 나는 프론트앤트 , 퍼블리셔가 아니라서 html을 react로 치환하고 있을 시간이 없어 해당 방법을 알아보았다 그렇다고 멋진 백엔드도 아니니까 결국 게을러서 ...... 코딩 is 심플 .... 일단 위의 방법을 따라하면 상용된 HTML 또는 현재 사용중인 웹 페이지에서 해당 html을 가져온다 https://bubble.io/templates Templates for Bubble Buy and sell Bubble template to speed up app development. Bubble is a visual programing l.. React.js 파일 업로드 풀스택으로 구성하는 방법 여기서 확인하세요 ! // 1. 사용자가 이미지를 업로드 // 2. 업로드한 이미지를 받아서 서버에서 저장 // 3. 저장한 이미지의 경로를 다시 클라이언트에게 전송 // 4. 경로를 받아서 post model에 저장 // 1. 사용자가 이미지를 업로드 FRONTEND import React from 'react' import { Form } from 'react-bootstrap' import axios from 'axios' function ImageUpload() { // 1. 사용자가 이미지를 업로드 // 2. 업로드한 이미지를 받아서 서버에서 저장 // 3. 저장한 이미지의 경로를 다시 클라이언트에게 전송 // 4. 경로를 받아서 post model에 저장 const FileUpload = (e) => { conso.. React 함수형 컴포넌트 생성 단축키 rafce , rfce + Extension VScode 에는 매우 좋은 extension 들이 많이 있습니다. 단축키를 통해 함수형 컴포넌트 생성을 빠르게 하고 싶으면 설치해야할 extension이 있습니다. 마켓에서 react 를 검색하여 나오는 최 상위 extension을 설치해줍니다. 이처럼 약자만 입력해도 코드를 출력할 수 있습니다. rafc import React from 'react' export const page = () => { return ( page ) } 제시해주신 코드는 JavaScript의 React 라이브러리를 사용한 함수형 컴포넌트입니다. 이 컴포넌트는 "page"라는 문자열을 화면에 렌더링하는 간단한 페이지 컴포넌트입니다. React는 UI를 구성하기 위한 JavaScript 라이브러리로, 컴포넌트 기반의 접근 방식.. useCallback()을 사용하는 것은 큰 의미가 없거나 오히려 손해인 경우도 있습니다 useCallback 훅은 모든 경우에 성능 향상을 기대할 수 있는 것은 아닙니다. 올바른 상황에서 사용될 때에만 성능 이점을 얻을 수 있습니다. 아래 상황에서 useCallback을 사용하는 것이 유용할 수 있습니다: 렌더링 최적화: 함수가 렌더링될 때마다 다시 생성되더라도, 대부분의 경우 이는 성능상 큰 문제가 되지 않습니다. 하지만 함수가 매 렌더링마다 새로 생성될 때, 자식 컴포넌트에 전달된 경우 자식 컴포넌트는 이전 함수와 다른 참조를 받게 되므로 불필요한 리렌더링이 발생할 수 있습니다. 이런 경우 useCallback을 사용하여 함수를 메모이제이션하면 불필요한 리렌더링을 방지할 수 있습니다. 의존성 배열 사용: useCallback의 두 번째 매개변수로 의존성 배열을 전달할 수 있습니다. 이 .. Uncaught (in promise) TypeError: Failed to fetch 이런 실수 내가 합니다. 수 많은 다양한 이유로부터 해당 에러가 발생하겠지만 이번에는 어이 없는 나의 실수를 기록해보자고 한다. 몇일을 api에서 전송한 값을 못 받길래 이유가 무엇일까 고민하다가 chat gpt에 문의를 하였다. 에러 메시지는 `updatePost` 함수 안에서 `fetch`를 호출할 때 발생하는 것 같습니다. `fetch`가 성공적으로 API를 호출하지 못하고 있어서 에러가 발생한 것 같습니다. 에러의 원인을 찾아보기 위해 다음과 같은 질문들을 생각해볼 수 있습니다. 1. `fetch` 호출에서 API 주소(`http://localhost:4000/post`)가 올바른가요? 2. 호출하는 API의 HTTP 메서드는 `PUT`인가요? 3. `updatePost` 함수가 호출될 때, 해당 게시물의 ID 값은 `i.. 블로그 맞춤 html-react-parser 라이브러리 사용법 ! 예시 포함 Quill Editor를 사용했는데 입력한 내용을 출력하면 이와 같이 HTML 형식 그대로 나온다. 이를 해결하는 아주 좋은 라이브러리가 있다 https://www.npmjs.com/package/html-react-parser html-react-parser HTML to React parser.. Latest version: 4.2.1, last published: 7 days ago. Start using html-react-parser in your project by running `npm i html-react-parser`. There are 989 other projects in the npm registry using html-react-parser. www.npmjs.com react .. 이전 1 2 3 다음
