개요웹 프론트엔드 개발자 설탕시럽입니다. 이번에는 URL Encoding에 대해 알아보려고 합니다. TLDRReact를 통해 개발하다 보면, 전역 상태를 통해 데이터를 전달하기도, Component의 Props를 통하는 방법 등등 여러 방법으로 데이터를 전달하지만, URL의 params를 통해 데이터를 전달하곤 합니다. 이번 프로젝트 개발에서도 특정 데이터에 대한 "메모"와 "메모 수정 페이지"로 이동하기 위해 메모 데이터를 URL params를 통해 넘기고자 시도했습니다.api를 통해 받아온 responseData에서 바로 URL로 데이터를 전달하기 위해 아래와 같은 코드를 작성했습니다.navigate(`/place/${id}/edit?memo=${responseData.memo)}`); 결과는,, 원..

개요안녕하세요. 웹 프론트엔드 개발자 설탕시럽입니다. 이번 글에서는 Intersection Observer를 활용하여, 사용자의 화면을 기준으로 컴포넌트에 변화를 주는 방법에 대해 소개해드리려고 합니다. scrollEvent를 활용한 방식이 아닌 Intersection Observer를 활용하여, 스크롤이 기준이 아닌 유저가 보는 화면을 기준으로 UI를 수정할 수 있는 방식입니다. 요구사항여러개의 아티클 Item이 세로 스크롤로 나열되어 있습니다.유저에게 잡히는 메인 Item은 투명도 조절 없이, 그 외 Item은 불투명하게 화면에 표현하여 메인 아티클을 강요합니다.위와 같은 요구사항을 만족시키기 위한 방법으로 Lazy Loading에 많이 활용되는 Intersection Observer를 활용하면 좋을..

개요 안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 엄브렐라 프로젝트에서 Session 방식과 JWT Token 인증 방식 로그인이 무엇이고, 왜 JWT Token 인증방식으로 로그인 구현했는지와 코드를 함께 공유하려고 합니다. 로그인 시스템에서 사용자를 식별하여, 시스템에 접근하거나 동작을 수행하는 것을 제어하고 기록하기 위한 보안절차. 웹에서 HTTP를 활용한 데이터는 stateless 특징상 누가 요청하는지 시스템에서 알 수 없다. 로그인이라는 절차를 통해 파일 및 프로그램 등의 컴퓨터 시스템의 접근 권한을 관리할 수 있기 때문에 보안에서 중요한 역할을 한다. 따라서 로그인을 하지 않았거나 권한이 없는 유저에 대해 접근 및 동작제어를 확실하게 해야 한다. 권한 없는 자원에 대해 접근이 불가능한 구..