앞에서 OOM으로 인해 페이지가 새로고침 된다는 현상을 해결하는 중이었다고 했다. 하지만 힙 메모리의 사용량이 아직 해결되지 않아서 이어서 해결해야 했다. [react, html] DOM 조작으로 인한 메모리 문제 해결 해결 과정 크롬의 메모리 탭에서는 3가지의

페이지가 새로고침된다는 오류가 접수되서 메모리 최적화를 진행했다.

creatie

배경으로 깔려있는 이미지의 위치를 드래그해서 이동할 수 있어야 한다.두 요소가 겹쳐져 있어 배경 이미지는 클릭 이벤트가 발생할 수 없다. 하지만 이미지 위치를 조정하기 위해선 이미지에 드래그 이벤트를 발생시켜야 한다.최상위 컨테이너 요소에 마우스 클릭 이벤트가 발생하면

카카오맵을 사용하는 부분에서 메모리가 터지는 에러를 발견했다. 기존 코드를 살펴보니 useEffect 내부에 카카오맵 관련 객체를 생성하는 코드가 모두 함께 있었고 의존성 배열에 값을 추가해 사용자 입력값이 바뀌면 useEffect가 재실행 되도록 작성되어 있었다. 언

나는 크게 서비스 기획도 ui/ux 디자인도 공부해 본 적이 없다. (과거에 옥외광고물 디자인을 2~3년 했었고, 디자인을 조금 좋아한다.)개발을 해야 하는데 기획이 없으면 뭘 만들어야 할지 모르겠고, 디자인을 해야 하는데 뭐부터 시작할지 정리가 안돼서 와이어프레임을

할건 많은데 한 번 시작하면 끊을 수 없는 숏폼... 시작하면 3시간 순삭되는 숏폼 퇴치를 위한 어플을 만들어 보자. 이 어플의 시작은 지극히 나의 개인적인 경험에서 시작되었다. 숏폼에 빠져 누워있었다. 전화가 왔다. 전화를 마쳤다. 할 일을 하러갔다. 이런 경험

분명 오픈그래프를 설정해뒀는데 인스타그램에서 링크 공유 시 미리 보기가 보이지 않는다는 문의를 받았다.카카오톡에 공유할 때는 잘 된다. 근데 인스타그램에서 공유하면 주소만 띡 하고 보내짐...카카오톡 링크 공유 (카카오로 공유하기 X, 링크 복붙)인스타그램 링크 공유그

getStaticProps를 사용해 새로운 페이지를 구현하고 있었다. 그런데 값이 props로 넘어오지 않았다. 다른 곳에서 사용하는 코드와 동일한 방법인데...... 왜........ 처음엔 값이 안 넘어오는 줄 알았지만 터미널에 콘솔조차 찍히지 않길래 not wor

해결법은 무척 간단하다. 미들웨어에 public디렉토리를 거치지 않도록 설정해 주면 된다.처음에 middleware를 내가 설정한 게 아니라 생각을 못 하고 next.js 관련된 이슈를 찾으려 했는데 나와 똑같은 문제를 올려둔 next-auth의 깃허브 이슈를 발견했다

폼 입력 페이지에서 사용자가 작성 중인 내용을 실수로 잃어버리는 것은 끔찍한 경험이다. 우리 프로젝트는 길면 1시간도 넘게 폼을 사용하기 때문에 더더욱 필요한 부분이었다.이런 상황을 방지하기 위해, 사용자가 입력하던 내용을 실수로 날려버리지 않도록 이탈 방지 기능을 구

UI 구현을 하다 보면 컴포넌트에 여백(margin)을 어떻게 적용해야 할지 고민이 될 때가 많았다. 특히 재사용 할 컴포넌트라면 사용하는 위치에 따라 여백이 달라져 수정을 하게되는 경험이 많아서 CSS를 작성할 때마다 고민이 되는 부분이었다.예를 들어 A 페이지에서

웹에서 디버깅을 하면 대부분 해결이 되어서 잘 쓰지 않았는데 모바일 환경이 중요한 서비스를 개발하다 보니 필요성이 느껴져 세팅을 해보았다.모바일 크롬에서 개발자 도구 사용하기연결 자체는 위 영상을 참고하면 된다. 연결하고 다른 서비스를 개발자 도구로 구경하는 것도 흥미

모바일 디자인 pc 디자인 패스트캠퍼스 100가지 시나리오로 학습하는 프론트엔드 강의 랜딩페이지에서 사용 중 ![](https://velog.velcdn.com/i

useEffect에서 처리를 했으나 useEffect는 렌더링 후 실행되기 때문에 페이지가 잠깐 나타났다 리다이렉트 되면서 사라지게된다. 이 때 깜빡임이 발생next.js 에서 제공하는 getServerSideProps(SSR) 함수 사용해서 서버 사이드에서 리다이렉트

첫 번째 글에서 경쟁력이 없어 보여 프로젝트를 엎기로 했다고 적었다. 그땐 그랬다.사실 팔리지 안 팔릴지는 시장에 내놓아봐야 알 수 있는 건데 그땐 자신이 없었나 보다. 서버를 만들고 있던 중이긴 했다. 그것도 중단됐었지만.첩첩산중인 느낌이었다. 자신이 없는데 할 일은

청첩장에 계좌번호를 복사하는 버튼이 있는데 해당 기능이 동작하지 않는 이슈가 있었다.안드로이드 카카오톡 인앱 브라우저에서만 발생하는 이슈였다.카카오톡 데브톡 사이트에도 해당 이슈가 언급되어있다.안드로이드 카톡 인앱브라우저에서 복사하기 버튼이 동작하지 않는 문제아래 참고

청첩장 고객님께 문의가 들어왔다. 일부 지인들의 핸드폰에서는 청첩장이 뜨지 않는다는 것이다. 그러면서 화면을 캡처해서 보여주셨는데 이런 문구가 있었다. Next.js에서 띄운 메시지인데 클라이언트 측 오류로 브라우저 콘솔을 확인하라는 것이다. 하지만 모바일에서는 브라

문제 위 gif를 보면 새로고침해서 로딩중에 왼쪽 위에 나타나는 버튼이 있다. 이는 아래쪽에 있는 파란색 챗봇 버튼이다. 아주아주 UX적으로 마음에 안드니까 수정해야한다. 이유 새로고침하면 저렇게 나타나는 이유는 SSR을 사용하고 있기 때문이다. next.js는

탭스페이스 사이트는 vercel에서 배포했다. 굉장히 배포하기 쉽게 되어있었고 ci/cd까지 기본으로 제공해서 개발할 때 되게 편리했다. 이 글은 프로젝트 기간이 끝나고 버그를 수정하며 진행하던 개발 사이클에서 문제가 느껴져 개선한 이야기이다. 문제 이번 프로젝트