AI Platform / Web

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

Redis에 대한 기초 개념부터 심화 내용(여러 서버 클러스터링)까지 정리해보려 한다. 아래의 내용을 참고하면, 원하는 구현까지는 어렵지 않게 가능하다고 본다. 추가로 spring에서의 연결도 진행해 보자. 노파심에 서두에 적는다. 타 블로그를 보면 레디스 버전 3에 대한 이야기가 많다. 그러나 3 설치하지말고 최신 버전을 설치하자. 관련 내용은 아래에 설치 부분을 참고하자. Redis ( Remote Dictionary Server ) 오픈소스로 key-value 기반의 인-메모리 데이터 저장소이다. 따라서 key-value 기반이라 쿼리를 날릴 필요 없이 결과를 바로 가져올 수 있고 디스크에 데이터를 쓰는 구조가 아니라 메모리에서 데이터를 처리하기 때문에 속도가 매우 빠르다. (DB를 조회하는 것보다..

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

autofocus nextjs/react 사용시 component 내부를 들어가면, 자동으로 input 창에 커서가 들어가게 하는 방법을 알아보자. 그리고 antd, material UI 등등의 툴에서도 input 태그에 autoFocus/autofocus를 넣어도 작동을 안하는 경우가 있다. 이러한 해결책을 코드를 통해 적어보도록 하겠다. 디테일한 설명은 빼고 바로 코드로 적어보겠다.(react/nextjs 관련 설명은 제외한다.) 만약 vanilla js에서 사용하는 관련 설명은 아래의 링크를 보고오자. [form] input 태그을 focus 하기 1. useRef 설정 input과 같은 DOM 요소(element)를 수정해야한다면, 가장 먼저해야할 것은 어떤 요소를 변경/수정 할 것인지에 대한 선..

mongodb를 nextjs에 연결을 해보자. 연결하는 방법은 여러가지가 있다. 오늘은 mongoose를 활용하여 필요한 위치에서 SSR을 활용하여 바로 사용하는 방법에 대해 알아보자. nextjs는 아래와 같은 명령어를 통해서 만들었다. $ npx create-next-app@latest 기본적으로 mongoDB 설치는 되어 있다 가정하고 nextjs 로직위주로 설명하겠다. 개인적으로 docker로 실행하면 편하다. 도커(Docker) 기초 정리 1. mongoose 설치하기 아래의 명령어를 통해서 mongoose를 설치한다. mongoose를 사용하는 이유는 schema를 지정할 수 있기 때문이다. 사실 mongodb는 관계형 db가 아니기 때문에 아무꺼나 넣으면 막들어간다. 이러한 문제를 schem..

넥스트(nextjs)로 개발 시 기본적으로 개발 환경과 배포 환경, QA 환경에 대한 설정(next.config.js)을 다르게 해야한다. 특히나 process.env에 포함되는 변수에 대한 설정도 분리해서 저장을 해야한다. 그리고 보통은 개발/배포로 나누지만, 실무에서는 개발, QA, 실서비스에 따른 환경도 각각 다르게 설정을 해야한다. 이러한 환경 변수(environmental variables) 설정하는 방식에 대해 알아보자. 우선은 아래의 글을 참고하여 PHASE_DEVELOPMENT_SERVER에 대한 이해를 하자. 그리고 react 배포 환경에 대한 .env에 대한 지식을 보고 오자. [react] 실무 개발 환경/배포 환경 설정(.env) [nextjs] next.config.js 기초 정리..