트랜스포트 계층이란 무엇일까?트랜스포트 계층은 네트워크에서 데이터를 전송할 때 중요한 역할을 담당하는 계층 중 하나로, 애플리케이션 프로세스 간의 논리적인 통신을 제공합니다. 쉽게 말해, 서로 다른 컴퓨터에서 실행되는 프로그램들이 서로 데이터를 주고받을 수 있도록 돕는 계층입니다.이때 트랜스포트 계층은 네트워크 계층과 함께 작동하는데, 네트워크 계층이 호스트 간의 통신을 담당하는 반면, 트랜스포트 계층은 호스트 내부 프로세스 간 통신을 담당합니다. 따라서 트랜스포트 계층은 호스트 간 논리적인 통신 외에도, 각 호스트 내에서 애플리케이션 프로세스가 데이터를 주고받을 수 있도록 보장합니다.트랜스포트 프로토콜: TCP와 UDP트랜스포트 계층에서 사용되는 두 가지 주요 프로토콜은 TCP(Transmission ..

코드를 작성하다 보면, 코드 블록을 하이라이트해서 가독성을 높이는 것이 중요합니다. 특히 기술 블로그나 문서 작성에서 코드를 더 잘 보여주기 위해 코드 하이라이트 기능을 자주 사용하죠. 이번 프로젝트에서도 MDX 파일에서 코드 블록을 잘 보여주기 위해 하이라이트 문제를 해결한 경험을 공유하려고 합니다.문제: MDX 파일에서 코드 블록 하이라이트가 제대로 되지 않음처음에는 MDX 파일에서 코드 블록을 작성했지만, 코드의 가독성이 떨어졌습니다. 코드 블록에 하이라이트가 제대로 적용되지 않았기 때문에, 이를 해결하기 위해 라이브러리를 찾아보게 되었습니다.더보기✅MDX 파일이란?MDX는 Markdown과 JSX를 결합한 포맷입니다. Markdown은 간결하게 글을 작성할 수 있는 언어로, 주로 블로그나 문서 작..

우리가 매일 접하는 웹페이지들은 어떻게 동작할까요? 그 답은 HTTP(HyperText Transfer Protocol)라는 웹 애플리케이션 프로토콜에 있습니다. 오늘은 이 HTTP의 원리를 쉽게 풀어보겠습니다.📄 웹의 구조와 HTTP웹페이지는 다양한 객체(서버, 클라이언트)로 구성됩니다. 기본적으로 HTML 파일이 핵심이며, 이미지나 오디오 파일, Java 애플릿 등 다양한 객체가 포함될 수 있습니다. 이러한 웹페이지는 고유한 URL로 식별됩니다. 🖥️ 클라이언트-서버 모델웹은 클라이언트-서버 모델을 기반으로 동작합니다. 브라우저(클라이언트)는 서버에 HTTP 요청을 보내고, 서버는 요청에 따라 HTML 파일이나 기타 리소스를 반환합니다. 이 과정에서 브라우저는 서버로부터 받은 데이터를 화면에 표시..

웹페이지를 만들 때 동적인 기능을 추가하고 싶을 때, 우리는 JSP를 사용하죠. 그중에서도 디렉티브와 액션 태그는 웹 페이지의 다양한 기능을 담당하는 중요한 요소입니다. 이번 글에서는 JSP에서 자주 사용하는 디렉티브 태그와 액션 태그에 대해 쉽고 간결하게 설명해드리겠습니다.JSP 디렉티브 태그란? 🤔디렉티브 태그는 JSP 페이지의 속성이나 동작 방식을 지정해주는 태그입니다. 웹 서버가 JSP 페이지를 어떻게 처리할지 지시하는 역할을 하죠. 크게 page, include, taglib 세 가지 종류가 있습니다.1. page 디렉티브page 디렉티브는 JSP 페이지의 기본 설정을 담당합니다. 예를 들어, 어떤 인코딩을 사용할지, 어떤 라이브러리를 불러올지를 설정할 수 있어요.여기서는 페이지 인코딩을 UT..

웹 개발을 하다 보면, 정적인 HTML만으로는 부족한 경우가 생깁니다. 데이터베이스와의 소통, 동적인 페이지 처리 등이 필요할 때, 바로 JSP(Jakarta Server Pages)가 등장하죠. JSP는 웹 페이지에서 자바 코드를 삽입해 서버와 소통할 수 있는 강력한 도구입니다.JSP와 서블릿의 관계서블릿은 서버에서 자바로 웹 페이지를 동적으로 처리하는 기술입니다. 반면, JSP는 HTML 문서에 자바 코드를 삽입해 동적 페이지를 만들 수 있는 스크립트 언어입니다. 즉, JSP는 HTML과 자바가 혼합된 형태라고 생각하면 됩니다. 한마디로 JSP는 프런트엔드와 백엔드를 연결해주는 다리 같은 역할을 하죠. JSP 파일 구조JSP 파일의 구조를 간단히 살펴볼게요. 아래 코드는 간단한 JSP 파일의 예입니다..

안녕하세요!프론트엔드 분야에서 나의 개발 실력을 테스트하고 스스로 평가하기 위한 몇가지 항목들을 가져와봤습니다. 프론트엔드 기술은 빠르게 변화하고 있으며, 최신 트렌드와 기술들을 따라잡는 것이 중요합니다.이 글에서 여러분들이 본인은 몇 점짜리 개발자인지 스스로 평가해볼 수 있는 항목들을 소개해보고,다음 글부터 저 역시 같이 평가해보는 시간을 가지도록 하겠습니다.1. 웹 뼈대 및 UI 구현 관리JavaScript로 DOM 요소 동적 조작: JavaScript를 사용해 DOM 요소를 동적으로 조작하고, 사용자 입력에 따라 인터페이스를 업데이트할 수 있나요?이벤트 리스너 구현 및 핸들링: 사용자와의 상호작용을 위해 이벤트 리스너를 구현하고 이를 효율적으로 핸들링할 수 있나요?TypeScript로 타입 정의 및..

TypeScripte(타입스크립트)는 자바스크립트의 상위 집합으로, 정적 타입을 지원하여 더 안정적이고 유지보수가 쉬운 코드를 작성할 수 있도록 도와주는 문법입니다.타입스크립트 작성을 위한 초기세팅을 알려드리도록 하겠습니다. 1. Node.js와 npm 설치타입스크립트 사용을 위해서는 최신 버전의 Node.js와 npm이 설치되어야 합니다.설치는 및에 공식 사이트에 접속하여 다운받으실 수 있습니다.Node.js — Run JavaScript Everywhere (nodejs.org) Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. 프로젝트..

리액트(React)는 현대 웹 개발에서 중요한 역할을 하는 라이브러리입니다.리액트의 핵심 개념과 JSX 문법을 간단히 설명하겠습니다.리액트는 UI를 컴포넌트 단위로 나눕니다. 각 컴포넌트는 트리 구조를 형성하며, 이 구조는 실제 DOM과 유사합니다.컴포넌트 트리는 DOM과 같은 형태로 구성됩니다. 리액트는 Virtual DOM을 사용하여 성능을 최적화합니다.Virtual DOM에서 변경 사항을 적용한 후, 실제 DOM에 필요한 부분만 업데이트하여 효율적으로 렌더링합니다.리액트에서는 JSX(Java Script XML) 을 사용합니다.(강제는 아니지만 권장,, 매우매우 높은 빈도로 사용중입니다.)JSX는 JavaScript 안에서 HTML을 작성할 수 있는 문법입니다.컴포넌트를 정의하고, render 함수..