Web Dev/react.js (16) 썸네일형 리스트형 React 웹페이지에서 네이버 지도 API 사용하는 방법 https://zeakd.github.io/react-naver-maps/guides/quickstart/ https://navermaps.github.io/maps.js.ncp/docs/index.html React Naver Maps Quickstart Application 루트에 NaverMaps Provider를 제공해야합니다. 사용하시는 프레임워크에 맞춰 를 감싸주세요. import { NaverMapsProvider } from 'react-naver-maps'; function App() { return ( ) } import { Container as MapDiv, N zeakd.github.io 해당 부분을 많이 참고하면 react 에 쉽게 적용 가능하십니다 우선 저는 Header 에 링.. 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.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의 두 번째 매개변수로 의존성 배열을 전달할 수 있습니다. 이 .. 블로그 맞춤 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 .. useOncCickOutside , useClickAway 실전에서 사용하기 https://usehooks.com/ useHooks – The React Hooks Library A collection of modern, server-safe React hooks – from the ui.dev team usehooks.com https://usehooks-ts.com/react-hook/use-on-click-outside useOnClickOutside Discover how to use useOnClickOutside from usehooks-ts usehooks-ts.com useOnClickOutside는 클릭 이벤트가 특정 요소 외부에서 발생했을 때 특정 작업을 수행하는 React 커스텀 훅입니다. 이를 사용하여 모달이나 드롭다운과 같은 요소를 닫을 때 유용하게 활용할.. React.js 네이버 클라우드 외부 저장소에 파일 저장하기 https://www.ncloud.com/ NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com 일단 공부하는 용도로는 비용이 얼마 발생 안 할 것 같습니다. 그리고 결제 방법을 등록하면 1000 크레딧도 공짜로 신청하는 방법도 있다고 합니다. 이용 신청하기 버튼을 클릭해서 콘솔 창으로 이동을 해줍니다. https://guide.ncloud-docs.com/docs/ko/storage-storage-6-1 Object Storage 개요 guide.ncloud-docs.com 사용자 가.. 이전 1 2 다음
