개발자 시선

이번 글에서는 Flask로 구현한 코드 소개와 제가 Next.js로 구현했던 기능을 어떤 식으로 구현했는지도 함께 설명해보려고 합니다. 글을 작성하다보면 리액트와 Jinja2를 비교하는 글이 될 것 같기도 합니다 :)공통 레이아웃 만들기Next.js에서 app/layout.tsx으로 공통으로 사용할 레이아웃을 만들듯, Jinja2에서도 어떤 페이지에서든 동일하게 사용할 레이아웃 템플릿을 만들 수 있습니다. 예를 들어, 아래 이미지에서 빨간색 박스로 표시한 사이드바를 모든 페이지에서 공통으로 사용하기로 했다면 jinja2로 다음과 같이 코드를 작성할 수 있습니다. 일단 먼저 templates 폴더에 layout.html 파일을 생성해줍니다. 그리고 layout.html 파일에는 어떤 페이지에서든 어디에서..

문제 상황저는 평소에 컴포넌트를 만들 때 document나 window를 useEffect 밖에 선언해서 사용을 하지 않는 편입니다.근데 이번에 모달 컴포넌트를 만들 때 React 18 공식 문서에 나와있는 createPortal 예제(링크)를 보면서 만들다가 document를 사용하게 되었습니다. 이 때  ReferenceError: document is not defined  에러를 만나게 되었죠.  기존에 모달 컴포넌트를 만들 때도 createPortal을 사용했었는데, 항상 ref에 document를 저장해서 사용했었기 때문에 createPortal에 바로 document를 넣어서 사용한 것은 처음이었습니다.(참고로 아래 코드도 초창기 React 16 버전 공식 문서를 참고해서 만들었던 걸로 기억..