modori@

next를 사용하면서 어떻게 동작하는지 모르는 상태로 사용하고있었던 경우가 많았다.이번엔 그중에서 빌드를 하면 어떤 파일들이 생기고 어떤 역할을 하는지, 배포되고나면 어떤 구조를 통해서 사용자가 브라우저를 사용할 수 있게 되는지에 대해서 알아볼려고 한다.빌드하면 어떤게 만들어지는지next build 명령어를 실행하게 되면 아래와 같이 순서대로 진행되게된다.1.setup: .env를 로드하고 next.config 검증, BUILD_ID 생성2. Route discovery: app/ 스캔해서 라우트 목록 확보3. Compilation: Turbopack/webpack으로 클라이언트·서버·엣지 코드 번들링4. Static analysis: 라우트별로 정적(prerender) vs 동적(on-demand) 분..

열심히 직장생활을 하다보니 벌써 2026년의 50%나 지나갔다.한게 머가 있다고 이렇게 시간이 흐른지 모르겠다.매일 똑같이 직장 -> 집 -> 직장 -> 집 으로만 흘러가니 흘러가는대로 살고있었다. 평소랑 똑같이 릴스를 넘기다가 우연히 보게된게 오타니의 만다라트 계획표였다. 만다라트 계획표는 주요목표를 중심으로 8개의 세부목표와 해당 세부목표의 실행방법을 브레인스토밍처럼 확산해나가는 계획표다. 남은 5개월을 알차게 보내기위해 만다라트 계획표를 작성하는 김에 사이드 프로젝트로 만들어보기로 했다. 프로젝트 기획현재 생각하고있는 기능은 아래와 같다.- 나만의 만다라트 만들기- 공유하기 현재 엔비디아에서 무료로 ai api를 배포중이기 때문에 해당 ai를 사용해서 세부목표를 작성해주는걸 도와줄려고한다.나같은 ..

새로고침을 하면 상태가 초기화되는 건 당연한 일입니다. React 앱에서 전역 상태를 zustand로 관리하더라도, 브라우저를 새로고침하면 메모리에 있던 값은 사라지니까요.그런데 실제로 서비스를 운영하다보면 “새로고침해도 유지돼야 하는 데이터”가 꽤 많습니다. 이 글에서는 Zustand로 새로고침해도 안 변하는 데이터를 관리하는 방법을 사용 방법과 작동원리에 대해서 알아보려고 합니다.1) 왜 새로고침하면 상태가 날아갈까?Zustand 스토어는 기본적으로 메모리에 존재합니다.그래서 새로고침(= JS 런타임 재시작)이 일어나면, 스토어는 다시 생성되고 초기값으로 돌아갑니다.해결하려면 “어딘가에 저장”이 필요합니다. 그래서 보편적으로 사용하게 되는게 local storage죠.하지만 유동적으로 변하는 데이터를..

오늘은 Tauri 프로젝트 개발 환경을 처음부터 세팅해보려고 합니다Tauri란?https://tauri.app/ Tauri 2.0The cross-platform app building toolkitv2.tauri.app Tauri는 Electron과 같이 크로스 플렛폼 앱을 만들기 위해 개발된 프레임워크입니다.Electron과 다른 점은 Electron은 웹을 그대로 데스크톱 앱으로 옮기기 쉬운 쪽에 가깝고 Tauri는 더 작고 가벼운 앱을 만들기 좋은 쪽에 가깝습니다.그래서 빠른 개발과 익숙한 Node.js 생태계가 중요하면 Electron이 유리하고, 배포 용량이나 메모리 효율이 중요하면 Tauri가 더 적합합니다.구분ElectronTauri뷰Chromium(독자 엔진)사용시스템에 설치되어있는 웹뷰..

node먼저 알아보기Node.js는 크로스 플랫폼 오픈소스 자바스크립트 런타임 환경으로, 구글 크롬의 V8 자바스크립트 엔진을 기반으로 만들어졌습니다. 이를통해서 웹 브라우저 내에서만 작동하던 자바스크립트를 브라우저 밖, 즉 서버나 다양한 환경에서 실행할 수 있게 되었습니다.V8 엔진은 자바스크립트 코드를 매우 빠른 기계어 코드로 컴파일하여 실행하며, 인터프리터를 사용하지 않고 JIT(Just-In-Time) 컴파일 방식을 통해 최적화된 성능을 제공합니다. 오늘은 이 node.js로 서버를 구성하기전 단계인 프로젝트 세팅을 진행해볼 것입니다.JIT: 프로그램을 실행할 때 필요한 부분을 즉석에서 컴파일하는 방식프로젝트 생성이제 프로젝트를 생성해보도록 하겠습니다.Node.js 프로젝트를 위해 package...

오늘은 하이브리드 앱에 자동로그인을 구현해볼려고 합니다. 하이브리드 앱은 웹 기술을 기반으로 네이티브 앱의 기능을 함께 활용하는 구조이기 때문에, 자동로그인 기능을 구현할 때도 네이티브와 웹뷰(WebView) 사이의 인증 상태 동기화가 핵심입니다. 웹의 인증 상태를 네이티브에 저장하기위해 userdefault에 토큰을 저장, 조회하는 함수를 만들어줍니다.UserDefaults 는 IOS 앱에서 데이터를 영구적으로 저장하고 불러오는 데 사용하는 간단한 로컬 저장소입니다. class UserDataUtils { class func setLoginToken(_ token: String) { UserDefaults.standard.set(token, forKey: "loginToken") ..

오랜만에 서비스중인 프로젝트의 코드를 보고있었는데, 정말 코드가 심각하게 더러워서 리팩토링을 진행하게 되었다.분명 예전에 보았을 때는 괜찮다고 생각했는데, 오랜만에 코드를 확인해서 그런지 예전엔 생각하지 못했던 부분들이 보였다.이번 글에서는 개발자들에게 필수적으로 필요한 리팩토링에 대해서 이야기해볼려한다.refactoring오늘 이야기할려는 리팩토링 (refactoring) 이라는 단어는 영어사전에는 존재하지않는 단어다.그럼 언제부터 이 단어가 생기게 되었을까?이 refactoring 이라는 단어는 사실 언제 생겨났는지 명확하지 않다. 하지만 널리 퍼지기 시작한 계기중 하나를 이 사람이라고 이야기 할 수 있다.1990년 마틴 파울러라는 사람이 Refactoring: Improving the Design ..

이 글은 Why React Context is Not a "State Management" Tool 를 읽고 정리한 글 입니다. 소개모두 상태관리 라이브러리를 사용해 보셨나요?모두 프로젝트를 생성할 때 Context API와 Redux중에 어떤 상태관리 라이브러리를 선택해서 사용할지 고민했던 기억이 있으실겁니다.( 저도 예전에 상태관리 라이브러리를 선택하기위해 여러 라이브러리들 중에서 고민했던 기억이 있네요.😉 )아실수도 있으시겠지만 Context vs Redux라는 전에 리엑트 커뮤니티에서 가장 많이 논의되어온 주제 중 하나입니다.하지만 안타깝게도 이 논쟁은 도구의 목적과 사용 사례에 대한 혼동에서 생겨나게 됩니다. 오늘 이 글을 통해 Context 와 Redux가 명확하게 어떻게 다른지 이야기해보도..

웹 분야를 공부하다보면 "클로저"라는 단어를 들어보셨을 겁니다. 오늘은 이 한번쯤은 들어본 closure에 대해 정리 해보겠습니다. 클로저(Closure)JavaScript에서 클로저(Closure)는 이렇게 정의할 수 있습니다.함수와 그 함수가 선언될 당시의 렉시컬 환경(Lexical Environment)과의 조합 이렇게 정의만 보아선 이해하기 어려울 수 있습니다.조금더 간단히 설명해 보도록 하겠습니다.내부함수가 외부함수의 context에 접근할 수 있는 함수 조금 더 이해하기 쉬우신가요?이 개념을 기억하면서 클로저에 대해 차근차근 알아보도록 합시다.실행 컨텍스트먼저 클로저를 이해하기 전 함수의 실행 컨텍스트에 대해 간단히 알아야합니다.함수는 호출 될 때 함수의 실행 컨텍스트를 생성했다가, 실행이 끝..

안녕하세요! 프론트엔드 개발자 이아론입니다. 평소에 Next의 ssr을 통해 SEO를 향상시킨다~ 만 알고있다가정말로 Next의 ssr이 SEO에 엄청나게 큰 영향을 끼칠까? 라는 생각을 가지게 되어 SEO에 대해 알아보게 되었습니다.자, 한번 SEO에 대해 알아보도록 합시다! 🔎SEO가 멀까?네이버와 구글같은 검색엔진의 상위에 컨텐츠를 노출시킬 수 있는 방법은 2가지가 있습니다.바로 광고를 통해 컨텐츠를 상단에 위치시키는 것과 검색엔진에 친화적인 사이트를 구축하여 자연검색결과의 상단에 위치시키는 것입니다.SEO란 Search Engine Optimization의 약자로 구글이나 네이버같은 검색엔진에 광고가 아닌 무료 검색 방식을 통해 상위에 노출될 수 있도록 최적화하는 것을 말합니다. ..