FrontEngineer JungBam

어느 페이지에 들어가려고 할때 로그인 된 경우에만 들어갈 수 있도록 하고 싶다... 라는 생각으로 React에서도 private route를 Router 컴포넌트에 만들어줬었는데 next.js에서도 동일한 기능을 하는 HOC를 만들어보자. 정말 간단하게 이 페이지를 들어갈때에 로그인되어 있어? 를 물어봐주는 HOC를 만들면 된다. 진짜 간단하게 생각나는대로 아래의 코드를 만들었다. 만들고 동작해보니 정상적으로 동작하지만, 렌더링 과정에서의 상태 변화로 인한 경고창이 발생했다. 렌더링 과정에서? 컴포넌트를 렌더링하기 전에 withAuth를 통해서 router.push를 하는 과정에서 발생한 문제다. 로그인이 되어있지 않아서 router.push를 실행하는 과정에서 상태값의 변동이 있고 이것을 하지 말라는 ..

position - CSS: Cascading Style Sheets | MDN CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다. developer.mozilla.org 기본적인 내용은 위의 링크를 통해 이해하기 바라고 오늘 다뤄볼 내용은 sticky로 사이드바를 만들면서 겪었던 이슈와 그 해결방법에 대해서 다뤄볼 생각이다. 문제상황 : sticky를 통해 사이드바를 구현하고 sticky가 정상 동작하였지만, 디자인 수정으로 푸터를 추가하고 나니 내려가다가 footer 컴포넌트의 영역을 침범하는 이슈가 발생함.(아래 그림 참고) s..

기본적인 CI/CD의 설명이 필요하다면 아래 링크를 통해 CI/CD에 대해서 알압보고 글을 읽으면 좋을 것 같다. CI/CD(CI CD, 지속적 통합/지속적 배포): 개념, 툴, 구축, 차이 CI/CD는 애플리케이션의 통합 및 테스트 단계부터 제공 및 배포까지 애플리케이션 라이프사이클 전체에서 지속적인 자동화와 지속적인 모니터링을 제공하는 것을 뜻합니다. www.redhat.com 깃헙 액션을 활용하는 것은 이전에 gpt를 통한 코드리뷰 이후 두번째인데 이번에는 깃헙 액션을 통한 CI 파이프라인을 설정하는 방법에 대해서 알아보자. CI파이프 라인이라는 것은 지속적 통합을 의미하는 것으로 ' BUILD > TEST > MERGE ' 의 워크플로우를 의미한다. 왜 필요한지에 대해서는 테스트 코드를 작성한 사..

음성 인식을 위해 비동기적 처리가 되어있는 패키지를 사용하려고 하던 중 만난 에러 아래의 에러메세지에서 알 수 있듯이 원인은 regeneratorRuntime을 찾지 못하는 것인데 먼저 이 regeneratorRuntime은 어떤 친구인지부터 알아보자. 먼저, async/await은 비동기를 처리하는 것은 다들 알고 있을것이다.(모른다면 이전 글에서 찾아보면 정리한 글이 있다.) 하지만 이 async/await은 ES6 문법, 비교적 최신의 문법이고 구형 브라우저나 이전의 코드에서는 동작하지 않게 될 것 이다. 이를 해결하기 위한 것이 바로 Babel에서 런타임에서 실행시키는 regeneratorRuntime 이라는 친구인 것이다. 왜인지를 아는 것이 중요한 것은 어느 부분을 수정해서 에러를 잡을 수 있..

홈페이지의 마스코트 같은 개념의 파비콘을 next에서는 어떻게 넣는지 알아보자. 이전에 알아본 것 같이 layout중에 RootLayout은 html과 head, body 태그를 다룰 수 있는 유일한 layout이다. 우리가 next.js가 아니더라도 메타데이터를 다루고 파비콘을 설정하기 위해 했던 것과 같이 head 태그 안에 설정을 해주면 간단하게 파비콘이 적용된다. Metadata Files: favicon, icon, and apple-icon | Next.js Using App Router Features available in /app nextjs.org

next/navigation에서 제공하는 useSearchParams()와 usePathname()에 대해서 알아보자. 두 함수 모두 현재주소창에 있는 값들에 대해서 접근하고자 할 때 사용하는 함수이나 각각의 쓰임이 다르다. query와 path에 대해서 다들 알고 있겠지만 쉽게 이야기를 하면 useSearchParams는 query에 대한 값을 가져오는 함수이고 usePathname은 path를 가져오는 함수이다. Functions: useSearchParams | Next.js Using App Router Features available in /app nextjs.org Functions: usePathname | Next.js Using App Router Features available in..

Headless CMS가 과연 어떤 것인지 알아보자. Headless CMS는 콘텐츠 관리 시스템인 백엔드와 클라이언트측 애플리케이션인 프론트엔드를 분리하는 오늘날의 웹 디자인을 위한 관리 시스템이다. 따라서 Headless CMS는 (프론트엔드) 애플리케이션이 해당 콘텐츠에 액세스할 수 있도록 하는 메커니즘과 함께 (백엔드) 콘텐츠 관리 서비스를 담당한다. 기존 콘텐츠 관리 시스템은 프론트엔드와 백엔드가 분리되어 있지 않았기 때문에 최신 프론트엔드 기술스택을 통해 접근하기 어려움이 있었으나, 프론트엔드와 백엔드의 분리로 인하여 프론트엔드에 영향을 받지 않기 때문에 내가 개발하고 싶은 기술스택을 통해 프론트엔드를 개발할 수 있도록 된 것이다. CMS에 대한 기본 지식을 더 얻기 원한다면 아래 링크로 가서..

redirect 가 무엇인지부터 정리해보자. redirect란 경로를 재설정해주는 것인데, 두가지 방법이 있다. 각각 어떻게 사용하고 어떤 때에 각각의 방식이 효율적일지 생각해보자. 1. next.config를 통한 경로 재설정 프로젝트의 설정 자체를 건드림으로써, 어떤 경우에 대한 처리가 아니라 프로젝트에서의 경로를 재설정하는 방법으로, 기존에 있던 경로가 변경되었을 때에 이전의 경로로 접근하더라도 404에러를 발생시키는 것이 아니라 재설정된 경로로 접근할 수 있도록 해주는 방식이다. source에 있는 경로로 접근하면 destination으로 경로를 재설정해주는데 404코드가 아닌 308코드를 보내주어 해당 경로가 잘못된 경로가 아니라 재설정되었으니 여기로 보내줄 것을, 그리고 캐싱을 해도 됨을 알려..