dev

[REDIS] 📚 Node.js 에서 redis 모듈 사용법 (캐싱 & 세션 스토어)

Node 프로젝트에서 pm2로 다중 클러스터 인프라를 구축했다면 세션 불일치 문제가 생기게 마련이다. 만일 서버가 종료되어 메모리가 날라가면 접속자들의 로그인이 모두 풀려버리게 된다. 따라서 이를 방지하기 위해 세션 아이디와 실제 사용자 정보를 외부 데이터베이스에 저장하는 편이다. 이때 개발자들이 많이 사용하는 것이 Redis db이다. 다른 데이터베이스를 사용해도 되지만, 세션은 빠릿빠릿하게 응답을 해야되기 떄문에 메모리 기반의 데이터베이스인 레디스를 사용한다. 지금부터 Node 프로젝트에서 Redis와 연결하고 사용하는 법을 알아보자. Redis Database 설치 레디스를 로컬에 설치해도 되고, 클라우드로도 사용할 수가 있다. 마음에 드는 것을 골라 설치하자. 개인적으로 로컬 보다는 클라우드로 하..

wono | discuss |

it dev nextjs

React에서 중복호출(aka. 따닥)을 막는 완벽한 방법

서언 안녕하세요. 최근에 퀄리티 높은 프론트엔드 제품을 만드는 것에 관심이 많은데요. 사소해보이는 디테일을 얼마나 능숙히 처리하느냐가 프론트엔드 개발자의 실력 척도 중 하나라고 생각했어요. 저는 여러 원칙들을 세우고 있지만, 오늘은 중복호출 (aka 따닥)을 방지하는 완벽한 방법을 탐구해볼 것입니다. 문제인식 서비스를 개발하다가, 중복호출이 발생해서 여러 문제가 발생하는 경우가 있습니다. 결제 요청이 2번 들어갈 수도 있고, 게시물 작성이 2번 될 수도 있고, 댓글이 2번 써질 수도 있습니다. 이로 인해 비즈니스적으로도 영향을 미칠 수도 있습니다. 작게는 서버 에러 수가 많아져서, noisy 해질 수 있죠. 이만큼 중요도가 높고, 프론트엔드 퀄리티에 큰 역할을 한다고 생각했는데요. 실제로 저도 명확한 해..

wono | discuss |

it dev nextjs

[react 리액트] 초간단 중복 클릭 못하게 하기 (feat. 로딩화면)

1. 어떻게?state를 통해 버튼을 누르면 완료될때까지 버튼의 클릭 기능을 없애서 중복 클릭을 못하게 함. 2. 적용1) 불리언 타입의 State 를 만들어 준다. const [isBtnDisable, setIsBtnDisable] = useState(false); 2) 버튼의 state (true, false) 두가지 상태를 정의해준다.*여기선 버튼 대신 이미지를 사용하였다. *클릭 후 처리 중엔 아예 클릭이 불가능하게 하였다. - 클릭 전 (onClick 프로퍼티가 있음)isBtnDisable === false 일 때 버튼은 이렇고 // isBtnDisable === false && - 클릭 후 (onClick 프로퍼티가 없음)isBtnDisable === true 일 때 (클릭 후) 버튼은 이렇다..

wono | discuss |

it dev nextjs

(React) 커머스 프로젝트 : 결제 버튼 중복 클릭 방지하기

버그를 유발하는 유저의 "이상행동"을 예측하면서 코드를 작성하기란 여간 쉬운 일이 아니다.

wono | discuss |

it dev nextjs

NextJS 13 <button onClick={}> Event handlers cannot be passed to Client Component props

wono | discuss |

it dev nextjs script

Next.js에서 Script Component 효과적으로 사용하기

Next.js로 스크립트 태그를 추가하다 점차 추가하다 보면 \_document.tsx 안에 많은 script 태그들이 생겨나게 된 적이 있었어요. 처음에는 \_document 파일이 뭔지도 모르고 모든 스크립트 태그 들을 다 집어 넣었던 적도 있었어요. 이래서 꼭 공

wono | discuss |

it dev nextjs script

NextJS API: next/script

이 API 참조 페이지는 Script 컴포넌트에 사용 가능한 props를 이해하는 데 도움이 됩니다. 기능 및 사용법은 Optimizing Scripts 페이지를 참조하세요.다음은 Script 컴포넌트에 사용 가능한 props의 요약입니다.<Script /> 컴포

wono | discuss |

it dev nextjs script

[NEXT JS] 외부 JS파일 사용하기

이번에 네이버에서 제공하는 맵 API를 이용해보려 하는데, 예제가 기본적으로 HTML로 되어있고, 외부 JS파일을 script태그로 불러오는 형식으로 예문이 짜여져 있었습니다. 아래는 네이버 Dynamic Map API를 사용한 HTML 예제입니다. 위 코드의 script를 보면 다음과 같습니다. 이 코드와 같이 외부 JS파일을 불러오는 것을 알 수 있었습니다. 그렇다면 React환경인 NextJS에서는 이 파일을 어떻게 불러올 수 있을까요? 😎NextJS에서 제공하는 Script를 이용한다 import Script from 'next/script' export default function Dashboard() { return ( ) } Nextjs 제공하는 Script컴포넌트를 이용하여 위와 같이 J..

wono | discuss |

it dev react script

React에서 <script> 태그로 자바스크립트 불러오기

Engineering Blog by Dale Seo

wono | discuss |

it dev nextjs shadcn

Next Js 14 Todo App With Shadcn-ui | Fatih Bırtıl

We will create an interediate Todo App project with Next.js. We will use typescript, shadcn-ui, tailwind, zustand and much more in this project.

wono | discuss |

it dev nextjs shadcnui

Shadcn UI Tutorial using Next JS - Build Projects Faster without Coding YouTube · Brian Design 2024. 9. 11.

YouTube에서 마음에 드는 동영상과 음악을 감상하고, 직접 만든 콘텐츠를 업로드하여 친구, 가족뿐 아니라 전 세계 사람들과 콘텐츠를 공유할 수 있습니다.

wono | discuss |

it dev tailwindcss util

Dev Camp : utility CN-shadcn (3)

서론이 이전에 길었는데 어쨌건cn에 대해서 파헤쳐 보자util 함수에 자동적으로 생성되는 함수를 보면이런 함수가 보이는데 twMerge가 먼저 보인다.그러나 twMerge를 보기 이전에 clsx 와 cva에 관해 간단히 짚고 넘어가자clsx는 저번 프로젝트에서 사용했었

wono | discuss |

it dev fe zeroruntime

Vanilla Extract 와 Zero Runtime 에 대하여 알아보자.

최근 개인 프로젝트에서 Vanilla Extract 를 사용할 일이 생겨 부랴부랴 조사했습니다.

wono | discuss |

it dev react deepdive

GitHub - diving-react/study-react-deepdive: 모던 리액트 Deep Dive

모던 리액트 Deep Dive. Contribute to diving-react/study-react-deepdive development by creating an account on GitHub.

wono | discuss |

it dev github copilot ai

[Copilot] 깃허브 코파일럿은 어떻게 작동하는가?

으 AI 페어 프로그래밍 도구로 깃허브 코파일럿과 챗GPT, 클로드를 사용합니다. 코파일럿은 인공지능 기술을 활용해 소스 코드를 자동으로 작성하거나 수정하는 도구입니다. 깃허브 코파일럿은 코파일럿의 일종으로 깃허브(GitHub)가 출시한 프로그래밍을 돕는 인공지능입니다. 오픈AI의 GPT 언어 모델을 이용해 깃허브 리포지터리를 학습시켜 만든 프로그램에 특화시켰습니다.

wono | discuss |

it dev fe css shadcnui zod tailwindcss

#4. Form handling in React

Workthrough for prev. projectForm Basics : Controlled Input & UnControlled InputReact & FormsReact-Hook-FormZod + ResolverForm Component & UI Componentfourth project : React-Hook-Form Proj

wono | discuss |

it dev react css

프론트엔드 CSS 라이브러리 비교

CSS 라이브러리에 대해 조사합니다. Bootstrap, Material 및 최신 Tailwind, Pico 등에 대해 비교합니다.

wono | discuss |

it dev css nextjs mui

Templates - MUI Store

A collection of 4.5 average rating templates, selected and curated by MUI's team of maintainers to get your projects up and running today.

wono | discuss |

it dev springboot jsp

[Spring Boot] SpringBoot에서 JSP 사용하기

Spring Framework가 아닌 Spring Boot에서 JSP 사용하기 Spring Framework에서는 뷰(View)로 JSP 파일을 사용했었다. (Maven 프로젝트 생성 시 아래 webapp으로 설정하면서 해당 폴더에 view 폴더를 통해 JSP를 사용했다) https://kcode-recording.tistory.com/312 [Spring] IntelliJ에서 Spring Framework Project 생성 및 설정(Maven) Maven 프로젝트 생성을 이용해 Spring Framwork 프로젝트 생성하기 인텔리제이에서 Spring Framework 프로젝트 생성하는 방법을 알아보고자 한다 기존에는 Spring Boot만 사용하여 start.spring.io 사이트를 이용 kcode..

wono | discuss |

it dev spring

[Cinemagram] 공통기능은 묶어보자 AOP, 마지막 확인 - (16)

이번 포스팅은 Cinemagram의 마지막포스팅입니다.물론, 계속해서 리팩터링 하거나 기능을 추가할 예정이지만 우선 이렇게 막을 내리고 추후에 작업을 해서 올리도록 하겠습니다. AOP란?Aspect Oriented Programming의 약자로 관점 지향 프로그래밍입니다. 그렇다고 객체지향프로그래밍은 버리겠다는 것이 아니라 추가로 적용 가능합니다. 예를 들어보겠습니다. 로그인 기능, 회원가입 기능을 구현하고자 할 때 로직을 기술해 보면 다음과 같습니다.핵심기능로그인 로직회원가입 로직1. username, password입력1. username, password, email, name입력2. DB에 SELECT쿼리 보냄2. DB에 INSERT함3. 로그인(세션) 두 기능의 핵심기능은 다르겠지만 공통적으로..

wono | discuss |