오늘은 Next JS에서 Client Data fetching 사용 시 마주할 수 있는 Anchoring 이슈에 대해 정리하려 합니다. Next JS docs에서 권장하고 있는 코드 스타일을 적용했을 때 생길 수 있는 이슈이기 때문에, 관련 이슈가 생겼을 때 저는 디버깅에 시간을 꽤나 썼습니다. 먼저 Next JS의 Data fetching에 대한 지식이 전무할 분들을 위해 개념부터 정리하고 이슈에 대한 해결 과정을 차례로 적어보겠습니다. Data fetching Next JS를 이용한 Data fetching에는 다음과 같은 방법을 사용할 수 있습니다. 자세한 내용은 공식 문서를 참조해주세요! getStaticProps / getServerSideProps : Server Side에서 미리 page h..

Sticky 스펙을 구현하는 방법 스펙에 필요한 조건을 하나씩 추가해가면서 어떻게 해결할 지를 고민해보자. css의 poistion: sticky; 를 이용하자. 우선 Sticky되어야 하는 Element가 최상단에 위치해있다면 쉽다. css를 이용하면 position: relative; 인 부모의 상단에 해당 Element가 sticky된다. .sticky{ position: sticky; top: 0; } https://codepen.io/bucketressi/pen/GROoeKE Sticky-1 ... codepen.io sticky container를 만들자. 이번에는 sticky header(첫번째 Sticky Element) 아래에 sticky sub-header가 위치해야 한다고 생각해보자...

Main Concepts 처음 React를 시작할 때 거의 이해 못하고 practice 정도만 참조했을 듯 싶어서 다시 읽어보았다. 개념을 이번에 명확히 했다거나 처음 들어본 것들을 정리해보았는데, Main concept에서도 꽤나 많았다. 이번 기회로 해당 정리 글을 주기적으로 보도록 해야겠다 😊 Introducing JSX React는 기존에 html, js 와 같이 기능 별로 문서를 나누던 데에서 한 컴포넌트 단위로 나누게 함으로써 js, html(jsx), css를 컴포넌트 단위로 다룰 수 있게 하였다. JSX의 내부의 변수들은 렌더 시점에 이미 문자열로 변경 되므로 XSS 공격을 피할 수 있다. Rendering Elements React로 만들어진 어플리케이션은 하나의 root DOM 노드를 ..

개발을 진행하면서 안드로이드 OS에서 네이버 앱을 사용할 때 (특정 안드로이드 버전 - 아마도 11 이상 에서만) flex 레이아웃이 깨지는 이슈가 발생하였다. css를 다방면으로 고쳐보면서 해결해보았는데, 원인은 'flex-shrink를 지원하지 않는 것'이었다. (caniuse) 반응형 웹을 구축할 경우 해당 사례를 피하기 위해 css 코드에 flex-shrink 사용을 지양하도록 하자.

Open Graph란? 어떤 웹페이지든 social graph의 일부분이 될 수 있도록 하는 프로토콜이다. Metadata og:title : url 공유 시 제목으로 들어가는 영역이다. (카카오톡 공유는 title만 공유된다.) og:type : object의 type이다. (ex_ video.movie, website) og:image : url 공유 시 나타나는 이미지이다. og:url : graph에서 id로 쓰이는 url이다. og:audio, og:video : audio, video 파일의 url이다. og:description: object에 관한 설명이다.카카오톡 공유에서는 표시되지 않고 슬랙 공유, 블로그에서는 description까지 표시된다. og:site_name : 방대한 웹사이..

문제 상황 next/link를 사용한 GNB의 mouseEnter event가 작동하지 않아서 메인 메뉴에 마우스를 움직여도 subMenu가 바뀌지 않는 이슈가 발생한다. 원인 GNB에서 사용하는 LinkContext의 SuperLink를 next/link로 처리했는데, next 12 version에서 mouseHover 이벤트가 제대로 작동하지 않는 문제가 있다. fix(Link): Do not ignore onMouseEnter prop with absolute href by ericmatthys · Pull Request #32012 · vercel/next.js Fixes #22733 Regardless of whether it's recommended that Link be used with e..

요약 css 내부의 font asset을 받아오는 path를 절대경로가 아닌 상대경로로 바꾸면 된다. 문제 css에 url로 정의해 둔 font asset이 개발모드(dev)에서는 잘 적용되다가 실서버(production)에서 반영되지 않는 이슈 실제 구현 /* style.css */ @font-face { font-family: spoqaSansNeo; font-weight: 700; src:url('/font/SpoqaHanSansNeo-Bold.ttf'); src: url('/font/SpoqaHanSansNeo-Bold.otf') format("opentype"), url('/font/SpoqaHanSansNeo-Bold.ttf') format("truetype"); } /* next.config..

Hello, I’m ressi 2021년 개발자로서의 첫 회고를 쓰면서 자축하고 싶은 것은 (중간과정 생략하고 어찌됐건) 취업에 성공하고 개발자로서의 길을 걷기 시작했다는 것이다. 나에게는 이제 새로운 이름 렛시(ressi)가 생겼다. 올해 개발자로서의 나를 만난 사람들은 나를 이렇게 기억해줬으면 한다. “아, 그 질문 많고 열심히 하던 렛시님”. 2021’s Key tag #취뽀 #오늘의집 #여행 #가족 #졸업 올해는 졸업 후 취업에 성공하여 오늘의집이라는 앱을 만드는 버킷플레이스라는 회사에 들어간 아주 중요한 해이다. 개발자로서의 삶을 시작하는 해이기도 하고 대학생으로서의 생활을 끝내는 해이기도 했다. 상반기 때는 1학기를 다니던 내가 하반기 때는 회사 일을 처리하고 있으니 몇 개월의 차이를 두고 너..