분류 전체보기

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 메소드를 통해 접근할 수 있습니다. 아래..

Javascript custom event 🐕

javascript에서는 미리 정의되어 있는 이벤트 종류외에 추가로 custom event를 추가할 수 있습니다. 반복되는 동작을 customEvent로 정의후에 eventHandler를 등록한 dom 요소에서 dispatchEvent 메소드를 통해 customEvent를 동작하게 할 수 있습니다. customEvent에는 type과 옵션이 들어갑니다. 옵션 객체를 통해 원하는 데이터를 전달할 수도 있습니다. CustomEvent(type, [options]?) options => { detail: {객체 정의}} 아래는 간단한 사용 예시 입니다. const cat = new CustomEvent('animal', { detail: {name: 'cat' }}) const dog = new CustomE..

컴파일러, 인터프리터

컴파일러는 뭐고 인터프리터는 뭔가요? 컴파일러와 인터프리터는 고급언어로 작성된 소스코드를 기계어로 번역한 후에 프로그램을 실행하는 것입니다. 이 둘은 아래와 같은 차이점을 가지고 있습니다. 컴파일러 파일을 한 번에 번역합니다. 번역후에는 실행파일이 생성됩니다. 이후의 실행에는 생성된 실행파일을 가지고 실행하게 됩니다. 모든 파일을 한 번에 번역하여야 하므로 번역 과정은 인터프리터에 비해 상대적으로 느리지만 이미 번역된 실행파일을 가지게 되므로 이후의 실행에는 빠릅니다. 인터프리터 파일을 한 줄씩 번역을 합니다. 번역하는 시간은 한 줄만 번역을 하므로 짧지만 실행 할때마다 번역을 하여야 하므로 실행 시간이 컴파일러에 비해 느립니다. 실행파일이 생성되지 않으므로 같은 파일을 실행하게 되면 매번 같은 번역 과..

React typescript 에서 dataset 이용하기 😢

필요한 데이터를 html의 data 속성을 이용하여 주로 담아놓곤 하였습니다. 이를 React with typescript에서 적용할 때 막혔던 부분에 대한 내용입니다. 위와 같이 사용하려 시도했었습니다. 하지만 계속 에러를 뱉어냈고 이를 이해하지 못했었습니다. 이유는 다음과 같습니다. event의 target이 document, element, window등의 요소가 될 수 있기 때문입니다. 그래서 아래와 같이 event의 target이 내가 정한 요소의 instance가 아니라면 early return을 하여 런타임에서 에러가 없을 수 있게 하였습니다. 위의 이미지속의 코드에서 e.target의 instance를 검사하여 div 요소가 아니면 함수를 탈출하게 하였습니다. 위와 같이 작성후 코드레벨상에..