AI Platform / Web

stripe Stripe의 탄생 원인은 불평한 올라인 결제 시스템을 변경하기 위함에 있다. Pay-Pal과 비교를 통해 특징을 조금 더 살펴보자. PayPal과 Stripe은 오늘날의 회사에서 사용할 수있는 결제 처리 옵션 중에 가장 강력한 두 가지 옵션이라고 할 수 있다. 2010년 당시에는 PayPal은 혁신적인 온라인 결제이긴 했지만, 서비스 연동을 위해서는 최대 9단계까지 거쳐야하는 어려움이 있었다. stripe는 9단계를 3단계를 줄인 결제시스템으로 10년이 넘는 기간동안 빠른 성장을 이루었다고 할 수 있다. 그리고 최근 saas가 유행하면서 간편한 결제를 위해 stripe를 많이 찾기도 하고, 해외 결제를 위해 많이 찾기도 한다. (stripe에 대한 문의가 많아, 다시 detail하게 업데이..

이 글을 읽는 사람은 frontend과 backend의 차이에 정도는 알고 있을 것이다. 그리고 client인 frontend에서 server인 backend로 요청을 보내면 응답을 받는 부분도 알고 있을 것이다. 예를 들면, react에서 spring으로 요청을 보내면, 응답이 오는 것과 같다. 그렇다면, server에서 client로 바로 요청을 보내는 방법 없을까? 이러한 방법을 해결하기 위해서 나온 것이 바로 Websoket이다. Websoket은 상호 간의 데이터를 전달할 수 있어서, 카카오톡과 같은 채팅이나 영상회의 같은 것들을 구현할 때 사용이 가능하다. 이 글을 통해 WebSoket에 대해 알아보고, Websoket과 Socket.io의 차이에 대해서도 알아보도록 하자. WebSoket과 ..

블로그 이전 및 변경 페이지https://hanpy-blog.com/language/ko/nodejs/install-env-path   [Web/nodejs] - nodejs 기초 총 정리 nodejs 기초 총 정리nodejs란 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임이다. 런타임이라는 말은 javascript를 돌아가게 만드는 것이라는 말이다. 그러면 웹사이트에서 서버로 사용되는 건 무슨 말일까? nodejs에 대han-py.tistory.com

위의 에러나 났다면, 간단히 crossorigin을 crossOrigin으로 변경해주면 된다. html의 태그에 class를 className이라 적는 것과 같은 에러라고 생각하면 된다. 기본적으로는 build가 잘 안 될 수 있기 때문에 변경해주고 다시 build를 하면 실행이 될 것이다. // 변경전 // 변경후 crossOrigin으로 변경을 하면 위의 Error는 발생하지 않는다.

Error: Do not use the HTML tag to navigate to /urlencode/. Use Link from 'next/link' instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages Nextjs 에서 빌드 시 발행하는 에러에 대한 해결책을 적어보고자 한다. 에러의 내용을 보면 a태그를 next/link로 변경하라는 내용으로 해석된다. 사실 link 태그로 변경하면 된다. 그러나 공식문서에 나와있는 내용을 통해 조금 더 디테일하게 정리해보고자 한다. 기본적으로 Nextjs에서는 Single Page app 경험을 제공한다. 따라서 단순히 HTML의 a태그를 사용하면, 페이지가 새로고침 되기 때문에 client-s..

SSR, SSG, CSR에 따라 Nextjs로 데이터를 방법에 대해 하나씩 알아보자. 기존의 react는 CSR방식으로 useEffect를 사용했다면, react의 프레임워크인 Nextjs에서는 getStaticProps , getStaticPaths, getServerSideProps 활용하여 데이터를 가져오는 방법에 대해 하나씩 알아보자. Nextjs의 각각의 페이지는 .js, .jsx, ,tx, ,tsx,파일인 리액트 컴포넌트이고 각각의 페이지는 파일 이름과 관련이 있다. 예를 들면 pages/about.js를 아래와 같이 만들었다고 하자. function About() { return About } export default About 그러면 아래의 리액트 컴포넌트는 /about 로 브라우저 접근..

nextjs를 통해 react를 포함시켜 시작하는 방법에 대해 알아보자. react로 Client side rendering(CSR)을 Server side rendering(SSR)로 변환하기 위해 많이 넘어온다. nextjs는 SSR 말고도 SSG나 serverless에도 최적화되어있다. 이러한 Nextjs를 시작하는 것은 환영받을 일이 맞다. Next.js는 react라이브러리를 활용한 프레임워크다. 따라서 react과 다른 기초 지식이 없다면, 시작하기 힘들다고 할 수 있다. 관련 내용은 아래의 url을 참고하여 보고오자. [Web/nodejs] - nodejs 기초 총 정리 nextjs 프로젝트 생성 > npx를 통해 프로젝트를 생성한다. $ npx create-next-app@latest np..

react로 구현을 하다보면, useState를 활용하여 데이터를 저장하고 수정한다. state란 한국어로 상태이다. 즉, 이러한 상태관리인 데이터관리를 효율적으로 하는 방법에 대해 알아보자. 당연한 말이지만, 상태 설계는 개발자마다 중요하게 생각하는 부분이 다르기 때문에 정답은 없다. 그리고 상태 설계는 한번 설계되어 프로젝트가 진행되면 고치기가 쉽지 않다. 따라서 상태 관리에 대한 많은 고민을 하고 프로젝트를 시작해야한다. 잘못된 상태 설계는 성능 이슈는 물론 유지보수 관점에서도 큰 영향을 끼친다. 우선은 리액트를 기준으로 상태 관리에 대해 적어보려한다. 기본적으로 redux를 사용하지 않으면 우리는 데이터를 props로 컨포넌트간에 전달을 시켰다. 이러한 데이터는 전달된 컴포넌트에 국한 되어 영향을..