말랑말랑제리스타일

웹의 경우 워낙에 npm으로 만들어진 모듈이 많다 보니 어떤 기능을 사용할 때 어떤 npm 모듈을 설치해야 될지 고민될 때가 많죠. 저 역시 gif encoding을 하려고 찾아보니 npm 모듈만 서너 개가 넘더라고요. 그래서 고민하던 중 찾은 사이트를 하나 소개합니다. npm trends 사이트 소개 바로 npm trends라는 사이트를 소개하겠습니다. 여러 가지 npm의 사용량을 분석할 수 있는 사이트로 당연히 같은 기능이라면 최근 많이 사용되는 npm 모듈이 편하거나 기능이 좋은 경우가 많겠죠. 이렇게 gif encoding 관련 npm 모듈을 찾아보니 ffmpeg를 제외하고 4가지 정도가 있더라고요. https://npmtrends.com/gif.js-vs-gifencoder-vs-gifshot-..

리액트 5.0 이상 버전 사용 시 특정 npm 모듈에서 "BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default " 에러가 발생했습니다. 제 경우는 GIFEncoder 모듈에서 webpack 에러가 발생했는데요. 가장 간단한 조치 방법을 알려드리겠습니다. 모듈의 버전을 바꿔서 webpack 에러 조치하는 방법 리액트 버전이 올라감에 따라 해당 노드 모듈도 신버전이 나왔을 수 있습니다. 이런 경우 해당 노드 모듈의 버전을 webpack 5 이상이 적용된 새로운 버전으로 업그레이드해주면 에러가 발생하지 않겠죠. 하지만 GIFEncoder.js를 포함해 대부분의 노드 모듈이 webpack 5 이상에 대한..

일반적으로 html, css, 자바스크립트를 이용해서 코딩하는 경우 html 파일은 나누기가 힘든 경우가 많습니다. 그러나 공통된 헤더를 사용하거나 부트스트랩 내비게이션 바를 유지한 채 페이지 내부의 일부 영역만 바꾸는 경우 html 파일을 나누는 것이 코드 관리에 훨씬 유리한 경우가 많습니다. 이런 경우 사용 가능한 두 가지 방법을 정리해 봅시다. 부트스트랩 내비게이션 바로 body의 변경 영역만 이동하는 방법 일반적으로 블로그 같은 내용만 바꾸는 사이트의 경우 사용해 볼 수 있는 방법입니다. 사이트를 이동하는 것처럼 body 영역의 html만 바꾸는 방식으로 부트스트랩 내비게이션 바 영역을 그대로 두고 내부 페이지의 html 요소만 바꾸는 방법이죠. 먼저 부트스트랩의 내비게이션 바만 만들어 둔 ind..

깃허브 코파일럿이라는 AI 코딩 기능을 사용해 봤습니다. 첫 한 달은 무료로 사용 가능하고 한 달이 지나면 한 달에 10달러의 비용이 자동으로 발생하는데요. 일단 자바스크립트 프로젝트에서 무료로 한 달 사용을 해보고 Chat GPT와 어떤 차이가 있는지 확인해 봤습니다. 깃허브 코파일럿의 용도와 Chat GPT와 차이 우선 Chat GPT와는 기본적으로 AI라는 점과 AI를 이용해 코딩이 가능하다는 공통점이 있지만 깃허브 코파일럿은 AI를 이용한 코딩에 그 기능이 치중되어 있다는 차이가 있죠. Chat GPT를 이용해 코드를 만들 때는 어떤 프롬포트를 전달하면 하나의 코드를 만들어주는 반면 깃허브 코파일럿은 다음에 어떤 코드를 쓸지 AI가 예측해서 제안해 준다는 차이가 있습니다. 우선 html 파일에 d..

웹사이트 만들기 뭐부터 해야 될지 모르겠고 배포는 어떻게 할 지도 잘 모르겠고 설치를 하자니 번거롭죠. 아무것도 설치하지 않고 배포까지 30분 내외로 한번 끝내볼 수 있도록 해드리겠습니다. 이 프로젝트에서는 설치 없이 프로젝트를 생성하는 구름 IDE와 웹사이트 꾸미기를 위한 부트스트랩, 소스 코드 배포를 위한 깃허브와 무료로 호스팅 배포 서비스를 위한 Netlify를 이용할 겁니다. 뭐가 많아 보이지만 코딩을 잘 몰라도 웹 코딩을 안 해봤더라도 크게 어려울 건 없습니다. 구름 IDE에서 웹사이트 프로젝트 생성하기 구름 IDE 홈페이지로 들어가 줍시다. 구름 IDE를 쓰는 이유는 별도 설치가 전혀 필요 없고 Github 배포까지 상당히 간단하게 되기 때문이죠. https://ide.goorm.io/ goo..

구름 IDE에서 리액트 프로젝트를 생성하고 실행해 보는 과정을 최대한 간단하게 다루어보겠습니다. 물론 blank나 Html/css/js 프로젝트를 생성해서 직접 npm으로 설지 하고 진행해도 되지만 경험적 요소가 필요한 게 아니라면 최대한 간단한 게 좋겠죠. 구름 IDE에서 React 프로젝트 컨테이너 생성 구름 IDE에서 새 컨테이너를 클릭해서 새로운 React 프로젝트를 진행하기 위한 컨테이너를 생성해줍니다. 이름과 설명을 입력하고 나머지는 그대로 두겠습니다. 이후에 Netlify 배포를 위해서 GitHub 연동을 해줘도 되겠지만 우선은 그냥 두고 진행합니다. 이 많고 많은 구름 IDE의 소프트웨어 스택 중 React를 선택해 주면 하단에 React 프로젝트라는 템플릿이 지정되고 OS가 선택되면서 N..

BootStrap의 Navbar 기능을 이용하면 페이지의 디자인을 상당히 편리하게 꾸밀 수 있더라구요 BootStrap의 소스를 이용해 html과 javascript로 메뉴바를 간단히 구축하는 예제 보여드립니다 먼저 BootStrap Start 페이지로 들어가줍시다 https://getbootstrap.com/docs/5.1/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. getbootstrap.com 링크는 ..