웹 개념 (29) 썸네일형 리스트형 버블링과 캡처링이란? EM을 클릭했는데도 DIV에 할당한 핸들러가 동작합니다. 해당 코드에서 em을 클릭해도 div에 할당된 핸들러가 동작합니다. 왜그럴까요 버블링이라는 개념을 알면 알기 쉽습니다. 버블링 버블링(bubbling)의 원리는 간단합니다. 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 해당 구조는 div > em > code 의 구조를 가지고 있습니다. code에서 이벤트가 발생하면 document객체를 만날때까지 올라갑니다. 그렇기 때문에 div에서 핸들러가 동작했던것이죠. + 거의 모든 태그는 버블링을 가지고 있습니다. 그럼 코드를 짤때 이벤트 발.. git add . 오류 => Filename too long in Git for Windows Run Git Bash as administrator (right-clicking the app shortcut will show the option to Run as Administrator ) Run the following command: git config --system core.longpaths true Note: if step 2 does not work or gives any error, you can also try running this command: git config --global core.longpaths true NextJs Context의 의미 ◎NextJS에서 Data Fectching 하는 방법을 알아보자. NexJS 8 버전에는 getInitialProps를 사용했는데, 현재 9 버전에서는 getStaticProps, getStaticPaths, getServerSideProps를 주로 사용한다. 1. 사전 렌더링(pre-rendering) ◎ NextJS가 작동하는 방식과 이를 빠르게 만드는 데 있어 큰 부분을 차지한다. 기본적으로 NextJS는 실행해야 하는 최소한의 Jacascript와 함께 Hydration를 통해 각 페이지 HTML을 미리 생성하여 모든 페이지를 사전 렌더링 한다. 사전 렌더링에는 정적 생성(SG)과 서버 측 렌더링 (SSR)이 있다. 이 둘의 차이점은 데이터를 가져올 때이다. 1-2. 정적 생성(SG) ◎ SG의.. 프로미스란? Promise가 뭔가요? “A promise is an object that may produce a single value some time in the future” 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다. Promise가 왜 필요한가요? 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용합니다. $.get('url 주소/products/1', function(response) { // ... }); 위 API가.. SPA에 대한 간단한 설명 과거의 웹 사이트 전통적인 웹 사이트는 지금보다 문서 하나에 전달되는 파일의 용량이 적었다. 그래서 어떤 요소를 한번 클릭하면 완전히 새로운 페이지를 서버에서 전송해 주곤 했다. 그래도 상관 없었다. 그러나 현대에 이르러 점차 웹 사이트가 고도화됨에 따라 한 페이지에 해당하는 페이지 용량이 커져갔고, 매번 새로운 페이지를 전달하는 게 점점 버거워지게 되었다. SPA란 이러한 문제를 해결하기 위해 등장한 것이 SPA(Single Page Application)이다. 이름에서도 파악할 수 있듯이, 어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것이 SPA이다. 뭔가를 클릭하거나 스크롤하면, 상호작용하기 위한 최소한의 요소만 변경이 일어난다. 페이지 변경이 일어난다고 .. 이전 1 2 3 4 다음
