성능 평가 결과저희 Componique 프로젝트는 성능 최적화를 위한 여러 가지 노력을 기울였고, 그 결과 성능 점수 100점을 달성했습니다. 페이지 로딩 속도와 성능을 최우선으로 고려해 각 컴포넌트의 경량화와 코드 최적화에 집중한 결과입니다. 구체적인 성능 측정 항목으로는 다음과 같은 지표들이 포함되었습니다:First Contentful Paint (FCP): 0.3초사용자에게 페이지의 첫 번째 콘텐츠가 표시되는 시간을 의미하며, 페이지 로딩의 첫 인상에 중요한 요소입니다. 0.3초라는 빠른 속도를 통해 사용자는 페이지 로딩을 거의 느끼지 못할 정도로 빠르게 경험할 수 있습니다.Largest Contentful Paint (LCP): 0.4초페이지의 가장 큰 요소가 완전히 표시되는 시간을 측정합니다. ..

이번 글에서는 Componique 프로젝트에서 제가 맡은 역할과 작업 내용을 소개드리겠습니다. 저(김준수)는 이 프로젝트에서 다양한 UI 컴포넌트 개발을 주도적으로 진행하고, 문서화 작업과 배포까지 맡았습니다.1. 주요 역할1) 컴포넌트 개발 및 문서화제가 개발한 컴포넌트는 다양합니다. RadioButton, DropDown, Switch, Card, Avatar, ProgressBar, InfiniteScroll, Badge, Tooltip, Rating, Map, DataTable, FormValidation 등 웹페이지나 애플리케이션에 필수적인 컴포넌트를 개발했습니다. 각 컴포넌트의 기능을 다듬고, 문서화를 통해 다른 개발자들이 쉽게 이해할 수 있도록 작성했습니다.2) 메인 페이지 구현프로젝트의 메..

약 3개월간 진행된 Componique 프로젝트는 웅진씽크빅이 주최하는 청년일경험사업의 일환으로, 총 3개의 기업이 참여한 프로젝트입니다. 저희는 그 중 붐코커뮤니케이션이라는 기업과 협력하여 프로젝트를 진행했습니다.Componique 프로젝트 소개저희 팀 POTEN이 개발한 Componique는 웹사이트와 애플리케이션 제작 시 유용하게 사용할 수 있는 UI 컴포넌트 라이브러리입니다. 이 프로젝트는 UI 컴포넌트를 제공함으로써 사용자가 웹 디자인을 보다 쉽고 빠르게 구현할 수 있도록 돕는 것을 목표로 했습니다.Componique의 주요 특징은 사용자 맞춤형 페이지 제작에 중점을 두었다는 점입니다.저희 팀은 다양한 UI 컴포넌트를 커스터마이징할 수 있는 기능을 통해 더 나은 사용자 경험(UX)을 제공하고자 ..

인터넷을 사용하는 동안 도메인 이름(www.example.com)과 IP 주소(192.168.0.1) 간의 변환이 어떻게 이루어지는지 궁금했던 적 있나요? 그 답은 바로 DNS(Domain Name System)에 있습니다. 이번 포스팅에서는 DNS의 기본 개념과 구조에 대해 알아보겠습니다.🗂️ DNS란 무엇인가?DNS는 인터넷의 분산된 데이터베이스로, 도메인 이름을 IP 주소로 변환하는 역할을 합니다. 마치 전화번호부처럼, 사용자가 기억하기 쉬운 도메인 이름을 입력하면 해당 서버의 IP 주소로 변환해 웹사이트에 접근할 수 있게 해줍니다. 🏛️ DNS의 계층 구조DNS는 중앙 집중화된 시스템이 아닌, 계층 구조로 이루어진 분산 시스템입니다. 이렇게 분산된 구조 덕분에 트래픽 분산과 빠른 응답이 가능하..

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

애플리케이션 계층은 우리가 매일 사용하는 인터넷 서비스, 예를 들어 웹 브라우징, 이메일, 동영상 스트리밍 등을 가능하게 하는 중요한 계층입니다. 이번 글에서는 애플리케이션 계층의 기본 개념과 다양한 프로토콜에 대해 쉽게 설명해 드릴게요. 애플리케이션 계층이란? 🤔애플리케이션 계층은 네트워크의 최상위 계층으로, 사용자와 직접 상호작용하는 애플리케이션들이 위치합니다. 이 계층에서 클라이언트와 서버가 상호작용하며 데이터를 주고받죠. 예를 들어, 우리가 웹사이트를 열 때 브라우저(클라이언트)는 웹 서버에 요청을 보내고, 서버는 그에 대한 응답으로 웹 페이지를 전송합니다. 애플리케이션의 구조: 클라이언트-서버 구조와 P2P 구조 🖥️1. 클라이언트-서버 구조클라이언트-서버 구조는 중앙 서버가 항상(24시간 ..

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

웹 개발에서 서버와의 소통을 위해 많이 사용되는 기술 중 하나가 바로 서블릿(Servlet)입니다. 서블릿은 자바로 작성된 웹 애플리케이션 기술로, 서버에서 실행되며 클라이언트의 요청을 처리해 동적인 웹 페이지를 생성해줍니다. 이번 글에서는 서블릿의 기본 구조와 동작 원리를 차근차근 알아보겠습니다.서블릿이란? 🤔서블릿은 서버에서 실행되는 자바 클래스입니다. 웹 애플리케이션에서 클라이언트(예: 브라우저)가 요청을 보내면, 이 요청을 처리한 후 HTML 문서를 생성하여 다시 클라이언트에게 응답하는 역할을 합니다. 서블릿을 사용하면 자바의 모든 기능을 활용해 복잡한 비즈니스 로직도 처리할 수 있답니다!JSP(Java Server Pages)와 서블릿은 서로 밀접한 관련이 있어요. 사실, JSP도 내부적으로는..