AI Platform / Web

디바운싱(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 :..

REACT CRUD 리액트에서 가장 기초이자 기본이 crud이다. 다른 블로그들과의 차이점은 가능한 모든 case를 정리하여 성능비교까지 적어보려한다.(계속 업데이트 예정) 일반적인 javascript에서 todo list를 만들면서 crud를 많이 구현해 보았을 것이다. 일반적인 Javascript와 react CRUD의 차이점은 Immutability(불변성)에 있다고 할 수 있다. 기본적으로 리액트는 Mutation 하지 않게 작성을 해야한다. 아래의 예는 데이터 값을 직접 변경(mutate)하는 예이다. 즉, mutation한 수정이라고 할 수 있겠다. let player = {score: 1, name: 'Jeff'}; player.score = 2; // 결과값 // {score: 2, nam..

우리는 nodejs를 사용할 때 습관적으로 npm을 명령어를 사용하여 프로젝트를 생성하고 관리한다. 그리고 생성된 프로젝트에서 package.json파일을 참고하여 프로젝트를 진행한다. 그렇다면, 우리가 자연스럽게 사용하는 npm에 대해 조금 더 깊게 알아보는 시간을 가져볼까 한다. 그리고 npm i로 설치를 진행하면, package.json의 dependencies에 설치한 패키지들이 들어가는 것을 확인할 수 있다. 이러한 dependencies 뿐만 아니라 devDependencies와 peerDependencies, peerDependenciesMeta도 같이 알아보고자 한다. Build amazing things 1. NPM 위의 문구는 npm 공식 문서에 들어가면 나오는 말이다. npm은 nod..

nextjs 버전이 올라가면서 유용한 기능들이 많이 생겨나고 있다. 여기서 사용해볼 Rewrite에 대해 알아보자. 원리는 간단하다. 나는 /api/hanpy로 들어오는 요청을 처리하는 API를 만들었다. 그런데, /hanpy로 들어오는 요청도 /api/hanpy의 로직을 따르게 만들고 싶은 경우가 있을 것이다. 이때 사용하는 것이 Rewrite이다. 0. 사용 준비 npx를 통해 프로젝트 하나를 생성하자. $ npx create-next-app@latest 1. rewrite 설정하기 npx를 통해 프로젝트 하나를 생성하자. 위와 같이 프로젝트를 만들면, 기본 next.config.js는 아래와 같다. /** @type {import('next').NextConfig} */ const nextConfi..

도커란 개발 시 application을 쉽고 빠르게 구축, 공유 및 실행할 수 있는 소프트웨어이다. 만약 프로젝트 시작 시, 환경설정부터 기본 세팅을 해야 한다. 하지만 도커를 사용하면 프로젝트마다 반복되는 세팅을 할 필요가 없다. 이러한 도커에 대한 기초에 대한 총정리를 아래의 글을 통해 풀어볼까 한다. 가능한 전부를 담기위해 노력했고 계속 업데이트 중이다. 이 글을 통해 도커 초급을 졸업하자. 0. 도커의 탄생 도커란, 컨테이너 기반의 오픈소스 가상화 플랫폼이다. 실행환경을 컨테이너라는 것을 활용하여 추상화하여 동일한 인터페이스를 제공하기 때문에 프로그램의 배포 및 관리를 단순하게 해 준다. 사실 도커 이전의 개발자들은 개발 시 코드를 수정했을 때, 내 PC에서는 잘 돌아가지만 다른 PC에서는 에러가..