나의 FE피봇이야기/React (26) 썸네일형 리스트형 [ React / TossPayment-1 ] <div id='payment-method'/> 어떻게 보여줄 것인가? 이번에 프로젝트를 하면서 Toss Payment를 설치해 봤다.현재 토스 2가지 버전이 있다. 1과 2버전 있으며 API를 활용하거나 SDK를 활용한다.여기서는 Toss ver2 + SDK를 활용했다 토스를 붙이면서 고민해야 할 부분은 총 3개자 있었던 거 같다. 고민했던 지점 3가지1. Toss 위젯을 어떻게 사용자에게 보여줄 것인가?2. 결제 취소시 어떻게 작성 상태 및 데이터를 정리해 나갈 것인가?3. 결제 완료 후 어떻게 플로우를 설정할 것인가? 1. Toss 위젯을 어떻게 사용자에게 보여줄 것인가?Toss에서는 를 통해서 UI를 그린다.토스로 위젯을 부를 준비가 되면useEffect(() => { async function renderPaymentWidgets() { if (wi.. [ React / vite ] .env가 vite.config.tx에서 적용되지 않을때 vite .env 보통은 아래 처럼 적용 가능하다. env를 선언이 필요하다. default defineConfig(({ mode }) =>{...}를 통해서 const env = loadEnv(mode, process.cwd(), '');설정 vite.config.tximport { defineConfig, loadEnv } from 'vite'import react from '@vitejs/plugin-react';import { sentryVitePlugin } from '@sentry/vite-plugin';// https://vitejs.dev/config/export default defineConfig(({ mode }) =>{ const env = loadEnv(mode, proc.. [ CORS / React ] CORS 원리 보다는 해결 방식<local 환경> (Feat. vite) 현재 컨퍼런스 페이지를 만들고 있다. 토이 프로젝트로.결제를 위해서 데이터를 받아와야하는데, 데이터가 들어오지 않고 있다. 이유는 CORS. 환경은 물론 Local이다.이걸 해결하기 위해서 첫번째로 ngrok을 사용했다.이렇게 해서 얻은 URL을 넘겨서 server에서 내 주소를 허용하게 해놨는데도 문제가 생겼다.로컬 환경이 아니고 서버에서 도메인을 허용해줘도 안 될때, React with Typescriptconst submitData = { method: "POST", cache: "no-cache" as RequestCache, credentials: "same-origin" as RequestCredentials, headers: { "Content-Type":"applic.. [ React / Error ] Invalid DOM property `clip-path`. Did you mean `clipPath`? (Feat. 카멜케이스) Figma에서 만든 svg를 그대로 썼는데, 아마도 React에서는 약간의 경고를 내는 거 같다. 따라서 아래처럼 바꿔주길 원한다. clip-path => clipPathstroke-width => strokeWidth [ React / useState ] 다중 팝업 제어하기 열기(Feat.) 보통은 CSS클레스로도 display none 처리하여 popup을 처리하기곤 한다.이번엔 useState를 사용하여 처리를 해보려고 했다. situtation : 한 페이지에서 일자와 사람이 같이 팝업으로 열림. Task : 한 페이지에서 1개 이상의 팝업이 열리는 것 방지 action1) CSS => display : none2) useState => boolean or number 2)을 선택하여 진행 => 이유 1) 속도 측면에서 큰 차이가 없다. 누가 먼저 동일 페이지에서 로드 했냐가 차이를 .1 만들뿐 2) 1)보다는 코스 수가 간결하다 특히 CSS Result1. 한개만 띄게 완료2. 바탕화면(?) 클릭 시 팝업 닫기 완료 [ React / popup ] popup 열고/닫고 (Feat.stopPropagation) 팝업을 만들고 position : absolute로 띄우면 현재 창에서 레이어의 높이로 팝업을 띄울 수 있다. 그렇다면 닫기는 어떻게 하면 좋을까? 방법은 여러가지가 있겠지만 띄운 레이어 밖을 누르면 가능으로 야기 해보겠다.e.stopPropagation()stopPropagation() : 메서드는 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지합니다.출처 : https://developer.mozilla.org/ko/docs/Web/API/Event/stopPropagation popup을 클릭했을 때, 버블링 현상으로 띄워진 popup을 방지 할 것1. 팝업 전체onClick={(e)=>e.stopPropagation()} 2. popup button 클릭 시여기서는 handle.. [React] state mirroring(상태 동기화) 부모에서 자식으로 데이터를 넘겨줄 때, 우리는 prop을 사용한다. 다만 여기서 어떤 목적성을 가지고 데이터를 전달 할 것인지에 따라서 child component에서 데이터 처리 방식이 달라진다. 1. perfect sync(완전 동기화)- 무조건 prop으로 내려 받은 키워드를 그대로 쓸 것.function Message({ messageColor }) {const color = messageColor; 2. initial data(최초의 데이터 값)- 맨 처음 데이터를 값을 설정 할 때만 사용 할 것.function Message({ initialColor }) {// The `color` state variable holds the *first* value of `initialColor`.// F.. [React/ReactQuery] 사용목적 from 공문 React QueryOverviewTanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze.탄스택 쿼리(FKA React 쿼리)는 흔히 웹 애플리케이션을 위한 데이터 가져오기 라이브러리로 설명되지만, 보다 기술적인 측면에서 보면 웹 애플리케이션에서 서버 상태(state)를 쉽게 가져오기, 캐싱, 동기화 및 업데이트할 수 있게 해줍니다... [REACT] a componenet를 나누는 방법 이 자료는 React 공식문서를 바탕으로 작성해 봤습니다.FilterableProductTableSearchBarProductTableProductCategoryRowProductRow 제품 테이블(라벤더색)을 보면 테이블 헤더('이름' 및 '가격' 레이블이 포함된)가 자체 구성 요소가 아닌 것을 알 수 있습니다. 이것은 선호도의 문제이며 어느 쪽이든 사용할 수 있습니다. 이 예제에서는 ProductTable의 목록 안에 표시되므로 ProductTable의 일부입니다. 그러나 이 헤더가 복잡해지면(예: 정렬을 추가하는 경우) 자체 ProductTableHeader 구성 요소로 이동할 수 있습니다.If you look at ProductTable (lavender), you’ll see that the .. [ React/ 원리 ] Basic, DOM by declarative DOM(선언적 DOM) 목차1. 명령적 코드 vs 선언적 코드2. 어떻게 React는 버추얼 돔으로 HTML을 그리는가2-1. POJO code2-2. Component2-3. Props2-4. JSX2-5. FRAGMENT & HTML AUTHORING2-6. FIBER AND RECONCILIATION HTML TREEchildren that is one object knows where another object is located in memory we represent that visually some arrows. The Document Object Model(DOM)a collection of objects in the comuputer's memory that represent the HTML elements .. [react] onChange 와 onClick React Calendar library 쓰다가 onChange event handler 가 자동으로 props 를 전달한다는 것을 알게 되어서 onClick 도 자동으로 넘기나요? 물어보니까 그렇다고 함. @_@ 출처 : ChatGPT In React, both onChange and onClick event handlers automatically receive event objects as their first arguments, but they behave differently in terms of passing additional arguments. 둘의 차이는 뭘까? onChange: 입력 필드나 선택 요소와 같은 폼 엘리먼트에 onChange를 사용하면 React는 자동으로 이벤트 핸들러에 .. [react/reduxToolkit] configureStore( { } ) 중괄호를 넣는 이유 지식이 짧아서 reduce만 넣을 수 있는 줄 알았는데, 다른 추가 기능이 있었군요. import { configureStore } from '@reduxjs/toolkit'; import rootReducer from './reducers'; const store = configureStore({ reducer: rootReducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(myCustomMiddleware), devTools: process.env.NODE_ENV !== 'production', // Other configuration options... }); export default store; 참조 chatGPT [React] React-Router-Dom, Header를 넣을 수 있는 위치는? 인터넷에서 배우는 것과 달리 공식 홈페이지 권장하는 방식으로 Router 방식을 바꾸니까 를 어디에 넣어야 할지 몰라서 일단 테스트 중. 나의 질문은 2가지 1. Root component(공식 홈페이지 명칭) === App component 인가? 2-1. component는 필요한가? 2-2 component는 어디에 위치시켜야 하는가? 현재 진행형 질문 : 2024.03.07 main.jsx(index.js)는 아닌 듯 작동 안 함 공홈에서는 Root Component라고 쓰는거 같은데 여기선 난 App으로 처리 해보기로 했다. component에서는 작동 [React]네이버 api 로그인 client(로그인 버튼)/back(callback 통신) 저는 client 에서 로그인 버튼을 만들고 여기서 인증을 받으면 back으로 보내서 callback을 처리하는 방식으로 진행하였습니다. client 도음 받은 사이트 : https://choijying21.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%EB%B2%84-%EC%86%8C%EC%85%9C%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0%ED%94%84%EB%A1%A0%ED%8A%B8-%EB%B6%80%EB%B6%84-%EB%84%A4%EC%95%84%EB%A1%9C back 도움 받은 사이트 :https://koreankoder.tistory.com/14 .. [react] 반복문 2가지 방법 for loop == map [react] redux store createSlice 가져오기 오류 초보라 그런지, 유튜브 내용을 그대로 따라 했는데, 오류가 떴다. No reducer provided for key "auth"라고 한다. 그런데 아마도 const store 안 reducer { authSlice.reducer } 라고 써서 생긴 오류라는 것을 확인 했다. reducer를 제거하니까 문제가 해결되었다. 왜 그런 이슈가 생긴건지 아직 확인 하진 못했다. 요즘 npm 버전 이슈로 계속 npm 지웠다가 깔았다 반복하니까. 이제 대략 어떤 느낌으로 오류가(?) 발생하는지 알겠더라.. 이것 또한 유사하게 흘러가려나 보다...ㅠㅠ [react/props] props 방식 글 업데이트 일자:2024.02.22 props를 자식에게 전달할 수 있는 방식은 다양한다. 1. useState 2. native Mehtods 3. customized things props으로 사용자 만든 이벤트 함수를 전달 할 수 있다. onChangeMode={ () => { setIsDark(!isDark)} } 개인적으로 나는 isDark, setIsDark를 전달 다만, 현재 작동을 하는 페이지에서 어떤 작동이 일어나는지 알 수 있는게(코드 읽기 좋은 것은) 하는 onChangeMode(개인화 된 함수) 전달이 중요 [react]useNavigate or useLocation의 차이 useNavigate is primarily for programmatic navigation between routes within your React application. It allows you to navigate to different URL paths, replacing history or adding to the history stack. useLocation primarily serves to read information about the current location, such as the pathname, search parameters, and state. It doesn't directly modify the history stack but can inform navigation.. [useNavigate] useParams() & useLocation() useNavigate() within parent component. data는 map 함수를 통해서 받아온 argument 입니다. useParams() useLocation() useLocation() + without { } useParams()를 사용할 경우 => isbn13만 받을 수 있음 => 아마도 Route를 통해서 만들었던 정보같음. ( e.g 더 많은 정보를 사용할 수 있음.(hash, key, pathname, search, state {...}) => state {...} [function]onClick={handleOnClickDetail(data) vs onClick={()=>{handleOnClickDetail(data)}} key points 1. Arrow 함수를 사용한 것 2.Arrow 함수에 data 함수를 전달 한것. 1. onClick={handleOnClickDetail(data)}: This expression immediately invokes the handleOnClickDetail function and passes the data argument to it. The return value of the function (which could be anything, including undefined) is assigned as the event handler. If the handleOnClickDetail function has side effects (performs actions without ex.. 이전 1 2 다음
