사용자가 스크롤할 때 JavaScript 함수를 호출웹 페이지에서 사용자가 스크롤할 때 JavaScript 함수를 호출하려면 scroll 이벤트를 활용할 수 있습니다. scroll 이벤트는 사용자가 스크롤할 때마다 트리거되며, 이를 통해 특정 기능을 실행할 수 있습니다.아래는 스크롤 시 JavaScript 함수를 호출하는 간단한 예제입니다:기본 예제HTML 파일에 JavaScript를 포함합니다.window 객체의 scroll 이벤트에 이벤트 리스너를 추가하여 스크롤 시 특정 함수를 호출합니다. Scroll down the page 코드 설명HTML 구조:body 태그에 충분한 높이를 설정하여 페이지가 스크롤될 수 있도록 합니다.header 요소를 추가하여 스크롤할 때 배..
evtSprtrList?.flatMap(sp => sp.lowEvtSprtrList);주어진 JavaScript 코드 evtSprtrList?.flatMap(sp => sp.lowEvtSprtrList);는 evtSprtrList 배열이 정의되어 있고 null이 아닌 경우 각 요소의 lowEvtSprtrList 속성을 추출하고 이를 하나의 배열로 평탄화(flatten)하는 작업을 수행합니다.이 작업을 설명하고자 할 때, 아래와 같은 예시와 함께 단계별로 설명해 보겠습니다:예시 데이터const evtSprtrList = [ { id: 1, lowEvtSprtrList: [10, 20, 30] }, { id: 2, lowEvtSprtrList: [40, 50] }, { i..
1. Thymeleaf 란?Thymeleaf 공식 홈페이지 에 따르면 타임리프는 server-side Java template engine 이라고 정의되어 있습니다.즉, Java 기반의 웹서비스에서 사용하는 서버 단 템플릿 엔진이라는 건데요,다양한 템플릿과 강력한 기능으로 Spring Framework의 전폭적인 지지를 받고 있으며 JSP를 완벽하게 대체하는 것을 목표로 하고 있습니다.Thymeleaf 에 대해 더 자세히 알아보기 전에 템플릿 엔진에 대해 간단히 짚어보고 넘어가겠습니다.2. Template Engine 이란?Template engine 또는 template processor란 동적인 웹페이지를 구현하기 위한 기능입니다.웹서비스가 static 한 html만 보여주던 시기에서 점차 dynam..
참고 : 팀워크 향상을 위한 모노레포(Monorepo) 시스템 구축 모노레포의 문화적 의의 모던 프론트엔드 프로젝트 구성 기법 - 모노레포 개념 편
웹에대한 이해 💡웹, 어느 정도 알아야 해요? 프론트엔드 개발자가 웹을 알아야 하는 이유는 굉장히 많습니다. 하지만 간단히 요약하자면 성능 최적화를 위해 디테일한 통신/에러 핸들링을 위해 프론트엔드 개발자는 다양한 브라우저를 다루기 때문 프론트엔드 개발자는 웹의 거시적인 구조와 웹 중에서도 브라우저와 네트워크를 알고 있는게 좋습니다. 1️⃣ 웹의 거시적인 구조 거시적인 웹의 구조는 생각보다 별거 없습니다. 클라이언트와 서버, 그리고 그 둘을 이어주는 네트워크 이 세 개를 묶어서 거시적인 웹구조로 보시면 됩니다. 쉽게 말해 통신 과정이 웹의 구조인 셈이죠. 주니어 프론트엔드 개발자는 저 웹 구조 중에서도 브라우저와 네트워크에 관련된 기본기가 상당히 중요합니다. 2️⃣ 브라우저와 네트워크의 이해 🔴 브라우저..
jQuery API https://api.jquery.com/ jQuery API Documentation jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new t api.jquery.com
