전체 글

Electron이란?Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. javascript, html, css로 데스크톱 앱을 만들 수 있는 프레임워크로, electron으로 제작한 어플리케이션의 실행 파일(executable file)에 Cromium(웹 브라우저 엔진)과 node.js(백엔드)가 포함되어 있어서 별도의 설치 과정 없이 바로 실행 가능한 실행 파일을 제작할 수 있습니다. 하나의 코드베이스로 Windows, macOS, Linux에서 모두 동일하게 동작하는 애플리케이션을 만들 수 있다는 장점이 있습니다.  chromium 구글이 개발한 오픈 소스 웹 브라우저 프로젝트로 렌더링 앤..

mahifest.jsonThis JSON file describes the extension's capabilities and configuration. JSON 파일은 익스텐션의 확장 기능 및 구성에 대해 설명합니다. 필수 key는 manifest_version과 name, version 입니다. content script 한 페이지의 내용을 읽고 쓸 수 있는 스크립트를 실행할 수 있는데, 이것이 바로 콘텐츠 스크립트입니다. menifest.json에 content.js라는 이름의 파일을 등록해 사용할 수 있습니다.  background script | extension service workerv2까지는 background script와 service worker가 따로 구분 or background..

로그 파일?시스템이나 어플리케이션 등에서 생성된 다양한 정보(이벤트, 오류나 상태 변화 등)에 대한 정보를 기록하는 파일입니다. 디버깅, 모니터링, 감사나 보안 용도 및 성능 분 등에 사용됩니다. 로그 파일을 생성 및 기록하는 과정을 로깅이라고 합니다. 웹 환경에서의 로깅은?크게 웹 서버와 어플리케이션 자체에서 처리하는 로깅으로 갈립니다.  웹 서버요청/응답/오류 등을 웹 서버가 기본적으로 로그 파일을 생성하고 기록합니다. apache나 nginx에서는 특정 경로(주로 log폴더 내부)에 .log 파일로 저장합니다.  어플리케이션웹 어플리케이션 내부에서 로깅 라이브러리를 사용해서 기록합니다. node.js에서는 winston이나 morgan 등이 사용 됩니다.    분산 시스템에서의 로깅중앙 집중식 로깅..

사용자 인터페이스(UI)웹 페이지를 제외한 브라우저 화면의 모든 요소( 주소 표시줄, 뒤로가기/앞으로 가기 버튼, 북마크 메뉴 등...  )를 뜻합니다. 웹 페이지프론트엔드 엔지니어가 HTML, CSS, Javascript 로 구현한 UI 요소는 웹 페이지의 인터페이스를 뜻합니다. 프론트엔드 엔지니어는 웹 페이지의 구조, 스타일, 동작을 정의함으로써 웹 페이지 인터페이스를 그립니다. 브라우저 엔진사용자 인터페이스와 랜더링 엔진 사이에서 명령을 전달하는 엔진이며, 사용자 인터페이스를 통해 사용자가 행한 동작들을 렌더링 엔진에 전달하여 웹 페이지가 표시되도록 하는 중간자 역할을 수행합니다. 브라우저 엔진과 렌더링 엔진레이아웃 엔진과 렌더링 엔진이라는 용어가 긴밀히 연관되어 사용되지만, 중요한 점은 '레이아웃..

프론트엔드 개발자로서 브라우저에 대해 알고 있어야 하는 사항들을 정리해보고자 목차를 적어보았습니다. 1. 브라우저의 기본 구조 https://develop-dbd.tistory.com/208브라우저 엔진랜더링 엔진Network자바스크립트 인터프리터 UI BackendDOM (Document Object Model)2. DOM (Document Object Model)https://develop-dbd.tistory.com/208DOM tree 구조DOM 조작3. CSSOM (CSS Object Model)https://develop-dbd.tistory.com/208CSS 파싱CSSOM 트리4. 렌더링 파이프라인파싱스타일 계산레이아웃페인팅 // https://develop-dbd.tistory.com/2..

BFS, DFS 문제를 풀 때 변수명을 x, y로 적고, 주어진 입력값에서부터 가로/세로를 따로 변수에 넣어주는 문제를 풀다가 놓쳐서 필요 없는 삽질을 했다. x, y 방식은 가로축인 x가 선행하는데, 실제 코드상으론 2차원 리스트의 세로, 즉 y축이 선행하기 때문이다. 알고리즘 테스트를 준비할 때에는 후자로 통일해서 이렇게 생각하기로 했다: arr[y][x]  이 포스트에 앞으로 관련 문제 혹은 혼동으로 오답을 볼 때마다 하나씩 추가해볼까 싶다... arr[y][x] 문제 리스트프로그래머스게임 맵 최단거리: https://school.programmers.co.kr/learn/courses/30/lessons/1844