bravo my life!

1. 개요 코드를 좀 더 가독성이 좋게, 간결하게하기 위해 버릴건 버리자. 2. 코드상세 코드 변경 전. 더보기 코드 변경 전. /* eslint-disable no-confusing-arrow */ import { useState } from 'react'; import { IonButton, IonButtons, IonHeader, IonImg, IonToolbar, } from '@ionic/react'; import styled from 'styled-components'; import { NotiState } from '../../types/home/NotiState'; const TravelitHeader = styled(IonHeader)` width: 100%; `; const Travel..

1. 개요 boolean값으로 상태를 관리하며 어떤 아이콘을 false때는 상단에 빨간점을 표시하지 않고, true때는 상단에 빨간점을 표시하는 기능을 만들어 볼 것이다. 2. 코드 상세 //HomeHeader.tsx import { useState } from 'react'; import styled from 'styled-components'; //인터페이스를 사용하여 NotiState의 타입을 지정해준다. interface NotiState { noti: boolean; } const NotificationButtons = styled(IonButtons)` margin-right: 20px; `; //noti의 boolean 상태값에 따라 백그라운드 이미지를 바꾸어 줄 것이다. const Noti..

1. 개요 로그인 시도 후 로그인 상태 메세지를 띄울 창을 만들어 보자. toast라는 기능이고 useIonToast hook을 사용하여 구현 할 것이다. 2. 코드 상세 //login.tsx import { IonAvatar, IonContent, IonHeader, IonItem, IonList, IonPage, IonText, IonLabel, IonTitle, IonToolbar, IonItemOptions, IonItemSliding, IonItemOption, IonButton, IonIcon, IonInput, useIonToast, } from "@ionic/react"; import ExploreContainer from "../components/ExploreContainer"; imp..

1. 개요 Firebase로 로그인을 구현할 것이다. 아직 회원가입기능을 만들지 않아 오류는 발생하겠지만 진행해 보겠다. 2.코드 상세 //firebaseConfig.ts import * as firebase from "firebase/app"; import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, updateProfile, signOut, } from "firebase/auth"; import { getAnalytics } from "firebase/analytics"; const config = { apiKey: "AIzaSyBmYIPAvaJgiBdJ7JrI-D2TaxhQvSrdYcc", authDomain: "io..

1. 개요 서버부분을 담당할 Firebase를 세팅해 보려고 한다. 2. Firebase 설치 터미널에 npm i firebase --save 를 입력한다. --save는 package.json의 dependency 항목에 모듈을 추가한다는 의미로 사용하는데 npm 5부터는 설치 기본 값이 --save이기 때문에 별도로 적어주지 않아도 상관없다. src폴더 내에 firebaseConfig.ts 파일을 만들고 다음과 같이 내용을 채운다. //firebaseConfig.ts import * as firebase from "firebase/app"; const config = { // .... } firebase.initializeApp(config) 3. Firebase 프로젝트 생성 파이어베이스에서 프로젝..

1. 개요 앞서 배웠던 routing을 이용해 간단한 회원가입 페이지를 만들어 보았다. 유저정보를 입력 후 회원가입 버튼을 클릭해 콘솔에 정보를 띄우자. 2. 코드 상세 //App.tsx const App: React.FC = () => ( ); export default App; //resister.tsx const Resister: React.FC = () => { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [cpassword, setSPassword] = useState(""); function resisterUser() { console.log(`username: $..

1. 개요 앞서 배웠던 routing을 이용해 간단한 로그인 페이지를 만들어 보았다. 유저정보를 입력 후 로그인 버튼을 클릭해 콘솔에 정보를 띄우자. 2. 코드 상세 //App.tsx const App: React.FC = () => ( ); export default App; //login.tsx const Login: React.FC = () => { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); function loginUser() { console.log(`username: ${username}, password: ${password} `); } return ( Example Pa..

1. 개요 리액트의 것과 다를 것이 없는 개념이다. spa 방식에서 페이지를 routing하여 다른 내용을 보여준다. 2. 코드 상세 //App.tsx //Home.tsx Hello World! Click Me! //Example.tsx Example Page! Hello example Page! 결과물은 다음과 같다.

1. 개요 연속되는 요소가 있고 그 요소들의 CSS 속성을 다르게 지정하고 싶을 때, child 선택자를 사용하여 CSS의 속성을 다르게 줄 수 있다. 2. child 선택자의 종류 only-child 자식요소가 하나인 경우 적용이 된다. first-child 자식요소가 여러개인 경우 가장 첫번째 자식요소가 선택이 된다. last-child 자식요소가 여러개인 경우 가장 마지막 자식요소가 선택이 된다. nth-child() 자식요소가 여러개인 경우 소괄호 안에 지정한 숫자에 대응하는 순서인 요소가 선택이 된다. nth-last-child() 자식요소가 여러개인 경우 소괄호 안에 지정한 숫자에 역순으로 대응하는 순서인 요소가 선택이 된다. 이번 포스팅에서는 last-child를 다루어 보겠다. 3. 사용법..

1. 개요 ionic-react로 inputUI를 만들어 보았다. 2. 코드 상세 setText(e.detail.value!)} > setNumber(parseInt(e.detail.value!, 10))} > clear Input setInput(e.target.value)} clearInput /> stacked label setInput(e.target.value)} /> Floating Label Fixed Label 아래는 코드의 결과물이다. 사진으로 표현이 힘든 부분에 대해 상세 설명하겠다. number타입 input은 input요소안에 숫자 입력시 상하 버튼이 나타나고 1, -1씩 증감할 수 있다. clear input은 input요소안에 내용을 입력한다면 x버튼이 나타나 입력내용을 한 번에..