코드의 오아시스

작성하게 된 계기 나는 서버 백엔드 개발자이다.이번에 실무 개발을 하면서 유튜브의 쇼츠, 유튜브의 릴스처럼 짧은 영상을 넘기기(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..

타임 리프 (Thymeleaf) 백엔드 서버에서 HTML을 동적으로 렌더링하는 용도로 사용된다. 즉, SSR(Server Side Rendering) 을 한다. 순수 HTML을 그대로 태그사용, 유지하면서 뷰 템플릿도 사용할 수 있는 것을 네츄럴 템플릿 (natural template)라고한다. 즉, 타임리프는 네츄럴 템플릿이다. 스프링의 다양한 기능을 편리하게 지원해준다. 백엔드 개발자 라면 무조건 알아야하는 템플릿 중 하나입니다. SSR에는 JSP, 타임리프 등이 있지만 지금으로써는 타임리프만 알아도 되기 때문에 타임리프를 공부할 것이고 깊게 하는 것이 아닌 이런게 있구나 정도고 필요할 때 찾으면 되는 정도로 작성하게 되었습니다. 공식 문서 지금 현재 버전은 3.1 버전이며 현재 버전과 최신버전에 차..

이 글을 작성하는 이유 지금까지 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! 이벤트의 종류 마우스 이벤트 이벤트 명 이벤트 타..

개발자로 일을 하니까 프론트엔드와 백엔드의 경계가 없는 것 같습니다. "난 서버 코드만 만질거야!" , "난 화면단 만 구성하고 말거야!" 하는 이야기는 옛날 이야기 이며 현재는 이런말 하는 것이 얼마나 어리석었는지 알게되었습니다. CSS에서 선택자로 요소를 가져오고 jQuery로도 선택자를 가져오게 됩니다. 그래서 이것을 헷갈리지 않고 바로 찾을 수 있게 작성하게 되었으며 검색하여 온 독자들도 여기서 모든 정보를 얻었으면 좋겠습니다. 선택자 아이디 선택자 ( # ) HTML에서 .. 이런 식으로 작성 되어있을 때 해당 요소를 가져올 수 있습니다. CSS, jQuery로 해당 요소를 선택하는 법은 같습니다. jQuery CSS 클래스 선택자 ( . ) HTML에서 .. 이런 식으로 작성 되어있을 때 해당..