썸네일 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를 추천해줘서 했다고하더라... 대체 검색을 어떻게 한건지 매우 의문스럽다.아무튼..
썸네일 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..
[React] 우린 왜 state, function, effect 순으로 작성했는가 비개발자가 급하게 react를 배워서 만든 프로젝트를 보면, 부트캠프, 국비, 전공자가 배운 보편적인 방식에 벗어난 경우가 생각보다 꽤 많습니다. 하나의 페이지 컴포넌트 안에 2천줄이 넘어가기도 하고, 하드 코딩된 로직도 많으며, 급하게 기능을 추가한 경우도 꽤 있기에 로직 순서가 꼬여있기도 합니다.제가 마주한 상황은 CRA 환경이었으며 eslint가 설정되어있지 않은 상태였습니다. 그렇다보니 state문, 글로벌 변수 선언, 함수 선언, effect문이 일정하게 모여서 작성되지 않고 여기저기 파편화가 되어있는 상태였습니다. 기능구현 입장에서 봤을 땐 크게 문제가 안될 수도 있습니다. 어쨌든 선언문이 호출보다 앞에 작성되었으니까요.const PageComponent = () => { const [a..
Jenkins와 Docker를 이용한 Next.js 프로젝트 배포 어느 정도 개발 짬바가 쌓이면(그래봤자 3년인데 ㅎㅋ) 처음부터 내가 만들고 배포를 하는 과정은 생각보다 쉽습니다. 가장 어려운 건 이미 모든 게 구축된 상황에서 내가 중간에 투입돼서 추가 개발할 때, 레거시 코드를 개선해야 할 때, 기존 프로세스를 그대로 유지하고 무언가를 해야 할 때 등등.... 내가 중간에 하게 되었을 때가 가장 힘들고 어렵습니다.특히나 아직 주니어이기 때문에 제가 잘 모르는 분야인데, 심지어 내가 알고 있는 3~4가지 방법이 안된다면 정말 멘붕입니다. 바로 이번 배포 과정이 그랬습니다. 저는 지금까지 제 개인 프로젝트를 배포한 경험만 있었고, 늘 해당 원격 서버에 프로젝트를 clone해서 pm2로 프로젝트를 무중단 상태로 만들었습니다. 거기에 최근은 github actions를 이..
앵귤러 angular 핫 리로드, 빌드 시간 개선 (HMR) 프로젝트 스펙angular : v9.1node : v16.17프로젝트 번들 크기 : 335GB 예상 앵귤러가 느린 이유?양방향 데이터 바인딩과 변경 감지 매커니즘을 사용하는데 이는 특히 대규모 애플리케이션에서는 성능 오버헤드가 될 가능성이 매우 큼변경이 감지되면 모든 구성 요소를 확인하기 때문에 비효율적꼭 앵귤러 탓만이 아니라 프로젝트 규모가 너무 큰게 1순위일수도 있음오래된 버전 9라는 부분도 무시 못함 시도해본 것들angular.json에 "aot" true로 변경효과 없었음package.json 시작 명령어에 --source-map=false 추가해당 명령어는 브라우저가 번들된 자바스크립트 코드를 원래의 소스 코드(TypeScript)와 연결해 디버깅을 쉽게 해준다이걸 false할 경우 브라우저에서..
useCallback의 오남용 그동안 React 내에서 함수, 또는 값을 의미하는 로직을 쓴다고 하면 useMemo, useCallback hook을 쓰는게 습관처럼 되었습니다그러나 이번에 FSD 아키텍처로 리팩토링 해보면서 props로 넘겨야하는 값들이 많아졌습니다export async function fetchData( menuType: string | undefined, reviews: IReview[] | null, mapData: IMapData | undefined, cafeDataRef: { current: ISearchData[]; }, setMarkers: React.Dispatch>, clusterer: IClusterer | undefined, navigate: NavigateFunction, ..
이벤트 리스너(event listener)를 제거 해야하는 이유 React 개발을 하다 보면 useEffect문 안에 작성한 이벤트 리스너를 제거해줘야 하는 경우가 있습니다 useEffect(() => { const handleBeforeUnload = () => { console.log("액션") }; // 이벤트 리스너 등록 window.addEventListener("beforeunload", handleBeforeUnload); // 컴포넌트 언마운트 시 이벤트 리스너 제거 return () => { window.removeEventListener("beforeunload", handleBeforeUnload); }; }, []);이런 걸 클린업이라고 하고, 메모리 누수 방지라는 개념은 알고 있었습니다..
라이브러리 브랜드 그룹 | Hi, Kyung-a log

티스토리툴바