성능 최적화를 한 번도 제대로 알아본 적이 없는 것 같아, 면접을 준비하면서 어떠한 방법들과 개념들이 있는지 알아보았다.브라우저가 페이지를 표시하기 위해 서버에서 HTML , CSS , JS , 이미지 등 여러 파일을 받아오는데, 이 다운로드 과정을 줄이거나 빠르게 만

자바스크립트는 원래 브라우저 안에서만 실행됨Node.js는 JS를 브라우저 밖에서도 실행할 수 있게 해주는 환경우리가 사용하는 개발 도구들(Vite, ESLint, Tailwind 등)은 모두 Node.js 기반다른 사람이 만든 라이브러리를 설치하고 관리해주는 도구대표

📍 핵심 개념 요약 프락시는 클라이언트와 서버 사이에서 중간자 역할을 하는 서버 클라이언트는 프락시를 통해 요청을 보내고, 프락시는 실제 서버 대신 요청 후 응답을 클라이언트에 전달 개발 중 CORS 문제 회피를 위해 프락시 서버를 설정하기도 한다. 요청이 프락시를

웹 서버는 HTTP 요청을 받아 응답을 돌려주는 프로그램이다.주된 역할은 리소스 제공, 요청 라우팅, 애플리케이션과 연동 등이다.정적 컨텐츠 제공(HTML, CSS, JS, 이미지)과 동적 컨텐츠 처리(API, 서버 로직 실행) 모두 가능하다.보안, 인증, 로깅, 캐싱

HTTP 통신은 TCP 커넥션 위에서 이루어진다.커넥션 관리가 제대로 안 되면 느린 속도, 리소스 낭비, 서버 과부하가 발생한다.HTTP/1.0 : 요청마다 새로운 커넥션을 생성 (비지속 연결)HTTP/1.1 : 기본적으로 커넥션을 유지 (지속 연결 - keep-ali

HTTP 메시지 구조 : 시작줄 → 헤더 → 본문 순서의 데이터 블록요청 메시지 : <메서드> <요청 URL> <버전> 으로 시작응답 메시지 : <버전> <상태 코드> <사유 구절> 로 시작헤더 : 요청/응답에 대한 부가정보 전달 (ke

URL : Uniform Resource Locator - 웹 리소스의 주소URI : Uniform Resource Identifier - URL을 포함하는 상위 개념(이름 또는 위치로 식별)스킴 : http:// 와 같은 통신 프로토콜 지정호스트 : 도메인

HTTP : HyperText Transfer Protocol - 웹의 요청/응답 통신 규칙리소스 : URI로 식별 가능한 웹 상의 모든 대상 (HTML, 이미지, JSON 등)요청/응답 : HTTP 는 요청-응답 기반의 통신 구조HTTP 는 비연결성 : 요청 간 상태

📌ㅤ헥사곤 그리드 배치 >### 📍ㅤ제약 및 구현 조건 방들이 겹치거나 중간에 빈 공간이 생기지 않아야 한다. 규칙성 있게 확장되어야 하며, 나의 방은 항상 중앙에 위치해야 한다. 헥사곤 좌표계를 이용하여 배치한다. 🚨 10번째 방부터 중복 배치되는 현상 ㅤ

📍 Three.js 란? > WebGL 을 기반으로 한 JavaScript 라이브러리로, 웹 브라우저에서 3D 그래픽을 쉽게 렌더링할 수 있도록 도와준다. 기본적인 원리로는 WebGL을 직접 다루는 복잡한 과정을 추상화하여 사용자가 간단한 코드로도 강력한 3D 환경을

📍 방 프리뷰 > 메인 페이지의 핵심 기능인 방 프리뷰는 사용자의 방을 중심으로 하우스메이트(팔로잉)의 방을 시각적으로 보여주는 기능이다. 3D 모델링된 방을 벌집 구조로 배치하여 한눈에 확인할 수 있도록 구현해야 한다. >### 📌ㅤ제약 및 구현 조건 방들이

📌 Dock Menu 구현 > 이번에 처음으로 복잡한 css 처리를 포함한 Dock-Menu를 만들어 보았다. 이 메뉴는 [테마 설정], [취향 설정]을 위한 도구들이 모여 있으며,디자인에서는 자연스러운 애니메이션을 통해 선택된 아이콘이 바뀌고, 선택된 상태가 유지

처음엔 멋진 프로젝트를 만들고 싶다는 마음에 신박한 아이디어를 찾으려 했다. 하지만 그런 아이디어일수록 이미 존재하는 서비스가 많았고 고민할수록 점점 무겁고 어려운 주제만 남아 막막해졌다. 그런 주제들은 구현 과정에서 부딪힐 문제들도 많아 보였고 아이디어 자체에만 집착

📌 Delta Time 적용 🚨 문제점 > 최종 QA를 진행 중, 팀원들 간 게임 속도가 상이하다는 것을 발견하였다. 해당 문제에 대해서 알아본 결과, 모니터 주사율(Hz)에 따라 게임 속도가 다르다는 것을 알게되었다. 기존에 구현했던 게임들은 프레임 기반 업데이트

유령 캐릭터 "Boo"가 장애물을 피하며 날아가는 단순하면서도 중독성 있는 게임이다. space 키를 조작하여 유령을 점프시키며 장애물에 부딪히지 않고 최대한 오래 비행하는 것이 목표이다.이 게임은 Kaplay 라이브러리를 활용하여 구현하였다. Kaplay 는 복잡한

사용자가 이미지를 업로드할 때 이미지의 파일명이 한글로 된 경우 업로드 되지 않는 오류가 발생했다.한글 파일 이름 인코딩 문제 : 파일명에 한글이 포함된 경우, 서버에서 이를 처리하는 데 문제가 발생할 수 있다. 이는 URL 인코딩이나 파일 시스템에서 한글을 처리할 수

구성 흐름 : 파일 선택 → 미리보기 생성 → 상위 컴포넌트로 데이터 전달 → 서버 업로드 준비 → 업로드 🔎 컴포넌트 구조 📍 PostEditImg : 다중 이미지 업로드 UI와 로직을 담당하는 부모 컴포넌트 최대 4개의 이미지 슬롯 이미지 미리보기와 업로

현대 사회는 고물가, 빠듯한 직장 생활, 치열한 학업 등으로 인해 많은 사람들이 스트레스를 해소할 공간을 찾고 있다. 스트레스 해소 방법을 고민하던 중, 문득 게임이 떠올랐다. 게임을 즐기는 짧은 순간에도 도파민이 분비되어 정서적 안정감을 주는 등, 게임은 훌륭한 스트

🎯 학습 목표 > - 학습 방식 : 챕터별로 함께 읽고 공유 및 문제 풀이 학습 시간 : AM 10:00 ~ PM 12:00 학습 목표 : ~ 09. 트리 💬 새로 알게 된 것 01. 트리 > ### 📕 [ P. 289 - 09 트리] " 트리는 데이터를

일단 Supabase 를 본격적으로 공부하기 전, 이게 어떤 것이고 어떤 점이 좋은지 알아보자.오픈 소스 : Supabase 는 오픈 소스 프로젝트로, 코드가 공개되어 있어 커스텀마이징이 가능하다.PostgreSQL 기반 : PostgreSQL 을 사용하여 데이터베이스