프론트엔드 (108) 썸네일형 리스트형 리액트 - 스타일 라이브러리(부트스트랩) 리액트 애플리케이션에 스타일라이브러리를 추가하는 방법을 살펴보자 부트스트랩 아래 커맨드를 통해 부트스트랩 설치 npm i bootstrap index.js 파일에 경로추가 import 'bootstrap/dist/css/bootstrap.css'; 이상 참고 Adding Bootstrap | Create React App (create-react-app.dev) Adding Bootstrap | Create React App While you don’t have to use any specific library to integrate Bootstrap with React apps, it's often easier than trying to wrap the Bootstrap jQuery plugins. R.. 타뷸레이터 - 컬럼 값 동적적용 (뮤테이터) 데이터베이스에서 전송된 값을 JSP에서 타뷸레이터를 통해 표시할 때 동적으로 필드값을 적용하는 방법을 살펴보겠습니다. 방법은 필드명, 필드값을 지정하고 Mutators에서 함수를 호출하면 칼럼에 표시된 데이터와 추가로 전달가능한 매개변수를 통해서 구현하는 방식입니다. 구현하기 Mutators 모듈을 추가하고 함수추가 후 매개변수로 전달하는데 첫 번째 매개변수는 'value'가 필드에 표시되는 데이터, 두 번째 매개변수는 추가로 전달하는 데이터입니다. 해당 함수에서 반환되는 데이터가 화면에 표시되며 해당 보기에서는 터너리 식을 사용하여 데이터베이스에서 전송한 두 필드 중 하나의 필드가 널인 경우 다른 필드의 값이 표시되도록 구현하였습니다. {title: "title", field: "val1", mutat.. 노드몬 통상 개발환경에서 서버 작업 시 변경사항이 반영되려면 서버의 재 구동이 필요합니다. 노드몬은 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.. 리액트 훅 - 유즈레프 (돔요소 사용하기) 바닐라 자바스크립트의 경우 돔요소를 동적으로 활용하기 위해 쿼리셀렉터 등 해당 요소를 가져오는 다양한 방법을 제공합니다. 반면, 리액트는 컴포넌트 함수 안에서는 요소에 직접 코드를 작성하는 것이 가능하고 위처럼 다큐먼트객체를 활용하여 요소를 가져올 수 없기 때문에 순수 자바스크립트에서 사용되는 방식은 활용도가 낮습니다. 하지만, 바닐라 자바스크립트에서 처럼 요소를 가져와서 작업하는 방법의 비중이 큰 만큼, 이러한 기능이 존재한다면 알아 두는 것도 좋겠죠. 유즈 레프는 요소에 대한 레퍼런스를 만들고 해당 요소를 활용하는 훅으로 바닐라 자바스크립트에서 처럼 요소를 가져와서 작업하는 것을 가능하게 해 줍니다. 프로젝트 구성하기 리액트 앱 생성 리액트? 리액트는 자바스크립트 라이브러리로 앵귤러, 뷰와 함께 3대.. 엔피엠 - 제이슨 서버 엔피엠 제이슨 서버는 제이슨 파일형식으로 데이터를 저장하는 서버로 설치가 간단하기 때문에 프론트엔드 개발 시 테스트용으로 사용하기 편리하다. 사용하는 방법을 살펴보자목차" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 설치하기 패키지 설치 패키지 제이슨 파일에 커맨드 지정 서버 구동 사용하기 앵귤러 모델 생성 서비스 생성 ▶ 데이터 가져오기 (리스트) .. 리액트 훅 - 유즈이펙트 (컴포넌트 상태변화 감지) 유즈이펙트는 리액트의 훅 중 하나로 컴포넌트 등의 상태가 변할 때 이를 감지할 수 있게 해 줍니다. 프로젝트 구성하기 리액트 앱 생성 리액트? 리액트는 자바스크립트 라이브러리로 앵귤러, 뷰와 함께 3대 자바스크립트 프레임워크 중 하나입니다. 앵귤러와 마찬가지로 컴포넌트 단위로 UI를 구성하는 방식을 사용하지만 앵귤러와 달리 jin-co.tistory.com 사용방법 사용하고자 하는 컴포넌트에 유즈이펙트를 가져오고 아래처럼 설정합니다. 감지하고자 하는 대상이 있다면 아래처럼 꺽쇠를 추가하고 그 안에 추적대상을 추가하면 대상의 상태가 변화할 때마다 훅이 작동합니다 (이벤트와 비슷) 사용예시 콘텍스트 생성 유즈콘텍스트를 생성하고 아래와 같이 상태를 설정합니다 컴포넌트 생성 테스트를 위한 컴포넌트를 생성하고 유.. 이전 1 2 3 4 ··· 14 다음
