하고 싶은 게 너무나 많아

9:19학원 도착  어제 했던거 contextref 지우고 useeffect도 지우고 그냥 해도 될거라고 하심  어제 보내주신 코드에 대한 복습 하고 이제 앱 창을 투명하게 만들어서 원하는 화면의 영역만 스크린캡처할 좌표를 main process에 보내는 것을 해볼 거임. 스크롤바가 사라짐  이렇게 해놓으면 상사를 괴롭힐 수 있닼ㅋㅋㅋㅋㅋㅋ 개웃기네 ㅋㅋㅋㅋㅋ 브라우저 윈도우를 2개 써서 토글로2개의 브라우저가 똑같은 App.tsx를 로딩하게.즉, 하나는 캡처를 하는 용도, 하나는 캡처를 저장하는 용도로 내 코드import { app, BrowserWindow, dialog, globalShortcut } from 'electron'import { createRequire } from 'node:modu..

9:22 학원 도착  어제 내용 복습 하는거 열심히 따라가봄. main.ts는 마치 java에서의 main 패키지에 있는 메인 메소드와 같아서 실행 시작했을 때 모든게 로딩 되어 있어야 한다.  단축키 설정 방법 title은 showSaveDialog의 제목을 의미하고, defaultPath는 디폴트 제목, 필터로는 png 파일의 이미지. 사진의 데이터를 읽어오기 기능을 추가하려고 한다. 나는 샘께 죄송하다고 하며 헬프쳤다... 어제 못따라간 내용 따라갔다. 스크린캡쳐 이제 된다 ㅎ  이제 사진 이미지 데이터 읽어오면 된다. 아무래도 App.tsx에서 imageData를 전달하면 될 것 같다. 그래서 한 결과.    내일 수업을 위한 세팅만 하고 이제 프로젝트 진행하기  프로젝트 회의 및 준비5교시 시간..

9:20 경 학원 도착  어제 수업 내용 복습  axios.으로 작성하지 않고 api.으로 작성해서 경로를 더 단순하게 만들어주기.  친구랑 같이하기로 한 창업 프로젝트 작성하느라 정신없었다.그리고 오후에 프로젝트 하기 전에 커밋 정리해둠.스태쉬한 것 조차 브랜치에 반영되는구나... 싶었다. 다하고 나선 수업 내용 따라가는 중. 대충 정리해보자니, 오늘 한 것1. 수정기능 추가한것2. 토스트 알림 띄우기따로 복습 해야겠다 ㅎ ㅠㅠ    에러가 발생할 때는 api에서 reject가 일어나고, ipchandler에서 response가 얻어와지지 않는다.    일렉트론에서는 Toast나 Modal을 사용해서 알림창을 띄워야지 window.alert()를 사용하면 애가 자꾸 이상하게 띄운다고 한다.(정말인지 나..

9:25 학원 도착  window.api 는 'api'에 해당하는 오브젝트를 가리킨다.(아래 스샷에서 빨간테두리 친 부분에 해당)   어제 했던거 복습 중. invoke-handle 짝꿍 : 작업을 하고 바로 결과 데이터를 받아올 수 있다.send-on 짝꿍: 작업을 보내면 귀를 기울여 작업을 받는다.(작업을 하고 바로 결과 데이터를 받는 형태는 아닌듯)   2교시부턴 스프링부트를 사용하면서 Electron에서 mainprocess에서 서버에서 받아오는 내용을 연습해볼 것이다.    우리가 하려는 요청의 개요. 메인 프로세스가 프록시의 대신 역할을 한다.invoke와 handle 구조를 사용해서 서버에서 받아온 정보를 UI로 띄울 것이다.        삭제 기능 만들려는 나의 시도 선생님이랑 한 것  오..

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을 화면 전환할 때 ..