분류 전체보기

새 프로젝트에 대한 고민 Next.js v13 도입 할까 말까?

신규 프로젝트 준비 회사에서 신규 프로젝트를 앞두고 있습니다. 신규 프로젝트에는 서버 사이드 렌더링, GraphQL 등 한 번도 경험해보지 않은 새로운 기술을 도입하는 것으로 논의를 했는데요. 요즘 엄청나게 많은 공부량에 허덕이고 있습니다... 😅 기존에 사용하던 정적 사이트 생성(SSG) 이 아닌 서버 사이드 렌더링(SSR) 에 대한 스터디 그것을 지원하는 프론트엔드 프레임워크인 Next.js 에 대한 스터디 Next.js 의 최신 버전인 v13에 기본 탑재된 Turbopack 에 대한 스터디, 그리고 따라오는 번들러에 대한 조사, 비교하고 Turbopack 의 경쟁자인 Vite 에 대한 스터디, 테스트 진행을 했습니다. 자바스크립트 모듈 & 번들러 (CommonJS, AMD, ESModule, Web..

자바스크립트 모듈 & 번들러 (CommonJS, AMD, ESModule, Webpack, Rollup, Parcel, esbuild, swc, vite, turbopack)

모듈 시스템 최초의 모듈 시스템 최초에는 script 테그로 자바스크립트 파일을 삽입하면 브라우저에서 순서대로 로드 하는 방식 이었습니다. 문제점 모듈 간 스코프 구분이 되지 않습니다. 즉, foo 에 있는 변수명과 bar에 있는 변수명이 겹치면 잘못 동작하게 됩니다. 모듈 순서를 신경쓰면서 개발해야 합니다. 해결책 자바스크립트를 모듈화 하여 서로 간섭하지 않게 만들자 이에 따라 자바스크립트를 모듈화 하기 위한 새로운 기술 등장 했습니다. CommonJS module.exports = foo; // 모듈 export const foo = require("./foo"); // 모듈 import 특징 CommonJS 는 브라우저 외에도 사용가능한 범용적인 JS Module System 입니다. 즉, 브라우저..

Vite 아직 사용하지 마세요!!!

차세대 프론트엔드 Tool Vite Vite Next Generation Frontend Tooling vitejs.dev https://11001.tistory.com/211 CRA를 Vite로 마이그레이션 하기 차세대 프론트엔드 Tool Vite Vite Next Generation Frontend Tooling vitejs.dev 이 게시물은 기존에 CRA(Create-React-App) 로 구축된 프로젝트에서 vite로 마이그레이션 하는 사람들을 대상으로 한다. 글을 쓰는 현재 11001.tistory.com 대단한 도구라고 여기저기서 홍보하고 좋다고 띄워줘서 신나게 마이그레이션을 준비했었습니다. 그런데 실제로 사용해보니 개발 환경과 프로덕션 환경이 너무 달라서 뒷통수를 당했습니다. 😢 결론 부터..

CRA를 Vite로 마이그레이션 하기

차세대 프론트엔드 Tool Vite Vite Next Generation Frontend Tooling vitejs.dev 이 게시물은 기존에 CRA(Create-React-App) 로 구축된 프로젝트에서 vite로 마이그레이션 하는 사람들을 대상으로 한다. 글을 쓰는 현재 시점으로 vite 는 4 버전대 이다. CRA(Create-React-App) 대신에 왜 vite 를 써야 하는지는 아래의 테스트 결과로 대신 하겠다. 테스트 👨‍🔬 CRA vs vite 회사 내 프론트엔드 프로젝트를 로컬 환경에서 cra, vite로 각각 start, build 시도 CRA (현재) App Start Time : (대략 3.6초 ?) webpack 5.74.0 compiled successfully in 3593 m..

리액트에서 외부 링크 관리하기

리액트에서 외부 링크를 열어야 하는 경우 당연히 a 테그 만들어서 클릭했을때 열리게 하면 되는거 아니냐~ 라고 생각 하겠지만, 서비스 만들다 보면 엄청 많은 경우의 수가 발생한다. 일단 링크의 수가 수십 개가 넘어가면 관리가 안된다. 링크가 자주는 아니더라도 가끔 바뀌더라도 찾아서 변경하는게 여간 귀찮은 일이 아니다. 만약에 다른 서비스 안에 들어가는 웹뷰로 서비스를 한다면? 브라우저 창을 열 수 없다. Iframe 등을 이용해서 우리 서비스 내부에서 링크 내용을 띄워야 한다. 공개망 / 사설망 둘다 지원해야하는 서비스라면? 사설망에서는 브라우저를 열 수 없다. 미리 외부 링크의 문서 내용을 HTML 로 변환해두던가, 내부 서버를 통해 다운로드 받을 수 있게끔 해줘야 한다. 해결 방법 일단 흩어진 링크들..

리액트에서 마우스가 브라우저 창 밖에 있는지 감지하기

리액트에서 마우스가 브라우저 창 밖에 있는지 감지하고 싶다면 mouseenter, mouseleave 이벤트를 등록하여 hover 상태롤 확인하는 hook을 추가하면 간단하게 감지할 수 있다. 참고로 document.body 의 이벤트로 등록하여, html 의 body를 기준으로 마우스가 enter 인지 leave 인지로 판단해야 하는데 이것을 body가 아니라 현재 컴포넌트를 기준으로도 할 수는 있지만, 현재 컴포넌트가 자주 리렌더링이 되는 컴포넌트라면 예상했던 모습과 많이 다르게 동작할 수 있다. 계속 깜빡깜빡 거리는 식으로 동작할 수 있기 때문에, 어차피 창 전체를 기준으로 동작하는 기능이라면 body를 기준으로 하는게 편하다... // useHoverWindow.ts import { useEffe..

리액트 장치 유형 감지하기

react-device-detect 라이브러리를 사용하면 브라우저 유형 (크롬, 파이어폭스, 사파리, 오페라, IE, Edge) 장치 유형 (모바일, 테블릿, 스마트TV, 콘솔, 웨어러블, 임베디드, 모바일사파리, 아늗로이드, 윈도우폰, IOS) 등의 확인이 가능하다. 그러나 안되는 것도 있다. 테블릿에서 파이어폭스 브라우저를 사용하면 테블릿이 아닌 Desktop로 인식한다. 그래서 어쩔 수 없이 mobile-detect 라이브러리를 섞어 쓰던가 아니면 이 라이브러리로 교체해야 한다. 일단 md.ts 파일을 만든다. // md.ts const MobileDetect = require('mobile-detect') export const md = new MobileDetect(navigator.userAg..

2023년 새해, 코딩학원 탐방

2023년 ! 새해가 밝았습니다. 이제야 프론트엔드 2년차가 되었네요. 작년에는 2년 같은 1년을 살았으니 마음만큼은 3년차 입니다. 실력도 그 만큼이라고 자부합니다. 올해도 2년 같은 1년을 살면 단숨에 5년차 시니어 개발자가 되겠네요. 실제로 그렇게 될 겁니다. 저는 그렇게 된다고 굳게 믿고 있습니다. 올해는 운동과 일 그리고 사람 만나는것을 적절히 돌려가며 엄청난 시너지를 만들어보려 합니다 ! 그리고 여유가 된다면 계획들을 하나씩 진행해보고 싶네요. 우선은 전자책 부터 ..! 😂 책이 별겁니까? 이렇게 쓰는 일기를 모으면 그게 책이니까요 ?ㅋㅋ 코딩학원 탐방 얼마 전 코딩 학원에 다니고 있는 친구를 보고 왔습니다. 왠만한 회사 보다도 더 좋은 위치와 시설을 자랑하는 학원이었고 엄청난 수업료에 경악을..

React Query onError 가 동작하지 않는 이슈

https://stackoverflow.com/questions/73427408/react-query-onerror-not-executing-on-thrown-error React-query onError not executing on thrown Error Query: const { data: post, isError, error } = useQuery( ['fetch-post', params], () => fetchPost(params!.postId), { refetchOnMount: true, onError: (err) =>... stackoverflow.com 현재 위와 비슷한 상황에 고통받고 있습니다... API 요청시 Axios Intercepter 를 사용하는 Axios Instance 로 ..

2022.12.04 개발자 이야기 (원씽)

독서 어릴 때 부터 부모님은 항상 여유가 없이 바쁘셨고 그 어떤 선택도 대신 해주지 않으셨습니다. 저에게 인생은 늘 책보다는 몸으로 부딪히는 현실이었고 독서는 그저 바쁜 현실에서 여가시간을 보내는 수단으로 굳이 안해도 되는 것 일이거나 귀찮게 독후감을 써와야 하는 과제 정도로 여겼습니다. 그런데 요즘 책을 기반으로 한 모임에 나가서 사람들과 책의 주제에 대해 이런저런 이야기 해보며, 독서의 매력에 빠져들고 있습니다. 요즘은 책이 전통적인 데이터베이스의 형태로 데이터의 집합체로 느껴집니다. 나이가 어릴 때 처했던 곤란한 일들은 비교적 가벼운 수준이었으나, 나이가 들면 들 수록 처하게 되는 (결혼, 사업, 투자 등등...)일들은 감당할 수 없는 수준인 경우가 많더군요. 이제는 제 인생에 책의 도움이 필요할 ..