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

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

특히 프론트엔드 개발자로 일하다보면 "렌더링(Rendering)" 이라는 단어를 많이 사용하게 된다.렌더링이라는 것은 어떤 정보를 표현하는 것을 말하는데, 특히 웹 개발에서는 주로 데이터 처리를 통해 사용자에게 보여지는 특정 페이지를 생성하는 과정을 말한다. 개인적으로 프론트엔드 개발자 입장에서 아주 중요하다고 생각한다.아무리 성능 좋은 백엔드 컴퓨팅 기능을 갖추고, 좋은 인프라를 구축해놨다고 하더라도 결국 유저 눈에 보이지 않으면, 그리고 사용성이 떨어지게 된다면 다른 대안을 찾기 마련이기 때문이다.이렇게 중요한 렌더링이라는 것은 과거부터 많은 고민거리가 되었고, 그로 인해 다양한 경우에 맞는 패러다임의 적용이 필요했고, 그에 맞는 라이브러리나 프레임워크가 도입되기도 했다.특히 React, Angula..

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

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

주말을 이용해 팀 블로그를 만들 겸 해서 간단하게 만들어보다가 EntityMetadataNotFoundError가 발생했다. 문제 Post 요청에 의해서 postman에서 날린 email, username, password는 찍히는데 이 후 try catch 문에서 catch로 계속 빠지고 있었고, 그 이유가 EntityMetadataNotFoundError 였다.  해결TypeORM config를 작성해놓은 파일에서 찾지 못한다고 하는 것을 추가해주니 잘 작동했다. AS-ISreturn { ..., entities: [__dirname + '/../**/*.entity.{js,ts}']} TO-BEreturn { ..., entities: [__dirname + '/../**/*.entity.{js,t..

현재 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.... 의 해결에 대해서 알아보려고 한다.  배경어떤 경우 문제가 나타났는지 살펴보자면.../////////////////////////////////////////////////////////////// 부모 컴포넌트/////////////////////////////////////////////..