낭 만 당

1. 식별의 정밀도: 사용자 ID를 넘어 oxuid 도입하기일반적인 서비스는 유저 ID만으로 사용자를 식별하지만, 실제 운영 환경에서는 한 사용자가 여러 브라우저를 쓰거나 여러 개의 탭을 띄워놓고 작업하는 경우가 비일비재합니다. 이때 동일 계정 내에서 발생하는 데이터 충돌을 제어하기 위해 oxuid(Browser-level Unique ID)를 도입했습니다.브라우저 세션이나 로컬 스토리지에 고유 키를 생성하여 저장하고, 모든 API 요청 헤더에 이를 포함시켰습니다. 이를 통해 로그 추적 시 어떤 사용자가 수정했는지를 넘어, 어느 브라우저 컨텍스트에서 발생한 행위인지 명확히 분리할 수 있게 되었습니다. 이는 CS 인입 시 클라이언트의 로컬 상태와 서버의 타임라인을 매칭하는 결정적인 단서가 됩니다.2. 소켓..

2026년 1월, 회사에 입사하면서 처음으로 “회사에서 웹을 만드는 사람”이 됐습니다.첫 출근 주에 느낀 감정은 생각보다 단순했습니다..빨리 도움이 되고 싶고, 동시에 문득문득 “내가 알고 있던 것들이 여기서도 진짜 통할까?” 하는 불안도 같이 따라왔죠. 학교 과제나 개인 프로젝트에서는 일정이 조금 밀려도 “내가 감당하면 그만, 다시 하면 그만”이라는 여지가 있었는데, 회사에서 만든 웹은 운영팀/CS/영업/그리고 고객의 시간이 같이 걸려 있었습니다. 그게 체감되는 순간, ‘같은 코드를 짜도 결이 다르다’는 걸 자연스럽게 알게 됐어요.저에게 할당된 이슈는 온전희 "저만의 것"이었습니다. 제가 짠 코드의 책임은 제가 감당하는 것이었죠,,, (몇번 사고쳤습니다 허헣) 돌이켜보면 지난 3개월은 “기능을 만드는..

작년 11월, 프론트엔드 프로젝트에 참여하면서 Next.js 라는 프론트엔드 프레임워크에 대해서 배웠다. 그때 했던 토이프로젝트들..https://github.com/seongyun4359/Board-NextJS GitHub - seongyun4359/Board-NextJS: NextJS TypeScript를 활용한 웹 보드NextJS TypeScript를 활용한 웹 보드 . Contribute to seongyun4359/Board-NextJS development by creating an account on GitHub.github.com https://github.com/seongyun4359/Weather-Dashboard GitHub - seongyun4359/Weather-Dashboard:..

웹 개발 중에 초기 렌더링이 너무 느리다는 판단을 했다.이를 어떻게 해결할지 알아보다가, lazy loading에 대해 알게 되었다. 웹 페이지가 사용자에게 빠르게 보여지는 것은 사용자 경험(UX)의 핵심이다.페이지가 느리게 로딩되면 사용자는 금세 떠나버리며, 이는 트래픽 손실로 이어진다.이를 방지하기 위해 다양한 성능 최적화 기법이 사용되는데, 그 중 Lazy Loading(지연 로딩)은 이미지, 비디오, 콘텐츠 로딩 최적화에서 매우 효과적인 방식이다. 이 글에서는 Lazy Loading의 개념과 작동 방식, 구현 방법, 그리고 실제 적용 시 유의할 점까지 종합적으로 설명한다.Lazy Loading은 웹 페이지가 로드될 때, 사용자가 당장 보지 않는 콘텐츠는 나중에 필요할 때 로드하는 방식이다. 즉, ..

프로그래밍을 처음 접하거나 웹 개발을 시작하면 반드시 마주치는 언어가 있다. 바로 JavaScript다. 그리고 그 옆에서 함께 언급되는 또 다른 언어가 있으니, 그것이 바로 TypeScript다. 겉보기엔 비슷해 보이지만, 실제로는 분명한 차이가 존재한다. 이 글에서는 입문자의 눈높이에서 JavaScript와 TypeScript의 차이를 간단하고 명확하게 정리해보려고 한다. 1. JavaScript란? JavaScript는 웹 브라우저에서 동작하는 스크립트 언어다. 웹 페이지에서 버튼을 눌렀을 때 동작을 처리하거나, 데이터를 불러오거나, 사용자 인터페이스(UI)를 조작할 때 주로 사용된다.HTML이 뼈대, CSS가 스타일, JavaScript는 행동을 담당한다.처음에는 단순한 웹용 스크립트 언어로 ..

Next.js 개념 정리Next.js란?Next.js는 React 기반의 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 프레임워크입니다. SEO 친화적이며, 빠른 페이지 로드와 개발 생산성을 제공합니다.Next.js의 동작 원리SSR (Server Side Rendering): 서버에서 React 컴포넌트를 렌더링하여 HTML을 클라이언트로 전달합니다.SSG (Static Site Generation): 빌드 시 HTML 파일을 생성해 클라이언트로 제공합니다.CSR (Client Side Rendering): 브라우저에서 JavaScript로 렌더링을 처리합니다.ISR (Incremental Static Regeneration): SSG에 동적 콘텐츠 업데이트를 추가한 방식입니다.N..

React에서 이전 데이터를 전달하며 화면 이동하는 방법 조건 1 회원가입 버튼을 누르면 이전 단계에서 작성했던 모든 데이터가 alert에 노출되어야 한다. 데이터 전달 및 화면 이동 방식 useNavigate Link useNavigate 개요 useNavigate는 React Router v6에서 제공되는 훅 중 하나로, 함수형 컴포넌트에서 라우터 객체를 얻어 프로그래밍 방식으로 페이지 간 이동을 처리할 수 있게 한다. 사용법 import { useNavigate } from 'react-router-dom'; const navigate = useNavigate(); ..