AI Platform / Web

React를 처음 배우면, useState를 상태관리를 위해 사용한다. 이 글을 보고 있는 여러분도 적어도 한번 정도는 사용해 봤을 것이다. useState는 리액트에 제공하는 가장 기본적은 Hook으로 useEffect와 함께 가장 많이 사용된다. 상태관리가 무엇인지에 대해 알아본 후 useState의 본질적인 사용법에 대해 알아보도록 하자. React에서 State state란 무엇일까? 쉽게 말하면 state는 데이터라고 생각하면 이해가 빠르다. 따라서 상태관리란, 데이터 관리라고 할 수 있다. 공식 문서에 따르면 state를 구분하는 방식은 아래와 같다. 시간에 따라, 변한다면 state가 아니다. parent component에서 Props를 받을 수 있다면, state가 아니다. 기존의 sta..

redux-toolkit이란 redux를 조금 더 쉽게 사용하기 위해 나온 라이브러리이다. 이 글에서는 개념보다는 쉽게 프로젝트에 redux를 적용할 수 있도록 코드 위주로 설명해 보겠다. 구현 정도는 redux로 전역 변수를 관리하는 부분까지 진행할 예정이다. 왜냐하면 Redux-Saga나 Redux-thunk 같은 미들웨어는 최근 프런트 진영에서 포일러플레이트 이슈로 잘 사용하지 않고, 대신 react-query, SWR 같은 라이브러리는 사용하는 추세이기 때문이다. 하지만, react-query나 SWR은 서버와 동기화를 위해 사용되는 것이기 때문에, 완전한 전역변수 관리는 불가능하다. 따라서 Frontend 자체의 전역변수 관리는 Redux나 Recoil을 사용하는 것이 좋다. redux-tool..

프런트엔드 error를 확인하는 방법은 여러 가지가 있다. 우리는 기본적으로 개발자도구에 console에 발생하는 에러를 통해서 주로 error를 확인한다. 하지만 무작정 error handling을 try catch로 하는 것은 좋은 방식이 아니다. try catch로 해야 하는 부분과 Error boundaries를 활용하는 방법을 알아보고, 리액트라는 선언형 코드에서 사용하는 코드에 대해 알아보자. 이 글을 통해 스스로 내 프로젝트에 error를 넣어주는 방식에 대한 기초를 알아보자. 1. try catch javascript를 배운사람은 다 알 수 있는 에러 처리 방법이다. 보통은 nodejs 백엔드에서 api 호출 시 많이 사용한다. 그러면 react에서도 사용하면 될까? 반은 맞고 반은 아니다..

키보드 포커싱에 대해 알아보자. 기본적으로 마우스 없어도 tab을 이용해서 input 값들을 넣을 수 있다. 그리고 사용자 기준으로 tab을 눌렀을 때 포커싱(마우스 커서)의 위치가 예상 되는 곳에 존재할 수 있도록 만들어 보자. 중요하지 않지만, 매우 중요한 기능이다. 웹 접근성관 관련된 키보드 포커싱에 대해 알아보자. 0. 기본 포커싱 우리는 input창을 누르면 자연스럽게 input창에 커서가 들어간다. 즉, 웹은 사용자가 사용하는 부분에 대해서는 기본적으로 자동으로 포커싱을 시켜준다. 상호작용하는 element로는 a 태그, input 태그, select 태그, button 태그들이 있다. 그리고 이러한 태그들을 tab키를 이용해서 키보드로 이동을 할 수 있다. (반대로 이동은 shift + ta..

nextjs 버전이 올라가면서 유용한 기능들이 많이 생겨나고 있다. 여기서 사용해볼 Rewrite에 대해 알아보자. 원리는 간단하다. 나는 /api/hanpy로 들어오는 요청을 처리하는 API를 만들었다. 그런데, /hanpy로 들어오는 요청도 /api/hanpy의 로직을 따르게 만들고 싶은 경우가 있을 것이다. 이때 사용하는 것이 Rewrite이다. 0. 사용 준비 npx를 통해 프로젝트 하나를 생성하자. $ npx create-next-app@latest 1. rewrite 설정하기 npx를 통해 프로젝트 하나를 생성하자. 위와 같이 프로젝트를 만들면, 기본 next.config.js는 아래와 같다. /** @type {import('next').NextConfig} */ const nextConfi..

mongodb를 nextjs에 연결을 해보자. 연결하는 방법은 여러가지가 있다. 오늘은 mongoose를 활용하여 필요한 위치에서 SSR을 활용하여 바로 사용하는 방법에 대해 알아보자. nextjs는 아래와 같은 명령어를 통해서 만들었다. $ npx create-next-app@latest 기본적으로 mongoDB 설치는 되어 있다 가정하고 nextjs 로직위주로 설명하겠다. 개인적으로 docker로 실행하면 편하다. 도커(Docker) 기초 정리 1. mongoose 설치하기 아래의 명령어를 통해서 mongoose를 설치한다. mongoose를 사용하는 이유는 schema를 지정할 수 있기 때문이다. 사실 mongodb는 관계형 db가 아니기 때문에 아무꺼나 넣으면 막들어간다. 이러한 문제를 schem..

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