프로젝트 소개저희 팀은 브라우저에서 실제 운영체제처럼 동작하는 웹 기반 OS 에뮬레이터를 개발했습니다. 단순한 데스크탑 UI가 아니라, 실제 OS의 구조를 웹 안에 얼마나 흡수할 수 있을지를 고민하며 파일시스템, 프로세스, 터미널, 부팅 화면까지 직접 구현한 프로젝트입니다.Windows를 모티브로 디자인하고, 사용자는 브라우저 환경 안에서 터미널을 열고 cd, ls와 같은 명령어를 입력해 실제와 유사한 동작을 수행할 수 있습니다.프로젝트 설계웹에서 돌아가는 OS를 만들다 보니 자연스럽게 상태 관리, 성능, 동시성, 싱크 문제 등이 발생했습니다. 또 “웹이 실제 OS처럼 동작하려면 어떤 내부 구조가 필요한가?”라는 근본적인 질문을 바탕으로 파일시스템 구조, 프로세스 모델, 터미널 파서 등 다양한 요소를 직..

프로그래밍 언어를 익히기 위해서는 해당 언어가 왜 만들어졌는지, 왜 이 언어를 선택하고 사용하는지 아는 것이 중요하다고 느낍니다..아래 질문들에 대해서 구체적으로 설명할 수 있게 될 겁니다자바스크립트가 뭔가요?자바스크립트 누가 어쩌다 왜 만들었어요?프론트엔드 개발할때 JS가 왜 필요한가요? 세계적인 정보 공유 시스템의 탄생웹 이전 시대, 문서는 어떻게 공유했을까?자바스크립트의 탄생을 알기 위해서는 먼저 HTTP, HTML, 브라우저가 어떻게 만들어졌는지 알아야 합니다.웹 발명 이전(1989년)에는 문서를 어떻게 주고받았을 것 같나요? 웹이 발명되기 전에도 대학교나 연구기관에서는 수강신청, 논문, 연구 문서 등을 주고받아야 했습니다.당시에는 1970년대에 개발된 이메일(SMTP)이나 FTP 같은 방식으..

올해 1월부터 진행해 온 부경대학교 동아리 플랫폼 "모아동" 서비스의 개발 속에 있었던 경험을 공유해보고자 합니다.이번 포스팅에서는 React + Webpack 환경을 직접 구성하면서 경험한 빌드 속도 개선 과정을 중심으로 정리해보려 합니다https://www.moadong.com/ 모아동모아 동아리! 부경대학교 모든 동아리를 한눈에!www.moadong.com CRA를 쓰던 지난 프로젝트동아리 활동을 하면서 웹 프론트엔드로 두 번의 프로젝트를 진행했는데 모두 Create React App(CRA) 기반으로 개발했었습니다.당시엔 셋업이 쉬워서 부담 없이 쓸 수 있었지만, 내부 설정을 커스터마이징하거나 빌드 최적화에 손을 대기 어려웠습니다. 또한 내부적으로 이미 로직이 다 되어있어서 빌드 도구의 내부적인 ..

1. 개요웹 애플리케이션이나 네트워크 통신 시스템을 설계할 때 "Stateless"와 "Stateful"이라는 개념이 등장합니다. 본 글에서는 Stateless와 Stateful의 개념, 장단점, 그리고 상태 연결 방식에 대해 설명합니다. 2. Stateful(상태유지)란?Stateful(상태 유지) 시스템은 클라이언트의 상태를 서버에서 유지하며, 연속적인 요청 간의 문맥을 기억할 수 있습니다.즉, 클라이언트가 서버에 요청할 때마다 이전 요청의 데이터를 유지한 채로 응답을 처리할 수 있습니다. Stateful 예시Stateful - 상태 유지고객: 이 노트북 얼마인가요?점원: 100만 원입니다. (노트북 상태 유지)고객: 2개 구매하겠습니다.점원: 200만원 입니다. 신용카드, 현금 중에 어떤 걸로 구매..

자바스크립트는 과거 간단한 웹 페이지에 스크립트를 추가하는 용도로 시작되었지만, 점차 대규모 웹 애플리케이션 개발로 확장되었습니다.이 과정에서 코드를 체계적으로 관리하기 위해 등장한 것이 모듈과 모듈 시스템입니다.하지만, 이렇게 나뉜 모듈들은 브라우저와 웹 서버 간의 과도한 HTTP 요청을 유발해 성능 저하를 가져오는 문제를 안고 있었습니다.이 문제를 해결하기 위해 등장한 것이 바로 모듈 번들러(Module Bundler)입니다.이 글에서는 모듈, 모듈 시스템, 그리고 이를 효과적으로 관리하기 위한 Webpack을 통해 번들링 과정을 알아보겠습니다.  모듈 시스템자바스크립트는 과거 간단한 웹페이지에 스크립트를 추가하는 용도로 시작했지만, 점차 복잡하고 대규모 웹 애플리케이션으로 확장되면서 코드 파일을 여..

DOMHTML 문서는 브라우저에 의해 파싱되어, 각 요소를 자바스크립트 객체로 변환한 DOM(Document Object Model) 트리 형태로 브라우저에 저장됩니다.이 DOM 트리는 브라우저의 렌더링 엔진에 의해 관리되며, 이를 기반으로 웹 페이지가 렌더링됩니다. 가상 돔(Virtual DOM)이 왜 등장했는가?가상 DOM의 등장 배경을 이해하기 위해서는 CSR(Client Side Rendering)과 SSR(Server Side Rendering)이라는 렌더링 방식을 먼저 이해해야 합니다. CSR vs SSRSSR (Server Side Rendering) 사용자의 요청에 따라, 웹(프론트) 서버가 최종 완성된 HTML을 생성하여 클라이언트에 전송합니다.각 페이지 요청마다 서버에서 HTML을 생성..