프론트엔드 (109) 썸네일형 리스트형 Flutter와 Firebase 연동 완벽 가이드: 'flutterfire' 명령어 오류부터 해결까지 오늘은 많은 개발자들이 겪는 FlutterFire 연동 과정의 문제점과 해결 방법을 상세히 알려드리려고 합니다. 특히 'command not found'와 'Failed to fetch Firebase projects' 오류를 중심으로 살펴보겠습니다.Flutter 프로젝트 생성 및 VS Code 연동먼저 Flutter 프로젝트를 생성하고 VS Code와 연동하는 과정부터 시작해 보겠습니다.Flutter 프로젝트 생성하기VS Code를 엽니다. 아직 설치하지 않았다면 VS Code 공식 사이트에서 다운로드 및 설치해 주세요.VS Code 확장(Extensions) 마켓플레이스에서 Flutter 및 Dart 확장 프로그램이 설치되어 있는지 확인합니다. 없다면 검색하여 설치해 주세요.Ctrl+Shift+P (.. 리액트 - 스타일 라이브러리(부트스트랩) 리액트 애플리케이션에 스타일라이브러리를 추가하는 방법을 살펴보자 부트스트랩 아래 커맨드를 통해 부트스트랩 설치 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 삽입미리보기할 수 없는 소스 설치하기 패키지 설치 패키지 제이슨 파일에 커맨드 지정 서버 구동 사용하기 앵귤러 모델 생성 서비스 생성 ▶ 데이터 가져오기 (리스트) .. 이전 1 2 3 4 ··· 14 다음
