Sign in
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 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 arc auth

SSO (Single Sign-On) 완벽 설명

SSO (Single Sign-On) 완벽 설명SSO(Single Sign-On)는 여러 애플리케이션과 시스템에 대해 한 번의 로그인으로 접근할 수 있게 해주는 인증 방식입니다. 즉, 사용자가 한 번 로그인하면 추가 인증 없이 여러 서비스에 접근할 수 있도록 하는 기술입니다. 이는 기업의 여러 시스템이나 웹 애플리케이션, 포털 사이트와 같은 다중 서비스를 제공하는 환경에서 사용자 경험을 개선하고 보안을 강화하기 위해 널리 사용됩니다. ## SSO의 개념과 필요성SSO는 사용자가 여러 시스템에 각각의 계정으로 로그인할 필요 없이, 한 번 로그인으로 모든 시스템에 접근할 수 있도록 하는 인증 방식입니다. SSO는 주로 대규모 조직에서 직원들이 다양한 시스템과 애플리케이션에 접근할 때 사용됩니다. 사용자 입장..
wono | discuss |
산업 개발자 연봉

2024 개발자 연봉 현실: 상세 분석 및 인사이트

개발자 연봉 현실: 상세 분석 및 인사이트안녕하세요, 개발자 여러분! 오늘은 많은 분들이 궁금해하시는 '개발자 연봉 현실'에 대해 상세히 알아보겠습니다. 이 글에서는 다양한 측면에서 개발자 연봉을 분석하고, 여러분의 커리어에 도움이 될 만한 인사이트를 제공하고자 합니다.목차개발자 연봉 개요경력별 연봉 분석기술 스택별 연봉 차이지역별 연봉 비교회사 규모에 따른 연봉 차이연봉 협상 팁개발자 연봉의 미래 전망결론개발자 연봉 개요개발자의 연봉은 다양한 요소에 의해 결정됩니다. 주요 요소로는 경력, 기술 스택, 회사 규모, 지역 등이 있습니다. 일반적으로 개발자의 연봉은 다른 직종에 비해 높은 편이지만, 실제 금액은 이러한 요소들에 따라 크게 달라질 수 있습니다.최근 조사에 따르면, 한국의 개발자 평균 연봉은 다..
wono | discuss |
기획 운영 계정

제발 그룹메일로 가입해주세요

중요한 정보를 놓친 가슴아픈 사례들 | 회사에서 운영업무를 하다보면 여러 사이트에 가입한 계정들을 보게 됩니다. 네이버, 카카오, 구글, 카페24, 가비아, AWS 등... 이런 계정에 가입할때 어떤 주소를 사용하시나요? 여러가지 유형이 있을 것 같아요. 여러분은 몇 번에 해당되시나요? 1. 개인 메일로 가입 2. 회사 메일로 가입 3. 회사 그룹메일로 가입 몇 번이 제일 많을까요? 아마도
wono | discuss |