서론 블로그에서 가장 널리 쓰이는 레이아웃은 바로 좌측에 메뉴를 배치한 SideBar, 상단에 네비게이션을 담당하는 Header(NavBar), 중앙에 본문 콘텐츠가 위치하는 Page(Main), 그리고 하단에 Footer가 위치하는 구조입니다. 이러한 구조는 사용자에게 친숙하며, 웹 사이트의 정보를 직관적으로 탐색할 수 있도록 돕습니다. 이번 포스팅에서는 Next.js를 활용하여 이와 같은 구조를 오마주하여 간단히 구현하는 과정을 거쳐보겠습니다. 프로젝트 생성 및 초기 설정 먼저 Next.js 프로젝트를 생성한다. 초기 생성에 관련된 블로그 게시글은 아래 참고 2023.11.09 - [Next.js] - [Next.js 탐험기] 1부: 프론트엔드의 새로운 물결 - 장단점과 설치부터 실행까지 [Next...
서론 웹 개발은 그 자체로 빠르게 변화하는 영역이다. 새로운 프레임워크와 라이브러리가 속속 등장하며, 개발자들은 이 중에서 최적의 도구를 선택해야 하는 과제에 직면하게 된다. 이번 포스팅에서는 최근 많은 주목을 받고 있는 Next.js에 대해 이야기해보고, 초기 프로젝트 구축을 해보려 한다. Next.js는 Vercel에 의해 만들어진 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(Static Site Generation, SSG), 그리고 최근에는 Incremental Static Regeneration(ISR) 같은 고급 기능을 제공한다. 프론트엔드와 백엔드의 경계가 점차 모호해지는 현재, 한쪽 영역에만 국한되어 개발하는 것이 시대에 뒤떨어진다는 생각이 들었다. 이에..
서론 Docker는 다양한 방면에서 사용된다. 각기 다른 언어 혹은 한 언어의 다양한 버전으로 구성된 여러 프로젝트를 빌드하는 데에도 Docker를 이용하여 빌드를 실행할 정도니 활용 방법은 무궁무진하다. 그중에서도 특히 많이 사용하는 방법이 로컬 개발 환경을 Docker를 활용해 구축하는 것이다. 나는 Docker를 사용해서 다양한 환경의 로컬 개발 환경 구성을 진행해왔다. 하지만 그것은 어디까지나 macOS에서 깔끔하게 동작했던 것이고, 협업하는 팀원의 Windows PC에서 동일한 환경을 구성했더니 페이지를 로드하는 데 적게는 5초에서 많게는 10초 이상 걸리는 현상이 발생했다. 도대체 문제가 무엇이었을까? WSL2와 Docker 볼륨 마운트 문제 윈도우에서 터미널 개발환경을 구성할 때 보통 WSL..
서론 WebView로 구성된 IOS App의 처음 진입 및 페이지 이동간 속도 개선 작업을 진행하게 되었다. Native App 이라면 이런 저런 속도 개선 작업을 코드 단위에서 진행할 수 있겠지만, WebView로 구성된 IOS App의 경우 사실상 할 수 있는게 별로 없다. Web Source의 무거운 외부 종속 라이브러리 등을 첨삭하여 개선하는 방법이 가장 빠른 길이지만 그럼에도 불구하고 App에서도 개선할 수 있는 작업이 있을까 고민하게 되었다. 현재 앱 구성 파악 현재 본인의 앱 상태가 어떤지 파악해야 하는데, 나의 경우 App을 실행할 때 LaunchScreen 표시 이후 WebView 로딩까지 매끄럽지 않고 특히 Custom Loading Indicate (개발자가 임의로 만들어낸 로딩 지연..
많은 트래픽을 보유한 사이트에서 db에서 데이터를 읽어올때 cache 처리해서 읽어오는 이유가 뭘까? 많은 트래픽이 발생하는 사이트에서는 대량의 요청을 동시에 처리해야 한다. 이런 요청들이 모두 데이터베이스에서 직접 데이터를 읽게 되면, 데이터베이스에 엄청난 부하가 발생하게 되고, 부하가 지나치게 증가하면 성능 저하 또는 서비스 중단이 발생할 수 있다. 그래서 이런 문제를 해결하기 위해 캐시를 사용하는데, 캐시는 빠르게 접근 가능한 저장소로, 한 번 읽은 데이터를 임시로 저장해 두는 것이다. 이후 동일한 데이터를 요청할 경우, 데이터베이스에 다시 접근하는 것이 아니라 캐시에서 데이터를 가져옴으로써, 데이터베이스의 부하를 줄이고 응답 시간을 향상시킬 수 있는 것이다. 특히, 변경이 자주 일어나지 않는 데이..