분류 전체보기

Javascript custom array 🌹

javascript에서 빈 배열을 만드는 것을 계속 까먹어서 아래와 같이 정리합니다. 빈 배열 만들기 const arr = new Array(10) // [empty x 10] arr[5] = 1 arr // [empty x 5, 1, empty x 4] const brr = Array.from(5) // [] brr[5] = 1 brr // [empty x 5, 1] 빈 배열 채우기 const arr = new Array(10) arr.fill(4) arr // [4, 4, 4, 4, 4, 4, 4, 4, 4, 4] String에서 배열 만들기 Array.from('arr') // ['a', 'r', 'r'] Array.from('x'.repeat(5)) // ['x', 'x', 'x', 'x', 'x..

data mapper 패턴, active record 패턴 🌱

이제껏 백엔드 에서 orm을 사용할때 rails에서는 active record 패턴을, nestjs에서는 data mapper 패턴을 사용하였습니다. (rails에서는 ActiveRecord를 nestjs에서는 typeorm을 사용하였었습니다) 두 패턴간의 특징을 정리해두려 합니다 DB를 조회하는 메소드를 모델내에 정의하면 active record 패턴 별도의 repositories 클래스를 생성하여 쿼리 메소드를 작성하는 것은 data mapper 패턴이라 합니다. active record 패턴 DB를 조회하는 메소드를 모델내에 정의하는 패턴을 active record 패턴이라 합니다. 간단하다고 생각합니다. 개인적인 생각으로는 typeorm 에서는 entity 내부에 관계정의까지 같이 정의하는 것이 ..

React input onFocus, onBlur(focus out) 😶‍🌫️

react에서 input에 focus out을 이용하고 싶을때는 onBlur를 이용하면 됩니다. javascript react focusin onFocus focusout onBlur focusout으로 계속 시도해보다가 onBlur를 최근에 알게되었습니다. 아래에 예제 추가해 두었습니다. react 깃헙에서 관련 issue도 첨부해 두겠습니다! react-dom 라이브러리에서 focusIn, focusOut 관련 부분도 캡처 & 링크 걸어두겠습니다. HTML 삽입 미리보기할 수 없는 소스 https://github.com/facebook/react/issues/6410 onFocusIn/onFocusOut events · Issue #6410 · facebook/react Like mouse enter..

React moment locale 적용하기 🌹

React에서 moment를 사용하는 경우 locale을 변경하고자 하면 직접 import 해주어야 합니다. import moment from 'moment' import 'moment/locale/fr'; import 'moment/locale/kr'; export default function App(){ 생략 } moment는 시간을 다룰때 굉장히 유용한 library 입니다. 그래서 굉장히 널리 사용되고 있습니다. moment는 파일사이즈가 큽니다. 그래서 day.js와 같이 파일사이즈가 작고 moment와 쓰임새가 유사한 라이브러리를 사용하라는 정보를 접한적이 있습니다. cra로 시작한 경우 moment의 locale을 변경해주려면 위와 같이 locale file을 직접 import 해주어야 합..

React Derived State 🥲

React 관련 자료를 살펴보다가 Derived State라는 것에 대해 알게 되었고 이를 지양해야 한다고 알게되었습니다. Derived State가 무엇이고 해결은 어떤 방식으로 하는지 알아보려 합니다. Derived State는 props로 전달받은 정보가 컴포넌트에서 state로서 정의되어 관리되는 것을 의미합니다. derived는 ~파생된, ~유래된 이라는 뜻을 가진 영단어 입니다. 예시를 살펴보겠습니다. import { useState } from 'react'; import './App.css'; import DerivedState from './DerivedState'; function DerivedState({ defaultEmail, onChange }) { const [value, se..

동전 2 [백준 2294] - python

import sys input = sys.stdin.readline def BOJ2294() : n, k = map(int, input().split()) coins = [] for _ in range(n) : coins.append(int(input().strip())) dp = [1e6 for _ in range(k+1)] dp[0] = 0 for i in range(1, k + 1) : for coin in coins : if i - coin >= 0 : dp[i] = min(dp[i], dp[i-coin] + 1) if dp[-1] == 1e6 : print(-1) else : print(dp[-1]) BOJ2294() 접근 방법 : 1. 입력받은 가치를 만들어 낼 수 있는 동전의 최소개수를 구하..

React props, state 🏔

React에서 props와 state는 어떤것을 의미할까요??? 우선 props와 state는 둘다 정보를 가지고 있는 일반 javascript 객체 입니다. props와 state는 렌더링 결과물에 영향을 주는 정보를 가지고 있습니다. 하지만 props는 외부에서 전달을 받고 state는 컴포넌트 내부에서 관리됩니다. props는 같은 input에 같은 output을 반환해 줍니다.(순수함수 같네요) function Welcome(props) { return welcome {props.name} } props는 외부에서 정의되어 내부 컴포넌트로 전달됩니다. state는 컴포넌트 내부에서 관리되어지는 렌더링에 영향을 주는 정보를 가지고 있는 자바스크립트 객체입니다!! state는 컴포넌트 내부에서 정의되..

React useReducer 🌱

useReducer는 useState의 대체 함수 입니다. const [state, dispatch] = useReducer(reducer, initialState, init) (state, action) => newState의 형태로 reducer를 입력받고 dispatch 메서드와 짝의 형태로 현재 state를 반환해 줍니다. 자세한 내용은 코드를 직접 살펴보겠습니다. react 공식문서에서는 state로직이 복잡해지면 리듀서의 사용, 커스텀 hook을 고려하라고 안내하고 있습니다. 아래에서는 state의 복잡한 상황을 정의해 보고 개선하는 과정을 살펴보겠습니다. 개선된 코드가 개선되지 않았다고 느낄수도 있습니다. 모든 상황에서 장단점이 존재하기 때문입니다. 정답을 하나로 규정하기 보다는 팀의 컨벤션..

OSI 7 layer 🌱

네트워크에는 osi 7 layer 라는 개념이 존재합니다. 네트워크에서 통신이 일어나는 과저을 7계층으로 표현한 것입니다. 이렇게 7계층으로 표현을 함으로써 통신이 일어나는 과정을 단계별로 파악할 수 있습니다. 흐름을 한 눈에 알아보기 쉬워졌습니다. 에러 디버깅이 쉬워졌습니다(역할이 구분되어졌으므로 에러 발생시 특정계층에서만 에러를 수정하면 됩니다.) Application Layer 응용서비스 HTTP(웹), SMTP(메일) Presentation Layer 인코딩, 암호화, 압축 Session Layer TCP/IP 통신 연결을 위한 수립/유지/중단 Transport Layer TCP, UDP, l4 로드밸런서 Internet Layer IP통신, 라우터, l3 스위치/라우터 Data Link Laye..

Javascript createObjectURL, revokeObjectURL 🤥

javascript에서는 createObjectURL을 통해 Blob 객체를 나타낼 수 있습니다. URL.createObjectURL 메소드를 사용하면 생성된 window의 document에서만 접근 가능한 url이 생성됩니다. 이를 통해 image를 입력받았을때 화면에 보여줄 수 있는 임시 url을 생성할 수 있습니다. Blob(Binary large Object) 객체는 javascript에서 이미지, 영상, 멀티미디어 데이터를 다룰때 사용합니다. createObjectUrl에 입력 가능한 (File, Blob, MediaSource)중 File은 Blob에 기반한 인터페이스 입니다. input에 type을 file로 주면 입력받은 파일에 input.files 메소드를 통해 접근할 수 있습니다. 아래..