반응형

전체 글 93

Webhook, Ngrok이란? PortOne으로 결제 시스템 구현하기

이커머스 사이트를 구현하던 도중 결제시스템까지 넣어서 프로젝트를 완성해보고 싶어졌다. 그래서 PortOne이라는 서비스가 있음을 알게되었고 인증결제 연동하기를 따라하던 도중 iframe 결제창 결과처리를 위해서는 웹훅을 사용해야 안정적으로 처리할 수 있다는 것을 알게되었다. 두둥..! 근데 웹훅이 뭐야?? 너무 익숙한 단어라서 순간 아는 개념인줄 알았다. ✅ Webhook이란? 웹훅은 웹 애플리케이션 간에 실시간으로 데이터를 전송하고 통신하기 위한 매커니즘이다. 이벤트가 발생하면 해당 이벤트에 대한 정보가 담긴 HTTP요청이 특정 URL(웹훅 endpoint)로 전송된다. REST API로 구축된 웹 서비스는 하나의 요청에 따라 하나의 응답을 제공한다. 응답을 받기 위해서 클라 쪽의 요청이 선행되어야한다..

카테고리 없음 2024.03.08

firebaseAuth.js Error: Permission denied Error handling

firebaseAuth.js:89 Error: Permission denied at Repo.ts:534:1 at async Object.readProductData [as queryFn] (firebaseAuth.js:80:1) 포트폴리오 만드려고 예전에 만들어둔 프로젝트 다시 띄웠는데 다음과 같은 에러가 발생함 realtime database의 규칙이 다음과 같이 설정되어 있었음 { "rules": { ".read": true, ".write": true } } 누구나 읽고 쓸 수 있게 변경해줌 보안 사항에 따라 규칙 설정을 변경해주어야 함! 그리고 배포해줄 때는 꼭 firebase console authentication에 가서 승인된 도메인 클릭하고 '도메인 추가'해주어야 됩니다. 저 같은 경우엔..

카테고리 없음 2024.03.06

웹개발 핵심 질문들(DOM, Virtual DOM, React란, Flux 패턴, 상태관리)

DOM과 Virtual DOM을 설명해주세요. 우선 DOM은 Document Object Model의 약자로 HTML문서의 구조적인 표현이다. 웹페이지의 실제 구조이다. 반면 Virtual DOM은 react와 같은 JS 라이브러리가 관리하는 Real DOM의 가상 표현이다. React는 Vurtual DOM의 상태 변경을 업데이트한 다음 React DOM과 동기화한다. Virtual DOM의 성능이 더 빠른 것은 처리 속도 자체가 빨라지는 것이 아니라 변경된 정보의 양이 적기 때문이다. 전체 페이지를 업데이트하는 데 시간을 낭비하지 않고 필요한 업데이트가 필요한 부분만을 상호 작용한다. 리액트의 특징을 설명해주세요. react는 UI를 만들기 위한 js library(재사용이 용이한 컴포넌트 단위로 U..

웹 개발 2024.02.27

"Objects are not valid as a React child (found: [object Promise])" 비동기 작업이 완료되기 전에 프로미스 객체가 렌더링되어 발생하는 문제

"Objects are not valid as a React child (found: [object Promise])" 위와 같은 에러가 발생했다. 이 에러는 비동기 작업이 완료되기 전에 프로미스 객체가 렌더링되어 발생하는 문제다. 주로 useEffect 내에서 비동기 작업을 수행하고 해당 작업이 완료되기 전에 컴포넌트가 렌더링되면서 에러가 발생한다. 1. 'useEffect' 내에서 비동기 작업을 수행한다. 2. 해당 작업이 완료되기 전에 컴포넌트가 렌더링된다. 3. 렌더링 시점에넌 아직 프로미스가 해결되지 않아 `[object Promise]`가 렌더링되어 오류가 발생한다. 해결방법은 비동기 작업이 완료된 후에 상태를 업데이트하고, 그 상태를 렌더링하면 된다. 예를 들어 다음과 같이 고쳐보자. imp..

React 2024.02.14

앞으로의 공부 방향성🤔🤔

# 1 개발하고 있는 쇼핑 웹 사이트가 있다. 현재 기능 firebase google login, cloudinary image 올리기 기능까지 완성이 되어 있다. 전반적인 UI작업을 이번 주 내내 할 것 같다. 금방 완성할 듯! 여기에 카카오톡 로그인, 네이버 로그인, firebase adbmob까지 연동시켜보는 것이 이 프로젝트의 최종적인 마무리이다. 물론 배포도 깔끔하게 할 것이다. 이렇게 기록해두는 이유는 이 프로젝트를 정성들여서 마무리하라는 스스로에 대한 공개적인 압박이다. #2 그리고 openAI를 이용한 웹 사이트를 하나 개발하고 배포하는 게 목표다. prompt 엔지니어링으로 시간복잡도를 계산해주는 사이트를 하나 만들어보려 한다. 이 사이트는 꼼꼼하게 배포하고 admob까지 붙여서 출시하는..

웹 개발 2024.02.13

Add "@babel/plugin-proposal-private-property-in-object" toyour devDependencies to work around this error. This will make this messagego away. 해결하기

One of your dependencies, babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies. This is currently working because "@babel/plugin-proposal-private-property-in-object" is already in your node_modules folder for unrelated reasons, but it may break at any time. babel-preset-react-app is part of the create-react-..

React 2024.02.13

React에서 ContextAPI 사용하기, User 데이터 관리

React에서 User Data를 관리하기 위해 ContextAPI를 사용해보았다. import { Outlet } from 'react-router-dom'; import AuthContextProvider from './components/context/AuthContext'; import Navbar from './components/Navbar'; function App() { return ( ); } export default App; 최상단의 App.js 파일은 아래와 같다 내가 사용한 ContextAPI코드는 AuthContext.js에 담겨져있다 App 컴포넌트에서 AuthContextProvider로 감싸서 ContextAPI를 사용하면 된다. import { createContext, ..

React 2024.02.07
반응형