👨‍💻 Programming

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을 생성..

Arduino IDE에서 VS code로 이주하는 이유아두이노 IDE의 한계 때문에 코드 자동완성 부족, UI 가독성 문제, 다중 프로젝트 관리 기능 부재로 인해, 더 직관적이고 강력한 VS Code로 개발 환경을 옮기기로 결정했습니다. Platform IO란?PlatformIO는 VS Code와 통합되어 임베디드 시스템 및 마이크로컨트롤러 개발을 더욱 강력하고 효율적으로 만들어주는 크로스 플랫폼 개발 환경입니다.특징PlatformIO는 다양한 마이크로컨트롤러 보드를 지원합니다.- Arduino Uno, ESP32, ESP8266, STM32, RP2040 등 수백 개의 보드 지원- 다중 보드 프로젝트 가능 ❓ PlatformIO만으로 Arduino IDE 없이 아두이노 개발이 가능한 이유!Arduino..

브라우저란?웹 브라우저는 인터넷의 많은 정보(HTML)를 보여주고 전송하는 소프트웨어 프로그램이다. 프런트엔드 개발자는 브라우저에 대해 제대로 알고 있어야한다. 브라우저를 통해 개발, 배포, 디버깅등을 하고, 최종 사용자들도 브라우저를 통해 웹 애플리케이션에 접속하기 때문이다.본 글은 사용자가 브라우저에 사이트 주소를 입력했을 때 페이지가 보여지는 그 원리를 브라우저 측면에서 가볍게 서술한다. 브라우저의 동작사용자가 웹 브라우저에 유튜브 주소를 입력하면, 웹브라우저는 해당 주소(유튜브 서버)에게 요청을 하여 유튜브의 HTML, CSS, JS등의 리소스 파일을 전송받는다. 이때 응답받는 파일은 bit stream(010101011)으로 표현되어 있다. 브라우저는 받은 bit stream을 인코딩하고 렌더링..

Javascript를 활용해서 백준 사이트에서 문제를 풀 때 사용하기 좋은 입력 방법을 찾아서 정리한 글입니다. 백준을 자바스크립트로 풀기 어려운 이유코딩 문제를 해결하는 대표적인 사이트에 백준, 프로그래머스가 있다.프로그래머스는 아래 코드와 같이 입력받는 값이 함수의 매개변수로 주어지기 때문에 입력받는 부분을 따로 만들 필요가 없다. function solution(age) { var answer = 0; return answer;}그러나 백준은 입출력을 stdin, stdout 방식으로 받기 때문에 입출력 과정을 전부 명시해줘야 한다. 자바스크립트는 브라우저 환경에서 사용되는 목적으로 개발된 언어이므로, Node.js가 등장하기 전에는 백준과 같은 환경에서 표준 입력(stdin)을 직접 다..