개발블로그

1. guard clause 사용하기중첩 if문 사용하였기 때문에 guard clause를 사용해보라고 하셨다. 사실 처음 들어서 guard clause부터 찾아봤다. Guard clause는 특정 조건을 만족하면 바로 함수를 종료할 수 있도록 하여 복잡도를 줄이고, 가독성을 높이는 프로그래밍 패턴이라고 합니다.    2. 토글 위치const rect = e.target.getBoundingClientRect();    setModalPosition({      top: rect.bottom + window.scrollY + 5,      left: rect.left - 150,    }); 어느 정도 위치는 잡았지만 스크롤하면서 위치가 변했다... 그래서 창 상하를 기준을 플러스해서 잡아주니 내가 원하..

React 애플리케이션에서 사용자 인증을 구현하는 대표적인 방법 중 하나가 JSON Web Token(JWT)을 활용하는 것입니다. JWT는 RESTful API와도 자연스럽게 호환되며, 서버에 상태를 저장하지 않고 인증할 수 있다는 장점이 있습니다. JWT 기반 인증의 기본 개념JWT(JSON Web Token)는 JSON 포맷의 토큰으로, 세 가지 부분으로 구성되어 있습니다: 이전 글에서 잠깐 언급했었습니다!헤더(Header): 어떤 알고리즘을 사용해 서명(Signature)했는지를 나타내는 정보입니다.페이로드(Payload): 유저 정보나 권한 등의 데이터를 담고 있습니다.서명(Signature): 서버에서 설정한 비밀 키와 Header, Payload로 생성된 해시로, 데이터의 위변조 여부를 확인..

1. 띄어쓰기예전 html 코드를 가져와서 next.js로 마이그레이션 하는 과정에서 띄어쓰기 부분이 글자 그대로 출력되는 부분을 발견했다.원래는잘 활용했는데...&nbspnext.js에서는 아래처럼 사용해야한다. 유니코드 문자라고 한다.{"\u00A0"}2. 제출 버튼button            type="submit"            className={`${styles.login_btn} ${              isButtonDisabled ? styles.btn_disabled : styles.btn_active            }`}          > type을 항상 button으로 줬는데, submit으로 하면 클릭을 하든 "엔터"를 하든 post가 가능해진다! 엔터는 처음 ..

웹사이트나 애플리케이션에 로그인을 하게 되면, 우리가 누구인지 확인하고 계속 로그인 상태를 유지해주는 편리한 방식이 필요합니다. 이를 ‘인증’이라고 하죠. 웹이나 애플리케이션에서 가장 흔히 쓰이는 인증 방식은 세션 기반 인증과 토큰 기반 인증이 있습니다.  1. 세션 기반 인증세션 기반 인증은 전통적인 방식으로, 주로 예전부터 웹사이트에서 사용해온 인증 방법입니다. 우리가 로그인할 때마다, 서버는 우리 정보와 인증 상태를 확인한 후 서버의 메모리에 세션이라는 것을 생성하고, 여기에 로그인 정보를 저장합니다. 그리고, 세션 ID라는 고유한 ID를 만들어 브라우저에 쿠키 형태로 보내줍니다.이 다음에는 사이트 내에서 여러 페이지를 이동해도, 브라우저는 자동으로 세션 ID를 보내면서 우리가 로그인된 상태임을 서..