자본주의를 살아가는 코린이

chat GPT API는 python, node 등에서 사용할 수 있지만 저는 python 대신 node를 사용하였습니다. 그 이유는 node가 python 보다 웹에서 최적화 되어있기 때문입니다. 기본적으로 openai에서 제공하는 예시 코드를 약간 수정하는 방향으로 진행하였습니다. 제가 짠 코드의 문제는 api의 응답속도가 매우 느리다는 점, css, jsx가 안 맞다는 점입니다. 아래 github내용을 참조하세요. .env 파일도 생성해 주시고 아래 내용에 api key를 넣어주세요 OPENAI_API_KEY=[openai key] https://github.com/whiteout367/AIGuide GitHub - whiteout367/AIGuide Contribute to whiteout367/..

DALL.E로 사진을 만들고 있는 와중에 더 좋은 사진을 얻고 싶어 promp를 더 잘 사용하는 방법을 찾던 중 아래 사이트를 발견했습니다. https://pitch.com/v/DALL-E-prompt-book-v1-tmd33y/ac8c000d-7e6c-49a5-b6f6-51541b1013e1 The DALL·E 2 prompt book pitch.com 14페이지부터 예시 내용이 나옵니다. 저는 예시로 나와있는 내용은 아주 약간만 수정했습니다. a great photograph of subject, wide shot, outdoors, joyful, sunset photo at golden hour, Tilt shift photography, soft focus

react 공식홈페이지에도 나와있지만 더 좋은 예시와 함께 정리한 블로그가 있어 추천드립니다. https://dmitripavlutin.com/react-useref/ React useRef() Hook Explained in 3 Steps React.useRef() hook creates persisted mutable values (aka references or refs). refs are used to access DOM elements. dmitripavlutin.com 핵심 내용은 Calling const reference = useRef(initialValue) with the initial value returns a special object named reference. The refe..

chatGPT api를 활용한 간단한 next.js 앱을 만들려고 하는데 백엔드는 했지만 프론트 엔드의 디자인에서 문제를 만났습니다. 이를 해결하기 위해 bootstrap을 사용할 것입니다. 공식문서에 설치법이 나와있습니다. https://react-bootstrap.github.io/getting-started/introduction/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io npm install react-bootstrap bootstrap app.js에 import해줍니다.(저는 index.js 에 했습니다.) import 'bootstrap/dist/css/boo..

1. EPEL (Extra Packages for Enterprise Linux)을 설치합니다. mosquitto 서버를 설치하기 위해서는 EPEL(기업용 리눅스 패키지)을 설치하여야 합니다. sudo yum install epel-release 2. mosquitto broker 설치 sudo yum -y install mosquitto 3. broker systemctl에 등록 sudo systemctl enable mosquitto 4. broker 실행 sudo systemctl start mosquitto 상태 확인 sudo systemctl status mosquitto mosquitto port 변경 기본 port는 1883입니다. sudo vi /etc/mosquitto/mosquitto...

solidworks의 기본 파일 형식인 SLDPRT를 drw형식으로 바꾸어야 하는 일이 생겼습니다. 인터넷에서는 save as를 사용하라고 하지만 수치를 나타내는 부분이 안 나오는 상황이 나왔습니다. 이 글은 drw파일의 수치를 표시하는 부분에 관한 글입니다. 1. solidworks에서 만든 파트를 도면으로 저장합니다. 2. 표준시트 크기를 선택합니다.(저는 A3을 선택합니다.) 3. 오른쪽에 나오는 부분 중 사용할 부분을 끌어옵니다.(저는 정면을 선택했습니다.) 정면을 선택하시고, 마우스를 아래, 옆, 대각선으로 옮기면 다른 시점의 모형이 나옵니다. 4. 수치를 나타내는 도구를 선택합니다. 5. 파트를 만들때 처럼 적응형 치수를 사용하여 표기합니다. 6. 저장합니다. 여기까지 solidworks 파일..

이 내용은 아래 강의를 참조하여 만들었습니다. 이 강의에서 제공하는 github내용에 추가하여 만든 내용입니다. https://www.youtube.com/watch?v=KjY94sAKLlw import Head from 'next/head'; import Link from 'next/link'; import Image from 'next/image'; export default function TestList({posts}) { return ( {posts.map((ev) => ( {ev.title} {ev.url} ))} ); } export async function getServerSideProps() { const res = await fetch('https://jsonplaceholder.ty..

컴퓨터에 연결되어 있는 장치를 찾으려면 아래 명령어를 사용합니다. ffmpeg -list_devices true -f dshow -i dummy 녹화할 마이크에 관한 녹화 설정들을 볼 수 있는 명령어 입니다. ffmpeg -f dshow -list_options true -i audio="마이크(USB Condenser Microphone)" 녹화하는 명령어 입니다. -c : 코덱 (여기선 mp3) -ar: Hz 단위 -b:a 오디오 비트 레이트(최고가 320k) -ac : mono로만 저장 ffmpeg -f dshow -i audio="마이크(USB Condenser Microphone)" -c:a libmp3lame -ar 44100 -b:a 320k -ac 1 2022_10_14_1.mp3 *아래 ..

useEffect는 react의 hook함수 입니다. 이 함수는 컴포넌트가 마운트 완료한 후 항상 실행되는 함수입니다. useEffect를 사용하는 이유는 함수컴포넌트에서 side effect를 사용하기 위해서라고 합니다. 데이터 가져오기, 구독(subscription) 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 것까지 이 모든 것이 side effects입니다. 이런 기능들(operations)을 side effect(혹은 effect)라 부르는 것이 익숙하지 않을 수도 있지만, 아마도 이전에 만들었던 컴포넌트에서 위의 기능들을 구현해보았을 것입니다. 한마디로 정리하자면 '컴포넌트 업데이트 전/후 실행해야 되는 동작들을 정의해놓는 곳'이라고 생각할 수 있습니다. useEffect 함수를..

next.js 는 react.js의 프레임워크 입니다. 따라서 react.js를 아셔야 합니다. 2023.04.18 - [FRONT END/react] - 1. react.js 란 무엇인가? 1. react.js 란 무엇인가? react가 무엇인가를 알아 보기위한 가장 좋은 방법은 공식홈페이지 입니다. https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces jacorinne.tistory.com react의 CSR 보완점을 SSR로 보완하여 더 좋은 사용자 경험을 선사합니다.(검색엔진 최적화, 초기 로딩속도 단축 등) https://nextjs.org/..