[React] Turborepo 와 캐싱 - 2️⃣ Custom remote cache 적용하기
캐싱용 원격 저장소 - Vercel 만약에 Vercel에서 호스팅을 하고 있다면, (Next JS 기본 설정으로 배포 등등) Turborepo는 기본적으로 vercel 에서 캐싱용 원격 저장소를 지원합니다. 1편에서 이에 관한 내용을 다뤘는데요, 아래 링크를 통해 참조할 수 있습니다. [React] Turborepo 용 custom remote cache 서버 구축하기 - 1️⃣ 터보레포의 캐싱 구조 [React] Turborepo 용 custom remote cache 서버 구축하기 - 1️⃣ 터보레포의 캐싱 구조 Monorepo 도구와 Turborepo 다양한 프론트엔드 프레임워크들이 너무 잘 갖춰진 지금, 정말 각양각색의 좋은 모노레포 도구들이 있습니다. 위 사진은 2022년의 모노레포 Tools ..
2023. 7. 30.
[React] Turborepo 용 custom remote cache 서버 구축하기 - 1️⃣ 터보레포의 캐싱 구조
Monorepo 도구와 Turborepo 다양한 프론트엔드 프레임워크들이 너무 잘 갖춰진 지금, 정말 각양각색의 좋은 모노레포 도구들이 있습니다. 위 사진은 2022년의 모노레포 Tools 이용 비율을 담은 사진인데요, 패키지 매니저 역할을하는 yarn, npm, pnpm 등을 제외하면 Lerna, Turborepo, Nx 등의 모노레포 전용 프레임워크들이 눈에 띕니다! 자바스크립트 생태계에서는 대표적으로 Yarn Workspace, Lerna, NX, Turborepo등이 주로 쓰이는데요, 오늘은 제가 사용중인 Turborepo 에 대해 다뤄보고자 합니다. https://turbo.build/ 터보레포는 Vercel 에서 운영하는 얼마안된 따끈따끈한 TS 기반의 모노레포 빌드 시스템입니다. 터보레포를 ..
2023. 6. 24.
[FE][Next JS] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 4️⃣ - Static Site Generation과 ISR (Incremental Static Regeneration)
이전 포스팅들을 읽고 오시면 더 좋습니다 😄 - [FE] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 1️⃣ - 과거 - [FE] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 2️⃣ - 현재 - [FE] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 3️⃣ - 미래 렌더링의 시점과 횟수? 지난 포스팅에서 말했듯, 현대 렌더링 방식은 주로 '렌더링의 주체' (렌더링이 어디서 진행되느냐) 관점으로 크게 SSR 과 CSR로 나뉩니다. 렌더링을 담당하는 것이 서버냐, 클라이언트냐 의 차이죠. 오늘은 '렌더링의 주체' 관점으로가 아닌 '렌더링의 시점과 횟수(효율성)' 에 대한 얘기를 해보려고 합니다! 캐싱(caching) 에 대한 이야기를 하면 더 받아들이기가 편할 것 같아요. 우리는 레디스 등의 메모리 캐시..
2023. 3. 19.
[FE] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 3️⃣ - 미래 <React의 Concurrent Rendering>
들어가며 https://programming119.tistory.com/276 [FE] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 2️⃣ - 현재 들어가며 1️⃣ - 과거 [FE] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 1️⃣ - 웹 서비스의 역사 programming119.tistory.com 2부에서는 가장 보편화된 렌더링방식들에 대해 알아봤습니다. 3부에서는 앞으로의 렌더링 방식이 어떻게 발전해 나갈 것 같은지, 2023 트렌드에 최대한 맞춰서 말해보려고 합니다.! React 18 과 Concurrent Rendering 현대 웹에 대해 얘기할 때 FE의 깡패 React를 빼놓고 얘기할 수가 없습니다. 끝없는 성장과 발전으로 FE 라이브러리 1위자리를..
2023. 1. 28.
[FE] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 2️⃣ - 현재 < SPA와 CSR, SSR에 대해>
들어가며 1️⃣ - 과거 [FE] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 1️⃣ - 웹 서비스의 역사
2022. 12. 28.
[FE] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 1️⃣ - 과거 <정적웹 에서 동적 웹으로>
들어가며 '역사를 잊은 민족에게 미래는 없다' 라는 말이 있죠. 과거를 아는 것은 현재를 살 때의 엄청난 메리트입니다! 웹이 어떻게 발전되어 왔는지, 그 맥락을 알고 있는 사람은 새로운 정보를 받아들일 때의 흡입력이 다르다고 생각합니다. 1장에서는 웹 렌더링의 방식을 구체적으로 살펴보기 전에, 웹 서버의 발전을 렌더링 방식에 중점을 두고 정리해볼 생각입니다. 그 내용들을 바탕으로 2장에서 본격적으로 렌더링 방식을 살펴보자구요. 그럼 시작합니다! 😎 1세대 웹 - 단일 HTML 구조 1세대 웹 서버는 단순히 정적 파일 (html)을 전달하는 역할에 불과했습니다. 웹 서버는 도메인에 맞는 html 파일을 저장하고 있다가 http로 단순히 해당 파일만을 전달해줍니다. 전달되는 페이지들은 html 로만 구성되어..
2022. 12. 25.
[회고] 사이드 프로젝트 - Github Issue Tracker (크롬 확장프로그램) 회고 📝
들어가며 이 시리즈는 올해 제가 개인 프로젝트를 진행했던 과정, 진행하면서 느꼈던 점을 적어놓는 글입니다. 여러분께 도움이 될만한 내용이 없을 수 있음 알려드립니다. 그냥 제 일기장 중 한페이지라고 보시면 됩니다. 📖 (대신 훔쳐봐도 상관없는 일기장) Github Issue Tracker 얼마전 DND 6기가에서 진행한 프로젝트가 마무리되고,, 갑자기 개인 프로젝트가 하고 싶어졌다. 다만, 이번에는 보여지기식이 아니라 진짜로 누군가가 활용할 수 있는 프로그램을 만들고 싶었다! 한창 팀(회사)에 적응하고 있을 때이다보니 사우들에게 도움이 될 수 있는 것을 만들면 좋지 않을까 하는 생각이 들었다. 이왕 하는거 진짜로 유용성을 생각하면서 만들어보자! 하는 마음으로 ~ 괜시리 어려운 주제를 골라버리면 여러 해결..
2022. 11. 10.
[React🌀] Next JS 13 업데이트 사항 총 정리 📄
들어가며 안녕하세요. 오랜만에 포스팅을 하네요. 😃 사실 react 와 svelte 를 비교하는 글을 준비하고 있었는데, 아무래도 제가 svelte에 관한 내용을 쓰기에는 사용경험이 너무 적더라구요. 이미 관련된 좋은 글도 너무 많은데 차별성도 없고 내용도 결국 똑같아지는 것 같고.. 몇 가지 개인적인 일들이 있기도 했구요. 아무튼 군소리는 여기까지 하고, 바로 시작하겠습니다! 이 포스팅의 내용들은 99% 이상이 아래 링크된 Next JS의 공식 블로그 내용을 바탕으로 하고 있을 테니, 영어에 자신 있는 분들은 그냥 블로그 글 읽는게 더 도움이 되실 수도 있습니다 😄 Next JS 13 Next JS 12가 공개된지 1년쯤 되었네요 벌써 .. 드디어 Next js 13이 공개되었습니다! https://..
2022. 10. 31.
[React] Turborepo 와 캐싱 - 2️⃣ Custom remote cache 적용하기
캐싱용 원격 저장소 - Vercel 만약에 Vercel에서 호스팅을 하고 있다면, (Next JS 기본 설정으로 배포 등등) Turborepo는 기본적으로 vercel 에서 캐싱용 원격 저장소를 지원합니다. 1편에서 이에 관한 내용을 다뤘는데요, 아래 링크를 통해 참조할 수 있습니다. [React] Turborepo 용 custom remote cache 서버 구축하기 - 1️⃣ 터보레포의 캐싱 구조 [React] Turborepo 용 custom remote cache 서버 구축하기 - 1️⃣ 터보레포의 캐싱 구조 Monorepo 도구와 Turborepo 다양한 프론트엔드 프레임워크들이 너무 잘 갖춰진 지금, 정말 각양각색의 좋은 모노레포 도구들이 있습니다. 위 사진은 2022년의 모노레포 Tools ..
[React] Turborepo 용 custom remote cache 서버 구축하기 - 1️⃣ 터보레포의 캐싱 구조
Monorepo 도구와 Turborepo 다양한 프론트엔드 프레임워크들이 너무 잘 갖춰진 지금, 정말 각양각색의 좋은 모노레포 도구들이 있습니다. 위 사진은 2022년의 모노레포 Tools 이용 비율을 담은 사진인데요, 패키지 매니저 역할을하는 yarn, npm, pnpm 등을 제외하면 Lerna, Turborepo, Nx 등의 모노레포 전용 프레임워크들이 눈에 띕니다! 자바스크립트 생태계에서는 대표적으로 Yarn Workspace, Lerna, NX, Turborepo등이 주로 쓰이는데요, 오늘은 제가 사용중인 Turborepo 에 대해 다뤄보고자 합니다. https://turbo.build/ 터보레포는 Vercel 에서 운영하는 얼마안된 따끈따끈한 TS 기반의 모노레포 빌드 시스템입니다. 터보레포를 ..
[FE][Next JS] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 4️⃣ - Static Site Generation과 ISR (Incremental Static Regeneration)
이전 포스팅들을 읽고 오시면 더 좋습니다 😄 - [FE] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 1️⃣ - 과거 - [FE] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 2️⃣ - 현재 - [FE] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 3️⃣ - 미래 렌더링의 시점과 횟수? 지난 포스팅에서 말했듯, 현대 렌더링 방식은 주로 '렌더링의 주체' (렌더링이 어디서 진행되느냐) 관점으로 크게 SSR 과 CSR로 나뉩니다. 렌더링을 담당하는 것이 서버냐, 클라이언트냐 의 차이죠. 오늘은 '렌더링의 주체' 관점으로가 아닌 '렌더링의 시점과 횟수(효율성)' 에 대한 얘기를 해보려고 합니다! 캐싱(caching) 에 대한 이야기를 하면 더 받아들이기가 편할 것 같아요. 우리는 레디스 등의 메모리 캐시..
[FE] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 3️⃣ - 미래 <React의 Concurrent Rendering>
들어가며 https://programming119.tistory.com/276 [FE] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 2️⃣ - 현재 들어가며 1️⃣ - 과거 [FE] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 1️⃣ - 웹 서비스의 역사 programming119.tistory.com 2부에서는 가장 보편화된 렌더링방식들에 대해 알아봤습니다. 3부에서는 앞으로의 렌더링 방식이 어떻게 발전해 나갈 것 같은지, 2023 트렌드에 최대한 맞춰서 말해보려고 합니다.! React 18 과 Concurrent Rendering 현대 웹에 대해 얘기할 때 FE의 깡패 React를 빼놓고 얘기할 수가 없습니다. 끝없는 성장과 발전으로 FE 라이브러리 1위자리를..
[FE] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 2️⃣ - 현재 < SPA와 CSR, SSR에 대해>
들어가며 1️⃣ - 과거 [FE] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 1️⃣ - 웹 서비스의 역사
[FE] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 1️⃣ - 과거 <정적웹 에서 동적 웹으로>
들어가며 '역사를 잊은 민족에게 미래는 없다' 라는 말이 있죠. 과거를 아는 것은 현재를 살 때의 엄청난 메리트입니다! 웹이 어떻게 발전되어 왔는지, 그 맥락을 알고 있는 사람은 새로운 정보를 받아들일 때의 흡입력이 다르다고 생각합니다. 1장에서는 웹 렌더링의 방식을 구체적으로 살펴보기 전에, 웹 서버의 발전을 렌더링 방식에 중점을 두고 정리해볼 생각입니다. 그 내용들을 바탕으로 2장에서 본격적으로 렌더링 방식을 살펴보자구요. 그럼 시작합니다! 😎 1세대 웹 - 단일 HTML 구조 1세대 웹 서버는 단순히 정적 파일 (html)을 전달하는 역할에 불과했습니다. 웹 서버는 도메인에 맞는 html 파일을 저장하고 있다가 http로 단순히 해당 파일만을 전달해줍니다. 전달되는 페이지들은 html 로만 구성되어..
[회고] 사이드 프로젝트 - Github Issue Tracker (크롬 확장프로그램) 회고 📝
들어가며 이 시리즈는 올해 제가 개인 프로젝트를 진행했던 과정, 진행하면서 느꼈던 점을 적어놓는 글입니다. 여러분께 도움이 될만한 내용이 없을 수 있음 알려드립니다. 그냥 제 일기장 중 한페이지라고 보시면 됩니다. 📖 (대신 훔쳐봐도 상관없는 일기장) Github Issue Tracker 얼마전 DND 6기가에서 진행한 프로젝트가 마무리되고,, 갑자기 개인 프로젝트가 하고 싶어졌다. 다만, 이번에는 보여지기식이 아니라 진짜로 누군가가 활용할 수 있는 프로그램을 만들고 싶었다! 한창 팀(회사)에 적응하고 있을 때이다보니 사우들에게 도움이 될 수 있는 것을 만들면 좋지 않을까 하는 생각이 들었다. 이왕 하는거 진짜로 유용성을 생각하면서 만들어보자! 하는 마음으로 ~ 괜시리 어려운 주제를 골라버리면 여러 해결..
[React🌀] Next JS 13 업데이트 사항 총 정리 📄
들어가며 안녕하세요. 오랜만에 포스팅을 하네요. 😃 사실 react 와 svelte 를 비교하는 글을 준비하고 있었는데, 아무래도 제가 svelte에 관한 내용을 쓰기에는 사용경험이 너무 적더라구요. 이미 관련된 좋은 글도 너무 많은데 차별성도 없고 내용도 결국 똑같아지는 것 같고.. 몇 가지 개인적인 일들이 있기도 했구요. 아무튼 군소리는 여기까지 하고, 바로 시작하겠습니다! 이 포스팅의 내용들은 99% 이상이 아래 링크된 Next JS의 공식 블로그 내용을 바탕으로 하고 있을 테니, 영어에 자신 있는 분들은 그냥 블로그 글 읽는게 더 도움이 되실 수도 있습니다 😄 Next JS 13 Next JS 12가 공개된지 1년쯤 되었네요 벌써 .. 드디어 Next js 13이 공개되었습니다! https://..