개발/React5 useEffect cleanup에서 퍼널의 상태를 clear하기 전에 생각할 것. 응집도 있는 퍼널 관리에 대한 생각들 개요 퍼널을 이탈할 때, 유저가 업데이트한 상태를 초기 상태로 clear하고 싶을 수 있다. 이런 clear 동작에 대해서 고민하다가 생각한 내용들을 정리해보았다. TL;DR - cleanup은 useEffect에서의 특정 행동과 pair로 관리되지 않으면 문제 상황이 발생할 수 있다. - 컴포넌트의 side effect는 가능하다면 이벤트와 이벤트 핸들러로 관리하고, useEffect는 그렇게 하기 어려울 때 사용한다. - 퍼널과 그에 따른 데이터 변경을 응집도 있게 관리하자. 상황 설정 모바일 커머스 앱의 결제 페이지에서 다음과 같은 상황을 예시로 생각해보자. - 결제 수단 지정 페이지 [모바일 클라이언트 앱] - 결제 페이지 [웹] - 결제 페이지는 결제 수단 데이터를 Next.js의 getServ.. 2023. 6. 16. React Chrome extension 개발을 위한 Webpack 설정 최근 사이드 프로젝트로 크롬 익스텐션을 만들고 있다. 개인적으로 브라우저 북마크 기능을 굉장히 자주 사용하는데, 읽음 / 안읽음 표시나 각종 데이터 필드에 대한 정렬 등 다양한 기능을 가진 북마크 관리 어플리케이션을 만들고자 한다. 이번 프로젝트에서는 지금까지 미뤄왔던 내가 익숙했던 환경에서 최대한 벗어나 개인적으로 조금은 도전적일 수 있는 과제들을 풀며 Comfort zone을 벗어나고, 그 과정에서 배운 내용을 정리하려고 한다. 이번 글은 프로젝트의 Webpack 설정에 대한 기록이다. 이후 내용들은 크롬 익스텐션, 그 중에서도 popup 형태의 앱에 대한 설정이므로 참고 부탁드립니다. 늘 프로젝트를 시작할때는 항상 아무것도 없는 폴더를 보며 막막함과 기대감이 동시에 든다. 그래도 새로 만드는 것 보.. 2022. 6. 19. React의 new JSX Transform, emotion의 css prop 설정법 emotion에서는 css라는 이름의 prop을 통해 스타일을 할 수 있는데, 당연히 이런 이름의 prop이 모든 html 요소에 존재하지 않으므로 추가적인 설정이 필요하다. 공식 문서에서 여러 방법을 안내하고 있는데, 상당히 파편화되어 있어서 조금은 불친절한 문서화라고 느꼈다. 오늘은 이 설정을 하면서 알게 된 react의 new JSX Transform에 대해서 적어보려고 한다. 어느새부터 React를 사용할 때 import React from ‘react’를 사용하지 않아도 된다고만 기억하고 있었는데, 그 정확한 이유는 React 17부터는 JSX를 transform 하는 새로운 방법이 도입되었기 때문이다. import React from 'react'; function App() { return .. 2022. 6. 13. Next.js의 Link와 Client/Server-side-rendering Next.js에서는 태그가 아닌 컴포넌트를 통해서 Client-side-rendering을 구현하도록 하는데요. 이번 포스팅에서는 이 동작과 Next.js에서의 Client-side 및 Server-side 렌더링에 대해서 알아보겠습니다. 먼저 production 환경에서의 실제 동작을 확인하기 위해 build를 해 보겠습니다. static하게 여러 페이지가 만들어진 모습입니다. 이 페이지로 링크하는 태그를 를 통해 생성하고 실제 HTML 태그를 확인해 보면 다음과 같습니다. 방금 static하게 생성했던 페이지로 href가 설정된 모습입니다. 크롬 개발자 도구로 어떤 요청이 이루어지는지 확인해보겠습니다. index 주소인 /로 접근하자, HTML페이지를 받아오고, 그 이후에 JS를 받아와 hydrati.. 2022. 1. 20. React Component npm에 publish 하기 ~ 꺽쇠, +, - 등의 아이콘 컴포넌트 +나 x 등의 아이콘을 적당히 만들어서 빠르게 프로토타이핑을 하고 싶을 때 사용할 심산으로 컴포넌트화 시켜봤습니다. 이번 프로젝트의 주요 목적이기도 했던 npm에 publish 또한 완료했습니다. 코드는 아래 저장소에서 보실 수 있습니다. https://github.com/JeonJaewon/react-symbols GitHub - JeonJaewon/react-symbols: Handy React.js components for various symbols Handy React.js components for various symbols. Contribute to JeonJaewon/react-symbols development by creating an account on GitHub. github... 2021. 8. 25. 이전 1 다음
