분류 전체보기

tailwind 레이어가 뭔데? postcss.config 는 뭐지?

tailwind 빌드 시점에 HTML 파일에서 tailwind css 클래스를 찾아서 이를 바탕으로 ccs 정적 파일을 구성합니다. 브라우저 렌더링 과정에 직접 개입하지 않으므로, 런타임에 비용이 들지 않습니다. 전통적인 인라인 스타일과의 차이가 있다면, 미디어 쿼리를 사용할 수가 있게 되고 사전 정의된 디자인 시스템에서 스타일을 선택할 수 있다는 것, 마우스오버, 포커스 등의 상태에도 대응 가능하다는 점입니다. 숫자로 보기: Atomic CSS를 사용한 1년 반 - John Polacek 아니요, 유틸리티 클래스는 인라인 스타일과 동일하지 않습니다( Algolia의 Sarah Dayan 작성). GitHub의 유틸리티 클래스 사용에 대한 Diana Mounter의 팟캐스트 인터뷰 레이어 @tailwin..

Next.js 의 ServerSide 에서 Apollo Client Cache 데이터가 모든 사용자 간에 공유되는 이슈

마이페이지에 다른 사람의 정보가 보이는 문제가 발생했습니다!!! 회사에서 개발 중인 사이트의 마이페이지는 사용자의 정보를 Next.js getServerSideProps 에서 Apollo Client Query 로 가져온 다음에 캐시 데이터를 클라이언트 Apollo Client 인스턴스의 캐시와 병합시키고, 그 캐시 데이터를 클라이언트 단에서 뽑아서 화면에 보여주는 방식으로 개발 했었는데요. 이것은 rehydreate 를 하는 여러 방법 중에 보편적으로 알려진 방식입니다. 대부분 Next.js + Apollo 궁시렁 검색하면 이렇게 나올겁니다. ClientSide 에서 useQuery 사용시 _app.tsx 에서 pageProps 를 useApollo hook에 전달 useApollo 에서 initia..

npm/yarn 모든 패키지 종속성에 대한 버전 정보를 나열

패키지 버전 관리가 늘 어려움에 있어서 찾아보니, 명령어로 손쉽게 패키지 버전 확인이 가능하더군요. yarn outdated 명령어 Color 빨간색 = 주요 업그레이드(및 모든 주요 버전 0 ) 청록색 = 마이너 업그레이드 녹색 = 패치 업그레이드 Version Current : 프로젝트에 현재 설치된 버전 Wanted : package.json에 지정한 패키지의 버전에서 호환성을 보장하는 버전을 의미합니다. yarn upgrade를 통해 변경 되는 버전을 말합니다. Latest : 패키지의 현재의 최신 버전입니다. yarn outdated 명령어는 yarn v1 명령어고, 모던에서는 yarn upgrade-interactive 명령어라고 합니다. 참고로 yarn upgrade-interactive 명..

리액트 프론트엔드 개발자 입장에서 프로젝트 단계별로 일어나는 일 정리해보기

리액트 프론트엔드 개발자 입장에서 프로젝트 단계별로 일어나는 일 정리해보았습니다. 지난 2년 동안 프론트 개발해보면서 겪으며 경험해본 것들을 정리한 것이겠네요. 프로젝트 시작단계 프로젝트에 무슨 기술을 사용할 지 정하게 됩니다. 이미 서비스중인 프로젝트에 사용하던 익숙한 기술을 그대로 가져와서 적용하는 게 가장 빠르고 쉬운 길입니다. 그러나 신기술을 도입하기에 이 단계보다 더 쉽고 간단한 단계는 없습니다. 또한 기존에 사용하던 기술에서 느꼈던 불편함을 어쩌면 신 기술 도입으로 개선할 수도 있습니다. 이전 프로젝트에서 사용하던 기술에서 무엇이 불편했는지 정리하고 신기술 탐색 및 기존 불편함 점을 해결할 수 있을지 검토해야 합니다. 예를 들면, 기존 CRA 프로젝트에서 서버사이드 기능이 많이 필요해서 별도 ..

Next.js 서버사이드/클라이언트 사이드 분산추적/모니터링 툴 elastic-node-apm, elastic-rum 설치 이슈와 해결방법

elastic-node-apm 이란 무엇입니까? Elastic APM(애플리케이션 성능 모니터링)은 Elasticsearch, Kibana 및 Logstash를 지원하는 회사인 Elastic에서 제공하는 도구입니다. Elastic APM은 개발자가 애플리케이션 성능을 실시간으로 모니터링하고 분석할 수 있도록 설계되었습니다. 이를 통해 애플리케이션의 다양한 구성 요소 성능을 추적하고, 병목 현상을 식별하고, 문제를 효율적으로 해결할 수 있습니다.특히 Node.js 애플리케이션에 맞게 조정된 Elastic APM의 일부를 나타냅니다. 트랜잭션 추적, 오류 캡처, 성능 지표 수집 등 Node.js 애플리케이션의 성능을 모니터링하기 위한 계측 및 도구를 제공합니다.  서버 사이드 모니터링을 위해 elastic-..

설치된 패키지가 많아져서 빌드 속도가 심각한 수준으로 느려진 경우pnpm 을 도입하라

pnpm이란 무엇입니까? PNPM은 "빠르고 디스크 공간 효율적인 패키지 관리자"를 의미합니다. 이는 npm 및 Yarn의 일부 제한 사항과 단점을 해결하도록 특별히 설계된 JavaScript 프로젝트를 위한 대체 패키지 관리자입니다. 기존 패키지 관리자와 달리 pnpm은 패키지 설치 및 저장에 독특한 접근 방식을 취합니다. 주요 특징 공간 효율성 : pnpm의 뛰어난 기능 중 하나는 디스크 공간을 효율적으로 사용한다는 것입니다. npm과 Yarn은 각 프로젝트에 대해 별도의 종속성 복사본을 만드는 반면, pnpm은 전역 저장소를 사용하여 각 패키지 버전의 복사본 하나만 저장합니다. 전역 저장소에서 프로젝트의 node_modules 폴더로 하드링크를 만듭니다. 하드링크는 디스크상 원본 파일이 있는 위치를..

22년, 23년 가장 많은 애정을 쏟았던 곳, 24년은?

2022년 : 개발 확실히 22년도에는 개발에 가장 많은 애정을 쏟았던 것 같습니다. 퇴근 하고도, 주말에도 쉬는 날 가릴 것 없이 닥치는대로 공부하고 코딩했었는데요. 확실히 그렇게 많은 시간을 들이면서 노력했기 때문에 실력이 가파르게 상승했음을 정말 많이 느낍니다. 특히 언제 느끼냐면요. 나 이정도면 개발 쫌 잘하는것 같은데? 뭐든 만들 수 있을 것 같아! 처럼 오만한 자만심에 빠졌을때 작성했었던 코드를 지금 와서 보면, 정말 가관이더군요... 고쳐야 할 것들이 산더미 처럼 보이면서, 아 내가 그동안 많이 성장했구나 느낍니다. 2023년 상반기 : 취미 23년도에는 취미생활에 많은 애정을 쏟았습니다. 이전 블로그 게시글 몇 개만 보아도 모임, 자전거, 독서와 같은 좀 생산적이고 건강한 취미를 가지려고 ..

지난 6개월의 회고. Next.js, graphql, tailwind.css 개발 경험

지난 6개월 회고 정말 오랜만에 블로그 글을 쓰게 되었습니다... 2023년 올해 초 부터 회사에서 시작하였던 신규 서비스 준비에 매우 정신없이 보냈습니다. 한 마디로 영혼을 갈아 넣었죠.. 8월에 MVP 출시 목표가 9월, 10월, 11월 까지 미뤄지고, 결국 서비스 출시는 12월 까지 미뤄지게 되었습니다. 지금은 본서비스를 위한 프리런칭 버전의 서비스를 출시를 하고, 협약할 기관들을 컨텍 중이랍니다. 이런거 보면 사업이라는게 참 쉽지 않다고 느껴지네요. 기획이라는 것은 곧 사람 생각이니, 다음날 아침이면 바뀌고, 뒤돌아서면 바뀌고, 눈깜빡이면 바뀌는 것 같습니다. 프론트엔드 개발자로 이번 서비스를 하면서 사용해본 것들, 느낀점 한번 시원하게 털어놔 보겠습니다. Tailwind.css css 파일에 스..

Next.js + React Native 크로스 플랫폼 개발을 위한 Solito, NativeWind 소개

최근에 회사에서 Next.js 로 개발한 웹 서비스를 앱으로도 서비스 해야할 수도 있는 가능성이 생겼습니다. 간단하게는 React Native 껍데기에 Webview 로 웹 서비스를 띄울 생각이었으나, 찾아보니 이쪽 분야가 예전보다 꽤 많이 발전하고 있는 것 같아서 시험삼아 찍먹 해볼까? 그런 생각이 들 정도더군요. 예전에 프로젝트를 하면서 모노레포로 웹/앱 간 코드를 공유하여 크로스 플랫폼을 개발할 수 있으면 참 좋겠다 싶었는데 최근에는 그런 방식으로 개발을 할 수 있게 생태계가 정말 많이 성장 했습니다. 제 경험상 웹 개발에서 ReactNative 개발을 찍먹 할때 어려웠던 부분은 라우팅/내비게이션, View 등을 새로 배워야 한다는 것과 css 스타일 적용 방식이 달라서 그 부분을 다시 배워야 하고..

리액트 컴포넌트를 pdf 파일로 저장하기 (html2canvas, jspdf)

react-pdf 라이브러리를 사용해서 전용컴포넌트로 한땀한땀 쌓아올려서 pdf 파일을 만들어도 되지만 그건 너무나 귀찮습니다. 저희는 웹페이지의 화면을 캡쳐해서 pdf 파일로 다운로드 받는 편한 방법을 사용할 것입니다. 아래의 두 패키지를 설치합니다. yarn add html2canvas jspdf html2canvas 는 리액트 컴포넌트를 이미지로 변환해주는 라이브러리고 jspdf는 그 이미지를 pdf파일로 만들어주는 라이브러리 입니다. 이슈들 그런데 사용해보면 바로 이슈가 터져 나옵니다. 이슈 해결하면서 해결된 코드도 같이 보겠습니다. 이슈1 : 페이지 높이가 너무 높아서 (내용이 너무 길어서) pdf 파일안에 다 담기지 않고 잘리는 이슈 처음에 인터넷에서 흔한 코드 긁어와서 pdf파일의 widt..