본문 바로가기

전체 글117

Session 01. 렌더링의 전체 흐름 DOM 요소부터 React의 Diffing까지:React 앱이 실제 브라우저에 어떤 식으로 화면을 그리는가?그리고 DOM과 관련된 처리 과정이 어떤 순서로 일어나는가?1. HTML과 DOMHTML은 웹페이지를 구성하는 **문서(Text)**일 뿐이다.브라우저는 이 HTML을 파싱해서 DOM(Document Object Model) 이라는 트리 구조로 변환한다.DOM은 쉽게 말하면 계층을 가진 트리 형태이다. (트리는 소위 말하는 부모 자식이 존재하는 구조인데)우리가 쓰는 자바스크립트로 자식을 찾고 부모를 찾고 하는 것 ( DOM 조작이 가능해진다)DOM은 각 HTML 요소들을 **노드(Node)**로 표현하며, 트리처럼 부모-자식 관계를 가진다. Hello 안녕하세요 document└── body .. 2025. 3. 24.
비동기 함수와 useEffect에서의 처리 방식 쉽게 이해하기 기본 이해부터  : 비동기 함수 (async/await)를 왜 사용해야 할까? API 요청을 할 때, 서버에서 응답을 받기까지 시간이 걸리기 때문! 이렇게 말하면 뭐라는지 모를게 뻔하니,API 호출은 뭡니까 -> 네트워크를 통해 외부 데이터를 가져오는 것이 떄 네트워크 요청은 응답이 오기까지 시간이 얼마나 걸릴지 예측이 불가능합니다. 근데 이때 우리가 쓰는 자바스크립트는 동기적으로 작동하는데,네트워크가 느려서 응답을 기다리는 동안 동기적 작동하는 자바스크립트가 딱 막혀버리면전체가 막혀버리겠습니다. (blocking) 이라 하죵흔히 쓰는 크롬 브라우저의 버튼 클릭이랑 화면 조작이 먹통이되는 겁니다.결론적으로 이를 방지하기 위해서 작업이 완료될때까지 기다리지 않고, 다른 작업을 할 수 있도록 하는 것이 목적.. 2025. 3. 20.
Theme #2. 일본의 세대별 특징 일본의 세대 구분과 특징 간략 정리를 해볼겁니다. 일본에서는 역사적 배경과 사회적 현상에 따라 여러 세대를 구분하는데, 우리나라랑 약간 비슷한 측면도 없지 않아 있긴합니다. 주요 일본 세대  Part #1. (1935-1970)전흔세대(焼け跡世代, 1935~1946): 전쟁의 상처를 경험한 세대 (전쟁의 흔적)단카이 세대(団塊世代, 1947~1949): 베이비붐 세대, 전후 일본의 부흥을 이끈 주역 , 단카이 세대가 제 1베이비붐 시대로써 소위 말하는 내가 일본을 키웠다하는 세대입니다.시라케 세대(しらけ世代, 1950~1964): 냉소적이며 사회적 열의가 낮은 특징 (무감동적이며 무기력세대입니다)신인류 세대(新人類世代, 1961~1970): 새로운 가치관과 개인주의 성향을 강조하는 세대. 좀 더 거칠게 .. 2025. 3. 20.
Server Request Parameter Handling : 동적 키를 활용한 상태 관리 vs 개별 상태 관리 (무엇이 더 확장성에 도움 되는가?) 이 글은 또 왜 쓰게 되었는가명지대학교 검색 커뮤니티의 명대신문에서 데이터(신문 데이터)를 Fetching하는 로직을 짜다가 나온 문제이다. API 데이터를 관리할 때, 여러 개의 카테고리 데이터 (Request Paramter로) 를 어떻게 관리할 것인가? 하는 문제를 마주하게 됐다.  이때 각각의 상태를 따로 관리하는 방식과 동적 키를 활용하는 방식을 학습했는데 헷갈릴만한 소지가 있다고 판단하여 글을 남긴다. API 명세서 구조  (Request Param으로 카테고리 별 뉴스 기사 조회)### **📌`GET /api/v1/news?category={}`**- **Description:** RequestParam을 이용하여 특정 카테고리의 기사를 DB에서 가져옵니다.- **HTTP Method:**.. 2025. 3. 16.
Theme#1. 1950년대 전쟁 후, 일본은 어떻게 버블경제를 맞이했는가? <실전 압축> 현대 일본을 이해하려면, 역사를 공부해야한다고 들었다.맨날 코딩만 하니까 정신이 나가버릴 것 같아, 일본을 공부하기로 했다. 2차 세계대전 이후, 전범국이 었던 일본이 어떻게 1980년의 버블경제를 30년만에 이룩할수 있었을까?역사 전공이 아니지만, 몇가지 배경을 소개해보자 한다.1. 전후 일본 경제의 초기 재건에는 미국과 한국전쟁이 있었다.미국의 지원과 한국전쟁 특수1945년 제2차 세계대전 패배 후 일본은 심각한 경제난에 빠졌다. 미국의 냉전 전략에 따른 지원과 1950년 한국전쟁의 특수를 통해 군수물자 관련 생산이 크게 증가하면서 경제 재건의 기반을 마련했다. 이로 인해 일본은 성장의 기틀을 마련하였던 것이다.2. 일본 정부의 전략적 산업정책통상산업성(MITI)의 역할일본 정부는 통상산업성(MITI.. 2025. 3. 12.
튜토리얼 모달 컴포넌트 기능 개발 #2. 상세 설계서 튜토리얼 모달를 개발했는데, 생각보다 공부할게 많아 좀 더 상세히 분석을 했습니다.  1. 컴포넌트 역할 개요 OnBoardingModal.tsx온보딩 화면을 사용자에게 모달 형태로 제공하는 컴포넌트입니다.슬라이드 데이터를 관리하며 슬라이드 변경 상태를 slideIndex로 추적합니다.OnBoardingCarousel.tsx실제 캐러셀 UI를 담당하며, 슬라이드 간 이동을 처리하고 현재 선택된 슬라이드를 모달로 전달합니다.2. Props 구조와 데이터 흐름OnBoardingModal → OnBoardingCarousel 전달 Props는 크게 2가지slides: 슬라이드의 내용(배경 이미지, 제목, 설명)을 담고 있는 객체 배열입니다.-> 이 내용이 UX로 직접 렌더링 되겠습니다.onSlideChange.. 2025. 3. 11.
튜토리얼 모달 컴포넌트 기능 개발 #1. 기본 설계서 첫 task인 튜토리얼 (온보딩) 모달을 개발하며 했던 고민들을 저장했다TypeScript와 Next.js 환경에서의 최적화된 방식은 무엇일까 고민하다가...   요구사항 : 모달을 만들때 요청 받았던건 소개 이미지 + 캐러셀 조합으로 튜토리얼 가이드가 필요하다. 1. 두개의 커다란 덩아리2. 일단 전체적으로 두개의 컴포넌트로 나누면 좋겠다 싶었다  1. 컴포넌트 분리의 필요성  (유지보수와 성능개선)단일 책임 원칙 (SRP: Single Responsibility Principle)컴포넌트가 하나의 역할만 수행하도록 설계해야 유지보수가 쉬워지겠다. 가독성과 재사용성 증가모든 기능을 한 파일에서 처리하면 코드가 복잡해지고 유지보수가 어려워지겠다. 성능 최적화 (Next.js 환경 고려)서버 사이드 렌더링.. 2025. 3. 9.
Next.js에서 window와 localStorage 사용 시 서버 동작 고려하기 Next.js는 클라이언트에서 실행되는 React 기반의 프레임워크지만, 동시에 서버에서도 실행될 수 있는 환경을 제공한답니다.  따라서 window 객체나 localStorage 같은 브라우저 전용 기능을 사용할 때는 서버 환경을 고려해야 합니다. Vite만 쓰던 저에게 가장 어려운 부분이 이거였습니다. 서버의 존재를 계속 고려해야한다는   이번 글에서는 window 객체의 역할과 Next.js에서 localStorage와 같은 브라우저 전용기능을 활용할 때 서버 동작을 어떻게 고려해야하는지 학습한 내용을 정리합니다.window 객체란? 어디서 들어봤는데 이거 window 객체는 브라우저 환경에서만 존재하는 전역 객체입니다. 즉, 클라이언트(브라우저)에서만 접근 가능하고, 서버에서는 존재하지 않습니다... 2025. 3. 7.
Next.js + Typescript 적응기 #1: 프로젝트 구조와 개념 정리 새로운 프로젝트에 참여하게 되었습니다.내가 좋아했던 조합은 JS + Vite를 활용한 조합이었는데, ts + Next.js 조합을 사용하게 되어 Ts는 공부를 해놨지만, Next는 약간 미숙하여 정리하는 카테고리를 신설했습니다. Next.js를 처음 접하면 폴더 구조와 파일의 역할이 헷갈립니다. 특히, index.ts, page.tsx, .ts와 .tsx의 차이 등을 명확히 이해하는 것이 중요합니다. 사실 별건 아닐지라도, 처음 접하거나 미숙한 사용자에게 도움이 되었으면 합니다. 이번 포스팅에서는 Next.js의 프로젝트 구조와 핵심 개념을 정리해보겠습니다.Next.js의 파일 구조와 역할깃허브에 다른 사람 레포를 보면 아니 왜 폴더마다 index.ts가 있지. 싶을겁니다1.  index.ts의 역할 (.. 2025. 3. 6.

티스토리툴바