~ZeroToOne 프로젝트 트러블 슈팅~ 이번 프로젝트의 1차 MVP에서 로그인 파트를 제외한 나머지 부분을 담당하면서 페이지 이동 흐름을 구현하는 과정을 진행했습니다. 이 과정에서 여러 라우팅 방식과 CSR/SSR에 따른 쿠키 처리의 차이 등을 겪으며 정말 많은 오류를 경험했습니다.그 과정에서 겪은 시행착오와 각 페이지 이동 방식의 특성을 한 번 정리하며 모르는 부분을 짚고 넘어가기 위해 작성하였습니다. 1. 페이지 이동 방식Next.js에서 페이지 이동을 구현할 때 사용할 수 있는 방법은 여러 가지가 존재합니다.그중 가장 많이 사용하는 방식으로는 다음 세 가지 방식을 꼽을 수 있습니다. Router.push()Next.js가 제공하는 useRouter() 훅을 사용해 페이지 이동을 처리하는 방식..

요즈음 진행하고 있는 프로젝트는 현재 참여하고 있는 1:1 기상 스터디를 플랫폼화 하는 프로젝트입니다.프론트엔드 팀원으로 참여하며 이 프로젝트를 시작할 때 구조 설계에 특히 신경을 써서 선택했습니다.처음 기획 때 이야기가 나왔지만 이 프로젝트는 기능이 늘어날 가능성이 (특히) 높기도 하고, 사이드 프로젝트인 만큼 팀원 변경이 자주 일어날 수 있는 가능성이 높았습니다. 그렇기에 유지보수에 좋고, 기능 단위로 나누기에 협업에 좋다는 점을 들어 FSD 아키텍처를 선택했습니다. 하지만 얼마 전, 팀원이 대대적으로 좀 바뀌게 되었고 폴더 구조를 이해하는 과정에서 여러 질문이 생겼습니다."이건 widgets에 하는 건가요 features에 하는 건가요?""api도 공통으로 쓰이면 그냥 shared에 작성하면 되나..

왜 이 글을 쓰게 되었는가최근 진행 중인 프로젝트에서는 shadcn ui를 기반으로 UI 컴포넌트를 구현하고 있습니다. 프로젝트를 Next.js와 tailwind를 사용해서 개발하기도 하고, headless 컴포넌트이면서 class-variance-authority(cva)를 조합해서 커스터마이징 할 수 있다는 게 편리할 것 같아 사용하기로 선택했습니다. shadcn으로 받아온 파일은 되도록 원형 코드 그대로 유지하면서, shared/ui 폴더에 별도로 커스텀 한 컴포넌트를 만들어 사용하는 방식으로 구조를 잡았습니다.기본 컴포넌트를 직접 수정하지 않도록 해서 유지보수성을 확보하고자 한 선택이었습니다. 하지만 막상 사용해 보니까 예상치 못한 불편함과 어려움이 있었습니다.아마 제가 headless ui를 사..

1. 동기 비동기개발을 하다 보면 동기(Synchronous)와 비동기(Asynchronous)라는 개념을 굉장히 자주 마주치게 됩니다. 동기(Synchronous)란, 요청한 작업이 완료될 때까지 다음 작업이 대기하는 방식을 의미합니다.쉽게 말해, 하나의 작업이 끝나야만 다음 작업이 시작되는 방식이죠. 이 방식은 순서가 보장되지만, 작업이 오래 걸릴 경우 전체 흐름이 멈춰버릴 수 있습니다.반대로, 비동기(Asynchronous)는 작업을 요청한 뒤, 그 결과를 기다리지 않고 다음 작업을 바로 실행하는 방식을 말합니다. 결과가 준비되면 나중에 통보를 받아 처리하기 때문에 긴 작업이 있어도 프로그램 전체가 멈추지 않고 계속 진행될 수 있죠. 다른 분야에서도 마찬가지지만, 특히 프론트 개발을 진행하다 보면..

아키텍처 패턴이 왜 중요할까?소프트웨어를 개발하면서 가장 흔히 마주치는 문제 중 하나가 기능이 많아질수록 코드가 복잡해지고 유지보수가 어려워진다는 점입니다.특히 UI 로직과 비즈니스 로직이 섞여 있는 경우, 단순한 수정 하나가 연쇄적으로 많은 부분을 건드려야 하는 문제도 생기고, 테스트를 진행하기도 어려워질 수 있습니다. 이때 바로 이 아키텍처 패턴이 유용하게 사용됩니다.아키텍처 패턴은 역할을 명확하게 나누어 코드의 책임을 분리하고, 유지보수와 확장성을 높이는 방법으로 활용됩니다.대표적 아키텍처 패턴에는 MVC, MVVM 외에도 MVP.. 등이 있고, 특히 안드로이드나 프론트 개발의 경우에는 MVP와 MVVM이 많이 사용됩니다. 처음 아키텍처에 대해 공부할 때는 왜 이렇게 어렵게 구조를 나누고, 아키텍처..

1. 디스크 스케줄링디스크 스케줄링은 디스크 I/O 요청을 처리하는 순서를 결정하는 운영체제의 알고리즘입니다.디스크 장치의 경우, 메모리처럼 직접 접근은 불가능하고 데이터를 읽기 위해서는 디스크 헤드를 물리적으로 이동시켜야 합니다. 그리고 이 과정에서 가장 많은 시간이 소요되는 것이 Seek Time (탐색 시간)입니다. 하드디스크는 여러 요청이 동시에 들어오는 경우가 많고, 이 요청들을 아무 순서나 처리하면 디스크 헤드가 들쭉날쭉 이동하게 되어 전체 처리 시간이 비효율적으로 증가합니다.따라서 운영체제는 디스크 스케줄링 알고리즘을 이용해 요청 순서를 최적화하고, 디스크 헤드의 이동을 줄이는 방향으로 성능을 향상합니다.왜 필요할까?디스크는 느립니다.: 디스크는 메모리보다 훨씬 느린 장치이며, 디스크 레드의..

Q. 주소창에 특정 웹 페이지의 주소를 입력했을 때 어떤 일이 일어나나요? 프론트엔드 개발자를 준비하고 있다면 면접 단골 질문에 해당 질문이 있는 걸 많이 봤을 것이라고 생각한다.나 또한 해당 질문을 많이 봤지만 블로그를 작성하면서 한 번도 브라우저의 렌더링 관련이나, 데이터 전달을 작성하거나 공부하지 않았다는 것이 문득 생각났다. 프론트엔드를 개발하려면 어떤 과정을 통해 데이터가 전달되고 화면에 렌더링 되는지를 확실하게 알고 있어야 한다.그래서 이번 기회에 해당 과정을 한번 제대로 정리해 보고자 해당 주제를 작성해보려 한다.  주소창에 주소를 입력한다 → 특정 주소로 이동한다.사실 브라우저가 어떻게 작동하는지 알지 못하는 사람은 단순히 주소를 이동할 때 위 두 단계밖에 확인하지 못합니다.그러나 저희는 ..

1. 호이스팅(Hoisting)이란?호이스팅(Hoisting)은 자바스크립트에서 변수나 함수 선언이 코드 실행 전에 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 현상을 말합니다. 쉽게 말해, 코드를 위에서 아래로 읽는 것과는 다르게 자바스크립트 엔진이 먼저 변수와 함수의 선언부터 처리하는 것입니다.물론 실제로 코드가 끌어올려져서 동작하는 것은 아닙니다. 자바스크립트 parser가 내부적으로 끌어올려서 처리를 하기 때문에 끌어올려지는 것처럼 동작하는 현상이라고 정의합니다.  Q. JS에만 있는 건가요? Java나 Python, C언어에는 호이스팅이 없나요? 😮결론만 먼저 말하자면, 호이스팅이라는 이름의 동작이 없거나 구조적으로 차단되어 있습니다!호이스팅은 자바스크립트처럼 인터프리터 언어이자 함수..

들어가기에 앞서요즘 들어 프론트엔드 개발에서 성능 개선 쪽에 조금 관심이 생기면서 '사용자는 우리가 생각한 타이밍보다 훨씬 빠르게 반응을 기대한다'는 걸 자주 느낍니다.저도 그렇지만, 클릭을 통해 페이지 이동을 기다리는데 기대했던 데이터 대신 비어있는 화면이 잠깐이라도 나타나는 걸 참지 못하는 사용자가 꽤 많습니다. UX 관점에서야 당연한 이야기지만, 실제 구현에서 이와 같은 부분을 해결하려면 꽤 신경 써야 하는 부분이 많죠. 이런 고민을 가지고, 최근에는 Tanstack query와 Next.js 관련을 좀 더 공부하다보니 자연스럽게 'prepatching'이라는 키워드에 관심이 생겼습니다.prepatching은 데이터를 필요로 하기 전에 미리 불러오는 전략으로, 단순히 API를 일찍 호출하는 게 아니..

이번에 프로젝트를 시작하게 되면서, 항상 그렇듯이 어떤 기능을 사용하고 사용하지 않을 것인지에 대한 회의를 진행했다.그러다 캐시에 대한 이야기를 나누며 Tanstack query에 대한 이야기가 나왔다.Next.js를 사용해서 프로젝트를 진행하는데 Next.js의 fetch기능과 Tanstack query 두 가지중 선택하는 과정이 있었다.결론적으로는 Tanstack query를 사용하지만, 정확히 두 기능의 차이가 뭔지,프로젝트에서 기술을 사용하는 이유를 정확히 알고 시작을 하는 게 좋지 않을까?라는 생각에 해당 주제로 글을 작성하게 되었다.    "Tanstack query랑 Next.js의 fetch.. 둘 다 캐싱하는 거 아닌가?" 처음 프로젝트에 뭘 사용할 지 의견을 나누는 과정에서 이 두 가지..