AI Platform / Web

최근에 HTMLElement에 대해 기초단계에서 자세하게 알려주진 않는것 같다. 하지만, 공부를하면, 기초가 중요하다는 것을 알게되는 것 같다. react를 배우면 가상돔을 다루지만, ref과 같은 깊은 지식으로 들어갈 수록 기초의 부재는 빠른 성장을 막는다. 또한 typescript로 적용을 하다보면 상속 시 HTMLElement 에 관련된 이야기들이 많이 나온다. 오늘은 HTMLElement에 대해 이야기를 풀어볼까 한다. 깊게 들어가면 끝도 없다. 따라서 이 글을 통해 맛보기로 기초개념을 이해한 후에, 필요하다면 관련 내용을 조금 더 공부해 보기를 추천한다. 간단한 예를 추가하자면, 우리가 javascript에서 사용하는 appendChild는 Node가 제공하는 method이다. appendChi..

웹팩은 모듈 번들러로 프런트엔드 프레임워크에서 가장 많이 사용되고 있다. 쉽게 말해서 웹팩은 웹을 구성하고 있는 HTML, CSS, JAVASCRIPT 등을 모두 각각의 모듈로 보고 이를 조합해서 하나로 만들어주는 도구라고 생각하면 된다. 모듈 번들러라는 단어가 어려울 수 있지만, 쉽게 이야기하면 모듈 변환기라고 생각해도 좋다. 위 그림은 웹팩 공식홈페이지에 있는 그림이다. 그림을 보면, 복잡한 파일들을 간단하게 결합시켜주는 느낌이라는 것을 한눈에 파악할 수 있다. 시작에 앞서 nodejs에 관한 환경 설정은 아래의 url로 대체한다. [Web/nodejs] - nodejs 기초 총 정리 Webpack 프런트엔드에서 대표적인 모듈 번들러인 웹팩에 대해 알아보자. 웹팩은 복잡한 입력 모듈을 단순한 모듈로 ..

Single Source of Truth이란 단일 진실 공급원이라고 불리기도 하고, 신뢰 가능한 단일 소스라고 불리기도 하는 것 같다. 사실 길게 적을 필요도 없다. 간략하기 정의 하면 아래와 같다. 같은 내용을 중복해서 사용하지 말고, 하나의 내용을 참고 해서 사용한다는 말이다. Single Source of Truth를 웹개발로 풀어보면, 백엔드 같은 경우는 DB 핸들링을 하는 장소를 하나의 파일만 만들어서 사용하는 것과 같다고 할 수 있다. 프런트엔드의 경우는 상태관리를 전역으로 한군데 해서 하는 것 과 같다고 할 수 있다. 보통은 제어컴포넌트와 비제어컴포넌트를 이야기 할 때 많이 사용된다.

error - TypeError: resolver is not a function javascript로 코드를 적다보니, 위와 같은 에러(error - TypeError: resolver is not a function)가 발생했다. resolever의 의미는 사전적 의미는 변환기를 의미한다. 코드를 아무리 봐도 에러를 못찾겠다면, 아래의 정답을 보자. export를 적어주자. 함수를 적었지만, export해주지 않으면 호출 시 찾을 수 없어서 나는 에러이다.

디바운싱(debouncing)은 연속으로 호출되는 함수들 중에 마지막 함수만 호출되도록 하는 것이다. 웹 이벤트를 제어하는 방법 중 하나로 쓰로틀링(throttling)과 많이 나오는 개념 중 하나이다. 디바운싱의 예로 가장 많이 나오는 것은 웹 페이지의 스크롤이라고 할 수 있다. 웹 페이지 스크롤을 하면 연속적인 동작이다. 이러한 연속적인 동작에서 마지막에 호출되는 함수만 사용할 수 있도록 만드는 것이 디바운싱이라고 할 수 있다. input과 관련된 디바운싱 예시, 스크롤과 관련된 디바운싱 예시, react에서 hook으로 사용되는 디바운싱 예시도 담았다. 아래의 내용을 통해 디바운싱에 대한 이해도를 높여보자. 디바운싱 디바운싱은 따로 함수가 존재해서 코드 하나로 사용할 수 있는것은 아니다. 즉, 프로..

> python 으로 서버를 만드는 방법은 여러가지가 있다. 장고보다 쉬운 플라스크를 사용해서 서버를 만들어 보자. 0. Flask 개발환경 구축 기본적으로 Flask의 개발 환경은 python 3.7 이상부터 지원가능하다. 기본적으로 파이썬은 설치되었다고 생각하고 진행하겠다. 아래의 명령어로 가상환경을 만들자. // 파이썬 가상환경 만들기 $ mkdir myproject $ cd myproject $ python -m venv venv // 가상환경 접속하기 [window] $ source venv/scripts/activate [mac/ubuntu] $ source venv/bin/activate // 가상환경 나오기 $ deactivate 1. Flask 설치하기 / 시작하기 가상환경 내부에서 아래..

routing이나 redirect를 할 때 error router because the scheme does not have a registered handler. 이러한 애러가 발생했다. 만약 test 환경에서 local 관련 redirect에러가 발생했다면, 해결책은 간단하다. localhost 앞에 http:// 를 넣어주면된다. 끝!

다음 애러에 대한 해결책을 제시한다. typescript를 처음 척용하면서 삽질을 많이 했다. 나의경우는 create-react-app을 통해 프로젝트를 생성했다. 그러니 File was processed with these loaders: react-refrash 관련 애러가 발생했다. 추가로 require('/node_modules/react-refresh/runtime.js' 라는 에러도 발생을 했다. 객체에 대한 export가 계속 안되길래 as const 나 enum 등등 구글링해서 나오는 모든 것들을 해도 안됐었다. 약 3인정도 고민을 했었다. react-refresh관련 에러가 나오는 이유는 단순했다. color상수 설정을 해서 아래와 같이 만들었었다. export const Colors :..