하고 싶은 게 너무나 많아

9:22 학원 도착.  지난 시간 복습 새로운 폴더에 새롭게 연습 중(index.css는 다 지웠고, package.json에는 bootstrap 설치함)   내가 오해했던게 ipc(preload.ts)는 main프로세스 쪽인줄 알았는데, preload.ts도 renderer 프로세스에 해당하고, 여기서 renderer에서 동작을 받거나 동작을 준다.    최종 정리  비동기 동작 : promise, async, await 가 떠올라야 한다.그래서 이번에 해볼 불러오기 2 버튼은 이걸 활용한 것.promise 객체는  아래처럼 await를 써도 되고 window.api.load2().then()이 방식으로 쓰는 것도 된다. 우리는 전자로 해볼거임.   비동기함수를 사용하는데 아까 전에 한거는 동기로 읽어..

9:18 학원 도착  일렉트론 복습 : 데스크탑 애플리케이션을 얼마든지 만들 수 있음타입스크립트로 앱을 만들 수 있다는게 최고 장점이다.node.js는 c언어로 만들어진 모듈들을 call 해서 실행하는것이다.자바스크립트는 C언어를 call해와서 사용하는것뿐이다.C언어로 다 구성된 기능들을 call 해 오는 것.또 하나의 장점은 one source code로 2개의 앱을 만들 수 있음(윈도우 환경&맥 환경)Windows PowerShellCopyright (C) Microsoft Corporation. All rights reserved.새로운 기능 및 개선 사항에 대 한 최신 PowerShell을 설치 하세요! https://aka.ms/PSWindowsPS C:\playground\react_work\..

9:25 학원 도착  어제 공부했던거 복습 중. 열거형은 컴마로 나열해주기 이벤트가 발생했을 때는 event 객체가 전달되는데 event 객체의 타입은 any로 해도 되지만 e:ChangeEvent 처럼 정확한 타입을 작성해주면 된다.이벤트 객체를 사용하지 않을땐 굳이 선언하지 않아도 되기도 함. useRef를 사용할 때 어떤 값인지 generic을 선언해주면 편하게 사용할 수 있다는 것. ?나 ! 같은 연산자는 코틀린에서도 사용하는데, ?는 null이 아니면 참조(null safe)해라, !는 null일리가 없으니 참조해라    FC 는 (a:FortuneProps)=>JSX.Element 타입의 함수이다.       자료 구조 노트 정리 중.  오늘은 진도 조금만 더 나가고 오늘 더 늦은 오후부터 프..

9:21 학원 도착  타입 스크립트는 개발 환경에서 편리하게 사용할 수 있다는 장점이 있다. 데이터의 타입을 정해주는 언어(자바)에서 담아온 타입을 자바스크립트에서도 명시되어 작성할 수 있다는 점에서 개발 시 장점이지만 타입을 명시하는 코드가 증가한다는 점에서 코딩량이 소폭 증가하는 단점은 있다. 어제한것 복습 중 typescript-basic이라는 명으로 새로운 프로젝트를 만들어보고 있음.어제 내용 복습 중+eslint.config를, 타입스크립트 연습하는 동안 타입스크립트의 오류인지 eslint가 말하는 오류인지 확인하기 어려우니까 아예 지워버리자고 하심이어서 타입스크립트 연습 계속   타입 스크립트는 오브젝트의 모양이 맞지 않으면 에러가 난다. 즉, 오브젝트도 타입이 존재한다는 의미이다.let m1..

9:21 학원 도착  어제 수업 내용 복습 : vite 환경 구축하는 거부터 복습 중 프로젝트만 만들어졌지 package는 설치되지 않은 상태로 개발 환경이 구축되기 때문에 npm install 단계가 필요하다. 현재 디렉토리의 내용을 알고 싶을 때 윈도우는 dir, 리눅스는 ls package.json의 scripts 부분에 있는 애들을 npm run 어쩌구(npm run dev, npm run build, npm run lint, npm run preview)하면 그 어쩌구가 실행이된다. dependencies에 build에 필요한 dependency들을 추가해줘야지, devDependencies에 추가해버리면 개발 환경에서 필요한 dependency를 추가하는 것이기 때문에 소용이 없음. eslin..

9:28 학원 도착   지난 시간 복습 + 추가로 할 수 있는 부분들 설명 CodeMirror에 readonly를 부여하면 출력용도로 사용할 수 있다. CodeMirror 를 사용하기 위해선 3개의 패키지가 설치되어 있어야 한다.npm install @uiw/react-codemirror @codemirror/lang-javascript @uiw/codemirror-tehme-dracula MarkDown 을 사용하기 위해서는 1개의 패키지가 설치되어 있어야 한다npm install react-markdown MarkDown을 출력할 때 Code를 이쁘게 출력하기 위해선 1개의 패키지가 필요하다npm install rehype-highlight transition이나 animation을 화면 전환할 때 ..

9:28경 학원 도착     어제 엊그제 수업 내용 일단 간신히 따라갔고,  npm 패키지에 코드 작성 예제에서 text area에서 코드 작성하기에 편리한 라이브러리 3가지 설치   // src/pages/Home.jsximport axios from 'axios';import React, { useRef, useState } from 'react';import { Alert, Button, Form } from 'react-bootstrap';import MarkDown from 'react-markdown';function Home(props) { return ( 인덱스 페이지 입니다. { axios.get..

9:25 학원 도착    어제 하던거. 포스트맨으로 내 API 키에 요청하기.근데 난 API 발급을 안받기로 했으니까 그냥 하는거 봐야징. 벡터 데이터베이스가 요즘 트렌드라고 한다. RDBMS 는 격자형 데이터베이스.이미지의 경우 이미지의 각 요소를 벡터 요소로 저장해서, 이미지 검색할 때 예를 들어 꽃이 포함된 이미지들을 셀렉트해줘라고 하면 셀렉트 할 수 있는 형태라고 한다.챗 지피티에게도 물어보자(그리고 주식 시장에서 알아보기 차원에서 회사도 ㅋ)더보기벡터 데이터베이스(Vector Database)는 고차원 벡터 데이터를 효율적으로 저장하고 검색하는 데 특화된 데이터베이스입니다. 이러한 벡터는 보통 머신러닝 모델이나 자연어 처리(NLP)에서 생성되는 임베딩(embedding) 형태의 데이터로, 텍스트..

HTML의 textarea 요소에서는 기본적으로 Tab 키를 누르면 포커스가 다른 요소로 이동하는데, 이를 들여쓰기를 위해 사용하려면 자바스크립트를 이용해 Tab 키의 동작을 수정할 수 있습니다.다음은 Tab 키를 눌렀을 때 textarea 내에서 들여쓰기 기능을 구현하는 예제입니다: 설명:textarea.addEventListener('keydown', function(event) {...});: textarea에서 키를 눌렀을 때 이벤트를 처리합니다.if (event.key === 'Tab') {...}: Tab 키가 눌렸을 때만 동작하도록 합니다.event.preventDefault(): 기본 동작인 포커스를 다른 요소로 이동하는 것을 막습니다.커서 위치(selectionStart와 s..

9:21 학원 도착 오늘은 댓글 기능 추가하기로 함.Spring10 예제에서 했던 post>view의 댓글 부분을 리액트로 구현하기로 함. 컴포넌트 안에다가 하위 컴포넌트처럼 함수를 만들고 사용할 수 있다. 여전히 복사 붙여넣기+리액트 환경에 맞게 변형시켜주기 Object로 잘 작성된 내용이 전달되기 위해선 name 속성의 밸류를 확실하게 작성해줘야 한다. Ctrl+CV와 리액트 환경으로 바꿔주기의 향연.... 현타와 경로 변수 @PathVariable이 필요하고, json은 @RequestBody이 필요하다. 파라미터로 전달된 pageNum은 알아서 추출된다. 자꾸 프록시 서버 꺼지는 에러가 나는거 관련해서 링크가 있어서 일단 백업https://nodejs.org/api/errors..