전체 글 (90) 썸네일형 리스트형 [Firebase 9] React 앱 세팅 파이어베이스 구버전과 9버전은 차이가 크다. 공식문서에서도 알 수 있듯이 구버전과 신버전은 문법부터 차이가 크다. 일단 npm으로 firebase를 설치한다. npm install firebase 리액트 src 폴더에 firebase.ts 파일을 추가한다. import { initializeApp } from "firebase/app"; import { getAnalytics } from "firebase/analytics"; import { getFirestore } from "firebase/firestore" const firebaseConfig = { ~~~~~~~~~~~~~~~ }; const firebase = initializeApp(firebaseConfig); const analytics.. [React-Router] 리액트 라우터 npm install react-router-dom 설치는 위 커맨드로 한다. import { BrowserRouter, Route, Routes } from 'react-router-dom' function App() { return ( ) } 위와 같은 형태로 변화하는 몸체를 만든다. BrowserRouter로 감싼 후 Routes 부분이 변화하는 부분인데 Route 태그에 path를 넣어 경로를 표현하고, element를 이용해 컴포넌트를 설정한다. import { Link } from 'react-router-dom' const Header = () => { return ( Animall Board Training Shop Trip Me ) } 라우트 링크는 위와 같이 Link를 이용해 설정한다... [React] 리액트 설치 방법 npm create-react-app app-name 가장 기본적인 설치 방법이다. 정말 기본적인 리액트 앱만 설치된다. vue는 vite를 이용해서 typescript라든지 pinia라든지 router까지 한 번에 설치할 수 있었는데...하면서 vite로 리액트 설치를 해봤다. npm create vite@latest 상태관리, 라우터는 몰라도 typescript까지는 같이 세팅이 가능하다. [230624] 상반기를 돌이켜보며 새해 목표는 '앞을 보고 뒤를 생각하면서 잘 버텨보자'였다. 못버티겠다. 1차로 멘탈이 붕괴됐던 이유가 가족 중 누군가에게 좋지 않은 일이 닥쳤다는 것이었다. 2차로 멘탈이 사라진 이유는 앞에서 언급한 일로 인해 또 다른 가족 구성원이 충격으로 건강에 문제가 생겼다는 것이었다. 내가 앞으로 거주할 주택 매매 문제까지 겹친 상태였다. 나도 내가 괜찮은 줄 알았다. 그런데 내 건강에도 문제가 생기기 시작했다. 원인 모를 복통이 계속 됐다. 모두 병들었는데 아무도 아프지 않았었다. 그런데 이제는 모두 아파한다. 일을 그만두게 됐다. 당분간은 가정에 집중하자. 너무 힘들어서, 잠이 오지 않아서, 썼던 글. 그래야겠다 -------------------------------230604 마치 아른거린다 문득 문득 .. [프로그래밍 패러다임] 객체지향, 함수형 프로그래밍 패러다임(programming paradigm)은 프로그래머에게 프로그래밍의 관점을 갖게 해주는 역할을 하는 개발 방법론이다. 예를 들어 객체지향 프로그래밍은 프로그래머들이 프로그램을 상호 작용하는 객체들의 집합으로 볼 수 있게 하는 반면에, 함수형 프로그래밍은 상태 값을 지니지 않는 함수 값들의 연속으로 생각할 수 있게 해준다. 여러 패러다임을 지원하는 언어로는 C++, 파이썬, 자바스크립트가 있으며 자바의 경우 jdk 1.8부터 함수형 프로그래밍 패러다임을 지원하기 위해 람다식, 생성자 레퍼런스, 메서드 레퍼런스를 도입했고 선언형 프로그래밍을 위해 스트림(stream) 같은 표준 API 등도 추가했다. 프로그래밍 패러다임은 크게 선언형, 명령형으로 나누며, 선언형은 함수형이라는 하위 집합을.. [디자인 패턴] MVC, MVVM, Singleton 등 디자인 패턴에 대해 디자인 패턴이란 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 ‘규약’ 형태로 만들어 놓은 것을 의미한다. - Singleton(싱글톤) - Factory Method(팩토리 패턴) - Strategy(전략 패턴) - Observer - MVC - MVP - MVVM 등의 패턴이 있다. 싱글톤 패턴 싱글톤 패턴(singleton pattern)은 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴이다. 하나의 클래스를 기반으로 여러 개의 개별적인 인스턴스를 만들 수 있지만, 그렇게 하지 않고 하나의 클래스를 기반으로 단 하나의 인스턴스를 만들어 이를 기반으로 로직을 만드는 데 쓰이며,보통 데이터베이스 연결 모듈에 많이 사용한다. 하나의 인스턴스를 만.. [Pixi.js] Vue3를 곁들인 PixiJS설치법 npm install pixi.js CDN 설치는 내가 별로 안좋아하니까 npm으로 설치함 import * as PIXI from 'pixi.js'; 사용할 파일에 import해서 쓰면 됨 예를 들어서 코드를 이렇게 짜면 이런식으로 화면이 나오게 된다. 오늘은 여기까지. [Routing] Vue-Router 없이 라우팅하기 화면이 좌/우로 트랜지션(?)되는 라우터를 만들어보자. App.vue 각 컴포넌트의 표시 여부를 관리하는 showComponent2, showComponent3, showComponent4 변수를 선언했다. 전환 효과를 위한 transitionName 변수를 선언했다. 초기 화면에는 Component1만 보이게 하고 Component1에서 이벤트를 발생시키면, Component2가 나타나고, Component1은 사라진다. Component2에서 이벤트를 발생시키면, Component3 또는 Component4가 나타나고, Component2는 사라진다. Component3에서 이벤트를 발생시키면, Component2가 다시 나타나고, Component3은 사라진다. Component4에서 이벤트를 발생.. 이전 1 2 3 4 5 ··· 12 다음
