AI Platform / Web

도커란 개발 시 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 아..

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