React6 pub/sub 패턴으로 프론트엔드 데이터 태깅 관리하기 프론트엔드에서는 사용자가 화면을 움직이는 방식과 데이터를 함께 다루게 됩니다. 그렇기에 코드의 복잡도가 늘어나는 경우를 많이 접하게 됩니다. 코드의 복잡도가 늘어나는 문제를 해결하기 위한 재료들을 얻는 것은 상당히 중요합니다. 상태관리를 공부하고 상태관리 오픈소스를 계속해서 읽고 기여까지 하며 얻은 pub/sub 패턴이란 재료를 알게 되었습니다. 이 재료를 실무에 적용하여 제품의 맛을 높인 경험을 공유하고 싶어 글을 작성합니다. 팀에서 겪었던 문제 온라인 쇼핑몰을 개발하고 있습니다. 다른 쇼핑몰과 비슷하게 개발하고 있는 커머스는 유저가 상품을 구매하는 것이 본질이고 비즈니스 모델입니다. 유저에게 적합한 상품을 알려주고, 유저의 행동을 바탕으로 힘을 줄 기획을 정하기 위해, 유저의 데이터를 수집하고 분석하.. 2024. 3. 24. styled-component API를 살펴보고 구현해보기 현재 프로젝트에서 css 스타일링 방식으로 styled-component를 사용하고 있습니다. 사용하며 백틱을 사용한 문법으로 함수를 만들려면 어떻게 해야할까? 실제로 어떤 과정으로 스타일이 생성될까? 에 대해 정리하며 이해해보고 싶었습니다. 그런 이유로 styled-component 의 원리와 사용할 때 볼 수 있는 편의성들에 대해 정리해보려합니다. 또 간단하게 styled-component를 만들어보는 글을 작성하려합니다. TOC styled-component는 무엇을 해주는 라이브러리인가? styled-component 에서 제공하는 API styled-component 의 동작원리 간단하게 만들어보는 styled-component styled-component는 무엇을 해주는 라이브러리인가? st.. 2024. 3. 10. highlight.js를 이용한 실시간 코드 하이라이팅 에디터 만들기 부스트 캠프 그룹 프로젝트로 코드를 작성하고 코드 리뷰를 할 수 있는 플랫폼을 개발하고 있다. 가독성이 중요한 플랫폼인데 하이라이팅이 안 된 코드는 가독성이 좋지 않다. 따라서 코드 하이라이팅을 개발해야 했는데 실제로 모든 언어의 하이라이팅을 분기 처리해서 개발하기에는 일정이 빠듯한 관계로 highlight.js라는 라이브러리를 이용하였다. 이 글은 그 과정에서 겪었던 어려움과 해결 과정, 해결한 코드를 포함한다. 최종 화면 겪은 문제 모든 언어의 하이라이팅이 적용될 범위를 파싱 해서 스타일링하는 것은 어렵다. 현재 개발 중인 서비스는 프로그래밍 언어를 가리지 않고 많은 사용자들이 참가할 수 있게 하기 위해 다양한 종류의 프로그래밍 언어를 지원해야 한다. 필자는 다양한 언어의 의미 있는 토큰 (funct.. 2022. 11. 19. 보안과 사용성을 고려한 JWT 다루기 (React, Express) 이 글은 Web Front End에서 jwt를 다루는 것을 총정리한다. 많은 시행착오를 겪고 풀스택으로 JWT 관련 로직들을 개발한 경험과 실제 오픈 후 사용되고 있는 서비스를 운영해본 경험을 합쳐 2022-11-11의 필자가 생각하고 사용하고 있는 jwt 관리법을 다룬다. 또 이 글에서는 필자가 생각하기에 간단하게 accessToken을 refresh하는 방법을 다루고 바로 복사해서 사용 가능할만한 코드를 포함한다. 제일 먼저 생각해야할 것은 JWT의 역할 세션에 저장하는 방식이 아닌 JWT를 로그인 전략으로 활용한다면 이는 결국 서버에 저장하는 것 없이 클라이언트 사이드에 인증관련 정보를 넘겨버리겠다는 것이다. 이로 인해 서버는 세션에 데이터를 따로 저장하거나 할 필요없이 토큰을 만들어 클라이언트로 .. 2022. 11. 13. React에서 canvas를 다루면서 알아보는 Hooks 리액트에서 캔버스를 다뤄보며 React가 제공하는 hooks들의 동작을 살펴보자. 시나리오 브라우저 크기 조정을 해도 캔버스의 크기는 항상 브라우저에 꽉 차게 맞추어보자. 해당 서비스에 들어오자마자 캔버스에 포커스가 돼 클릭없이 캔버스에서 키보드 이벤트를 사용할 수 있다. useState와 useEffect를 통해 사용자가 열고 있는 브라우저의 너비와 높이를 상태로 관리하자 useState를 통해 window 객체의 innerWidth와 innerHeight를 상태로 관리한다. const [windowSize, setWindowSize] = useState({ width: window.innerWidth, height: window.innerHeight, }); jsx, tsx의 width, height.. 2022. 10. 23. JWT를 이용한 사용자 정보 SSR (next.js와 redux-saga 사용) 이 글은 직접 프로젝트에서 적용한 react와 next를 사용한 프로젝트에서 jwt를 이용하여 사용자 정보를 서버사이드 렌더링 하는 것을 다룬다. 대게 웹에서 jwt를 다룰 때 로컬스토리지나 세션 스토리지를 사용하곤 한다. 하지만 ssr을 이용하게 되면 프론트 서버는 로컬스토리지가 없어 사용자의 정보를 가져올 수가 없다. 그렇기에 나의 경우는 쿠키로부터 토큰을 관리하는 방식을 사용했다. 토큰을 관리하는 과정을 정리하면 로그인하면 액세스 토큰과 리프레쉬 토큰을 받는다. 쿠키와 리덕스에 두 토큰을 넣어놓는다. 헤더에 액세스 토큰을 붙여놓는다. 새로고침 시 프론트 서버에 있는 쿠키를 바탕으로 내 정보를 불러온다. 리덕스 사가를 이용한 로그인 코드이다 function* logIn(action) { try { c.. 2022. 8. 7. 이전 1 다음
