Per ardua ad astra.

json() 유틸리티 함수 (React Router)들어가며리액트 라우터(React Router)에서 제공하는 json() 유틸리티 함수에 대해 정리해본다. json()개념리액트 라우터(React Router)에서 제공하는 함수React Router v6.4에서 추가된 유틸리티 함수주로 라우터 핸들러에서 사용되며, JSON 형식의 데이터를 응답(Response)으로 반환한다. 특징자동 설정된 Content-Typejson() 함수는 반환된 응답의 Content-Type 헤더를 application/json으로 자동으로 설정한다.간편한 사용JSON 형식의 데이터를 반환하는데 필요한 코드를 간소화하여, 개발자가 보다 직관적이고 간편하게 사용할 수 있게 한다.상태(Status) 코드 설정 가능..

JSON(JavaScript Object Notation) 다루기들어가며웹 서버 뿐만 아니라 다양한 곳에서 데이터를 교환할 때 사용되는 파일 형식인 JSON(JavaScript Object Notation)에 대해 정리해본다. JSON(JavaScript Object Notation)개념데이터 교환 형식으로 널리 사용되며, 문자열로 인코딩된 객체를 포함한 구조화된 데이터를 표현한다.자바스크립트는 JSON 데이터를 다루기 위해 JSON 객체를 제공한다. 주요 메서드JSON 객체의 주요 메서드로는 JSON.stringify()와 JSON.parse()가 있다. ① JSON.stringfy()자바스크립트 객체({ prop: value, ... })나 배열([value1, ..., valueN])..

useRouterError 훅들어가며리액트 라우터(React Router)의 useRouterError 훅에 대해 정리해본다. useRouterError 훅개념리액트 라우터 라이브러리(react-router-dom)에서 제공하는 훅라우트 처리 중 발생한 에러를 잡아서 처리하는 데 사용된다.주로 오류 경계(Error Boundary)와 함께 사용되어, 라우트 내에서 발생하는 오류를 처리하고 사용자에게 적절한 피드백을 제공하는데 사용된다. 주요 기능오류 감지: 라우트 컴포넌트에서 발생하는 오류를 감지할 수 있다.에러 핸들링: 감지된 오류를 사용자 정의 에러 메시지나 컴포넌트로 렌더링할 수 있다.오류 정보 제공: 오류 객체를 반환하여 오류 메시지, 스택 트레이스 등을 활용할 수 있다. 사용 예제예제 1..

React Router의 loader 속성들어가며리액트 라우터(react-router-dom)의 loader 속성에 대해 정리해본다. React Router의 loader 속성React Router Version 6 부터 사용할 수 있다.컴포넌트가 랜더링되기 전에 데이터를 가져올 수 있다.로더 함수에서 반환된 데이터는 자동으로 해당 컴포넌트에서 사용할 수 있게 된다.로더는 함수로 정의되며, 해당 함수에서 데이터를 가져와 컴포넌트에 전달한다.로더 함수를 사용하면 컴포넌트가 렌더링되기 전에 데이터를 가져올 수 있어, 컴포넌트가 초기 로딩 상태를 표시하지 않고 바로 데이터를 렌더링할 수 있다.따라서 더 나은 사용자 경험을 제공할 수 있다. 예제 코드import { RouterProvider, cre..

라우터 설정 방법 (React Route)들어가며React Router(react-router-dom)을 이용하여 라우터를 설정하는 방법을 정리해본다. 방법패키지 설치하기react-router-dom 패키지를 설치하려면 터미널에 아래 명령을 실행한다.$ npm install react-router-dom # yarn add react-router-dom 방법 1createBrowserRouter를 이용하는 방법이다.import { createBrowserRouter, RouterProvider,} from "react-router-dom";import HomePage from "./pages/Home";import ProductsPage from "./pages/Products";co..

리액트에서의 상태 관리 방법리액트(React)에서 상태 관리 방법에 대해 알아보자.리액트에서는 상태 관리를 위해 여러 가지 방법을 사용할 수 있으며, 상황에 따라 적절한 방법을 선택하는 것이 중요하다. 상태 관리 방법1. 지역 상태(Local State)리액트의 useState 훅을 사용하여 컴포넌트 내부에서 상태를 관리할 수 있다.작은 규모의 애플리케이션이나 단일 컴포넌트에서 상태 관리가 필요한 경우 적합하다.import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count..

요소에서 제출(Submit) 버튼 사용 시 기본 동작 막는 방법들어가며 요소 안에 type이 submit인 버튼을 두고, 클릭할 때, 폼 제출 효과가 발생한다.해당 버튼을 클릭할 때 폼 데이터가 서버로 전송되면서 페이지가 새로고침 되는데, 이것은 폼의 기본 동작이다. // ... 제출 이때 폼 제출 효과 막을 수 있는 방법을 정리해본다. 방법방법 1 : 요소의 type 속성을 button으로 지정하기 요소의 type 속성을 submit이 아닌 button으로 지정하는 방법이다.function handleSubmit() { console.log("Submitted!");} 로그인  방법 2 : 요소의 onClick 이벤트 함수에 event...

Intl.NumberFormat 객체들어가며자바스크립트(JavaScript)의 Intl.NumberFormat 객체에 대해 알아보자.Intl.NumberFormat 객체를 사용하면 숫자를 특정 로케일과 옵션에 맞춰 포맷팅(Formatting) 할 수 있다. Intl.NumberFormat 객체개념에크마스크립트(ECMAScript) 국제화 API의 일부로, 숫자의 형식을 지정하는 데 사용된다.로케일(Locale)과 옵션(Option)을 사용하여 숫자의 형식을 세부적으로 지정할 수 있다. 주로 통화, 소수점 자리수, 숫자 그룹화 등의 형식을 지정하는데 사용된다. 사용 방법new Intl.NumberFormat(locales, options) locales로케일 지정로케일(Locale)컴퓨터 프로그..

memo() 사용할 때 주의할 점들어가며리액트(React.js)의 memo()를 사용할 때 주의할 점을 정리해본다. memo()개념함수형 컴포넌트를 메모이제이션(Memoization)하여 불필요한 리렌더링을 방지하는 역할을 한다.주로 성능 최적화를 위해 사용된다.import { memo } from 'react';const MyComponent = memo(function MyComponent({ prop1, prop2 }) => { // ...});export default MyComponent; 기본적으로 컴포넌트의 props가 변경되지 않으면 컴포넌트를 다시 렌더링하지 않는다.props의 얕은 비교(Shallow Comparison)를 통해 이루어진다.얕은 비교는 기본 자료형(숫자, 문..

JavaScript 탭 기본 들여쓰기(Indent) 간격 설정 방법 (settings.json)들어가며JavaScript 코드를 VS Code에서 작성할 때, 기본 탭 들여쓰기(Indent)를 지정하는 방법을 알아보자. 방법VS Code에서 [Ctrl]([Cmd]) + [Shift] + [P]를 눌러서 Settings을 검색하여 [Preferences: Open User Settings (JSON)] 항목을 클릭한다. Settings.json 파일 안의 내용이 에디터에 표시되는데, 아래의 내용을 추가해준다.{ // ... // I want my default to be 4, but JavaScript/JSON to be 2 "editor.tabSize": 4, "[javasc..

useEffect와 useCallback들어가며리액트에서 사용되는 useCallback과 useEffect에 대해 알아보자. useCallback리액트에서 함수를 메모이제이션(Memoization)하는 데 사용된다.불필요한 함수의 재생성을 방지하고, 함수가 의존하는 값이 변경될 때만 새로운 함수를 생성하도록 할 수 있다. 예제 코드아래의 코드에서 handleClick 함수는 count 변수가 변경될 때만 재생성 된다.그렇지 않을 경우 handleClick 함수는 재생성되지 않으며, 같은 함수를 계속 사용하게 된다.이렇게 할 경우 함수의 재생성을 최소화하여 성능 최적화를 하는데 도움을 줄 수 있다.import React, { useCallback, useState } from 'rea..

데이터 전처리 할 때 결측값 제거 방법 (Pandas)들어가며데이터를 전처리할 때 판다스(Pandas)를 이용하여 결측값을 제거하는 방법을 정리해본다. 방법보통 다음과 같이 df.dropna()를 이용할 수도 있으나, 데이터에 공백(' ')이 있을 경우 제거하지 못한다는 단점이 있다.df['column'] = df['column'].dropna() 그래서 다음과 같이 pd.to_numeric()을 먼저 써서 공백(' '), NaN 등 결측값을 전부 NaN으로 바꿔준 후, dropna()를 적용시켜주면 모든 결측치들을 제거할 수 있다.df['column'] = pd.to_numeric(df['column']) # 공백, NaN 등 모든 결측치들을 NaN으로 바꾸기df['colu..

useReducer 훅들어가며리액트(React.js)에서 사용되는 useReducer 훅에 대해 정리해본다. useReducer 개념컴포넌트에 리듀서(Reducer)를 추가하는 리액트 훅const [state, dispatch] = useReducer(reducer, initialArg, init?)  (참고) 리듀스(Reduce, reduce())배열의 각 요소에 대해 제공된 함수(callback 함수)를 실행하고 하나의 결과값을 반환하는 메서드배열의 각 요소를 누적(Accumulate)하여 단일 값으로 줄이는 역할을 한다.주로 합계, 평균, 최대값, 최소값, 객체 생성 등 다양한 경우에 유용하게 사용된다.const array = [1, 2, 3, 4, 5];const result = a..

whitespace-pre-wrap 클래스들어가며테일윈드(Tailwind) CSS의 whitespace-pre-wrap 클래스에 대해 알아보자.  whitespace-pre-wrapTailwind CSS에서 사용하는 유틸리티 클래스 중 하나로, HTML 요소 내의 텍스트를 처리하는 방법을 지정한다.이 클래스를 사용하면 텍스트를 다음과 같이 처리할 수 있다. 공백 유지텍스트 내의 연속된 공백을 유지한다.여러 개의 공백이 있어도 하나로 축약되지 않는다. 강제 줄바꿈텍스트 내의 줄바꿈 문자를 유지한다.텍스트에 포함된 줄바꿈(\n)은 실제로 줄바꿈이 된다. 자동 줄바꿈텍스트가 요소의 너비를 초과하면 자동으로 줄이 바뀐다.이 클래스는 white-space: pre-wrap; CSS 속성과 동일한 효..

map 함수를 사용할 때 중괄호({})와 소괄호(())들어가며리액트(React)에서 중괄호 {}와 소괄호 ()는 주로 JSX 안에서 사용되며, 특히 map() 메서드와 함께 사용될 때 주의해야 할 점이 몇가지 있다.map 함수를 사용할 때 중괄호({})와 소괄호(())를 사용하는 경우의 차이에 대해 알아보자. 중괄호({})자바스크립트 표현식(Expression)을 감싸기 위해 사용된다.중괄호를 사용할 때는 반드시 반환값이 있어야 하며, 명시적으로 return 키워드를 사용해서 값을 반환해야 한다.여러 줄의 코드가 필요하거나 조건문 등 복잡한 로직을 작성해야 할 때 사용한다.const items = ['Apple', 'Banana', 'Cherry'];const listItem..

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

비주얼 스튜디오 코드(VS Code)에서 JSX 자동 완성 기능 켜는 방법들어가며비주얼 스튜디오 코드(VS Code)에서 return 문 안에 JSX를 작성할 때, 자동 완성 기능(Auto Complete)을 사용하는 방법을 알아보자. 방법이 방법을 위해서는 VS Code 설정을 따로 해줘야 한다.우선, Ctrl(Cmd) + ,를 눌러서 VS Code 설정 페이지를 연다. 그리고 상단의 [Open Settings (JSON)] 아이콘을 클릭한다.그리고 아래의 코드를 settings.json 코드 안에 넣어준다.{ ... "emmet.includeLanguages": { "javascript": "javascriptreact" }, "emmet.syntaxProfiles"..

토스트 메시지 띄우기 간단 예제 (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.jsxButtonsContainer 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 }를 반환한다. refstateuseRef(initialValue)는 { current: initialValue }을 반환useState(initialValue)는 state 변수의 현재값과 state 설정자 함수([value, setValue])를 반환Mutable → 렌더링 프로세스 외부에서 curren..

브랜치 : 원격 저장소의 최신 내용을 가져오고, 기존의 브랜치 내용 지우기들어가며팀원들과 협업할 때 필요한 브랜치 작업 중, 기존에 내가 만들었던 브랜치 내용을 지우고, 원격 저장소의 최신 내용을 받아오는 방법을 간단하게 정리해본다.우선 원격 저장소의 브랜치를 제거해준 후, 그 다음 로컬 저장소의 브랜치를 제거해줘야 한다.   방법1️⃣ 원격 저장소 브랜치 삭제하기원격 저장소의 내용 삭제하기$git push -d origin  2️⃣ 원격 저장소의 내용을 로컬 저장소로 가져오기원격 저장소에 저장된 (최근의) 내용을 로컬 저장소로 가져오기$ git pull  3️⃣ 로컬 저장소 브랜치 삭제하기로컬 저장소에 저장된 브랜치 삭제하기$ git branch -d branch_name 만약 브랜치가 병합되지 않았..

마우스 호버 효과를 적용하기 위한 커스텀 훅 만들기 (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..

QTableWidget 안의 항목 검색 및 복원 기능 구현 방법들어가며PyQt의 QTableWidget 안의 항목을 검색하고, 원래의 내용을 복원 시키는 방법을 정리해본다. 방법검색하고자 하는 내용이 해당 행에 있을 경우 표시하고, 그렇지 않을 경우 숨기는 방법을 이용한다.from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QTableWidget, QTableWidgetItem, QPushButton, QLineEditclass SearchResetTableApp(QWidget): def __init__(self): super(SearchResetTableApp, self).__init__() self.ini..

자바스크립트 비동기 프로그래밍(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..