본문 바로가기
728x90

프로그래밍 팁149

Electron 프로세스의 주요 개념 이 번 포스팅에서는 Electron.js에서 중요한 개념인 Process에 대해서 알아 보겠습니다. Process Model Electron은 Chromium과 Node.js를 기반으로한 데스크톱 애플리케이션 개발 프레임워크입니다. Electron은 Chromium의 렌더러 프로세스와 Node.js의 메인 프로세스로 이루어져 있습니다. Electron의 프로세스 모델은 Chromium과 비슷한 멀티 프로세스 아키텍처를 사용합니다. 각각의 Electron 앱은 Node.js 메인 프로세스와 Chromium 렌더러 프로세스, 그리고 추가적인 프로세스를 가질 수 있습니다. 메인 프로세스(Main Process): 렌더러 프로세스와 통신하여 전반적인 앱의 동작을 제어하며, 파일 시스템 액세스, 네트워크 액세스,.. 2023. 3. 23.
Electron 실습1 - 이름 입력받고 출력하기 Electron.js를 이용해서 간단한 프로그램을 만들어 보겠습니다. 이번 실습은 간단하게 사용자의 이름을 받고, 버튼을 클릭하면, "[입력한 이름]"님 안녕하세요!"라는 문구를 그 아래에 찍는 실습입니다. 실습이니 만큼, 이해하기 쉽게 하기 위해서, 꾸미는 과정 없이 단순하게 작성하겠습니다. 소스와 함께 Electron이 구동되는 개념을 익히는데 중점을 두겠습니다. 1. 프로젝트 만들기 프로젝트 폴더 생성하기 이 번 실습에서는 "electron-test"라는 이름으로 진행합니다. (윈도우 사용자의 경우는 탐색기에서 실행하시면 됩니다.) mkdir electron-test 프로젝트 초기화와 electron패키지 설치하기 cd electron-test npm init -y npm install electr.. 2023. 3. 23.
데이터 압축의 기본 원리 데이터 압축은 용량을 줄이고 속도를 높이는 기술입니다. 이 글에서는 데이터 압축의 원리를 알아보고, 그 종류와 사용 사례에 대해 설명합니다. 데이터 압축이란? 데이터 압축은 정보를 더 작은 용량으로 표현하거나 전송하는 과정입니다. 이 기술은 저장 공간을 절약하고, 데이터 전송 속도를 향상시키며, 통신 비용을 줄이는 데 도움이 됩니다. 데이터 압축의 원리를 이해하려면, 압축 방법에 대해 알아야 합니다. 크게 두 가지 압축 방법이 있습니다: 손실 압축과 비손실 압축. 비손실 압축 비손실 압축은 원본 데이터를 완벽하게 복원할 수 있는 압축 방식입니다. 주로 텍스트, 문서, 코드 등의 데이터에 사용되며, 원본 데이터의 정확성이 중요한 경우에 적합합니다. 비손실 압축의 대표적인 알고리즘으로는 허프만 코딩, 런-렝.. 2023. 3. 23.
Bootstrap v5에서 Modal창 드래그하기 Bootstrap v5에서 모달창의 헤더를 마우스로 클릭 후 드래그 해서 움직이게 하는 방법에 대해서 포스팅 진행하겠습니다. BS5에서는 jQuery를 다 들어냈으므로, 순수 자바스크립트로 구현하는 방법으로 진행해 보겠습니다. jQuery로 구현하는 방법은 아래의 링크를 참고하시기 바랍니다. Bootstrap 모달창 드래그 Bootstrap 모달창을 드래그가 가능하게 해달라는 요구가 간혹 있습니다. jquery ui를 사용하여 modal-dailog에 draggalbe 이벤트를 걸어주면 됩니다. 아래는 stackoverflow 참고 사이트 주소입니다. 참고 자료: s ccusean.tistory.com HTML 소스 수정 아래는 BS5의 버튼을 눌러서 모달창을 띄우는 기본 소스입니다. 여기에 모달창을 드.. 2023. 3. 23.
Bootstrap v5에서 Javascript로 모달창 보이기/숨기기 Bootstrap v4에서 v5로 넘어가면서 가장 큰 변화는 자바스크립트의 변화입니다. v4에서는 jQuery가 베이스였지만, v5에서는 순수 자바스크립트(Vanilla Javascript)가 기본 베이스로 바뀌게 되었습니다. 그러면서, 기존에 동작제어 방식이 많이 변경되었습니다. 그 중에서 이 번 포스팅에서는 Modal창을 v5버전에서 순수 자바스크립트로 제어하는 방법에 대해서 알아 보겠습니다. Bootstrap v5의 Modal 기본 다음은 v5의 Modal창의 기본 소스입니다. 버튼을 클릭하면 모달창이 보여지고, "X", "닫기" 혹은 "모달창 밖"을 클릭하면 모달창이 닫히는 기본 소스입니다. Launch demo modal Modal title ... Close Save changes 위와 같이 .. 2023. 3. 23.
리스트 항목 Drag & Drop으로 재정렬하기 리스트 형태로 구현되어 있는 HTML 문서의 항목을 사용자의 Drag & Drop 동작으로 재정렬하는 방법에 대해서 설명 드리겠습니다. 자료에 대한 출처는 제일 아래 하단에 있으니 참고하시기 바랍니다. 실습해보기 아래는 실제로 구현한 내용을 실습해 볼 수 있는 화면입니다. Drag & Drop의 동작으로 실제로 어떻게 동작하는지 확인 해 보세요. 아래의 출처와는 다른 세로로 정렬된 리스트 항목으로 구성하였습니다. 미리 맛 보기: HTML 삽입 미리보기할 수 없는 소스 위 예제의 전체 소스는 아래와 같습니다. HTML 소스 A B C CSS 소스 .container-list { /* display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; */ }.. 2023. 3. 23.
DNS 기초: 인터넷 주소록의 이해 인터넷이 점점 더 복잡하고 방대해지고 있지만, 사용자가 웹 사이트에 접속하는 과정은 비교적 간단한 프로세스를 통해 이루어진다. 그 중심에 있는 것은 도메인 네임 시스템(DNS)이라는 기술이다. 이번 포스트에서는 DNS의 개념과 동작 원리를 간단히 살펴보고, 그 중요성과 관련된 이슈들에 대해서도 알아볼 것이다. DNS란 무엇인가? 도메인 네임 시스템(DNS)은 인터넷에서 웹 사이트와 컴퓨터에 연결된 IP 주소를 서로 연결시켜주는 시스템이다. 간단히 말해, DNS는 인터넷의 주소록이라 할 수 있다. 사람들이 기억하기 쉬운 도메인 이름(예: www.example.com)을 입력하면, DNS는 해당 도메인 이름과 연결된 IP 주소로 변환해준다. 그 결과, 웹 브라우저는 해당 IP 주소의 웹 서버와 통신할 수 있.. 2023. 3. 23.
Javascript URL 클래스 간단 사용법 JavaScript의 URL 클래스는 URL 주소를 파싱하고 조작할 수 있는 객체를 제공합니다. 아래의 간단한 사용법을 예제를 통해서 설명을 드리겠습니다. 예제1 1. 주소 파싱 URL 클래스는 주어진 URL 문자열을 파싱하여 다양한 요소로 분리하여 제공합니다. 예를 들어, 호스트 이름, 프로토콜, 포트 번호, 경로 등을 추출할 수 있습니다. const url = new URL('https://www.example.com/path/to/resource?query=value'); console.log(url.protocol); // "https:" console.log(url.host); // "www.example.com" console.log(url.pathname); // "/path/to/resou.. 2023. 3. 20.
TCP, UDP 기본 개념과 동작 원리 네트워크의 OSI 7 Layer에서 전송계층(Transport Layer)에 속하는 TCP와 UDP에 대해서 알아보겠습니다. 이 두 프로토콜은 인터넷상에서 데이터를 주고받는 데 있어 핵심적인 역할을 하며, 서로 다른 특징과 동작 원리를 가지고 있습니다. 이 글에서는 TCP와 UDP의 기본 개념과 동작 원리를 살펴보겠습니다. 네트워크 OSI 7 Layer, 5 Layer 기본 개념과 흐름도 네트워크 7 Layer는 OSI(Open Systems Interconnection) 모델로도 알려져 있으며, 컴퓨터 네트워크에서 통신이 일어나는 과정을 7개의 계층으로 분류하여 설명하는 모델입니다. 아래에서 각 계층에 대해 자 ccusean.tistory.com TCP (Transmission Control Proto.. 2023. 3. 20.
HTTP와 HTTPS의 기본 개념 및 동작 원리 인터넷은 우리 삶의 많은 부분을 혁신해 왔습니다. 웹 사이트를 방문하거나 온라인 쇼핑을 할 때, 우리는 무심코 HTTP와 HTTPS라는 용어를 접하게 되죠. 이번 포스트에서는 HTTP와 HTTPS의 기본 개념과 동작 원리에 대해 알아보도록 하겠습니다. HTTP와 HTTPS란? HTTP (HyperText Transfer Protocol)는 웹 상에서 서버와 클라이언트 간의 정보를 교환하기 위한 프로토콜입니다. 웹 페이지에 있는 텍스트, 이미지, 동영상 등을 요청하고 받아올 수 있도록 만들어진 기술이죠. HTTPS (HyperText Transfer Protocol Secure)는 HTTP와 동일한 기능을 수행하지만, 보안이 강화된 버전입니다. 클라이언트와 서버 사이에 암호화된 통신을 통해 데이터를 전송함.. 2023. 3. 20.
POP3와 IMAP의 차이와 어떤 것을 선택해야 할까? 요즘 이메일은 우리 일상에서 빠질 수 없는 커뮤니케이션 도구입니다. 이메일을 사용하려면 이메일 클라이언트와 서버 간의 통신을 가능하게 하는 프로토콜이 필요한데요, 그 중 대표적인 것이 POP3와 IMAP입니다. 이 글에서는 이 두 프로토콜의 차이와 어떤 것을 선택해야 하는지 알아보겠습니다. POP3(Post Office Protocol 3) 소개 POP3는 이메일을 클라이언트로 다운로드하여 로컬에서 확인할 수 있도록 해주는 프로토콜입니다. 이메일이 서버에서 클라이언트로 전송된 후, 기본 설정에 따라 서버에서 삭제됩니다. 오프라인에서도 이메일을 확인할 수 있습니다. IMAP(Internet Message Access Protocol) 소개 IMAP은 이메일을 서버에서 직접 읽고 관리할 수 있도록 해주는 프.. 2023. 3. 20.
TCP/IP 기본 개념과 동작 원리 - 인터넷의 기반 안녕하세요! 오늘은 우리가 사용하는 인터넷의 가장 기본이 되는 프로토콜 TCP/IP(Transmission Control Protocol/Internet Protocol)에 대해 알아볼까요? 이 글에서는 TCP/IP의 기능과 구조, 그리고 어떻게 인터넷 통신이 이루어지는지를 간단하게 설명해드리겠습니다. TCP/IP란 무엇인가? TCP/IP는 인터넷에서 데이터를 주고받을 때 사용되는 프로토콜(통신 규약)입니다. 1970년대 미국의 연구 프로젝트인 ARPANET에서 처음 개발되었으며, 인터넷의 기본 구조로 활용되고 있습니다. TCP/IP는 사실 두 가지 프로토콜의 조합으로 이루어져 있습니다. TCP(Transmission Control Protocol): 데이터의 전송을 통제하는 프로토콜로, 패킷의 순서와 .. 2023. 3. 19.
Express 템플릿 엔진 ejs 알아보기 EJS는 "Embedded JavaScript"의 약자로, 서버에서 클라이언트로 전송되기 전에 서버 측에서 HTML 문서와 JavaScript 코드를 결합하는 템플릿 엔진입니다. Express에서 많이 사용되며, HTML 내에서 JavaScript를 사용할 수 있게 해줍니다. 이 글에서는 EJS에서 자주 사용하는 문법과 예제를 함께 소개합니다. 기본 문법 EJS에서는 다음과 같은 기본 문법을 사용합니다. : JavaScript 코드 실행 : JavaScript 표현식의 결과를 문자열로 변환하여 출력 : 이스케이프되지 않은(raw) 데이터 출력, HTML태그를 웹 브라우저에서 해석해서 보여주고 싶을 때 주로 사용합니다. : 주석 처리, 클라이언트 웹 브라우저에서는 보이지 않게 됩니다. : 리터럴 구문 출력.. 2023. 3. 19.
SSL/TLS: 웹 보안의 필수 구성요소 인터넷은 현재 전 세계에서 가장 널리 사용되는 정보와 커뮤니케이션 도구입니다. 불행하게도, 이런 인기 때문에 해커들과 사이버 범죄자들의 주요 목표가 되기도 합니다. 이 문제를 해결하기 위해 SSL/TLS와 같은 보안 기술이 개발되어 웹 사이트와 사용자의 정보를 보호하는 데 도움을 주고 있습니다. 이 블로그 글에서는 SSL/TLS가 무엇인지, 그리고 왜 웹 보안에 중요한지 알아보겠습니다. SSL/TLS란 무엇인가? SSL(Secure Socket Layer) 및 TLS(Transport Layer Security)는 웹 사이트와 사용자 간의 통신을 암호화하여 데이터의 기밀성과 무결성을 보호하는 보안 프로토콜입니다. SSL은 1990년대에 처음 개발되었고, 이후 TLS로 대체되어 현재 버전은 TLS 1.3입.. 2023. 3. 19.
Express.js 다국어 지원하기 이 번 글에서는 Node.js의 가장 유명한 웹 프레임워크인 Express.js에서 다국어 지원을 하는 방법에 대해서 설명드리겠습니다. 서버환경은 아래와 같습니다. 언어: Javascript, Node.js 웹 프레임워크: Express 템플릿엔진: ejs 다국어 지원 Node.js 패키지: i18next, i18next-http-middleware, i18next-fs-backend Express 프로젝트를 만든 것에서부터 ejs, i8next관련 패키지 설치 및 설정 등등 전 과정을 진행하니, 처음 express를 다국어 지원버전으로 시작하거나, 간단한 테스트 프로젝트용으로 사용하셔도 좋도록 진행하겠습니다. 1. 프로젝트 폴더 생성 프로젝트 폴더명은 "test"로 진행하겠습니다. test 폴더를 생성.. 2023. 3. 17.
728x90

티스토리툴바