뚱이의 이모저모 세상 알기 & 개발 일기 😼 뚱이의 이모저모 세상 알기 & 개발 일기 😼

대부분 EC2나 Nginx에 대해서 DevOps 개발자, 혹은 팀장, 혹은 백엔드 개발자가 자주 건들이다보니 프론트엔드 개발자인 내 입장에서는 당장 더 알아야 할 필요는 없었다.그러나 얕은 지식이나마 정보를 전달할 수 있어야 하고, 특히 Nginx는 프론트엔드 개발자라면 어느 정도는 알아야한다는 생각에 공부를 해봤다. ✅ Nginx를 사용하는 이유왜 프론트엔드 개발자는 Nginx에 대해서 알아야할까?물론 vercel 같은 것으로 쉽게 배포할 수 있지만 현업에서는 주로 EC2를 이용하고 Proxy Server를 두어 개발하게 되는데 이 때 프론트엔드 배포에 관여하게 되는 것이 Nginx이기 때문이다. Nginx를 사용하게 되면 "정적 컨텐츠 배포", "SSL 처리", "로드 밸런싱", "장애 대응", "캐..

이번에 프로젝트 마이그레이션 작업을 준비하던 와중에 React가 19버전으로, 그리고 NextJS가 15버전으로 업데이트 되었다.기왕 버전이 업데이트 된 김에 우리 프로젝트도 최신의 버전으로 한 번 가져가보기로 했다.다행히  아직 메인 페이지와 라우팅 정도가 전부이다 보니 업데이트를 해도 크게 달라지는 점은 없었다. 1. Verseion 15로 업그레이드 우선 NextJS 홈페이지에 나와있는 방식대로 커맨드를 입력하여 업그레이드를 진행했다.그리고 package.json에서 확인해보니 dependencies 버전이 바뀐 것을 확인했다.그리고 다시 실행시켜보니 아직 만들어진게 없고 라우팅 정도만 해놓은지라 특별히 문제 될 만한 것은 없어보여서 다음 해야할 일을 진행했다. 2.  Markdown and MDX..

정해진 이미지 위에 코드를 이용해서 그래프를 만들고, 클릭하면 전체화면으로 볼 수 있도록 만들어야 했다.이 때 필요한 것이 clipping, 그리고 DOM node를 이미지화 시키는 것이다.  1. 이미지 위에 그래프 그리기웹 디자이너가 없는 상황에서 포토샵으로 이미지를 만들어주면 그 위에 코드로 그래프를 그려야하는 일이 생겼다.숫자나 문자 같은 경우에는 위치만 잡아서 올리면 되지만 그래프나 수분량을 나타내는 경우 수분량에 따라서 신체에 수분이 차오르는 정도를 표현해야했다.내가 생각한 방법은 모든 그래프를 꽉차 있는 상태의 이미지로 받아서 그 위에 사용자의 정보에 따라 계산을 해서 바탕색을 채우는 방식으로 진행했다. 2. 사용자의 수분량에 따라 신체 이미지에서 수분량 나타내기백오피스에서 내부적으로 상담을..

몇 달 째 인기 글 1위인 vim(neovim) editor를 사용하는 이유신기하게도 2년 전에 작성한 글인 vim(neovim) editor를 사용하는 이유 가 내가 쓴 글 중 가장 인기가 많다.그런 현상이 몇 주씩 아니 몇 달씩 이어나가고 있다. 22년도 8월, 즉 이맘 때  작성한 글인데 당시에는 vim에 대해서 회의적인 사람이 더 많았다."다른 사람들이 안 쓰는 이유가 있다", "왜 쉬운 길을 돌아가냐", "그런거 신경 쓸 시간에 공부나 더해라"... 등등...그런데 뭐 때문에 바뀐건지 모르겠지만 요즘은 간간히 vim 사용법 좀 알려달라고 연락오는 경우가 있다. 그래서 2년이 지난 현재의 상황에서 vim 사용에 대한 글을 적어본다.  packer에서 lazy로 이동...!나는 여전히 neovim..

현재 React, NextJS 모두 Docker를 이용해서 배포를 진행하고 있다.그런데 No space left on device 문제로 인해서 build에서부터 문제가 발생했다.  No space left on device : 디바이스에 남는 공간이 없음 만약 이런 에러 메시지를 발견했다면, 사용하지 않는 쓸모 없는 이미지 등이 얼마나 많은 용량을 차지하고 있는지 확인해봐야한다. 우선 아래 명령어를 사용해보자.docker system df -v docker system df라고 하면 현재 사용 중인 컨테이너, 볼륨, 이미지가 얼마나 많은 공간을 사용하고 있는지 확인할 수 있다.거기에 -v (vervose) 옵션을 추가해서 사용하지 않는 이미지와 컨테이너도 확인 가능하다.위 명령어를 통해서 Images ..

PWA를 만든 이유모바일로 인프런을 이용할 때 매번 [ 크롬 -> 탭을 누르기 -> 인프런 들어가기 -> 강의 누르기 ] 이런 경로를 타다보니 귀찮게 느껴졌는데 마침 인프런 앱이 있었다.그래서 앱을 다운 받아봤는데 마치 PWA 환경과 비슷하다고 생각이 되어서 찾아봤다.[ 개발자 환경 -> 애플리케이션 -> 매니페스트 ] 를 보면 짐작은 할 수 있는데 PWA를 사용할 수 있는 조건은 만족하고 있는 것 같았다.그래서 회사 프로젝트 중 일반 유저들이 사용하는 프로젝트 하나에 PWA를 추가하기로 생각했다. PWA의 장점PWA는 Progressive Wab App을 말한다.직접 네이티브로 개발하지 않아도 웹 개발 한 것을 기반으로 앱을 만들 수 있다는 장점을 가지고 있는데 주요 사용 기업으로는 "스타벅스", "트..

NextJS를 처음 도입해서 프로젝트를 하고 있다.대부분 React만 했었고, NextJS는 React와 거의 같다라고 들어서 큰 문제 없이 사용할 수 있을지 알았는데 생각보다 CSR, SSR을 맞춰서 사용해야하다보니 고민을 해야하는 부분이 많았다. 오늘은 프로젝트 중 만난 Warning 중 하나인 Props must be serializable for components in "use client" file.... 의 해결에 대해서 알아보려고 한다.  배경어떤 경우 문제가 나타났는지 살펴보자면.../////////////////////////////////////////////////////////////// 부모 컴포넌트/////////////////////////////////////////////..

프론트엔드 개발을 하면서 가장 신경이 쓰이는 부분은 아무래도 상태관리일 것이다.그 중요도를 아는 만큼 redux, zustand, recoil, mobX, jotai 등 다양한 전역 상태관리 툴이 라이브러리로 제공되어지고 있고, 리액트 자체에서도 context API와 같은 훅을 제공해주기도 한다. 상태 관리라는 말은 애플리케이션의 상태(Data)를 효율적으로 관리하는 것을 말한다.UI는 사용자의 interaction에 따라서 동적으로 변해야 하고, 유저의 입력 값, 서버와의 통신 등 다양한 상태를 관리하게 되는데, 적절한 상태 관리 전략을 고려하지 않으면 대규모 애플리케이션의 개발 및 유지보수가 매우 어려워지므로 상태를 효율적으로 관리할 필요성이 있는 것이다.  Local state management..