괘종소리 세기

Next.js로 개발을 하던 중, 어느 날 코드를 수정한 후 저장해도 웹에 반영이 바로바로 되지 않는다는 것을 알게 됐습니다. 리액트나 Next.js는 Webpack에서 제공하는 기능인 HMR(Hot Module Replacement) 을 사용하는데요, 이 기능을 통해 개발자가 직접 새로고침을 하지 않아도 웹에 수정사항이 바로 반영됩니다. 어쨌든, 찾아보니 컴포넌트 파일 이름을 수정한 게 문제였습니다. menu.jsx 라는 파일을 Menu.jsx로 바꿨는데요, 이 때문에 HMR 기능이 파일 인식을 하지 못하게 된 것으로 보입니다. 적절한 이름을 가진 파일을 하나 새로 만들면 해결됩니다. Hot module reload is not working on my nextjs app I have a project..

객체 간 다른 요소 확인 npm i deep-object-diff 오류 발생시 --force(충돌 우회) 옵션이나 --legacy-peer-deps(충돌 무시) 옵션을 사용합니다. import { diff } from "deep-object-diff"; const object1 = {"a": 1, "b": 2, "c": 3}; const object2 = {"a": 1, "b": 2, "c": 4}; console.log(diff(object1, object2)); 두 가지 객체에서 다른 요소가 객체 형태로 반환됩니다. 두 객체가 같은지 확인 결국 diff(object1, object2) 의 결과가 {} (빈 객체) 로 나오면 두 객체가 서로 같다는 뜻이겠지요. 그런데 아시는 분은 아시겠지만 Javasc..

리액트의 Redux처럼 모든 모듈에서 접근할 수 있도록 하는 데이터가 필요하다면 Alpine.store 객체를 사용할 수 있습니다. store.js라는 파일을 하나 만들어서 거기에 Alpine.store를 정의하고, html에서 불러와서 사용할 수 있도록 합니다. // store.js Alpine.store("global", { open: false, toggleOpen() { this.open = !this.open; } }); store에는 변수와 메소드를 정의할 수 있습니다. global이라는 이름으로 store를 정의합니다. // index.js document.addEventListener("alpine:init", () => { Alpine.data("test", () => ({ store: ..

리액트나 앵귤러 같은 웹 프레임워크가 편하기는 하지만 비교적 소규모 프로젝트를 빠르게 개발하고자 할 때 Tailwind와 Alpine.js를 사용함으로써 얻는 장점을 무시할 수 없다고 합니다. 현재 회사에서 새 프로젝트 시작과 함께 도입되었습니다. Tailwind CSS Tailwind CSS는 기존 .css 파일에 스타일을 세팅하는 방식이 아닌, html 태그 안 클래스 이름에 스타일을 입력하는 웹 프레임워크입니다. 자주 쓰는 스타일에 대한 정형화된 클래스 키워드를 제공해주는 게 마치 매크로 느낌이랄까요... 장점은 1. 클래스 이름을 짓느라 시간을 쓸 필요가 없다. 2. 제공된 클래스를 이용하면 스타일을 빠르게 적용할 수 있다. 3. css 파일을 따로 만들지 않으니 코드 길이가 줄어든다. 단점은 1..

// Timer.tsx const [currentSeconds, setCurrentSeconds] = useState(0); const [isReverse, setIsReverse] = useState(false); useEffect(() => { setInterval(() => { if (!isReverse) { setCurrentSeconds(prevState => prevState + 1); } else { setCurrentSeconds(prevState => prevState - 1); } }, 1 * 1000); }); 위처럼 isReverse가 false일 때는 1초마다 currentSeconds가 1씩 증가하고, true일 때는 1씩 감소하는 코드가 있습니다. isReverse가 false..

※ 경험에 기반한 글입니다. 틀린 부분이 있을 수 있습니다. 생각보다 이미지 파일을 제외하면 로컬에 있는 static 파일을 불러올 상황이 없다 보니, 파일 종류에 따라 코드로 불러오는 방법이 상이하다는 걸 알지 못했었습니다. React는 Node.js를 통해 웹 서버를 돌리고 그걸 기반으로 브라우저를 실행합니다. 보통 웹 서버에서 public 폴더는 정적 자원을 호스팅하는 데 사용됩니다. 그래서 React 프로젝트에서 사용할 static 파일도 public 폴더에다 넣어야 사용자의 접근이 가능합니다. 이 경우 /asset/aa/aa.gltf 라는 경로를 통해 gltf 파일(3D model 파일)을 불러올 수 있습니다. React에서 로컬 파일 중 이미지 파일이 아닌 .txt나 .xlsx, .csv 같은..

날씨가 슬슬 추워지네요. 요새 회사에서는 keycloak이라는 SSO 솔루션을 배포서버에 적용중인데 화가 많이 나더군요. 기회가 되면 이것도 정리해서 올리도록 하겠습니다. 사실 DB 연동하는건 간단합니다. 저번에 jsp에서 DB 연결하는 포스트를 올렸었는데 그거랑 비슷하고 사실 그것보다 더 쉽습니다. 어쨌든 mariadb를 연결하려면 패키지가 필요하므로 터미널에 npm install mariadb를 입력합니다. npm 사이트의 mariadb에 들어가보면 아주 친절하게 연동 예시코드까지 제공하고 있습니다. mariadb fast mariadb or mysql connector.. Latest version: 3.2.1, last published: 7 days ago. Start using mariadb ..

백엔드는 jsp랑 스프링부트밖에 써본적이 없다보니 Node.js로 백엔드를 만들어보았습니다. 조코딩님의 해당 강의를 보면서 정리합니다. https://youtu.be/Tt_tKhhhJqY?si=DY0F-5FdaPbr8S8- 이때까지 Node.js가 백엔드 프레임워크 이름인줄 알았는데 Node.js는 브라우저 없이도 자바스크립트가 돌아가도록 하는 환경을 만들어 주는 거고(=자바스크립트를 해석하는 엔진) 백엔드는 express라는 패키지로 개발되는 거였음... 자바스크립트는 HTML에 종속적인 스크립트 언어지만, Node.js는 자바스크립트를 프로그래밍 언어처럼 사용할 수 있게 함. 그래서 자바스크립트로 서버도 만들 수 있는 것. 제대로 몰랐던 부분 Node.js를 설치하면 브라우저가 없이도 자바스크립트를 ..

Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:69:19) at Object.createHash (node:crypto:133:10) at module.exports (E:\vscode_project\boilerplate-mern-stack\client\node_modules\webpack\lib\util\createHash.js:135:53) at NormalModule._initBuildHash (E:\vscode_project\boilerplate-mern-stack\client\node_modules\webpack\lib\NormalModule.js:417:16) a..

npm install로 dependency들을 설치하려고 할 때 다음과 같은 에러가 일어날 때가 있습니다. Node.js의 버전을 다운그레이드해 주면 해결되는 문제입니다. 터미널에서 node -v로 확인해 봅니다. (현재 저는 v18.17.1) Node.js의 버전을 바꿀 때는 nvm을 설치하면 쉽게 바꿀 수 있습니다. GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go. A node.js version management utility for Windows. Ironically written in Go. - GitHub - coreybutler/nvm-windo..