Per ardua ad astra.

자바스크립트 비동기 프로그래밍(Asynchronous Programming) 들어가며 자바스크립트의 비동기 프로그래밍(Asynchronous Programming)에 대해 공부했던 내용을 정리해본다. 비동기 프로그래밍(Asynchronous Programming) 개념 자바스크립트에서 서버와 통신을 하다 보면 어떤 자료를 요청하고 받는지에 따라, 또는 네트워크 속도에 따라 조금씩 처리 시간이 달라진다. 그리고 시간 차이가 나는 처리 결과를 받아서 순서대로 처리해야 하는데, 이러한 처리 방식을 '비동기 처리 방식'이라고 한다. 자바스크립트 프로그램은 많은 함수들이 모여서 하나의 기능을 만든다. 그런데 이들 함수의 실행 시간이 서로 다르므로 특정 작업이 끝나면 다른 작업을 하고, 그 작업이 끝나면 이어서 또..

VS Code 화면 오른쪽에 Live Server 띄우기 들어가며 비주얼 스튜디오 코드(Visual Studio Code) 화면 오른쪽에 라이브 서버(Live Server)를 띄우는 방법을 정리해본다. 방법 방법 ① @[Ctrl]@ + @[Shift]@ + @[P]@를 눌러 명령 팔레트(Command Palette)를 실행한 후, @Simple Browser: Preview@를 클릭한다. 방법 ② VS Code에서 공식적으로 지원하는 방법이다. 이 방법은 편집기에 @.html@ 파일 또는 @.md@ 파일을 열었을 때 가능한 방법이다. 우측 상단의 [Show Preview] 아이콘을 클릭한다. 참고 사이트 Can I use Live Server inside Vscode editor? I know live ..

변수 재선언과 재할당 (var, let, const) 들어가며 자바스크립트의 변수(@var@, @let@, @const@)의 재선언과 재할당에 대하여 알아보자. 재선언과 재할당 ① @var@ 재선언 및 재할당이 모두 가능하다. var sum = add(10, 20); console.log(sum); // 30 var sum = 100; // 재선언 (가능) console.log(sum); // 100 sum = 200; // 재할당 (가능) console.log(sum); // 200 하지만 @var@을 사용할 경우, 다음과 같이 호이스팅(Hoisting)이 발생할 수 있다. var x = 10; var sum = x + y; // y 변수가 선언되기 전에 실행 var y = 20; console.log..

순서도(Flowchart) 들어가며 순서도(Flowchart)에 대해 알아보자. 순서도(Flowchart) 개념 프로세스나 시스템의 동작을 그래픽으로 표현하는데 사용되는 다이어그램 주로 프로그래밍, 비즈니스 프로세스, 제조업 등 다양한 분야에서 사용되며, 작업의 흐름을 시각적으로 이해하기 쉽게 도와준다. 프로그래밍 전반에 걸쳐 기획 및 개발 단계에서 사용된다. 여러 종류의 기호와 선으로 구성되어 있으며, 각각의 기호와 선은 특정 동작이나 결정을 나타내며, 이를 연결하여 작업의 흐름을 나타낸다. 구성 요소 기호 명칭 설명 단말 순서도의 시작과 끝을 나타냄. 흐름선 순서도 기호 간의 연결 및 작업의 흐름을 표시함. 준비 작업 단계 시작 전 해야 할 작업을 명시함. 처리 처리해야 할 작업을 명시함. 입출력 데..

DApp(Decentralized Application) 개념 및 개발 환경 구축하기 들어가며 DApp(Decentralized Application)에 대해 알아보고 개발 환경을 구축해보자. DApp(Decentralized Application) 개념 탈중앙화 애플리케이션의 약자로 탈중앙화된 블록체인 플랫폼을 기반으로 작동하는 앱을 말한다. 예를 들어 안드로이드 같은 스마트폰 운영체제가 이더리움과 같은 '플랫폼'이라면 안드로이드용 스마트폰 앱이 디앱이라고 할 수 있다. 기존의 ‘중앙화 애플리케이션(Centralized Application)’에서는 중앙 서버의 데이터베이스에 정보를 저장하고 그 운용 역시 중앙 서버를 통해 이루어 졌다. 하지만 디앱에는 중앙 서버 없이 서버가 가졌던 신뢰와 권한을 블록..

스프레드 연산자(Spread Operator) 들어가며 자바스크립트(JavaScript) ES6에 추가된 스프레드 연산자(Spread Operator)에 대해 알아보자. 스프레드 연산자(Spread Operator) 개념 스프레드 연산자(@...@)는 자바스크립트에서 배열(Array)이나 객체(Object)를 확장하거나 펼치는데 사용된다. 이 연산자를 사용하면 배열이나 객체의 요소를 추출하거나 복제하여 다른 배열이나 객체에 포함시킬 수 있다. 스프레드 연산자는 코드를 더 간결하게 만들고 배열이나 객체를 조작하거나 복제할 때 유용하게 사용된다. 활용 방법 ① 배열(Array)에서의 스프레드 연산자 활용 배열에서 스프레드 연산자는 다음과 같이 사용될 수 있다. const numbers = [1, 2, 3];..

클래스 컴포넌트(Class Components)와 함수형 컴포넌트(Functional Components) 들어가며 리액트(React)는 기본적으로 클래스 컴포넌트(Class Components)와 함수형 컴포넌트(Functional Components) 2가지 유형의 컴포넌트를 제공한다. 최신 리액트 버전에서는 함수형 컴포넌트와 훅스(Hooks)를 사용하는 것이 권장되며, 상태 관리나 라이프사이클 이벤트 처리를 더 간단하게 할 수 있는 장점이 있다. 그러나 이미 클래스 컴포넌트로 작성된 코드가 많다면, 따로 변경할 필요는 없다. 클래스 컴포넌트와 함수형 컴포넌트에 대해 알아보자. 클래스 컴포넌트(Class Components) ES6의 클래스 문법을 사용하여 생성된다. @class@ 키워드를 사용하여 ..

디스트럭처링(Destructuring) 들어가며 자바스크립트 ES6에 추가된 디스트럭처링(Destructuring) 기능에 대해 알아보자. 디스트럭처링(Destructuring) 개념 ECMAScript 2015(ES6)에서 도입된 기능 중 하나 ES6에서 배열(Array)과 객체(Object)의 요소들을 해체(Destructuring)하여 변수에 할당(Assign)하는 방법으로 등장했다. 이전에는 요소들을 하나씩 변수에 할당하는 번거로운 작업을 해야했는데, 디스트럭처링은 이를 보다 간단하고 직관적으로 처리할 수 있게 해준다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있게 되었다. 종류 및 사용 방법 디스트럭처링은 변수 이름과 객체 또는 배열의 속성 이름이나 순서가 일치해야 한다. const an..

훅(Hook)들어가며리액트(React)에서 사용되는 기본적인 훅(Hook)들에 대해 알아보자. 훅(Hook)개념함수 컴포넌트에서 상태(State)나 생명주기 기능 등을 사용할 수 있도록 도와주는 기능클래스 컴포넌트의 기능을 함수 컴포넌트에서도 사용할 수 있게 해준다.가장 널리 사용되는 훅으로는 @useState@, @useEffect@, @useContext@ 등이 있다.각각의 훅을 활용하면 함수 컴포넌트에서 상태 관리, 부수 효과 처리, 전역적인 데이터 공유 등을 편리하게 할 수 있다.이 외에도 많은 다양한 훅이 있으며, 직접 커스텀 훅을 만들어 사용할 수도 있다.훅을 사용하면 함수 컴포넌트에서 상태를 관리하고, 생명주기 메서드를 이용할 수 있어 훨씬 간결하고 유연한 코드를 작성할 수 있게 된다. 종류..

Map / Filter / Reduce / Find / FindIndex / IndexOf / Includes 들어가며 자바스크립트 ES6의 @Map@, @Filter@, @Reduce@, @Find@, @FindIndex@, @IndexOf@, @Includes@ 함수에 대해 알아보자. 이 함수들은 배열을 다양한 방식으로 조작하고 필터링하며, 배열 요소를 가공하여 필요한 결과를 얻을 때 유용하게 사용된다. 설명 ① Map Map 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 함수가 반환하는 값을 모아 새로운 배열을 생성한다. 기존 배열의 각 요소를 변환하여 새로운 배열을 만들 때 주로 사용된다. 예를 들어, 모든 요소를 2배로 만드는 경우와 같이 각 요소를 수정하고 새로운 배열을 생성하는 ..

React Developer Tools 들어가며 React Developer Tools 확장 프로그램에 대해 알아보자. React Developer Tools 개념 React 애플리케이션을 개발할 때 도움이 되는 크롬 브라우저 확장 프로그램 이 도구를 사용하면 React 앱의 컴포넌트 구조, 상태, 속성 등을 더 쉽게 이해하고 디버깅할 수 있다. 설치 React Developer Tools를 설치하면 크롬 브라우저의 "개발자 도구" 섹션에서 React 탭이 추가된다. React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 993c4d003 on 12/5/2023. chrome.g..

self 들어가며 파이썬(Python)에서 사용되는 @self@ 키워드에 대해 알아보자. self 개념 파이썬에서 @self@는 객체(Object)를 가리키며, 클래스 내부에서 정의된 메서드의 첫 번째 매개변수로 사용된다. @self@는 객체 자체를 가리키는 것이며, 이를 통해 클래스 내부에서 객체의 속성에 접근하거나 그 속성을 변경할 수 있다. @self@를 함수의 첫 번째 매개변수로 사용하는 이유는 메서드가 클래스의 인스턴스(Instance)에 대해 작동하기 때문이다. 객체가 여러 개 생성될 수 있고, 각 객체는 고유한 상태(속성)를 가지기 때문에 메서드는 해당 객체의 속성을 조작하거나 가져오기 위해 @self@를 사용한다. 이것은 각 인스턴스가 고유한 상태를 유지하면서 메서드가 올바르게 작동할 수 ..

QTableWidget과 SQLite3를 연동하여 구현한 CRUD 프로그램 들어가며 QTableWidget과 SQLite3를 연동하여 간단하게 구현한 CRUD 프로그램 소스 코드를 정리해본다. 소스 코드 import sys import sqlite3 from PyQt5.QtWidgets import QApplication, QMainWindow, QWidget, QVBoxLayout, QHBoxLayout, QPushButton, QLineEdit, QTableWidget, QTableWidgetItem, QLabel, QMessageBox class MainWindow(QMainWindow): def __init__(self): super().__init__() self.setWindowTitle("C..

변수명 표기법의 종류 들어가며 프로그래밍에서 변수명을 지을 때 사용하는 여러 가지 표기법을 알아보자. 변수명 표기법 변수명 표기법은 코드의 가독성을 높이고 일관성 있게 작성하기 위해 사용된다. 어떤 표기법을 사용할지는 주로 개발자나 팀의 선호도에 따라 결정되곤 한다. ① 카멜 표기법(Camel Case) 단어들을 붙일 때 맨 처음 단어를 제외하고 대문자로 시작하는표기법 camelCaseVariable ② 파스칼 표기법(Pascal Case) 모든 단어의 첫 글자를 대문자로 시작하는 표기법 PascalCaseVariable ③ 스네이크 표기법(Snake Case) 단어들을 밑줄(@_@)로 연결하는 표기법 모든 글자를 소문자로 표기한다. snake_case_variable ④ 케밥 표기법(Kebab Case..

모듈 설치 시 의존성 문제 해결하기 (npm-check-updates) 들어가며 인터넷에 공개된 레포지토리를 다운로드 받아서 본인의 PC에서 해당 모듈을 설치할 때, Node.js의 버전이 달라 의존성 문제(Dependency Problem)이 발생하는 경우가 있다. 이러한 의존성 문제를 해결하기 위해 @npm-check-updates@ 패키지를 사용할 수 있다. @npm-check-updates@ 패키지 @package.json@ 파일 안에 명시된 모듈들의 버전을 무시하고 최신 버전으로 업데이트하여 의존성 문제를 해결해주는 패키지이다. 방법 외부 레포지토리를 다운 받아서 @npm install@ 명령을 이용하여 필요한 모듈을 설치하기 전에 아래의 작업을 수행해준다. ① @npm-check-updates..

리액트(React.js) 개발 환경 구축하기 (Windows) 들어가며 윈도우(Windows)에서 리액트(React.js) 개발 환경을 구축해보자. 방법 ① Node.js 설치하기 Node.js 프로그램을 컴퓨터에 설치해준다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org ② 비주얼 스튜디오 코드(VS Code) 설치 및 확장 프로그램 설치 비주얼 스튜디오 코드(VS Code)를 설치하고, VS Code에 아래의 확장 프로그램을 설치한다. Babel JavaScript vscode-icons JS JSX Snippets ③ 리액트 앱 생성하기 @my-app@ 이라는 프로젝트를 생성하려면 ..

모듈 시스템 (import/export) 들어가며 ES6에서 도입된 모듈 시스템(Module System)에 대해서 알아보자. 모듈 시스템 개념 ES6에서 도입된 모듈 시스템은 자바스크립트 코드를 여러 파일로 나누고 재사용 가능한 모듈로 구성하는 기능을 제공한다. 이 기능은 @import@와 @export@ 키워드를 사용하여 모듈을 가져오고 내보내는 것으로 이루어진다. 내보내기(Export) 모듈에서 특정한 기능, 변수, 함수, 클래스 등을 다른 파일에서 사용할 수 있도록 내보내려면 @export@ 키워드를 사용한다. ① Named Export 내보내려는 대상에 이름을 붙여서 내보내는 방법이다. // 변수, 함수, 클래스 등을 내보내기 export const myVariable = 10; export f..

리액트(React)에서 HTML 요소의 클래스를 지정할 때 class가 아닌 className을 사용하는 이유? 들어가며 리액트(React)에서 HTML 요소의 클래스를 지정할 때 @class@가 아닌 @className@을 지정하는 이유를 알아보자. 이유 리액트(React)에서 HTML 요소의 클래스를 지정할 때, 다음과 같이 @class@가 아닌 @className@을 지정한다. 그 이유는 자바스크립트(JavaScript)와의 충돌을 피하기 위해서이다. 리액트는 자바스크립트와 JSX를 사용하여 UI를 작성한다. JSX는 자바스크립트의 확장 문법이다. JSX는 HTML과 유사하게 보이지만, 자바스크립트의 일부이다. 자바스크립트에는 @class@라는 키워드(Keyword)가 있기 때문에 리액트에서 HTM..

SERIAL 키워드 (AUTO_INCREMENT (MySQL)) 들어가며 PostgreSQL에서 사용되는 @SERIAL@ 키워드에 대해 알아보자. @SERIAL@ 개념 자동으로 증가하는 정수 값을 생성하는 컬럼 타입 일련번호를 자동으로 생성하고 유일한 값을 갖도록 도와준다. 보통 기본 키(Primary Key)에 많이 사용된다. 사용 예 @user_id@ 컬럼을 생성할 때, 기본 키(@PRIMARY KEY@)와 @SERIAL@ 옵션을 설정하였다. CREATE TABLE users ( user_id SERIAL PRIMARY KEY, username VARCHAR(50), email VARCHAR(100) ); @AUTO_INCREMENT@ (MySQL) MySQL에서는 PostgreSQL에서 사용하는 @..

문제 재현이는 알파벳 소문자로 이루어진 문자열 하나를 받아 그대로 두 번 연달아 썼다. 예를 들어 “abc” 를 받았다면 “abcabc” 를 썼다. 당신에게 문자열이 주어질 때, 이 문자열이 재현이가 만들어 낼 수 있는 문자열인지 판단하라. 입력 첫 번째 줄에 테스트 케이스의 수 TC가 주어진다. 이후 TC개의 테스트 케이스가 새 줄로 구분되어 주어진다. 각 테스트 케이스는 다음과 같이 구성되었다. - 첫 번째 줄에 문자열의 길이 N이 주어진다. (1≤N≤100) - 다음 줄에 길이 N의 알파벳 소문자 문자열 S가 주어진다. 출력 각 테스트 케이스 마다 한 줄씩, 재현이가 만드는 게 가능한 문자열이라면 “Yes”, 불가능한 문자열이라면 “No” 를 출력하라. 예제 [입력] [출력] 3 6 abcabc 2..

PostgreSQL 설치 및 사용방법들어가며Node.js에서 @npm@을 이용하여 PostgreSQL을 설치하고, 사용하는 방법을 알아보자. PostgreSQL 설치하기터미널에 @npm@을 이용하여 아래의 명령으로 PostgreSQL을 설치할 수 있다.$ npm install pg 사용 방법@db.connect()@를 이용하여 PostgreSQL DB에 연동한 후, @db.end()@ 명령을 이용하여 DB 연동을 해제한다.import pg from "pg";const db = new.pg.Client({ user: "postgres", host: "localhost", database: "world", password: "123456", // 설치 시 설정했던 암호 por..

splice 메서드, slice 메서드, split 메서드 비교 들어가며 자바스크립트의 @splice@ 메서드와 @slice@ 메서드, @split@ 메서드를 비교해보고 차이점을 알아보자. @splice@ 메서드 설명 배열의 요소를 제거하거나 삽입할 수 있다. 사용법 array.splice(start, deleteCount[, item1, item2, ...]) @start@ : 변경을 시작할 인덱스 @deleteCount@ : 제거할 요소의 개수 @item1, item2, ...@ : 추가할 요소 [선택 사항] 사용 예 let array = [1, 2, 3, 4, 5]; array.splice(2, 1); // 인덱스 2에서 1개의 요소 제거 -> [1, 2, 4, 5] array.splice(1, 0..

화살표 함수(Arrow Function)들어가며자바스크립트(JavaScript)의 화살표 함수(Arrow Function)에 대해 알아보자.  화살표 함수(Arrow Function)개념ES6(ECMAScript 2015)에서 도입된 자바스크립트의 새로운 함수 선언 방식일반 함수 선언보다 간결하고 짧은 문법을 제공하여 코드를 더 읽기 쉽고 간결하게 만들어준다.화살표 함수는 간결하고 콜백 함수를 사용할 때 유용한데, 특히 반복적인 코드 작성을 줄여주는데 도움을 준다.그러나 모든 상황에서 사용해야 하는 것은 아니며, 특히 메서드 함수에서는 일반 함수와의 차이점을 고려하여 사용해야 한다. 기본 문법화살표 함수는 @const functionName = (parameters) => { function body }..

Axios 라이브러리들어가며Axios 라이브러리에 대해 알아보자. Axios개념Node.js 및 브라우저에서 동작하는 HTTP 클라이언트 라이브러리 중 하나주로 HTTP 요청(Request)을 생성하고 응답(Response)을 처리하는 데 사용된다.Axios는 Promise 기반으로 작성되어 있어 비동기 코드를 쉽게 다룰 수 있다.동일한 코드베이스로 브라우저와 Node.js에서 실행할 수 있다.서버 단(Server-Side)에서는 네이티브 Node.js의 @http@ 모듈을 사용하고, 클라이언트(브라우저)에서는 @XMLHttpRequests@를 사용한다.Axios를 사용하면 HTTP 요청을 쉽게 생성하고 응답을 처리할 수 있다.특히 비동기 프로그래밍에서 Promise를 사용하므로 코드가 더 읽기 쉽고 유..

API(Application Programming Interface) 들어가며 API(Application Programming Interface)에 대해 알아보자. API(Application Programming Interface) 개념 응용 프로그램 간에 소통하고 상호 작용하기 위한 규칙 세트나 도구 모음 소프트웨어 구성 요소들 간에 데이터 및 서비스를 교환할 수 있도록 하는 인터페이스를 제공한다. 이러한 인터페이스는 다른 시스템이나 애플리케이션에서 기능을 사용하거나 데이터를 공유하는 데 사용된다. API를 사용하면 다른 개발자나 시스템이 제공하는 서비스를 쉽게 통합하고 확장할 수 있다. 예를 들어, 특정 서비스의 데이터를 가져오거나 외부 서비스에 데이터를 전송하는 등의 작업을 API를 통해 수행할..

파이썬에서 ORM(Object Relational Mapping) 라이브러리 사용해보기 (SQLAlchemy) 들어가며 파이썬에서 SQLAlchemy ORM(Object Relational Mapping) 라이브러리를 사용해보자. ORM(Object Relational Mapping) 개념 데이터베이스를 사용하려면 SQL 쿼리(Query)라는 구조화된 질의를 작성하고 실행하는 등의 복잡한 과정이 필요하다. 이때 ORM(Object Relational Mapping)을 이용하면 파이썬 문법만으로도 데이터베이스를 다룰 수 있다. 즉, ORM을 이용하면 개발자가 쿼리를 직접 작성하지 않아도 데이터베이스의 데이터를 처리할 수 있다. ORM은 데이터베이스에 데이터를 저장하는 테이블을 파이썬 클래스로 만들어 관리하..

EJS(Embedded JavaScript) 들어가며 EJS(Embedded JavaScript)에 대해 알아보자. EJS(Embedded JavaScript) 개념 JavaScript 기반의 템플릿 엔진 서버 측(Server-side)에서 동적인 웹 페이지를 생성하기 위해 사용된다. EJS를 사용하면 HTML 코드 안에 JavaScript 코드를 삽입하여 동적으로 페이지를 생성할 수 있다. 특징 ① 편리한 문법 EJS는 간단하고 직관적인 문법을 제공한다. HTML 안에 @@와 같은 태그를 사용하여 JavaScript 코드를 삽입할 수 있다. ② 템플릿 재사용 EJS를 사용하면 템플릿을 생성하여 코드를 재사용할 수 있다. 이것은 웹 애플리케이션에서 일관된 레이아웃을 유지하는 데 도움이 된다. ③ 변수 삽..

morgan 패키지 들어가며 Node.js의 @morgan@ 패키지에 대해 알아보자. @morgan@ 패키지 개념 Node.js 웹 애플리케이션에서 로깅(로그 기록)을 도와주는 미들웨어 패키지 웹 애플리케이션을 개발하다보면 애플리케이션의 동작과 상태를 모니터링하고 디버깅하기 위해 로그를 생성하고 기록해야 할 때가 많은데, @morgan@은 이를 효과적으로 처리하는데 도움을 준다. @morgan@을 사용하면 HTTP 요청과 응답에 관한 다양한 정보를 로그로 기록할 수 있으며, 이를 통해 애플리케이션의 동작을 추적하고 문제를 식별할 수 있다. @morgan@은 주로 웹 서버 미들웨어로 사용되며, Express.js 및 다른 Node.js 웹 프레임워크와 함께 자주 사용된다. @morgan@을 사용하여 기록할..

body-parser 패키지 들어가며 Node.js의 @body-parser@ 패키지에 대해서 알아보자. @body-parser@ 패키지 개념 HTTP 요청의 본문(@body@) 데이터를 파싱하고, 이 데이터를 JavaScript 객체로 변환해주는 미들웨어(Middleware) 패키지 주로 Express.js와 함께 사용되며, 클라이언트가 서버에 데이터를 전송할 때, 이 데이터를 서버에서 사용하기 쉽도록 가공하는 데 도움을 준다. @body-parser@는 다양한 데이터 형식을 파싱할 수 있으며, 가장 일반적으로 JSON, URL-encoded 데이터, XML 및 기타 데이터 형식을 처리하는 데 사용된다. 수행할 수 있는 기능 JSON 데이터 파싱: 클라이언트가 JSON 형식의 데이터를 POST 또는 P..

미들웨어(Middleware) 들어가며 네트워크에서 미들웨어(Middleware)에 대해 알아보자. 미들웨어(Middleware) 개념 컴퓨터 시스템 및 응용 프로그램 사이에 위치하여 통신과 데이터 교환을 관리하고 지원하는 소프트웨어 레이어 또는 구성 요소 미들웨어는 서버 및 클라이언트 간의 통신, 데이터베이스 연결, 보안, 트랜잭션 관리, 메시징 시스템 및 다른 네트워크 기능을 처리하는데 사용된다. 미들웨어는 다양한 서버 및 클라이언트 플랫폼, 언어, 프로토콜 및 데이터 형식 간의 상호 운용성을 지원하며, 분산 컴퓨팅 환경에서 중요한 역할을 한다. 미들웨어는 여러 다양한 유형과 기술로 구현될 수 있으며, 이를 통해 다양한 비즈니스 응용 프로그램 및 서비스가 네트워크 상에서 효과적으로 상호 작용할 수 있..