본문 바로가기
반응형

분류 전체보기1062

리액트 - Context API로 상태 관리하기 (Managing State with Context API) 리액트 전체 링크 참고 - 리덕스로 상태 관리하기 - Context API로 상태 관리하기 - recoil로 상태 관리하기 - SWR로 상태 관리하기 props로 useState에 정의된 값을 넘겨주면, 하위 컴포넌트에서 상태를 관리할 수 있다. 예시 코드는 다음과 같다. // ParentComponent.js import React, { useState } from "react"; import ChildComponent from "./ChildComponent"; const ParentComponent = () => { const [value, setValue] = useState(0); return ( Parent Component setValue(value + 1)}>Parent + {`Parent.. 2024. 3. 15.
자바스크립트 - 길이가 같은 두 배열을 합치기 (Zip Array using Currying) 자바스크립트 전체 링크 길이가 같은 배열을 쌍으로 만들고 싶은 경우, 커링을 이용해서 배열을 합쳐보자. const zip = (...left) => (...right) => { return left.map((item, i) => [item, right[i]]); }; let arr1 = [1, 2, 3]; let arr2 = ["A", "B", "C"]; let result = zip(...arr1)(...arr2); console.log(result); // [ [ 1, 'A' ], [ 2, 'B' ], [ 3, 'C' ] ] 2024. 3. 15.
리액트 - Node 서버 작업 진행 상황 확인하기 (Checking Progress of Node Server Task) 리액트 전체 링크 다음과 같이 Node 서버에서 약 10초가 걸리는 작업이 있다고 가정하자. const express = require("express"); const router = express.Router(); let progress = 0; router.get("/progress", (req, res) => { res.json({ progress }); }); router.get("/performTask", (req, res) => { progress = 0; // 작업 초기화 progressInterval = setInterval(() => { progress += 1; console.log({ progress }); if (progress > 100) { progress = 100; clear.. 2024. 3. 15.
깃허브 데스크탑 - This diff contains a change in line endings from 'CRLF' to 'LF' 경고 처리하기 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) Git / GitHub 전체 링크  참고- 커맨드 창을 Git Bash로 변경하기 깃허브 데스크탑에서 아래와 같은 Warning이 나타나는 경우가 있다.This diff contains a change in line endings from 'CRLF' to 'LF'. 위 에러는 Windows의 CRLF(Carriage Return + Line Feed)와 Unix의 LF(Line Feed) 호환 때문에 발생하는 문제다.(Line Feed = 줄바꿈 문자) 먼저 Repository → Open in Git Bash를 눌러서 커맨드 창으로 이동하자. 아래와 같이 autocrlf를 true로 설정한다.true로 설정하면 파일을 저장할 때,.. 2024. 3. 13.
자바스크립트 - 2차원 배열에서 중복된 행 제거하기 자바스크립트 전체 링크 중복된 행을 체크해서 제거한다. const removeDuplicateRows = (array) => { // 중복 체크 let uniqueRows = {}; // 중복되지 않은 행만 포함하는 새로운 배열 let result = array.filter(function (row) { let rowStr = row.join(","); if (!uniqueRows[rowStr]) { uniqueRows[rowStr] = true; return true; } return false; }); return result; }; var array2D = [ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], [11, 12, 13, 14, 15, 16, 17, 18, 19, 20], [1,.. 2024. 3. 7.
C++ - 템플릿으로 클래스 상속하기 (Mixin Inheritance) C, C++ 전체 링크 참고 - 데코레이터 패턴 클래스 CBA가 클래스 A, B, C의 모든 메서드를 사용하려면 상속을 받으면 된다. class CBA : public A, public B, public C { }; 예제 코드는 다음과 같다. #include using namespace std; class A { public: void methodA() { cout 2024. 3. 6.
C++ - CRTP로 인터페이스 만들기 (Interface with Curiously Recurring Template Pattern) C, C++ 전체 링크 참고 - 형변환 연산자 - 가상 함수 테이블 C++의 인터페이스는 순수 가상 함수를 이용해서 만들 수 있다. class Base { public: virtual void interface() = 0; // 순수 가상 함수 void commonOperation() { cout 2024. 3. 6.
깃허브 머메이드 - 활동 다이어그램 그리기 (Draw Activity Diagram using GitHub Mermaid) 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) Git / GitHub 전체 링크  참고- https://mermaid.js.org/syntax/flowchart.html 깃허브 머메이드를 이용해 활동(액티비티) 다이어그램을 그려보자. 머메이드에서 액티비티 다이어그램은 지원하지 않고 Flow Chart를 지원한다.```mermaid---title: Activity Diagram---flowchart TD A --> B ``` 좌우로 그리고 싶다면 "LR" 로 표기한다.```mermaidflowchart LR A --> B ``` 총 4가지 (TB = TD) 방식을 지원한다.TB - Top to bottomTD - Top-down/ same as top to b.. 2024. 3. 4.
UML - 상태 다이어그램 (Statechart Diagram) Architecture & Design Pattern 전체 링크 참고 - 상태 다이어그램 그리기 상태 다이어그램 (Statechart Diagram) - 객체나 구성 요소의 다양한 상태, 이벤트에 응답하여 상태 전이를 어떻게 수행하는지를 모델링한다. - 동적인 동작을 가진 복잡한 시스템의 행동을 모델링하는 데 사용할 수 있다. - 시스템이 주고 받는 이벤트를 순서대로 표현할 수 있다. 구성 요소 상태 다이어그램(Finite State Machine, Statechart)에는 다음과 같은 구성 요소가 포함된다. - State : 시스템 또는 객체가 가질 수 있는 다양한 상태를 표시 - Event : 시스템 또는 객체가 상태 변화를 일으키는 사건 - Transition : 상태 간의 변화 아래의 다이어그램에.. 2024. 3. 3.
반응형