티스토리

개발 공부 공간

검색하기

블로그 홈

개발 공부 공간

d-yong.tistory.com/m

개발 공부 공간

구독자: 4

방명록 방문하기

주요 글 목록

[React] component Life Cycle / useEffect를 통한 component Life Cycle 제어 Component Life Cycle리액트 컴포넌트의 라이프사이클은Mount -> Update -> Unmout로 진행된다.Mount : 컴포넌트가 최초에 렌더링 됨Update : 컴포넌트가 리렌더링 됨Unmount : 컴포넌트가 화면에서 제거 됨 useEffect를 통한 component Life Cycle 제어useEffect : 두 번째 인수인 [] 배열의 값이 바뀌면, 첫 번째 매개변수의 함수를 호출예) useEffect(() => { console.log(`count: ${count} / input ${input}`); }, [count, input]); // 의존성 배열, dependency array(deps) 예) 클릭을 홀수 번 할 때 없어지는 컴포넌트 App.jsxim.. 공감수 4 댓글수 2 2024. 9. 1.
[React] component 기본 구조 / State Lifting 리액트의 데이터(state등)는 부모 component에서 자식 component로 내려간다. 만약 형제 component끼리 상태를 공유하고 싶으면?=> 부모 component로 statef를 올린다. (= State Lifting) 예)아래와 같은 app을 만들어보면 두 개의 자식 컴포넌트가 count값을 알아야 하기 때문에 부모 컴포넌트인 App으로 state lifting을 해야한다. App.jsximport { useState } from "react";import "./App.css";import Viewer from "./components/Viewer";import Controller from "./components/Controller";function App() { const [.. 공감수 0 댓글수 0 2024. 9. 1.
[React] useRef로 component 내에 reference객체 생성 useRef vs useStateuseRefuseStateReference 객체를 생성State를 생성컴포넌트 내부의 변수로 활용 가능컴포넌트 내부의 변수로 활용 가능값이 바뀌어도 컵포넌트 리렌더링 발생하지 않음값이 바뀌면 컵포넌트 리렌더링 발생 사용 예)input tag에 DOM 요소를 reference 객체에 저장하여 input값이 빈 경우 focus 호출 import { useState, useRef } from "react";const Register = () => { const [input, setInput] = useState({ name: "", birth: "", country: "", bio: "", }); const countRef = useRef(0); .. 공감수 1 댓글수 0 2024. 9. 1.
[React] Comonent 리랜더링 조건 / State로 Component 상태 관리 리액트 컴포넌트는 아래 조건이 충족되면 Re-Rendering 된다. 1. 내 state 값이 변경 될 때2. props 값이 변경 될 때3. 부모 컴포넌트가 Re-Rendering 될 때 예) react의 useState hook을 이용하여 component의 상태를 관리 App Component에서1) 버튼 클릭 시 on / off 상태 관리2) 버튼 클릭 시 count 수 증가 상태 관리 import "./App.css";import { useState } from "react";function App() { // 컴보턴트 리렌더링 => 화면 바뀜 const [count, setCount] = useState(0); const [light, setLight] = useState("OFF");.. 공감수 0 댓글수 0 2024. 8. 18.
[React] Props를 통해 Component로 데이터 전달 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달 할 때 Props를 이용하면 된다.React에서 데이터(Props)는 상위 컴포넌트에서 아래 컴포넌트로 흐른다. Props를 전달하는 방법은 두 가지1. 객체형태로 전달App.jsximport "./App.css";import Button from "./components/Button";function App() { const buttonProps = { text: "메일", color: "red", }; return ( );}export default App; Button.jsxconst Button = (props) => { console.log(props); // {text: '메일', co.. 공감수 0 댓글수 0 2024. 8. 4.
[React] Component & JSX ComponentJavaScript에서 html을 리턴하는 함수함수의 첫 글자는 대문자로 작성해야 컴포넌트로 인식한다. vite를 통해 생성한 프로젝트를 실행시켰을 때 원리를 간단히 보면 1. index.html파일에서 main.jsx실행 2. main.jsx에서 App Component 렌더링 3. App Component(함수)는 html을 리턴 JSXJSX는 html과 JavaScript를 혼용해서 사용할 수 있도록 JavaScript를 eXtension한 것JSX 주의 사항1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다. {number %2 == 0 ? "짝수":"홀수"}2. 숫자, 문자열, 배열 값만 렌더링 된다. (객체는 오류 발생)3. 모든 태그는 닫혀있어야 한다.4. 최상위 .. 공감수 0 댓글수 0 2024. 8. 4.
[React] React App 생성하기 (+ Vite) Vite(비트)를 이용하면 React의 기본적인 패키지를 갖춘 프로젝트를 쉽게 생성할 수 있다. 1. $: npm create vite@latest 위의 명령어를 실행 후 React 선택 언어 선택 프로젝트의 기본 틀이 만들어졌다. 2. $: npm i package.json에 명시되어 있는 dependencies를 설치하기 위해 install 명령어를 입력해준다. npm i를 통해 필요한 lib들이 패키지 내에 설치가 됨 3. npm run dev를 입력하여 React App 실행아래와 같이 로컬에서 React App이 실행된다. 공감수 0 댓글수 0 2024. 7. 28.
[JavaScript][기초] Promise, async 비동기 처리 자바스크립트는 싱글 스레드로 작동하기 때문에 Stack에서 코드를 순차적으로 실행시키고 Web APIs에 비동기 작업을 위임한다.Web APIs에서 완료 된 비동기 작업들은 Callback queue에 할당되고 Event loop를 통해 Stack에 등록되면 callback 함수가 호출된다. 1. Promiseadd10 함수 호출 2초후에 executor가 실행 된다.function add10(num) { // Promise는 비동기 작업을 감싸는 객체 const promise = new Promise((resolve, reject) => { // executor // 비동기 작업을 실행하는 함수 setTimeout(() => { if (typeof num === "nu.. 공감수 0 댓글수 0 2024. 7. 28.
[JavaScript][기초] 배열 변형 메소드 (filter, map, sort, toSorted) 1. filter기존 배열에서 조건을 만족하는 요소들만 필터링하여 "새로운 배열"로 반환let arr1 = [ { name: "dy lee", address: "KR" }, { name: "sy im", address: "KR" }, { name: "yj kim", address: "US" },];const bundangPeople = arr1.filter((item) => item.address === "KR");console.log(bundangPeople);// [// {// "name": "dy lee",// "address": "KR"// },// {// "name": "sy im",// "address": "K.. 공감수 0 댓글수 1 2024. 7. 14.
[JavaScript][기초] 배열 순회탐색 메소드 (forEach, includes, indexOf, findIndex, find) 1. forEach배열의 모든 요소를 순회하면서, 각각의 요소에 특정 동작을 수행시키는 메서드let arr1 = [1, 2, 3];arr1.forEach(function (item, idx, arr) { console.log(item * 2); // 2 // 4 // 6});// 아래와 같이 응용가능let doubledArr = [];arr1.forEach((item) => { doubledArr.push(item * 2);});console.log(doubledArr); // [2, 4, 6] 2. includes배열에 특정 요소가 있는지 확인하는 메소드let arr2 = [1, 2, 3];console.log(arr2.includes(3)); // trueconsole.log(arr2.inc.. 공감수 0 댓글수 1 2024. 7. 14.
[JavaScript][기초] 배열 요소 조작 메소드 (push, pop, shift, unshift, slice, concat) 배열 조작 메소드 6가지push, pop, shift, unshift, slice, concat// 배열 메소드1// 6가지의 요소 조작 메소드// 1. push// 배열의 맨 뒤에 새로운 요소를 추가하는 메서드let arr1 = [1, 2, 3];// push는 최종적으로 배열의 길이를 반환한다.const newLength = arr1.push(4, 5, 6, 7);console.log(arr1); // [1, 2, 3, 4, 5, 6, 7]console.log(newLength); // 7// 2. pop// 배열의 맨 뒤에 있는 요소를 제거하고, 반환let arr2 = [1, 2, 3];const poppedItem = arr2.pop();console.log(poppedItem); // 3cons.. 공감수 0 댓글수 1 2024. 7. 14.
[JavaScript][기초] 배열, 객체 순회 for of, for in for of => 배열 순회에 쓰임for in => 객체 순회에 쓰임 1. 배열 순회// 1 배열 순회let arr = [1, 2, 3];// 1.1 배열 인덱스for (let i = 0; i 2. 객체 순회// 2. 객체 순회let person = { name: "DY", age: 32, hobby: "PS5",};// 2.1 Object.keys사용// -> 객체에서 key 값들만 뽑아서 새로운 배열로 변환let keys = Object.keys(person);console.log(keys); // ['name', 'age', 'hobby']// for of는 배열에서만 사용하는 연산자for (let key of keys) { const value = person[key]; console... 공감수 0 댓글수 0 2024. 6. 30.
[JavaScript][기초] Object Type 깊은 복사/깊은 비교 Object Type은 Primitive Type과 달리 참조에 의해(by reference) 저장되고 복사 된다.따라서 객체를 복사하고 싶을때에는 깊은 복사를 해줘야 한다. // 객체 얕은 복사let so1 = { name: "DY" };let so2 = so1;// 객체 깊은 복사let do1 = { name: "DY" };let do2 = { ...do1 };// 객체간의 비교는 기본적으로 참조값을 기준으로 한다.let o1 = { name: "DY" };let o2 = o1;let o3 = { ...o1 };// 얕은 비교console.log(o1 === o2); // trueconsole.log(o1 === o3); // false// 깊은 비교console.log(JSON.stringify(o.. 공감수 0 댓글수 0 2024. 6. 30.
[JavaScript][기초] Spread / Rest (...) 1. Spread는 객체나 배열에 저장 된 값을 개별적으로 만들기 위함(Spread : 흩뿌리다, 펼치다.)// 1. Spread 연산자// -> Spread : 흩뿌리다. 펼치다// -> 객체나 배열에 저장된 여러개의 값을 개별로 흩뿌려주는 역할// 배열 spreadlet arr1 = [1, 2, 3];// 4, 1, 2, 3, 5, 6 를 만들고 싶을 때let arr2 = [4, ...arr1, 5, 6];console.log(arr2); // [4, 1, 2, 3, 5, 6]// 객체 spreadlet obj1 = { a: 1, b: 2,};let obj2 = { ...obj1, // obj1의 속성을 그대로 사용할 수 있다. c: 3, d: 4,};console.log(obj2); // .. 공감수 0 댓글수 0 2024. 6. 30.
[JavaScript][기초] 배열, 객체의 구조분해 할당 구조 분해 할당의 목적은배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하기 위함 // 1. 배열의 구조 분해 할당let arr = [1, 2, 3];let testOne = arr[0];let testTwo = arr[1];let testThree = arr[2];// => 매우 불편// 구조 분해 할당을 통해 한 번에 값을 할당let [one, two, three] = arr;console.log(one, two, three); // 1 2 3let [one1, two2] = arr;console.log(one1, two2); // 1 2// 2. 객체의 구조 분해 할당let person = { name: "DY", age: 99, hobby: "Coding",};// [ke.. 공감수 0 댓글수 0 2024. 6. 30.
[JavaScript][기초] Truthy & Falsy Truthy & Falsy Boolean 타입이 아니더라도, 조건문 내에서 참 거짓으로 평가되는 것을 말하며Truthy, Falsy를 사용하면 조건문을 간결하게 만들 수 있다.// 1. Falsy한 값let falsy1 = undefined;let falsy2 = null;let falsy3 = 0;let falsy4 = -0;let falsy5 = NaN; // Not a Numberlet falsy6 = "";let falsy7 = 0n; // BigInteger// => 조건문에서 거짓으로 평가 됨if (!falsy1) { console.log(falsy1, "is false");}// 2. Truthy한 값let truthy1 = "hello";let truthy2 = 123;let truthy.. 공감수 0 댓글수 0 2024. 6. 23.
[JavaScript][기초] 객체 { } 생성 객체는 { } 를 이용하여 생성하고 class 처럼 변수와 메소드를 넣어줄 수 있다.// 1. 객체 생성let obj1 = new Object(); // 객체 생성자let obj2 = {}; // 객체 리터럴// 2. 객체 프로퍼티 (속성)let person = { name: "DY", // key : value age: 33, hobby: "soccer", extra: function () { console.log("print extra"); }, "like cat": false,};// 3. 객체 프로퍼티를 다루는 방법// 3.1 특정 프로퍼티에 접근하는 방법 (점 표기법, 괄호 표기법)let name = person.name;console.log("obj name is ", name.. 공감수 0 댓글수 0 2024. 6. 23.
[JavaScript][기초] 콜백 함수 A함수를 B함수의 매개변수로 전달하여 B함수에서 A함수를 호출(콜백)// 1. callback functionfunction main(value) { value();}function sub() { console.log("I am sub");}main(sub); // I am sub// 2. callback 활용function repeat(count, callback) { for (let idx = 1; idx { console.log("callback", idx, "called");});// 1// 2// 3// 4// 5repeat(5, (idx) => { console.log("callback", idx * 2, "called");});// 2// 4// 6// 8// 10 공감수 0 댓글수 0 2024. 6. 23.
[JavaScript][기초] 함수 선언 자바스크립트에서 함수를 선언하는 방법 // 1. 명명 함수function funcA() { console.log("funcA");}let varA = funcA;varA();// 2. 익명 함수// 함수 표현식 (값으로 취급 되기 때문에 호이스팅 대상이 아님)let varB = function () { console.log("funcB");};// 3. 화살표 함수let varC = /*function*/ () => { // function키워드를 생략할 수 있다. return 1;};// 즉시 반환 시 중괄호, return 생략 가능let varC_return = (value) => value + 1; 공감수 0 댓글수 0 2024. 6. 16.
[JavaScript][기초] 연산자 // 1. null병합 연산자// -> 존재하는 값을 추려내는 기능// -> null, undefined가 아닌 값을찾아내는 연산자let var1;let var2 = 10;let var3 = 20;let var4 = var1 ?? var2;console.log(var4); // => 10let var6 = var3 ?? var2;console.log(var6); // => 20 let var7 = var2 ?? var3;console.log(var7); // => 10// 둘다 null, undefined가 아닌 경우 앞에 값 사용// 이렇게 응용도 가능let userName = "DY";const defaultName = "None";let displayName = userName ?? defaultN.. 공감수 0 댓글수 0 2024. 6. 16.
[JavaScript][기초] 형변환(Type Casting) 자바스크립트의 타입캐스팅은 두가지 방식이 존재1) 상황에 따라 암시적 형변환을 자바스크립트 엔진에서 실행2) 개발자가 코드를 통해 의도적으로 명시적 형변환을 실행 암시적 형변환 예)// 1. Implicit Type Castinglet num = 10;let str = "20";const result = num + str;console.log(result); // => 1020 문자열이 된다. 명시적 형변환 예)// 2. Explicit Type Castinglet str1 = "10";let strToNum1 = Number(str1);// console.log(10 + strToNum1); // => 20let str2 = "20개";let strToNum2 = Number(str2);console.. 공감수 0 댓글수 1 2024. 6. 16.
[JavaScript][기초] 데이터 타입 자바스크립트 데이터 타입은 크게 원시(Primitive)타입과 객체(Object)타입으로 구분 된다.객체 타입은 c/cpp의 포인터나 자바처럼 참조형이기 때문에 주소를 통해 접근된다. (따라서 얕은 복사 주의) Primitive Type 예)// Number Typelet num1 = 27;let num2 = 1.5;let num3 = -20;console.log(num1 + num2);console.log(num1 - num2);console.log(num1 * num2);console.log(num1 / num2);console.log(num1 % num2);let inf = Infinity;let mInf = -Infinity;console.log(inf);console.log(mInf);let .. 공감수 1 댓글수 0 2024. 6. 16.
[알고리즘 문제해결전략] ITES - 외계 신호 분석 [생각의 흐름] 1. 수열의 앞에서 부터 하나하나 더하면서 수열의 연속 된 특정 범위 내에서 K값을 찾는다. 2. 수열이 연속해야하기 때문에 맨 앞의 수열은 빼고 맨 뒤의 수열은 넣는 방법 두 가지가 있다. 3. K보다 값이 크면 맨 앞의 수열을 빼고(Pop) K보다 값이 작으면 맨 뒤에 수열을 추가한다(Push). 4. K와 값이 같으면 cnt++; * 맨 처음에는 수열(signal A)를 배열에 초기화 하여 사용하려 했으나 메모리 초과가 발생하여 그때 그때 값을 만들어 내는 방식을 택함. /* https://www.algospot.com/judge/problem/read/ITES */ #include #include #include using namespace std; const long MOD = .. 공감수 0 댓글수 0 2023. 4. 30.
[알고리즘 문제해결전략] NUMB3RS - 두니발 박사의 탈옥 [생각의 흐름] 1. 모든 경로(or 경우의수)를 완전 탐색 해본다. 2. 교도소의 인접한 마을(시작점)에서 탐색을 시작하는 경우 앞의 과정에서 계산한 확률 값이 필요하다. -> 까다로운 점 3. 시작점과 끝점을 뒤집어서 생각해 본다. 4. 끝점에서 시작해서 교됴소의 인접한 마을(시작점)으로 가는 경우만 구해서 확률을 계산한다. /* https://www.algospot.com/judge/problem/read/NUMB3RS# */ #include #include const int MAX_TOWN = 51; const int MAX_DAY = 101; int townMap[MAX_TOWN][MAX_TOWN]; double cache[MAX_DAY][MAX_TOWN]; int numOfConnectedTo.. 공감수 0 댓글수 0 2023. 4. 9.
[알고리즘 문제해결전략] POLY - 폴리오미노 [생각의 흐름] 1. 위에서 아래로 정사각형을 x개씩 채워나간다. 2. 직전 윗칸에서 채운(사용한) 사각형의 갯수와 현재 칸에 채우려는 사각형의 갯수를 알면 경우의 수를 구할 수 있다. ( 윗칸에서 채운 사각형의 수 + 현재 칸을 채우려는 사각형의 수 - 1) 3. 재귀함수를 통해 모든 경우의 수를 구한다. 4. 직전 윗칸에서 채운(사용한) 사각형의 갯수와 현재 사용할 수 있는 남은 사각형(leftBlock)의 갯수를 통해 메모이제이션이 가능하다. /* https://www.algospot.com/judge/problem/read/POLY */ #include #include const int MAX_BLOCK = 101; const int MOD = 10000000; int cache[MAX_BLOCK.. 공감수 0 댓글수 0 2023. 4. 2.
[알고리즘 문제해결전략] ASYMTILING - 비대칭 타일링 [생각의 흐름] 1. 전체 타일설치 경우의 수를 구한다. 2. 대칭인 타일설치 경우의 수를 구해서 뺀다. 3. 대칭인 타일의 경우의 수를 구하는 방법을 n이 짝수일때 홀수일때로 나눈다. 4. n이 짝수인 경우 다시 두가지 경우로 나눌 수 있는데 하나는 n/2로 대칭인 경우와 다른 하나는 전체 타일 가운데를 2x2타일을 배치한 뒤 절반으로 나누는 방법이다. (n-2)/2 n이 홀수인 경우는 자연스럽게 정가운데 타일 하나는 무조건 2x1타일을 배치해야 하기 때문에 (n-1)/2이 된다. 5. 타일의 경우의 수를 나눈 뒤 왼쪽 타일만 채워주면 모든 대칭 타일의 경우의 수를 구할 수 있다. 6. modulo연산에서 주의 할 점이 있는데 (전체 타일의 경우의 수 % MOD) - (대칭인 타일의 경우의 수 % MO.. 공감수 1 댓글수 0 2023. 2. 26.
[MLflow] MLflow란? + MLflow 사용법 1. MLflow란 무엇이고 왜 쓰는 것인가? MLflow는 통상적인 머신러닝 워크플로우에서 모델링 및 훈련, 평가, 배포 부분을 도와주는 툴이라고 생각하면 쉽다. 아래의 그림에서 형광색 사각형의 부분을 주로 도와준다고 볼 수 있다. 2. MLflow에서 제공하는 기능 MLflow는 4가지 컴포넌트로 구성되어 있고 각각의 컴포넌트는 다음과 같은 기능을 제공한다. Tracking : 트래킹은 모델 트레이닝 실험 과정에서 나오는 메타데이터, 데이터, 결과물등을 저장할 수 있는 기능이다. 저장 된 내용을 통해 실험을 추적 할 수 있게 도와준다. Projects : MLflow를 사용한 프로젝트를 yaml파일을 통해 패키징 하여 다른 플랫폼에서도 쉽게 사용할 수 있도록 도와준다. Models : 다양한 ML라이.. 공감수 2 댓글수 0 2023. 2. 5.
[Feast] Feast(Feature Store)란? + Feast 사용법 머신러닝에서 모델을 학습할 때 Raw Data(db, parquet, BigQuery등)에서 Feature를 뽑아서 사용한다. Feature란 테이블의 컬럼 중에서 설명변수(=예측변수)에 해당한다. 1. Feature Store가 필요한 이유 Feature Store가 없는 경우 아래와 같이 ML모델과 RawData간에 직접적인 의존성이 생긴다. 이렇게 될 경우 Feature를 재사용하기 힘들고 ML개발자가 직접 Feature까지 신경써야하는 문제점이 있다. 이러한 문제를 해결하기 위해 도입된게 Feature Store이다. 아래의 그림처럼 ML모델과 RawData사이에 Feature Store를 도입함으로써 이미 정의한 Feature를 재사용하고 ML모델과 RawDatat사이의 직접적인 의존성을 제거할.. 공감수 1 댓글수 0 2023. 1. 15.
[알고리즘 문제해결전략] SNAIL - 달팽이 [생각의 흐름] 1. 비오는날(75%)와 비가오지 않는날(25%)을 구분한다. 2. 비오는날과 비가오지 않는 날의 확률을 각각 곱하면서 목적지 (n)에 도달할 때까지 반복해 본다. => 완전탐색 3. 중복되는 경로의 확률을 메모이제이션 한다. 4. m일 안에 목적지 n에 도달했을 경우 1을 리턴하여 모든 경로의 확률을 곱하고 그렇지 않은 경우 0을 리턴하여 경우를 무효화 시킨다. 5. 절대 도달할 수 없는 경우( 예) 1000미터 우물을 100일 안에 도달)는 sol함수를 호출하지 않고 수식으로 가지치기 한다. /* https://www.algospot.com/judge/problem/read/SNAIL */ #include const int MAX_DAYS = 1001; const int MAX_MET.. 공감수 0 댓글수 0 2023. 1. 15.
[알고리즘 문제해결전략] TRIPATHCNT - 삼각형 위의 최대 경로 수 세기 [생각의 흐름] 1. 최대 경로를 먼저 cache한다. (https://d-yong.tistory.com/107 와 동일) 2. 아래로 가는 경우 / 오른쪽 아래로 가는 경우 중 최대 경로가 큰 값을 경우의 수에 추가한다.(단, 두 값이 같은 경우 두 경우의 수를 모두 더한다.) /* https://www.algospot.com/judge/problem/read/TRIPATHCNT */ #include #include #include using namespace std; const int MAX_SIZE = 101; int n; int triangle[MAX_SIZE][MAX_SIZE]; int cache[MAX_SIZE][MAX_SIZE]; int cacheCnt[MAX_SIZE][MAX_SIZE]; .. 공감수 0 댓글수 0 2023. 1. 8.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.