TanStack Query를 Next.js 캐싱 전략으로 바꾸기 현재 [로그트립 1.1] 앱에서 캐싱 전략으로 TanStack Query를 사용하고 있습니다최초에는 React Native로 구성된 앱이었으나 설계를 바꾸면서React Native + Next.js 구조의 하이브리드 앱으로 바뀐 상태입니다React Native는 CSR 형태에 가깝습니다 (정확히는 좀 다름)아무튼 SSR이 안되는걸로 알고 있는데 레딧에서 어떤 글을 발견... [문서] Reddit의 reactnative 커뮤니티reactnative 커뮤니티에서 이 게시물을 비롯한 다양한 콘텐츠를 살펴보세요www.reddit.com(그래서 가능하다는 문서 어딨는건데.. 찾질 못하겠음 React Native web을 말하는건가 싶음...)아무튼 CSR 형태의 React Native에서 데이터 캐싱에 대한 고민.. React Native + Next.js (WebView)간에 Supabase SSR Cookie 설정 1. 이 전 코드이전에는 클라이언트용만 사용하고 있었다React Native에서는 아래와 같이 토큰을 웹뷰측에 넘겨주고 있었다export default function HomeScreen() { const webviewRef = useRef(null); const params = useLocalSearchParams(); const { accessToken, refreshToken } = params; const injectSession = () => { if (webviewRef.current && accessToken && refreshToken) { const message = JSON.stringify({ type: "SESSION", accessTo.. 하이브리드 앱 구축 및 출시 회고 | React Native + Next.js + Supabase 조합 현재 출시를 목표로 만든 [로그트립] 앱이 있습니다출시는 되었으나 꾸준히 리팩토링 과정을 거치고 있는 중인데요일단 출시가 목표였기에 무작정 만들다보니 설계 부분에서 놓친것도 많고 고군분투한 과정도 참 많습니다 (앱 개발 자체도 처음) 1. 설계 구조에 따른 시행착오하이브리드 앱 구조로 변경최초 설계는 오로지 React Native로만 개발해서 출시까지 했으나이전부터 프론트엔드 JD에 꽤 보이던 하이브리드 앱으로 React Native 껍떼기에 내부 대부분의 기능을 WebView로 구성한 경험이 있는자를 자격조건 또는 우대사항으로 넣는곳이 보였던 생각이 나더랍니다그래서 저도 공부 겸 하이브리드 앱으로 변경하게 됩니다프로젝트를 Monorepo 구조로 변경또한, 핫했던 조건 중에도 monorepo 설계 경험도.. jest, testing-library를 이용한 TDD 찍먹 해보기 저는 4~5년동안 개발하면서 단 한번도 테스트케이스를 작성한적이 없습니다. 실제로 TDD를 실무에 적용하기란 현실에선 벅찰 수도 있다는 말들이 꽤 많은것 같습니다. 실제로 저도 TDD가 되어있는 회사에 속해본적도 없었고, 상황도 많이 달랐습니다. SI는 정말 오로지 납품, 마감기한이 1순위니까 그 분위기에 테스트케이스를 한다고하면 현실을 살라고... 한 소리 들을수도 있었달까(?) 그럼에도 불구하고 시도할 수 있는 환경이었다면 한번쯤 해보는것도 나쁘지 않았을텐데 하는 아쉬움이 크더라고요물론 혼자서도 할 수 있지만, 대규모 프로젝트 또는 5인 이상 같은 프론트엔드 개발자가 있는 팀에서 시도해봤을때 더 크게 빛을 발하는 부분이지 않나라는 안일한 생각을 가지며... 단 한번도 시도해봐야지^^란 생각조차 안했습.. plop.js를 이용한 코드 생성 자동화 CLI 구축 백오피스 같은 프로젝트는 만들다보면 API 호출 주소만 다른 같은 레이아웃, 코드 구조가 반복됩니다. 사실상 폴더 자체 복붙해서 파일명, 컴포넌트명, API 주소만 바꾸면 되는 격이죠. 지금까지 폴더를 복붙했었지만 어느순간부터 짜친다라는 느낌이 들더라고요. 분명 자동화하는 방법이 있을텐데? 라는 생각이 들면서 "맞다, CLI 툴을 이용하면 되겠구나!" 싶어서 바로 실행해봤습니다.다양한 CLI 툴이 있는데, 우리는 정말 간단하게 일관성 있는 코드로 page, apis, consts만 생성하면 되는거라서 plop.js를 쓰게되었습니다. plop.jshttps://plopjs.com/ Plop: Consistency Made SimpleA little tool that saves you time and he.. 다국어 라이브러리 비교 | react-i18next, react-intl, Lingui, next-translate 새롭게 리뉴얼 하려는 프로젝트가 다국어로 되어있는 서비스이다. 사실 다국어래봤자 이젠 한국어와 영어만 남아있는데... 아무튼 글로벌 서비스다 이 말이다! (?)기존 서비스는 .NET으로 되어있기에 React 기반으로 옮기면서 SSR을 할지, 다국어 라이브러리는 어떤걸 쓸지 고민도 되고 다국어 서비스는 처음이라 그 내용들을 기록 해보려고 한다 서비스 스펙 (?)영어, 한국어 지원실시간성 필요 없음동적 콘텐츠 비율이 높으나 계정 자체에 언어가 기본 설정 되어있기에 동적 콘텐츠가 곧 정적인 콘텐츠라고 볼 수 있음여러 해외 사람들이 와서 보는 B2C 형태인 서비스가 아닌 B2B이기에 본인이 쓴 글을 본인이 보는거고 관리자같은 경우에는 상대방에 맞춰 영어 또는 한국어로 작성하기에 굳이 상대방에게 서로 작성한 내용.. CRA 지원 종료. Vite로 마이그레이션 하기 https://react.dev/blog/2025/02/14/sunsetting-create-react-app Sunsetting Create React App – ReactThe library for web and native user interfacesreact.devCRA는 이미 오래전부터 비공식적으로 지원 종료되었다는 소문이 나있었다. 그러다가 드디어 2025년 2월 공식적으로 지원 종료한다는 글이 올라왔다. CRA의 마지막 릴리즈는 무려 3년 전이다. 3년 동안 단 한 번도 릴리즈 업데이트를 하지 않았는데, 그럼에도 불구하고 우리 팀에서 2024년 여름에 CRA로 개발을 시작했더랬다... 열심히 검색해봤더니 다들 CRA로 시작하래서 시작한 거라는데... 그땐 이미 Next.js로 시작하는 게 거.. CRA 절대경로로 변경하는 법 입사 하고 프로젝트를 딱 받았을때 경악했던게 비공식적으로 지원 종료했다는 소문이 난 CRA로 만들었다는 점 (2025년 2월에 공식저으로 지원 종료를 알림). 그리고 상대경로인 점과 폴더명에 한글을 썼다는 점, 폴더가 분리되지 않고 모~든 파일이 features에 있는다는 것이다.오래된 플젝이면 당연히 CRA일수도 있는거 아니냐? 할 수도 있는데 전혀 오래되지 않은, 무려 작년 여름(2024년 8월)에 시작한 프로젝트라는 것이다. CRA가 비공식적으로 지원 종료한거 아니냐라는 말이 나온건 2024년때보다 더 전부터 들었던것 같다. 근데도 굳이 CRA로 시작 했다는게 너무 충격적이고, 기가막힌건 나름 열심히 검색해봤더니 CRA를 추천해줘서 했다고하더라... 대체 검색을 어떻게 한건지 매우 의문스럽다.아무튼.. [회고] 기획 및 디자인을 하면서 느낀점 현회사에 입사한 지 대략 5개월이 지났다. 의도치 않게 현재 기획, 디자인, 프론트엔드 개발까지 총 3개의 업무를 맡아서 일을 하고 있다. 진짜 의도한 게 아니었으며... 사람은 자기가 뱉은 말을 따라가는 건가? 싶은 생각도 들었다.왜냐면 내가 2024년 회고에 위와 같은 말을 했기에... 면접때는 분명 이사님이 기획 업무를 하고 계신다고 했으나 사실은 팀장님이 하고 계신 거였고, 심지어 팀장님은 전문적으로 PM, 기획 업무를 해오신 분이 아닌 전산 업무 및 인프라를 하고 계셨던 분이기에 정말 경악스러울 정도의 산출물을 넘겨줬었다. 진짜 경악 그 자체이다. 분명 한글로 써져 있는데 이해하지 못할 수준이다. 근데 또 바쁘다는 이유로 업무를 넘겨주지 않으니 내가 다음 기능 개발을 못하는 상태로 붕 떠버리는 .. onKeyDown, onChange를 사용할때 한글 조합 문제 input에 입력후 Enter를 눌렀을때 string 배열에 입력값을 push해서 보여지는 UI를 만들었다영어를 입력했을땐 문제가 없었으나, 한글을 입력하고 엔터를 누르면 끝 글자만 떨어져나와 2개씩 string이 생성되는 문제가 발생하게 되었다사실 늘 이런 컴포너는트는 mantine을 쓰든 뭘 쓰든 대부분 UI 라이브러리를 사용해서 가져다 쓰기만했었지 직접 만드는건 처음이게 이런 문제가 발생할 수 있다는걸 모르고 있었다그래서 keyUp으로 뭔갈 해야해야하나? 지연을 줘서 늦게 input을 리셋 시켜야하나? 고민하다가 chatGPT한테 물어보니 원인을 알 수 있었다 {values.map((v, idx) => ( {v} ))} ) => { .. [React] createPortal을 이용해서 Toast 컴포넌트 만들기 지금까지 Dialog, Toast, Snackbar 같은 걸 만들 때 아래와 같이 만들었다return ( /* HTML 내용 */ setModalOpen(false)} title={modalTitle} content={modalMessage} button={ } />)dialog를 띄우고 싶은 페이지 또는 UI 컴포넌트 내에서 일일히 import를 하는 형태였다그러다가 MUI의 snackbar를 걷어내고 내부적으로 컴포넌트를 만들어서 사용하려는데 Toast 컴포넌트를 일일이 위와 같이 import를 해서 써야 하나? 심지어 내부에 들어갈 text도 상황에 따라 매번 바꿔서 보여줄 건데 그거 하나 하자고 state를 또 일일이 만들어줘야 하나?라는 생각이 든 거다 .. Github actions OIDC로 배포 자동화하기 현재 회사의 프론트 배포 프로세스는 매우 고전스러운(?) 방식으로 진행되고 있었다. 바로! 로컬에서 build하고 build한 파일을 원격서버에 접속해서 복붙하고 재실행시키는 방식인데... 특이한건 윈도우 서버에다가 IIS란걸 쓰고 있었더랬다...이게 나 혼자 개발을 쭈우우욱 할거면 문제는 안되겠지, 조금 귀찮을뿐.. 그러나 회사 규모는 점점 커질것이고 같이 프론트 개발 할 사람이 들어올 것이다. 그럴땐 어떻게 해야할까? 만약 동시에 같은 build 폴더를 덮어씌우기 한다면? 코드가 통합되지 않은 상태라면? 여러모로 골치아픈 문제들이 생길 것 같아서 여유가 있을때, 서비스 규모가 작을때 배포 자동화 작업을 하려고 한다 나름 그래도 개발, 운영이 나누어져있는데 개발부터 배포 자동화를 셋팅해볼 것이다 조건g.. 이전 1 2 3 4 5 다음
