flex:1 은 필요에 따라 하는 듯, 없어도 해결이 됨.display: -webkit-box 필수글자 말 줄임 처리(feat. 반응형)

구름 커밋겉포장지만 꾸미는 것이 다가 아니다.(FSD, Next.js 등 화려하기만 한 이력서 X)조타이를 사용한다 → 왜? 타고가며 근원 적인 질문에 답해나가기나보다 압도적으로 잘하는 코드를 봐야 배울 수 있다꾸준히 양질(내 실력보다 약간 어려운)의 지식 얻기약간 어

서비스 기능 중 DOM을 이미지로 다운받게하는 기능이 있었다.해당 기능을 배포하고 나서 이미지 다운로드가 되지 않는다는 문의가 하루 평균 3건 이상은 들어왔다. 또한 위 문의와 함께 사파리에서 다운로드 받은 이미지 파일을 못 찾겠다는 문의도 비슷하게 들어왔다.개수로 보

서비스에 HTML로 구현된 컴포넌트를 이미지로 다운로드할 수 있는 기능이 있다. 기존 코드는 html2canvas 라이브러리를 사용해 구현했었다. 그런데 최근 디자인 타입을 추가하며 기능을 테스트했더니 정상적으로 동작하지 않았다.🔥 문제 html2canvas 기존에 html2canvas 라이브러리를 선택했던 이유는 다음과 같다. 많이 언급되는 라이브러...

앞에서 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) 함수 사용해서 서버 사이드에서 리다이렉트

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