전체 아티클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. 오래된 브라우저에서 자바스크립트가 지원을 안해요, 폴리필(Polyfill) 예전 에디터 개발을 진행하면서 오래된 구형 브라우저를 지원해야했던 적이 있었습니다. 최신 자바스크립트 문법은 모던 브라우저에서는 정상적으로 동작을 하지만, 동일한 코드로 동일한 동작을 구현함에 있어서 오래된 버전의 브라우저에서는 현재 자바스크립트가 사용하고 있는 객체가 undefined으로 나오기도 합니다. 예를 들어 아래와 같은 코드는 최신 브라우저에서 잘 동작하지만 오래된 브라우저에서는 실패합니다. 그 이유는 객체나 메서드에 대한 구현이 없기 때문입니다.[1, 2, 3].at(-1);Promise.resolve(1);new Set (1, 2, 3); 이러한 문제를 해결하기 위해서는 오래된 브라우저에서 존재하지 않는 기능에 대해 개발자가 관여를 해야하는데, 이때 이를 해결하기 위해 사용할 수 있는 스크.. 2024. 10. 11. 브라우저 렌더링 파이프라인 브라우저가 웹 페이지를 화면에 표시하기 위해 거치는 과정을 브라우저 렌더링 파이프라인이라고 합니다.이 과정은 크게 5가지로 분류가 됩니다.1. DOM 트리 생성브라우저가 HTML 파일을 받으면, 이 파일을 바이트 단위로 읽기 시작합니다.브라우저의 HTML 파서는 이 바이트들을 문자로 변환하고, 이 문자들을 다시 HTML 토큰으로 변환합니다.이 HTML 토큰들은 각각의 태그와 그 안에 포함된 텍스트, 속성 등을 의미합니다. HTML 토큰이 생성되면 브라우저는 이를 기반으로 DOM 트리를 생성합니다 2. CSSOM 트리동시에 브라우저는 CSS 파일도 파싱을 진행합니다. CSS 파일 역시 바이트로 전송되므로, 브라우저는 이를 문자로 변환한 뒤 CSS 규칙으로 나눕니다. 각 CSS 규칙은 선택자인 셀렉터와, 선.. 2024. 10. 4. CKEditor에서 커스텀 버튼 및 기능 추가하는 방법 목적· 배경· 커스텀 버튼 및 기능 추가하기배경본래 에디터 프로덕트를 개발을 했던 적은 있지만, 파일 업로드를 초기부터 개발을 한 적은 없기 때문에 기록을 위해 포스팅을 진행합니다. 백오피스 개발을 진행하던 도중 CKEditor에서 본문 파일 업로드 기능을 만들어야했습니다. CKEditor에서는 쉽게 파일 업로드 기능을 구현하기 위해서는 프리미엄 플랜을 사용해야하는데, 굳이 프리미엄을 사용하지 않고 그 외에 기능들은 자체 기능으로 구현이 되어있었기 때문에 파일 업로드 기능 또한 직접 구현을 해야했습니다. 이때 프리미엄 플랜을 사용하지 않고 구현을 할 수도 있는데, 이를 위해 커스텀 플러그인과 버튼을 구성하여 에디터에 추가하는 과정을 진행해야합니다. CKEditor에서 제시하는 업로드에 대한 방식은 아래와.. 2024. 9. 23. 이전 1 2 3 4 ··· 15 다음
