너와 나의 프로그래밍

App Router NestedLayout?🤔 기존 12버전 아래의 Page Router의 정보는 많은데 아직 13버전의 App Router의 대한 NestedLayout의 정보가 많이 없었다. 물론 Next.js의 공식문서를 읽으면 되긴 하는데 읽어도 이해가 잘 안가기도 하고... 그래서 결국 찾던 도중에 App Router의 Nested를 알게 되었고 방법을 소개하려고 한다. Next.js 13 😳 "RootLayout에는 Layout Component를!! Children Layout에는 NestedLayout Component와 page를!!" 1. 디렉토리 최상단 layout.jsx(tsx)에 Layout Compoent를 적용하자. 2. 실제 사용할 Layout Component를 구성. 대부..

청년희망적금 -> 청년도약계좌 🧐 2021년 청년희망적금이라는게 생기고 진짜 오지 않을 것 같은 2년이라는 세월이 흘렀다. 뭔가 군생활 같이 보이지 않는 2년이라는 세월에 세간에는 "청년거지적금"이라는 새로운 이름이 붙을 정도로 청년들의 지갑을 굉장히 궁핍하게 만들었다는 말도 있을 정도로 영겁의 세월이 아닐 수 없었다. 그런데 2년 뒤 "청년도약계좌"라는 것이 신설되고 "청년희망적금"을 기존에 가입했던 사람들도 이어서 가입이 가능하다는 말을 듣고 뭔가 솔깃하기 시작했지만 이번에는 무려 "5년"이라는 진짜 눈앞이 캄캄한 기간에 정말 너무너무 망설이기 시작했다. 그러나 당장 목돈은 따로 굴리고 있고 큰 돈이 필요할 것 같지 않아서 향후 5년동안은 그냥 아무 생각 없지 저축하자는 생각이 들었고 나름 정부에서 ..

NestedLayout?🤔 거의 모든 웹 어플리케이션에서 SideBar나 NavBar를 구현해 Layout은 그대로 두되 안에있는 페이지만 바꾸는 SPA 방식을 많이 채택한다. React.js에서는 SPA 방식의 구현이 당연하지만 Next.js는 SSR의 렌더링 방식이라 조금 다른데 이걸 Next.js도 알고 있는지 여러가지 방법을 제시해주고 공식문서에도 아주 잘 설명이 되어있다. 하지만 그것보다 더 간단하게 기존 13버전 위/아래 버전의 두가지 방법을 소개해볼까 한다. Next.js 13 ↓😳 "getLayout"을 사용하는 방법이 가장 편하고 깔끔했다. 1, _app.jsx(tsx)에 getLayout을 적용하자. 2. 실제 사용할 Layout Component를 구성. 3. NestedLayout ..

나에게 있던 2023년은... 2023년은 정말 시간이 어떻게 지나갔는지 모를정도로 1년이 훌쩍 지나가 버렸다. 그 안에 정말 힘든 시간도 두번 있었고 너무 사는게 정말 이렇게 다사다난한가 싶을 정도로 고비가 너무 많았다. 제대로 1일 1커밋을 하겠다고 도전했었던 것도 토이프로젝트를 진행해보려고 하는 것도 제대로 지켜진게 없었다. 알고리즘의 대해 공부를 제대로 해본적이 없었고 하루하루가 정말 어떻게 살아갔는지도 모르게 너무 바쁘게 지나간 것 같다. 물론 모든것들이 다 바쁘다는 이유로 핑계를 댈 수 있겠지만 개인적인 일로도 업무적인 일로도 너무너무 정신없은 시간을 보냈다. 새로운 회사에 이직하고 난 뒤로 2023년 연봉협상을 하면서 벌써 1년이라는 세월이 지났다는 사실이 너무 놀랐다. 아마 6년차 프론트엔..

아마 대표적으로 유명한 Javascript Library Web Editor로 유명한 Quill은 Web에서 많이 봤을법한 텍스트 에디터다. WYSIWYG이라는 에디터로도 불리는데 WYSIWYG은 What You See Is What You Get, "보는 대로 얻는다"라는 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식이라고 한다. 많은 라이브러리를 사용해본적은 없지만 그래도 항상 내 Needs에 맞는 텍스트 에디터 라이브러리는 Quill이였다. 그 중에 React나 Next.js에서도 접목시킬 수 있는 React-Quill이라는 Quill 기반 라이브러리까지 있어서 개발하기도 쉬워졌다. 특히 이 라이브러리는 Quill - Your powerful rich text edi..

API를 호출해서 Blob 타입의 Response 값을 받을 때 다운로드 기능을 구현하는 과정을 설명하려고 한다. 예를들어 "엑셀" 다운로드를 할 때 서버에서 만들어진 Excel을 클라이언트단에서 즉시 다운로드 기능을 구현하려면 아래와 같이 작업하면 된다. // API를 호출하는 코드 const getExcel = useCallback(async () => { try { const blob: Blob = await api.getExcel(); // 타입 명시 const url = window.URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.setAttribute("download", "mem..