코드의 오아시스

개발환경 OS : MacOSNode : v20.15.0 (LTS)npm : v10.7.0npx : v10.7.0nuxt : 3.12.3Spring Boot : 3.1.8JAVA17      1. 사전 작업 (Node설치하기)  Node 버전이 18.0.0 이상이면 2번으로 바로 넘어가 주시면 됩니다. NodeJs 설치하기아래 홈페이지에 접속해 node 18.0.0 버전 이상으로 설치해주시면 됩니다.https://nodejs.org/en/ : NodeJs 설치 홈페이지 Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org    설치 완료 확인하기설치가..

작성하게 된 계기 나는 서버 백엔드 개발자이다.이번에 실무 개발을 하면서 유튜브의 쇼츠, 유튜브의 릴스처럼 짧은 영상을 넘기기(Swipe)를 하는 프론트단 기능구현을 하게 되었다. 웹 앱으로 만들게 되었고 웹, 갤럭시에서 봤을 때는 문제가 없었지만 특이하게 아이폰에서 기능 동작을 테스트하는데몇 번 넘기기(Swipe)를 하고 나서 기능 작동 멈춤과 동시에 새로 고침도 안되는 먹통 현상이 일어 났다. 웹(Chrome) 에 와서 개발자 도구에 성능을 테스트 하게 되었는데 JS Heap, Node, Listener들이 떨이지지 않고 꾸준하게 올라가는 것을 볼 수 있었다.아무리 무지한 사람이라도 "어?!, 이거 계속 올라가서 문제 있는 것 같은데?" 라고 생각한 그래프 였다. 그래서 어떤 형식으로 해결하게 되었는..

들어가기 전에 SPA (Single Page Application)싱글 어플리케이션으로 페이지 이동을 하지 않고 하나의 페이지로 내용만 계속 변경하는 것으로 구성된 웹 어플리케이션 입니다.예를 들어, Google 지도, Gmail, 구글 캘린더, 네이버 지도 등이 있습니다.  MPA (Multi Page Application)페이지 이동할 때마다 매번 서버에 HTML을 받아와 페이지 전체를 렌더링하는 전통적인 웹 어플리케이션 입니다.예를 들어, 네이버, Amazon 등이 있습니다.  이게 뭣이야!? 라고 생각하시는 분들은 가볍게 무엇인지 알고오시는 것이 좋습니다.      CSR (Client Side Rendering) 클라이언트 사이드 렌더링이라고 합니다. Client-Side Rendering (C..

이 글을 작성하는 이유 지금까지 DB에서 데이터를 가져와서 어떻게든 어딘가에 데이터를 담아 둘라고 하였다 안좋은 예시 HTML input에 ( ) 넣어 두었거나 어떠한 DOM 속성 id에 ( id="dataId" ) 이런식으로 넣어 두었다. 이렇게 담아 두어서 하나하나 컨트롤 하려고 하다보니 코드는 어지러워지고 코드를 유지보수하는거 조차 힘들어지기 시작하였습니다. 이 때, HTML 요소의 'data-' 로 시작하는 속성을 알게 되어서 깔끔하게 해결이 되어서 공유하기 위해 작성하게 되었습니다. 데이터셋 사용 사례 이렇게 Apple.com 사이트에서도 HTML DOM요소에도 data를 넣어서 사용하는 것을 볼 수 있습니다. 또한 이렇게도 사용할 수 있습니다. 이하 내용은 아래 예시를 가지고 하겠습니다. 삼성..

이벤트 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러(event handler)라고 한다. 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록 이라한다. 이벤트 핸들러 등록 어트리뷰트 방식 Click me! 프로퍼티 방식 Click me! addEventListener 메소드 방식 addEventListener 메소드 방식은 이벤트 핸들러 프로퍼티에 바인딩된 이벤트 핸들러에 아무런 영향을 주지 않는다. Click me! Tip) addEventListener 메소드는 하나 이상의 이벤트 핸들러를 등록할 수 있다. 단, 참조가 동일한 이벤트 핸들러를 중복 등록하면 하나의 이벤트 핸들러만 등록된다. Click me! 이벤트의 종류 마우스 이벤트 이벤트 명 이벤트 타..