Frontend

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..

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의 복잡한 상황을 정의해 보고 개선하는 과정을 살펴보겠습니다. 개선된 코드가 개선되지 않았다고 느낄수도 있습니다. 모든 상황에서 장단점이 존재하기 때문입니다. 정답을 하나로 규정하기 보다는 팀의 컨벤션..

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 요소가 아니면 함수를 탈출하게 하였습니다. 위와 같이 작성후 코드레벨상에..

Javascript 함수 => 1급 객체 ❓

javascript 강의나 책을 보면 1급 객체라는 단어가 종종 나오곤 합니다. 1급 객체가 무엇인지에 대하여 궁금중이 생겨 포스팅 합니다. 1급 객체란 컴퓨터 프로그래밍 언어 디자인에서 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킵니다.(wiki) 아래의 조건들을 만족하면 1급 객체라 할 수 있습니다 값으로서 반환될 수 있어야 합니다 함수의 인자로 전달될 수 있어야 합니다 배열이나 변수에 담길 수 있어야 합니다 javascript에서 원시 타입은 1급 객체에 성립합니다. var a = 'a' function sum(a, b) { return a + b} sum(1,2) // 3 var array = [a, 1, 2, 3] 함수 또한 1급 객체에 성립됩니다. // 값으로서 반..

Javascript event loop

이벤트 루프는 브라우저에 정의되어 있습니다. 이는 whatwg의 명세를 보면 확인할 수 있습니다. html은 이전에는 단순 마크업 언어에 불과하였지만 현재는 마크업 언어 + web api 들을 지칭합니다. 이전 까지의 단순 마크업 언어에 불과했던 위상에서 벗어나야 한다 생각합니다. html 5로 들어서면서 그래픽 표현, 양방향 통신 등등 많은것들이 가능해졌습니다.(html5을 애플에서 사용하면서 플래시를 배제하였고 이로인해 어도비에서 많은 언론 플레이를 했던걸로 기억합니다.) html 에 관련한 글은 나중에 포스팅 할 수 있도록 하고 다시 본론으로 돌아오겠습니다. 이 글은 Event loop의 모든 것을 다루진 않습니다. 몇가지 주요한 관점만 살펴보고자 합니다. 위는 브라우저에서의 런타임을 나타낸 것입니..

Javascript 얕은 복사, 깊은 복사

HTML 삽입 미리보기할 수 없는 소스 얕은 복사(shallow copy) 변수가 가리키는 주소값이 같은 주소 값을 가리킬때 얕은 복사가 이루어진다고 한다. reference type을 복사할때 얕은 복사가 이루어진다. const a = { c: 'c' } const b = a b.c = 'd' console.log(a) // { c: 'd' } console.log(b) // { c: 'd' } console.log(Object.is(a,b)) // true spread를 통한 복사는 1 depth 까지만 깊은복사가 이루어진다. const a = { b: { c: 'c' }, e: 'e' } const b = {...a} console.log(a) // { b: { c: 'c' }, e: 'e' } c..