Frontend/JavaScript (16) 썸네일형 리스트형 Module System As the size of the project grows bigger, it becomes harder to navigate through the files. To solve this problem, many lagnuages separate the files into small chunk of files such as library of package. JavaScript uses module to solve this. A module is a group of functions stored separatly in a file to better manage codes. Let's see how we can create module Implementation Add the type="module" att.. Webpack With the ongoing development of the programming environment JavaScript has been adding new techniques periodically. To catch up with growing size of the modern application JS adapted module system. This led to the growth of the file sizes and the number of files. to solve this problem Webpack is introduced. Webpack is a static module bundler that creates a dependency map based on the relations o.. Data Request Let’s see how a request to the server is made in JavaScript. XML is an object that is supported in all most every browser. Before XML whenever there was a change in the data the browser had to reload to reflect the changes. XML separated handling of data from displaying contents on the screen which is handled by HTML by solely managing data making it possible to reflect changes without having to.. Day / Night Mode with JavaScript Lots of applications, nowadays, have a feature to change day and night modes. Let’s see how to make one using HTML, CSS, JS. This feature is quite straight forward so I am going to explain why to implement of what it does. Having said that let’s get into the code. (I tried to omit the unnecessary codes) Implementation HTML Custom welcome CSS /* html에 전역변수 지정 */ :root { --bg-light-alt: rgba(0, 0,.. How to Tell PC from Mobile in A Responsive APP A responsive application uses the same URL for both PC and mobile view so traditional way of differentiating between the PC and mobile using URL path cannot be used to implement desired features. In this writing I will show you a trick to go around this in a berry simple wayImplementationThe code we will use looks like below/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(na.. Modal A modal in web programming refers to a popup or a dialog box that appears on top of the page to interact with users. Modal is a great way to get users’ attention. Let’s see how to implement is with HTML, CSS and JavaScript Implementation First, we need a modal in the HTML. In this example, I kept the code as simple as possible so that we can focus on the topic. In the HTML, create a div and add .. Infinite Scrolling When developing a website there comes many occasions when you need to populate a page with a list of images or items. Since the screen is finite there is a limitation about how much you can show to the user no matter how big the list. Infinite scrolling is a technique that allows you to load a small amount of data when it is needed which can improve the response time from the server. In this wri.. JS Component - Expanding Search Bar Implementaion First, let's add a search bar and a button in the HTML Add basic styles in the CSS /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: lightcoral; } .input-box { position: relative; } input { height: 50px; width: 50px; border-radius: 15px; transition: 0.4s ease; font.. 이전 1 2 다음
