전체 아티클133 Axios Interceptor에서 상태 값에 따른 라우트 이동시키기 (feat. 글로벌 네비게이터) 목차· 글을 시작하며· 이 불편함을 어떻게 해소할 수 있을까?· 글을 마치며글을 시작하며Axios Interceptor은 Axios에 관련된 통신을 할 때, 중간에 통신을 가로채 개발자가 데이터 패칭 동작에 대한 커스텀 동작을 추가할 수 있어요. 데이터 패칭 함수에 공통적인 동작을 추가해야하는 작업은 굉장히 번거롭고, DX를 해치는 과정이 될 수 있습니다. 그렇기 때문에 관련 동작에 대한 부분들은 Axios Interceptor를 통해서 이러한 공통적인 동작에 대한 제어를 진행해야해요. 다만, Axios Interceptor 파일의 경우 .js , .ts 로 구성이 되기 때문에 SPA의 페이지를 이동하는 훅인 useNavigate 를 사용할 수 없어요.React 훅은 컴포넌트 안에서 사용이 된다는 규약을.. 2024. 12. 15. 해시 값을 이용해 문자열 변경 사항 확인하기 목차· 글을 시작하며· 처음에는 어떻게 시도했을까?· 어떻게 변경을 했을까?글을 시작하며백오피스에서 위협 룰에 대한 코드 문법 기능을 위해 에디터를 탑재해야하던 순간이 있었어요.코드 문법 기능을 통해 에디터를 찾던 도중 우아콘 컨퍼런스에서 들었던 에디터를 사용해서 코드에 대한 변경사항에 따른 예외 처리를 진행해줘야했어요. 변경에 따른 예외처리 상황은 아래와 같이 설명할 수 있을 것 같아요.코드를 작성하고, 올바른 코드일 경우 문법 검사가 통과되어야하는 조건문법 검사를 통과 후 코드를 수정할 경우, 다시 문법 검사를 하게 해야하는 조건코드를 수정했지만, 이전 통과한 코드들에 대해서 문법 검사를 다시 실행하지 않고 내부 값으로 저장하고 있다가 해당 값을 재활용하는 조건처음에는 어떻게 시도했을까?예전 프로젝트.. 2024. 12. 7. 프로젝트를 진행하면서 오너쉽을 가져야하는 이유들 지난 2년 동안 대학교 졸업부터 취업까지의 과정을 겪으며 다양한 프로젝트들을 진행을 했다. 정말 재미있는 프로젝트도 많이 진행을 했지만, 마냥 좋았던 기억만 있던 것은 아니다. 프로젝트를 진행하면서 능동적으로 참여를 하는 프로젝트가 있는 반면, 나도 모르게 수동적으로 참여를 하게 되었던 프로젝트들이 여럿있다. 내가 왜 프로젝트를 참여하면서 수동적으로 참여를 하게 되었는지, 그리고 지난 프로젝트들에서 어떤 것들을 느꼈는지 돌아보려고 한다. 사실 어떠한 문제를 해결하기 위해 사이드 프로젝트를 진행하고, 이에 즐거움을 느끼기 시작한 것은 불과 1년 정도 밖에 되지 않았다. 그 전에는 사이드 프로젝트는 불과 취업에 대한 수단으로 작용했고, 취업에 대한 불확실함이 있을 때마다 사이드 프로젝트에 대한 나의 관심도 .. 2024. 10. 28. Remix에서 서버 Action 상태 값에 따른 로딩 체크하기 기존에는 Tanstack Query의 isLoading과 같은 로딩 상태 값을 통해 서버 데이터를 패칭 하는 과정에 대한 부분을 관리하곤 했었다. 하지만 Remix의 경우 초기 데이터를 Loader 함수를 통해 불러오거나, 추후 변경된 값에 대한 데이터를 Action 함수를 통해 불러오게 되는데 이때 두 함수에 대해 로딩 상태를 알 수 있는 방법이 있는지 궁금했다. 서버를 통해 나오는 값이기 때문에, React의 useState를 통한 직접적인 로딩 상태관리도 쉽지 않았다. 이때 사용할 수 있는 Remix 훅이 존재한다. 리믹스에서는 useFetcher이라는 훅을 제공한다.useFetcher을 통해 Form 태그를 관리한다면 fetcher.Form을 통해 폼 요청이 발생하고, 이때 fetcher.stat.. 2024. 10. 27. Remix의 v1, v2 각각 다른 Nested Route 비교하기 SPA로 구성된 프로젝트를 SSR 프레임워크 중 하나인 Remix 공부를 진행하다가 Nested Route 방식을 통해 중첩된 구조의 페이지를 구현을 하려고 했습니다. 폴더를 만들고 Nested 한 구조를 만들고자 관련 폴더들을 생성하고 파일을 생성하여 개발을 진행하고 있는데, 원하는 방식대로 Nested 한 구조의 라우트로 연결되는 것이 아닌 404 페이지로 이동이 되는 문제를 확인하였습니다. 이때 시도하고 있는 방식이 Remix의 V1 라우팅 방식이라는 것을 공식 문서를 통해 확인을 하게 되었고, V2와 어떤 라우팅 방식의 차이를 가지고 있는지 비교하는 포스팅을 하려고 합니다.Remix의 Future 플래그Remix에서는 초기 V1을 만들때 V2를 2023년에 개발을 진행하고 릴리즈를 진행했던 적이 .. 2024. 10. 20. HTML에 meta 속성 중 http-equiv은 무엇을 의미할까요? 최근 Remix를 학습하면서, 그리고 레이어 서비스에서 동적 오픈그래프 태그를 대응하면서, HTML의 메타 태그에 대해 조금씩 알아보는 시간을 가졌다. 보통 많이 사용하는 title, viewport 등 많이 사용하는 요소들만 확인을 하다보니 익숙치 않는 몇몇 이름들이 보였는데, 그 중 http-equiv의 refresh 속성에 대해 알아보면서 http-equiv 속성에는 무엇들이 있는지 다루어보려고 합니다. http-equiv 란?먼저, HTML의 meta 태그는 문서의 부가적인 정보를 제공하는 태그입니다.meta 태그의 http-equiv 속성은 HTTP 헤더에 정보 또는 값을 제공하는 content 속성입니다.주로 사용하는 용도는 HTML 문서에서 사용할 문서의 종류나 페이지 이동(새로 고침) 등에.. 2024. 10. 19. 이전 1 2 3 4 ··· 23 다음
