git: https://github.com/kingkiboots/electron-pg-example electron은 대게 node 환경에서 돌아간다. 그러므로 어떤 라이브러리를 사용한다면 npm install 혹은 yarn add 등을 사용하면 된다. 자, 그러면 postgresql에 연결하기 위해서는 pg라는 라이브러리를 설치해야 한다. 해당 라이브러리의 공식문서는 여기이니 참고해 주시라 => Welcome – node-postgres yarn add pg 그리고 DB에 연결하는 하나의 인스턴스를 생성하자. 아 참, 필자는 cra가 아닌, vite로 프로젝트를 생성했으므로, 모듈을 export 및 import 하고 require 하는 부분과 환경변수를 가져오는 부분에서 차이가 있을 수 있으니 참고 바..

리액트는 client side rendering, SPA 라이브러리이다. 그렇기 때문에 처음에 화면을 그릴 때에 public/index.html에 있는 자원들을 모두 읽어온다. javascript 파일들 역시 읽어오고 실행한다. 특히 애니메이션 효과를 담당하는 javascript 파일 내부에는 이미 렌더링 된 DOM 중 클래스명 등으로 지정된 특정한 DOM에 애니메이션 이벤트를 추가하거나(addEventListener(...)) 하는 코드가 포함되어 있다.  첫 화면 진입 이후 화면전환 시, 위에 적힌 종류의 자바스크립트 파일을 불러오는 방식에서 일반 html 파일과 리액트 app 차이가 발생한다. (mpa, spa, client side rendering, server side rendering ..

살다보면 react 를 spa가 아닌 mpa로, 또 배포를 cra가 아닌 webpack으로 할 때가 있다. 더 나아가 html을 여러개로 쪼개는데 cra에서는 html에서 환경변수가 잘 먹혔는데 webpack에서는 안 먹히는 경우도 있다. ​ 보통 CRA로 build할 시 public/index.html에는 환경변수를 이렇게 사용한다. cra로 즉, react-scripts로 build할 시 잘 적용이 되지만 ​ webpack으로 build를 할 시 빌드 파일을 열어보면 그대로 나온다. 이미 new webpack.DefinePlugin()을 이용하여 html이 아닌 react 컴포넌트내에서는 환경변수가 잘 작동되는 것을 확인했었지만 html은 왜 안되는 것일까? 이럴 때 npm install interp..

이렇게 잘 돌아가는 리액트 프로젝트가 있다. 그리고 프로젝트가 스프링 부트 + 리액트 이 구조로 가다 보면 스프링 부트 안에 리액트를 결합시킬 때가 있다. 물론, 리액트 프로젝트의 변경사항이 반영되는 즉 hot loader가 스프링부트 애플리케이션에서 보이는 화면에 바로 적용되지 않는다는 단점이 있지만(이 부분에 대해서는 밑에서 더 설명하겠다.) 스프링 부트와 리액트를 함께 연동한다는 것에는 분명 장점 또한 있다. 1. 프로젝트를 하나만 들고 다니면 되니깐 관리하기가 용이하다. 2. 스프링 부트 서버만 키면 리액트 프로젝트도 함께 켜지니 배포 시에도 용이하다 그렇다면 이제 Spring Boot 내에서 React 어플리케이션 구동시키는 방법을 한 스텝씩 밟아보도록 하자. 1. 스프링 부트 프로젝트 안에 리..

https://www.easy-me.com/d EASYME.md | 리드미, 마크다운 작성 사이트 EASYME.md(이지미)는 README(리드미) 작성, Markdown 문법이 익숙하지 않은 사람들을 위해 만든 사이트입니다. www.easy-me.com 마크다운 문법을 잘 몰라도 에디터처럼 간편하게 마크다운 문서를 작성할 수 있는 사이트이다. 다만 현재 ctrl+s버튼을 누르면 오류가 발생하는데... f12를 눌러 콘솔에 밑의 스크립트를 복붙하여 ctrl+s를 클릭했을 때 작성 중인 마크다운 문서를 클립보드에 복사하도록 하자 const preventCtrlS = async (e) => { if((e.ctrlKey || e.metaKey) && (e.keyCode === 83 || e.key === 's..

useEffect(() => { $(`#${id}`).hide(); }, []); const fadeIn = () => { $(`#${id}`).show(() => { $(`#${id}`).fadeIn(); }); }; const fadeOut = () => { $(`#${id}`).fadeOut(() => { setMessages?.(defaultList); }); }; 이렇게 되어있는 컴포넌트가 있다. 아주 잘 동작하는 구문이지만 한가지 걸리는게 있었다. 현재 npm에서 jquery 라이브러리를 설치해서 사용하고 있는데 이 프로젝트 내에서 jquery라이브러리를 이 컴포넌트, 즉 한 군데에서만 사용하고 있다. 구글 크롬이 제공하는 기능이 lighthouse를 이용하여 treemap을 보니 한 군데에서..