프론트엔드/자바스크립트 (34) 썸네일형 리스트형 노드몬 통상 개발환경에서 서버 작업 시 변경사항이 반영되려면 서버의 재 구동이 필요합니다. 노드몬은 npm 라이브러리 중 하나로 변경된 사항이 저장될 때마다 변경된 사항을 자동으로 반영해 주는 기능을 합니다. 구현하기 노드몬 설치 npm i nodemon 구동하기 노드몬이 설치되면 아래와 같이 경로를 통해 직접 구동하거나 엔피엠 커맨드를 통해 구동할 수 있습니다. ▶ 직접구동 커맨드 라인에 아래 명령어 실행 ./node_modules/.bin/nodemon ./ ▶ 엔피엠 사용하기 package.json파일을 열고 스크립트 칸에 노드몬 커맨드 추가 스크립트에 추가한 명령어는 아래 형태로 구동 npm run 이상으로 라이브 서버 라이브러리인 노드몬에 대해 알아보았습니다. HTML 삽입 미리보기할 수 없는 소스 자바스크립트 모듈 - 버튼물결 자바스크립트로 버튼 클릭 물결효과 모듈을 만들어 보았습니다. 완성된 물결효과 코드는 아래와 같은데요. 요소의 위치와 클릭이벤트를 사용하여 효과를 적용하는 방식입니다. // wave-module.js export function createEffect() { const btn = document.querySelector('button') const rippleEl = document.querySelector('.ripple') btn.addEventListener('click', (e) => { rippleEl.classList.add('clicked') rippleEl.style.left = `${e.clientX - e.target.getBoundingClientRect().x}px` rippleEl... 리덕스 리덕스는 오픈소스 자바스크립트 라이브러리로 애플리케이션의 상태를 관리하는 역할을 합니다. 리액트 리덕스 설치 리액트 프로젝트를 생성할 때 템플릿 옵션을 추가하면 리덕스가 자동으로 설치됩니다. npx create-react-app --template redux 리듀서 생성 feature 폴더 안에 생성할 리듀서를 담을 폴더를 생성 폴더 안에 파일을 추가하고 아래와 같이 슬라이스를 생성합니다. import { createSlice } from "@reduxjs/toolkit" const initialState = {} export const authSlice = createSlice({ name:'auth', initialState, reducers: { reset: (state) => initialStat.. 엔피엠 - 제이슨 서버 엔피엠 제이슨 서버는 제이슨 파일형식으로 데이터를 저장하는 서버로 설치가 간단하기 때문에 프론트엔드 개발 시 테스트용으로 사용하기 편리하다. 사용하는 방법을 살펴보자목차" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 설치하기 패키지 설치 패키지 제이슨 파일에 커맨드 지정 서버 구동 사용하기 앵귤러 모델 생성 서비스 생성 ▶ 데이터 가져오기 (리스트) .. 자바스크립트 모듈 - 물결효과 자바스크립트를 사용하요 텍스트 물결효과 모듈을 만들어 보았습니다. 완성된 물결효과 코드는 아래와 같은데요. 텍스트 요소에 클래스 이름 이름 지정만으로 연동이 가능하도록 구현되어 있으며 작동은 지정된 클래스를 단어로 분리하고 효과를 적용하는 방식입니다. // wave-module.js const waveTextEl = document.querySelector('.wave-text') setInterval(() => { const child = waveTextEl.firstElementChild const spanEls = document.querySelectorAll('.wave-text span') if (window.getComputedStyle(child).transform.includes('-40'.. 반응형 웹 디바이스 구분하기 반응형 사이트의 경우 사이트 경로가 동일하여 디바이스에 따른 구분을 하기 힘든데요. 스크린의 크기를 지정하여 구현하는 방법도 가능하지만 코드를 통해 간단히 구현하는 방법을 안내해 드리겠습니다. 구현하기 사용할 코드는 아래와 같은데요. /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) 화면에 따라 코드를 테스트 해 보면 아래처럼 디바이스에 따라 다른 값이 반환되는 것을 확인 가능합니다. 따라서 반환되는 값을 조건으로 지정하여 코드를 구현하면 됩니다! HTML 삽입 미리보기할 수 없는 소스 라이브러리 - RxJS RxJS (Reactive Extensions for JavaScript)는 Observable을 활용하여 리액티브 프로그래밍을 구현하게 해 주는 라이브러리로 이벤트 리스너, 비 동기 데이터 요청에서 사용되는 promise와 비슷한 기능을 하지만 오퍼레이터라는 함수들을 통해 데이터를 수정할 수 있으며, 또 하나의 값만 반환할 수 있는 promise와 달리 스트림이 닫히기 전까지 무한의 값을 반환할 수 있는 장점을 가지고 있습니다. 주요 개념 ▶ Observable 데이터 스트림으로 구독할 값들을 담고 있습니다. ▶ Subject Observable과 다수의 Observer가 동시에 구독할 수 있습니다. ▶ Observer Observable 내의 데이터 스트림을 구독하는 객체로 next, error, c.. 자바스크립트 컴포넌트 - 확장 검색 창 구현 먼저 HTML에 검색창과 버튼을 생성합니다. 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-size: 1.7rem; border: none; } input:focus {.. 이전 1 2 3 4 5 다음
