천천히 알아가는 세상

안녕하세요. 저번에 이어서 React에 대하여 알아보겠습니다. 저번 글에서는 CDN으로 사용하는 방식에 대하여 진행하였지만, 이번에는 Create-react-app을 이용해서 하는 방법으로 진행하겠습니다. 1. 기본 세팅 설정 방법 최소 사양 Node 14.0.0 이상 npm 5.6 이상 기본 포트 3000번을 사용한다. 생성 명령어 my-app 대신에 사용하실 폴더 이름으로 변경해도 됩니다. VS Code 명령창에 입력하면 됩니다. npx create-react-app my-app cd my-app npm start 처음 실행 시 나오는 창 2. NPX Node Package eXute Node 실행을 위한 명령어이며, npm과는 달리 최신 버전의 패키지를 임시로 설치해서 실행하는 용도로 사용된다. N..

안녕하세요. 이번에는 React에 대하여 알아보겠습니다. 1. React JS 반응형 자바스크립트 SPA을 전제로 하고 있으며, Dirty checking과 Virtual DOM을 활용하여 업데이트해야 하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는 게 가능하다. 기본적으로 모듈형 개발이기 때문에 생산성 또한 상당히 높은 라이브러리인지라 순식간에 대세로 떠올랐다. 거기에 기본적으로 프레임워크가 아니라 라이브러리인지라 다른 프레임워크에 간편하게 붙여서 사용하는 것도 가능하며, React Hooks라는 강력한 메서드들을 지원하면서 사실상 웹 프런트엔드 개발의 표준으로 자리 잡았다. 2. Virtual DOM 서버와의 데이터 통신과..

안녕하세요. JavaScript 라이브러리 중에서 Chart.js 사용해본 코드 입니다. 1차 팀 프로젝트하다가 한 번 사용해보고 싶어서 사용해본거라 자세한 설명은 없습니다. 공식사이트 Chart.js Simple yet flexible JavaScript charting library for the modern web www.chartjs.org CDN HTML CSS #allChart_Graph { background-color: black !important; } Script 부분 (EJS 파일) 결과 감사합니다.

안녕하세요. 이번에는 JavaScript의 DOMCountentLoaded 기능에 대하여 알아보겠습니다. 1. DOMCountentLoaded 이 코드를 사용하면 JQuery의 document.ready와 크게 다를 바 없는 성능을 구현할 수 있다. 하지만 ie8이하에서는 지원하지 않기 때문에 본인이 대처해야 하는 환경이 어디까지인지 체크를 해 볼 필요가 있지만, 요즘은 ie8이하의 점유율이 대폭 낮아진 상태라 문제없이 사용할 수 있지 않을까라고 생각한다. window.addEventListener('DOMContentLoaded', function() { }); 제이쿼리를 사용하시는 분이라면 굳이 안 써도 되지만, JavaScript로 구현이 필요한 경우에 사용하시면 됩니다. 감사합니다.

안녕하세요. 이번에는 Enter 값을 replace() 함수를 이용하여 변경하는 방법에 대해서 알아보겠습니다. 우선, 사용자가 글 입력 후 데이터를 MySQL에 저장할 때는 Enter 값이 이상 없이 들어가는 것처럼 보이지만, JavaScript로 다시 데이터를 불러올 때 값을 제대로 읽지 못하여 Error가 발생하는 현상이 있었습니다. 그래서 Enter 값을 변경해서 저장하는 방식을 구현해 봤습니다. MySQL에 데이터 저장 시 Enter 값을 으로 변경 후 저장하기 // content에서 엔터키 입력 저장 시 에러 발생 확인 // mysql 저장 할 때 엔터 키를 로 변경하여 저장 content: req.body.content.replace(/(?:\r\n|\r|\n)/g, ' ') MySQL에 저장..