Per ardua ad astra.

or 연산자와 | 연산자의 차이들어가며파이썬(Python)에서 @or@ 연산자와 @|@ 연산자의 차이에 대해 정리해본다.@or@ 연산자와 @|@ 연산자 모두 논리 연산자(Logical Operator)이지만, 사용 목적과 동작 방식에 차이가 있다. @or@ 연산자유형 : 논리 연산자논리적 OR 연산을 수행하여, 두 피연산자 중 하나라도 @True@일 경우 @True@를 반환한다.단축 평가(Short-Circuit Evaluation) : 첫 번째 피연산자가 @True@이면 두 번째 피연산자는 평가되지 않는다.피연산자 타입 : @bool@ 또는 @bool@로 평가될 수 있는 평가식 (거의 모든 파이썬 객체)반환값 : @True@ 또는 @False@ @|@ 연산자유형 : 비트 연산자비트 단위 OR 연산을 수..

토스트 메시지 띄우기 간단 예제 (ReactDOM.createPortal)들어가며리액트(React.js)를 이용하여 구현해본 토스트(Toast) 메시지 띄우기 간단 예제 코드를 올려본다.기능을 구현하기 위해 @react-dom@ 패키지의 @createPortal@ 함수를 사용하였다. 코드 App.jsximport React from 'react';import Toast from './Toast';function App() { const [isToastVisible, setIsToastVisible] = React.useState(false); function handleEnrol() { setIsToastVisible(true); setTimeout(() => { setIs..

useImperativeHandle과 forwardRef들어가며리액트(React.js)에서 사용되는 @useImperativeHandle@과 @forwardRef@에 대해 알아보자.@forwardRef@와 @useImperativeHandle@은 컴포넌트 간의 참조를 다루기 위한 도구이다.이 두가지 개념을 이해하면 컴포넌트 외부에서 내부의 DOM 요소나 메서드에 접근할 수 있게 되어, 고급 컴포넌트 설계에 유용하다고 한다. forwardRef개념부모 컴포넌트로부터 전달된 @ref@를 자식 컴포넌트가 받을 수 있게 해준다.@forwardRef@를 사용하지 않고 자식 컴포넌트에 @ref@를 전달할 수 없다.@ref@는 DOM 요소에만 붙일 수 있다.하지만 @forwardRef@를 사용하면, 부모 컴포넌트가 ..

옵셔널 체이닝 연산자(Optional Chaining Operator), null 병합 연산자(Nullish Coalescing Operator) (ES11(ECMAScript2020))들어가며ES11(ECMAScript2020)에서 도입된 옵셔널 체이닝 연산자와 null 병합 연산자에 대해 정리해본다.옵셔널 체이닝 연산자와 null 병합 연산자는 모두 단축 평가(Shortcut Evaluation)을 위해 사용되는 연산자이다. 옵셔널 체이닝 연산자(Optional Chaining Operator, @?.@)좌항의 피연산자가 @null@ 또는 @undefined@인 경우 @undefined@를 반환하고, 그렇지 않을 경우 우항의 프로퍼티 참조를 이어간다.프로퍼티 참조 : 변수를 통해 변수값을 참조하듯이,..

부모 컴포넌트에서 자식 컴포넌트로 요소 넘기는 방법들어가며리액트에서 부모 컴포넌트에서 자식 컴포넌트로 요소를 넘기는 방법을 알아보자. 방법부모 컴포넌트에서 자식 컴포넌트로 넘길 요소의 타입을 지정할 수 있는데, @string@ 형태로 지정해주면 된다.이떄, @prop@ 이름의 첫 글자는 항상 대문자이어야 한다.App.jsx@ButtonsContainer@ @prop@을 @"menu"@로 지정해보았다.return ( handleSelect("components")} > Components handleSelect("jsx")} > JSX ..

실시간으로 특정 요소의 길이값 가져오기들어가며리액트애서 실시간으로 특정 요소의 길이값을 가져오는 방법을 알아보자. 방법우선 @useRef@를 이용하여 실시간으로 길이값을 가져올 요소를 지정해준다.import {useRef} from 'react';// ...const horiRef = useRef(null);// ...return ( {/* ... */} ); 다음과 같이 @useEffect@와 @ResizeObserver@를 이용하여 해당 요소의 사이즈값을 실시간으로 가져올 수 있다.import { useEffect } from 'react';useEffect(() => { const resizeObserver = new ResizeObserver((entries) => ..

state와 ref 비교하기들어가며리액트에서 자주 사용되는 @ref@와 @state@를 비교해보자. 비교@useState@를 통해 생성된 객체는 리렌더링 중에 초기화가 되지만, @useRef@를 통해 생성된 객체는 리렌더링 중에 초기화가 되지 않는다.@useState@는 @[value, setValue]@를 반환하고, @useRef@는 @{ current : value }@를 반환한다. @ref@@state@@useRef(initialValue)@는 @{ current: initialValue }@을 반환@useState(initialValue)@는 @state@ 변수의 현재값과 @state@ 설정자 함수@([value, setValue])@를 반환Mutable → 렌더링 프로세스 외부에서 @curren..

마우스 호버 효과를 적용하기 위한 커스텀 훅 만들기 (useHover.js) 들어가며 요소 위에 마우스 커서를 호버 시, 효과가 작동할 수 있도록 커스텀 훅을 만들어보자. 방법 기존의 방법 커스텀 훅을 사용하지 않을 경우, @mouseover@, @mouseout@에 대한 각각의 이벤트 핸들러 함수를 만들어서 마우스 호버 효과를 적용시키고 싶은 대상에 연결해 주는 방식으로 구현할 수 있었다. import React, { useState } from react; const MyComponent = () => { const [isHovered, setIsHovered] = useState(false); const handleMouseOver = () => { setShowPopup(true); }; cons..

Node.js 설치부터 리액트 프로젝트 테스트까지 정리 들어가며 Node.js 설치, NVM 설치, 리액트 프로젝트 생성 및 테스트까지의 과정을 정리해본다. 방법 (1) Node.js 설치 회사 또는 팀에서 사용하고 있는 버전의 Node.js를 설치하도록 한다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org (2) nvm 설치 NVM(Node Version Manager)은 Node.js의 버전을 관리해주는 프로그램이다. @nvm-setup.exe@ 설치 파일을 다운로드 받아 실행한다. Releases · coreybutler/nvm-windows A node.js version mana..

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

변수 재선언과 재할당 (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..

스프레드 연산자(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@를 사용한다. 이것은 각 인스턴스가 고유한 상태를 유지하면서 메서드가 올바르게 작동할 수 ..

모듈 설치 시 의존성 문제 해결하기 (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..

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 }..

파이썬에서 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..

노드몬(nodemon) 패키지 들어가며 Node.js의 노드몬(Nodemon) 패키지를 설치하고 실행해보자. 노드몬(Nodemon) 개념 Node.js 애플리케이션을 개발 및 실행하는 데 도움을 주는 유용한 도구 중 하나 개발자가 코드를 변경하고 저장한 후 서버나 애플리케이션을 자동으로 다시 시작하여 개발 프로세스를 더 효율적으로 만들어준다. 주로 개발 중인 애플리케이션을 실시간으로 모니터링하고 변경 사항을 반영하는 데 사용된다. 특징 코드 변경 감지 노드몬은 코드 변경을 실시간으로 감지하고 저장한 후에 애플리케이션을 자동으로 다시 시작한다. 코드 수정 후 수동으로 서버를 재시작할 필요가 없어 개발자의 생산성을 향상시킨다. 다양한 파일 유형 지원 노드몬은 JavaScript 파일 뿐만 아니라 HTML, ..