AI Platform / Web

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에서는 에러가..

0. 들어가면서 react는 많은 jsx파일이나 js 파일로 컴포넌트가 만들어진다. 그렇다면, 각각의 컴포넌트에 데이터를 전달할 수 있어야한다. 쉽고 간단하게 설명해 보겠다. 1. 부모 컴포넌트 데이터를 보낼 컴포넌트다. 이 컴포넌트 안에는 3개의 다른 컴포넌트( DownTest1, DownTest2, DownTest3 )를 만들었다. // src/component/UpTest.jsx import React from 'react'; import DownTest1 from './DownTest1'; import DownTest2 from './DownTest2'; import DownTest3 from './DownTest3'; const UpTest = () => { return ( Parent Comp..

파이썬 버전 변경을 하는 방법에 대해 알아보자. 기본적으로 파이썬을 지우고 다시 설치를 하면 된다. 그러나 그 방법이 싫기 때문에 구글링 중일 것이라 생각을 한다. 바로 시작해 보자. 아나콘다 파이썬을 하는데, 아나콘다를 설치 하지 않은 사람은 없다고 생각한다. 아나콘다에서 가상 환경을 만들면서 파이썬 버전을 변경시키는 법을 알아보겠다. 프로젝트에서 가상 환경은 필수기 때문에 꼭 알아두자. 버전리스트 확인 우선은 Anaconda prompt를 열어보자. 그리고 아래의 명령어를 처보자. 현재 존재하는 환경이 보인다. 아래의 결과 값은 현재 기본으로 설정되어 있는 것을 확인할 수 있다. $ conda env list # conda environments: # base * C:\Users\anaconda3 아..

Topology is closed mongoDB를 사용 중에 위와 같은 에러를 발견했다. 관련된 해결 종류를 알아보도록 하자. Case 1. async - await를 확인하기 연결된 mongoDB의 데이터 처리를 기다리지 않고 로직이 끝나는 경우에 이러한 현상이 발생한다. 쉽게 말해서 request 요청이 와서, mongoDB로직이 처리가 끝나기 전에 응답을 주는 경우 ERROR가 발생한다. 즉, async 나 await를 적었는지 확인을 해보자. Case 2. client.close()를 확인하기 db_client = new MongoClient(url); db_client.connect() -로직- db_clinet.close() 위의 코드는 mongoDB를 connect()로 연결하고, 연결된 d..

annot update a component (`MyApp`) while rendering a different component (`AuthticatedComponent`). 에러(경고) 발생 문제 원인 위와 같은 에러(경고)가 발생했다. 이는 useState를 변경하는 부분이 useEffect나 이벤트리스터에 의한 변화가 아닌 로직내부에 들어있어서 나는 에러이다. 즉, react는 props나 상태 변화에 따라 여러번 re-render를 한다. 그리고 개발단계에서는 re-render를 통해서 변화를 확인하기도 한다. 해결책 간단히 useEffect 내부에 넣어주면된다. 직관적으로 쉽게 예를 들겠다. const Test = (prop) => { const [data, setData] = useState..