wdym 님의 블로그

오늘의 주제는 DOM(Document Object Model)이다. 우리가 작성한 코드가 어떻게 화면에 나오게 되는지 간단한 코드 예시를 보며 확인해 보고자 한다. 화면 표시 과정과 DOM의 정의우리가 작성한 HTML/CSS 파일은 바로 웹페이지 상에 표시되지 않는다. 브라우저는 이 파일을 가지고 아래와 같은 과정을 진행하고 이를 화면에 표시하게 된다. 우리가 작성한 파일은 브라우저가 이해할 수 있도록 HTML은 DOM, CSS는 CSSOM으로 트리 구조 형식의 객체로 변환된다. 그 후 이 둘을 조합하여 Render Tree(DOM+CSSOM)를 형성하는데, 여기서 실제 화면에 표시되는 요소들만 가져오게 되고, 레이아웃을 계산한 뒤 우리가 보는 웹페이지 화면에 표시되게 됩니다. DOM은 웹 브라우저가..

프로젝트 진행 상황2일차까지는 Spring Boot를 이용해 게시글 CRUD API를 구현하고, Postman을 통해 요청과 응답이 정상적으로 동작하는지 확인하였다. 하지만 실제 웹 애플리케이션에서는 사용자가 Postman을 사용하는 것이 아니라, 브라우저 화면에서 버튼을 클릭하거나 값을 입력하면서 서버와 통신한다. 따라서 3일차의 목표는 프론트엔드와 백엔드를 연결하여 React 화면에서 Spring Boot API를 직접 호출 하는 것이다. 즉, 이번 3일차의 핵심은 "Postman에서 확인한 API를 실제 프론트엔드 화면과 연결하는 것" 이다. 오늘 구현 목표- React에서 게시글 목록 조회하기- React에서 게시글 작성 요청 보내기- React에서 게시글 삭제 요청 보내기- Spring Boot..

프로젝트 개요이번 미니 프로젝트에서는 개발 중 발생한 오류를 기록하고 공유할 수 있는 웹 애플리케이션을 만들어보려고 한다. 개발을 하다 보면 같은 오류를 반복해서 만나거나, 과거에 해결했던 문제를 다시 검색하는 경우가 많다. 그래서 오류 상황, 원인, 해결 방법을 한 곳에 정리할 수 있는 게시판 형태의 서비스를 기획했다. 프로젝트 주제프로젝트명: ErrorNote 주제: 개발 중 발생한 오류와 해결 과정을 기록하는 에러 로그 게시판 핵심 목표: 단순한 게시판 CRUD를 구현하는 것이 아니라, 실제 개발자가 겪은 오류를 기록하고 다시 활용할 수 있는 형태의 웹 앱을 만드는 것이다. 주요 기능이번 프로젝트에서 구현할 주요 기능은 다음과 같다. - 회원가입 / 로그인 - 에러 로그 게시글 작성 - 게시글 목록..

SSE를 이용한 실시간 알람 기능 구현에 대해 글을 작성해 보고자 한다. 기본적인 구현 방법과 내가 직접 작성한 코드를 통해 어떻게 구현 했는지 포스팅 해보려고 한다. 관련 이론은 다른 글에 포스팅해 놓았다. 여기를 클릭하면 확인할 수 있다. 구현 환경 : Spring boot + Next.js 개요SSE(Server-Sent Events)는 서버에서 클라이언트로 데이터를 지속적으로 전송할 수 있는 단방향 실시간 통신 기술이다. 클라이언트는 EventSource 객체를 이용하여 서버에 구독 요청을 보내고, 서버는 text/event-stream 형식으로 연결을 유지한 채 데이터를 지속적으로 전달한다. 아래 그림은 SSE의 기본 동작 흐름이다. SSE 네트워크 프로토콜연결(구독, Subscribe)Cl..