망고

React 프로젝트에서 나이스페이 결제 모듈을 연동하는 과정은 기존 서버 렌더링 환경(JSP 등)과 클라이언트 사이드 렌더링(CSR) 환경의 차이로 인해 몇 가지 도전 과제를 포함합니다. 이 글에서는 React 프로젝트에 나이스페이 결제 기능을 성공적으로 연동한 경험과 해결 방법을 공유합니다. 💣 문제 상황React 프로젝트에서 결제 기능을 구현하는 과정에서, 안정적이고 검증된 결제 솔루션을 도입하기 위해 나이스페이 결제 모듈을 선택했습니다. 나이스페이는 국내 주요 결제 수단(CARD, 계좌이체 등)을 지원하며, 높은 보안성과 안정성을 제공함과 동시에 저렴한 수수료로 비용 효율적인 운영이 가능하다는 장점이 있었습니다. 하지만, 나이스페이 모듈이 기존의 서버 렌더링 환경(JSP 등)에 최적화되어 있어 R..

🏃‍♀️‍➡️ 개요이 글에서는 전세대출 서비스 사이드 프로젝트에서 컴포넌트 관리와, 스토리북(Storybook)을 도입하여 프로젝트 내에 디자인 시스템을 구축한 경험에 대해 공유하려 합니다. 스토리북(Storybook)의 개념과 팀 내에서 어떻게 활용했는지에 대한 방법에 대해 설명합니다. 🚨 문제 상황개발팀에서 작업을 진행할 때, 특히 여러 명이 함께 프로젝트를 진행하는 경우 컴포넌트의 효율적인 관리는 언제나 큰 도전 과제입니다. 이번 전세대출 서비스 사이드 프로젝트에서도 비슷한 문제가 발생했습니다. 금융계산기 페이지개발하면서 총 4가지 계산 기능을 나누어 2개씩 나누어 개발하게 되었습니다. 작업을 진행하다 보니 각 페이지에서 공통으로 사용하는 UI 컴포넌트들이 많았고,UI의 일관성을 유지하면서도 개..

리드미 몬스터 서비스가 궁금하다면!서비스 둘러보기 : https://www.readme-monster.com/깃허브 둘러보기 : https://github.com/Readme-Monster/readme-monster/wiki 🏃🏻‍♂️ 시작하기사용자들이 자유롭게 피드백을 남길 수 있는 공간이 필요했습니다. 익명성을 보장하여 사용자의 직접적인 피드백을 듣기 위함입니다. 아래는 익명게시판 완성된 페이지 이미지 입니다.사용자는 게시판에 댓글을 남길 수 있으며, 댓글 목록은 실시간으로 업데이트됩니다. Firebase Firestore를 사용하여 데이터를 저장하고 불러옵니다.1. Import 및 초기 설정import React, { useState, useEffect } from "react";import {..

📌애플리케이션 등록 먼저, 카카오 개발자 페이지에서 애플리케이션을 등록해야 합니다. 등록하는 방법은 아래 링크를 참고하자. 카카오 로컬 API 시작하기 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 📌카카오 로컬 API Javascript SDK 설치 카카오 로컬 API를 사용하기 위해서는 Javascript SDK를 설치해야 한다. 'npm' 패키지 매니저를 사용하여 설치하자. npm install kakao-sdk 📌주소 검색 컴포넌트 구현 import React, { useState } from 'react'; import { KakaoM..

React Fragments React에서 컴포넌트가 여러 엘리먼트를 반환하도록 사용하는 것이 일반적인데, Fragment는 DOM에 의미 없는 div를 사용하지 않고 여러 하위 노드들을 그룹화해서 사용할 수 있습니다! render() { return ( ); } 예를 들어 Table과 테이블 아래의 Column을 세팅해주는 컴포넌트가 있다고 가정합니다. class Table extends React.Component { render() { return ( ); } } class Columns extends React.Component { render() { return ( Hello World ); } } 이때 Table의 출력결과는 아래와 같이 나옵니다. Hello World 결과를 보면 tr 아래에..

3. state 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. Props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려면 부모 컴포넌트에서 바꾸어주어야 한다. 예를 들어 현재 상황에서는 App 컴포넌트에서 MyComponent를 사용할 때 props를 바꾸어 주어야 값이 변경될 수 있는 것이다. 반면 myComponent에서는 전달받은 name 값을 직접 바꿀 수 없다. 리액트에는 두 가지 종류의 state가 있습니다. 하나는 클래스형 컴포넌트가 지니고 있는 state이고, 다른 하나는 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state입니다. 3.1. 클..