si_do.log

React 로 만드는 음악 커뮤니티 사이트 #4 (Firebase로 로그인 / 로그아웃 구현)

Tue, 02 May 2023 05:05:54 GMT

구현 내용

login 됐을때 logout으로 버튼변경

login이 성공한다면 Home으로 돌아가기

login된 유저의 정보를 받아 화면상에 띄우기

logout 기능

1. context 만들기

유저가 로그인 했다는 정보를 전역에서 사용할 것이기 때문에 context 를 만들어줬다. src/context/AuthContext.tsx

import React from "react";
import { User } from "firebase/auth";

export const AuthContext = React.createContext(null);

2.Provider

이제 context 를 사용할 곳에 우산을 씌워주기 위해 provider 를 만들어준다. src/provider/AuthProvidert.tsx

import React, { useEffect, useState } from "react";
import { User } from "firebase/auth";
import { onUserStateChange } from "../api/firebase";
import { AuthContext } from "../context/AuthContext";

interface Props {
  children: React.ReactNode;
}

const AuthProvider = ({ children }: Props) => {
  const [user, setUser] = useState(null); //유저의 정보 상태

  useEffect(() => {
    onUserStateChange((fbUser: User| null) => {
      console.log(fbUser);
      setUser(fbUser);
    });
  }, []); //user의 상태 변경을 감지하면 serUser에 받아온 유저정보를 넘겨줌
  return {children};
};

export default AuthProvider;

3. index.tsx 에 provider 씌우기




const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  
    
      
    
    
  
);

context 를 만들더라도 provider를 씌워주지 않으면 사용 불가능

4.firebase.ts 에 Email로 로그인 하기 추가


//Email 로그인
export const EmailLogin = (email: string, password: string) => {
  signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      const user = userCredential.user;
      toast.success("로그인 되었습니다!");
    })
    .catch((error) => {
      const errorCode = error.code;

      switch (errorCode) {
        case "auth/wrong-password":
          toast.error("비밀번호를 확인 해 주세요");
          break;
        case "auth/user-not-found":
          toast.error("존재하지 않는 사용자 입니다.");
          break;
      }
    });
};

오류가 난다면 error 메세지를 보여준다.

정상적으로 잘 작동된다면 성공 메세지와 함께 메인페이지로 보내주고 로그인 했다는 정보가 보여진다.

firebase 공식문서 https://firebase.google.com/docs/auth/web/start?hl=ko#sign_in_existing_users

5. logout 구현

firebase.ts 에 로그아웃 하는 함수를 만들어준다.

//로그아웃
export const logout = () => {
  signOut(auth).then(() => null);
};

firebase 공식문서 https://firebase.google.com/docs/auth/web/password-auth?hl=ko&authuser=0#next_steps

6.firebase 로그인 상태 감지

export const onUserStateChange = (callback: any) => {
  onAuthStateChanged(auth, (user) => {
    callback(user);
  });

firebase 공식문서 https://firebase.google.com/docs/auth/web/start?hl=ko#set_an_authentication_state_observer_and_get_user_data

useNavigate 로 메인페이지로 이동

src/pages/LoginPage.tsx

import React, { useContext, useEffect } from "react";
import LoginInput from "../components/Login/LoginInput";
import { Link, useNavigate } from "react-router-dom";
import { AuthContext } from "../context/AuthContext";

const LoginPage = () => {
  const navigate = useNavigate();
  const user = useContext(AuthContext);
  useEffect(() => {
    if (user) {
      navigate("/");
    }
  });
  return (
    
      

      
        계정이 없으신가요?
        
          
        
      
    
  );
};

export default LoginPage;

useEffect로 user가 있는지 확인한다음 유저가 있다면 useNavigate로 메인페이지로 이동시킴

드디어 firebase 를 이용한 회원가입 , 로그인 , 로그아웃 기능이 완성되었다!!! 이제 게시판 만들차례다😼

Input Animation (Label 을 Placeholder 처럼 사용하기)

Tue, 02 May 2023 01:41:25 GMT

로그인과 회원가입 인풋에 들어갈 애니메이션의 최종 버전이다.

🔥 문제

이전에 올린 포스팅에서의 인풋 애니메이션에는 문제가 2가지가 있었다.

일단 이전에는 onFocus 와 onBlur 를 사용해 거기에 True / False 값으로 각각에 따른 스타일을 주었는데

첫번째 문제는 같은 useState를 사용하면 이메일 부분이Focus 되어도 다른 인풋들 모두 같이 애니메이션이 변한다는 점이고

두번째 문제는 Input 안에 값이 있을때는 동작을 하지않아 Label 이 Input value 값을 가려버리는 문제였다.

그래서 첫번째 문제를 해결하기 위해 각각의 인풋에 다른 useState 값을 주었고 그러다보니 같은 동작을 하는 함수임에도 쓸데없이 많아졌다. 이런식으로...

그리고 두번째 문제가 Input 안에 값이 있을때는 조건식으로 된 Css 값이 동작을 안해서 Label이 Input 값을 가려버린다는 건데 ...

이 두가지 문제를 해결할 수 있는 방법이 있었고 의외로 간단했다 !ㅇ!

🔥 문제 해결

Peer

peer는 바로 뒤 형제 요소에 Css를 입힐 때 사용한다. 셀렉터에서 ~의 역할이다.

peer를 사용함으로써 label이 Input에 일어난 event를 감지하고 그에 맞는 스타일을 입혀주는 것이다!!

나는 peer-focus 와 peer-valid를 이용해 스타일을 주었다.

peer-focus : peer 요소가 focus 되었을때 스타일을 지정

peer-valid : peer 요소에 값이 있을때 스타일을 지정

그리고 많은 css때메 값을 넣기도 불편하고 다른곳에서 Input을 만들때도 불편하여 css를 따로 빼주고 다른곳에서도 사용할수 있게 export 해주었다.

❗️참고로 input 에 꼭 required 속성이 있어야지 동작함

import React from "react";
import Button from "../Button/Button";
import { FcGoogle } from "react-icons/fc";
import { googleLogin } from "../../api/firebase";

export const INPUT_CSS = `border border-gray-600 w-full rounded-[4px] h-14 pt-4 pl-3 mb-1 peer transition
         `;
export const LABEL_CSS = `text-md absolute font-gray-600 transition ease-in-out left-3 top-4
         peer-focus:-translate-x-2 peer-focus:scale-75 peer-focus:-translate-y-3  peer-valid:scale-75 peer-valid:-translate-x-2 peer-valid:-translate-y-3`;

const LoginInput = () => {
  const handleLogin = () => {};
  const handleGoogleLogin = (e: React.MouseEvent) => {
    e.preventDefault();
    googleLogin();
  };

  return (
    
      
        
        
          이메일
        
      
      
        
        
          비밀번호

Tailwind peer-[] 공식문서 https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-sibling-state

덕분에 코드가 줄어들고 가독성도 해결되서 속이 너무 시원하다 😿 (Tailwind 최고！) 근데 그냥 Input Component 만들면 더 간결해질텐데 나중에 리팩토링해야겠당

React 로 만드는 음악 커뮤니티 사이트 #3 (Firebase로 회원가입 구현)

Tue, 02 May 2023 00:59:18 GMT

Firebase 셋업을 완료하고 이번에 Firebase 회원가입 기능을 구현 해 보려한다.

이메일로 회원가입 하는 기능을 만들기 전에 회원가입 페이지를 간단하게 구현 하였다.

구현 내용

사용자가 form에 이름 , 이메일 ,비밀번호를 입력한다.
비밀번호가 일치한지 확인한다. (일치하지 않는다면 오류메세지 출력)
회원가입 버튼을 누르면 firebase 에 createUserWithEmailAndPassword 로 이름 , 이메일 ,비밀번호 값을 전달한다.
createUserWithEmailAndPassword 에서 값을 받아서 fireabase/auth 에서 유효성 검사를 실행한 후 , 오류가 있다면 그에 맞는 오류메세지를 출력하고 정상적으로 완료 된다면 회원가입 진행후 displayName 에 이름 값을 추가 한 뒤 완료 메세지를 출력한다.

회원가입 폼 만들기

src/pages/Signup.tsx


import React, { useState } from "react";
import Button from "../components/Button/Button";
import { signup } from "../api/firebase";
import { toast } from "react-hot-toast";

const SignIn = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [rePassword, setRePassword] = useState("");

  return (
    
      회원가입
      
        
          이름
        
         {
            setName(e.target.value);
          }}
          onBlur={handleNameBlur}
          onFocus={handleNameFocus}
          value={name}
          type="text"
          id="name"
          name="name"
          className={`border border-gray-600 w-full rounded-[4px] h-14 pt-4 pl-3 mb-2`}
        />
      
      
        
          이메일
        
         {
            setEmail(e.target.value);
          }}
          onBlur={handleEmailBlur}
          onFocus={handleEmailFocus}
          value={email}
          type="text"
          id="email"
          name="email"
          className={`border border-gray-600 w-full rounded-[4px] h-14 pt-4 pl-3 mb-1`}
        />
      
      
        
          비밀번호
        
         {
            setPassword(e.target.value);
          }}
          onBlur={handlePwBlur}
          onFocus={handlePwFocus}
          value={password}
          type="password"
          id="pw"
          name="pw"
          className={`border border-gray-600 w-full rounded-[4px] h-14 pt-4 pl-3 mb-2`}
        />
      
      
        
          비밀번호 확인
        
         {
            setRePassword(e.target.value);
          }}
          onBlur={handleRePwBlur}
          onFocus={handleRePwFocus}
          value={rePassword}
          type="password"
          id="re_pw"
          name="re_pw"
          className={`border border-gray-600 w-full rounded-[4px] h-14 pt-4 pl-3 mb-2`}
        />

Button 에 onClick 이벤트를 추가해준다.

비밀번호가 일치하지 않는다면 error 메세지를 출력한다.
비밀번호가 일치한다면 ../api/firebase 에 있는 signup 함수를 실행하고 value 값을 초기화 시켜준다.

회원가입 구현

../api/firebase

import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, GoogleAuthProvider, createUserWithEmailAndPassword, updateProfile } from "firebase/auth";
import { toast } from "react-hot-toast";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DB_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth();
const provider = new GoogleAuthProvider();

***
생략
***


//Email 회원가입
export const signup = async (name: string, email: string, password: string) => {
  await createUserWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      const user = userCredential.user;
      updateProfile(user, { displayName: name }); // 가입한 유저 정보에 이름을 저장한다.
      // console.log(user);
      toast.success("회원가입이 완료 되었습니다.");
    })
    .catch((error) => {
      const errorCode = error.code;

      switch (errorCode) {
        case "auth/weak-password":
          toast.error("비밀번호는 6자리 이상이어야 합니다.");
          break;
        case "auth/invalid-email":
          toast.error("잘못된 이메일 형식입니다.");
          break;
        case "auth/email-already-in-use":
          toast.error("이미 사용중인 이메일 입니다.");
          break;
      }
    });
};

위에 보이듯이 props 값으로 name , email, password 를 받아오고 회원가입이 성공적으로 완료 된다면 displayName 에 name 값을 넣어준다. 그 후에 성공 메세지를 출력해준다.

공식문서 https://firebase.google.com/docs/auth/web/password-auth?hl=ko 사용자 프로필 업데이트 https://firebase.google.com/docs/auth/web/manage-users?hl=ko

만약 오류가 발생한다면,

밑에 보이는 사진 처럼 오류 메세지를 전송해주고,

회원가입이 성공적으로 완료된다면,

회원가입이 완료 되었다는 메세지가 출력된다.

Fireabase 에 사용자 정보가 잘 등록 된 모습을 볼 수 있다.

🔥 오류 사항

입력 폼 CSS 에 문제가 있다는 것을 발견했다!! 원래는 Focus 값에 대해서만 생각해서 Css값을 줬는데 , Input에 값이 있어도 Focus가 아웃되면 blur 함수가 실행되면서 value 값을 가려버린다. input 에 대한 css 로직을 다시 구상해야 할 것 같다.

🚀 다음 구현 내용

이제 이메일 회원가입과 Google계정으로 로그인 하는 것을 완료 했으니 firebase에 등록된 사용자 정보를 이용하여 로그인/로그아웃 기능을 구현 해 볼 것이다!

인풋 버튼 애니메이션

Sat, 22 Apr 2023 11:20:44 GMT

로그인 페이지를 만들 던 중 label을 placeholder 처럼 쓰면서 애니메이션을 주고 싶어 어떻게 할 지 생각하다 본게 밑에 보이는 애니메이션이다.

간단하게 설명하자면 input에 focus되면 label 글자가 왼쪽 위 방향으로 올라가고 인풋이 아닌 다른 부분을 클릭하면 다시돌아와서 사용자가 글자를 입력하는 곳에 방해를 주지 않게 해주는 것 이다. label을 placeholder 처럼 사용하는 가장 멋진 일 이라고 생각해서 한 번 구현해 보기로 하였다.

💫 생각한 구조

input 요소에 onFocus 와 onBlur 이벤트를 준다.

isFocus 라는 State 를 만들어서 초기값을 false로 지정한다.

handleFocus 와 handleBlur 함수를 만들어 포커스와 블러가 될 때 state 값을 toggle 하게 만들어준다.

Tailwind 를 사용하였으므로 className 값에 삼항연산자를 사용하여 isFocus가 true,false 일때의 스타일을 다르게 지정해준다.

❗️문제

구현을 완료했는데 한가지 문제 사항이 생겼다. 두개의 input에 같은 함수를 사용하였기 때문에 Email 인풋을 포커스 할 때도 2개의 인풋이 전부 애니메이션 되고 Password 인풋을 포커스 할 때도 2개의 인풋이 전부 애니메이션 된다는 것이였다!!😿

🔥해결

어떻게 해야할 지 고민하다가 ref를 사용해서 input element를 따로 선택 해 줘서 함수에 입력해줄까 했는데 생각대로 잘 되지 않았었다. (Typescript도 처음이라 ref문에서 자꾸 오류가 났다😭)

그래서 결국 밑에 보이는 코드와 같이 Email 인풋의 Focus , Blur 함수를 따로만들고 Password 인풋의 Focus,Blur를 따로 만들었다.

  const handleEmailFocus = () => {
    setIsFocus(!isFocus);
  };
  const handleEmailBlur = () => {
    setIsFocus(!isFocus);
  };
  const handlePwFocus = () => {
    setIsFocusPw(!isFocusPw);
  };
  const handlePwBlur = () => {
    setIsFocusPw(!isFocusPw);
  };

그리고 각각의 인풋에다가 함수들을 넣어줬다.

🧚‍♀️ 마지막으로

사실 지금 위에 함수를 보면 똑같은 기능을 하는 함수가 2개씩 따로따로 구성 되어있다. 이렇게 사용하는 방식은 좋지 않다고 생각한다. 그래서 나중에 이부분을 한번 생각해보고 고쳐볼 생각이다!!

이렇게 하는 방식보다 더 좋은 방식이 있다면 알려주세요 고수분들😿

React 로 만드는 음악 커뮤니티 사이트 #2 (Firebase로 로그인 셋업)

Thu, 20 Apr 2023 09:03:44 GMT

오늘은 회원정보와 게시물 관리 등을 위하여 Firebase를 이용한 인증 기능을 구현 해 볼 것이다.

Firebase 프로젝트 생성 및 로그인 설정

프로젝트 추가하기

firebase 콘솔로 이동하면 보이는 메인페이지다. 프로젝트 추가 버튼을 눌러서 새로운 프로젝트를 생성한다.

로그인 제공 방법 선택

프로젝트 관리 페이지에서 빌드 - Authentication 탭으로 들어가서 시작하기를 눌러준다.

본인은 이메일과 구글 로그인만 일단 구현 해 볼 것이기 때문에 두개만 선택 해 주었다.

Firebase 앱 생성하기

프로젝트 메인화면에서 앱을 추가해준다. 웹으로 만들거기 떄문에 Web을 선택해주면 된다.

앱이름을 누르고 작성하면 SDK가 추가된다.

SDK는 프로젝트 설정 -> 일반 에서 언제든지 확인 가능하다.

Firebase 앱 초기화

저는 firebase 기능만 담은 firebase.ts 파일을 생성하였습니다. ( src / api / firebase.ts ) firebase.ts에 SDK로 생성한 스크립트를 붙여넣어줍니다.

보안문제를 위해 SDK로 받은 키들을 .env에 저장하였다.

다음 게시물에서 로그인 기능을 구현 해 보도록 하겠다.

React 로 만드는 음악 커뮤니티 사이트 #1

Thu, 20 Apr 2023 08:40:05 GMT

이번에 React로 만드는 게시판 기능을 구현해보고 싶어 어떤 사이트를 만들까 고민하다가 그냥 커뮤니티 사이트보다 특정 타겟을 삼은 커뮤니티를 만들어보고 싶어서 내 원래 전공 이었던 음악하는 사람들을 위한 커뮤니티를 만들기로 했다. (음악하는 사람이 아니여도 음악을 좋아하는 사람들을 위한)

그리고 Typescript도 함께 공부하기 위해 Typescript 를 사용 할 거고 로그인이나 호스팅은 사용해 본 적이 있던 FIrebase 를 이용하기로 했다. 그리고 사용해 보지 않았던 다른 라이브러리들을 사용 해 볼 예정이다.

1.구성

React + Typescript
Firebase
Tailwindcss

2.구조

일단은 생각 해 본 게 가장 적합하다고 생각되는 게시판들이다.

Firebase 를 이용한 게시물 , 회원관리
음악 추천 게시판
아티스트 추천 게시판
자유게시판

앞으로 이사이트를 만들어 나가면서 내가 몰랐던 부분이나 지식들을 정리해 가면서 공부해볼 예정이다!

[React.js] useState 란 무엇인가?

Wed, 25 Jan 2023 06:14:47 GMT

useState 와 Hook

Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태값과 여러 React의 기능을 사용할 수 있게된다. -> Hook은 함수형 컴포넌트에 기능을 추가할 때 사용하는 함수, 함수형 컴포넌트에서 상태값을 사용할 수 있고 자식요소에 접근할 수 있음
useState 는 React의 훅 중 가장 기본적인 훅인다.

useState 란?

useState는 컴포넌트에서 state값을 추가할 때 사용된다. 함수형 컴포넌트에서는 클래스형 컴포넌트처럼 state를 사용할 수 없어, Hook을 사용해서 state와 같은 기능을 할 수 있도록 만들어준다.
하나의 useState 함수는 하나의 상태 값만 관리를 할 수 있어 만약에 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러번 사용해야한다.

사용법

1. Import 해오기

import React, { useState } from 'react';

2.useState 선언하기

const [state,setState] = useState(초기값);

const [state,setState]

useState()가 호출되면 배열을 반환하는데, 그 배열의 첫번째 원소는 상태값이고, 두번째 원소는 상태를 업데이트하는 함수이다. 이 함수에 파라미터를 넣어서 호출하게 되면 전달받은 파라미터로 값이 바뀌게 되고 컴포넌트는 정상적으로 리렌더링 된다.
setState

count값을 업데이트하는 함수. 클래스 컴포넌트에서의 this.setState는 이전 state와 새로운 state를 합치지만 얘는 이전값을 덮어쓴다.
useState(0)

숫자 0은 초기값을 의미. useState는 인자로 초기 state 설정값을 하나 받는다. 이 초기값은 첫 번째 렌더링 시에 딱 한 번 사용된다.

3.setState 를 사용해 상태값 변경하기

function Example() { 

const [count, setCount] = useState(0);         // "count"라는 새로운 상태 값을 정의

return (
     
         You clicked {count} times 
         
     ); 
}

[Javascript] 배열 메소드 정리

Fri, 20 Jan 2023 04:01:33 GMT

오늘은 배열에 관한 메소드 들을 정리 해봤다.

pop()

배열 뒷부분의 값을 삭제하는 메서드

var arr=[1,2,3,4];
arr.pop();
console.log(arr); // [1,2,3]





### push()
- 배열 뒷부분에 값을 삽입하는 메서드
```javascript
var arr=[1,2,3,4];
arr.push(5);
console.log(arr); // [1,2,3,4,5]

unshift()

배열 앞부분에 값을 삽입

var arr=[1,2,3,4];
arr.unshift(0);
console.log(arr); // [0,1,2,3,4]





### shift()
- 배열 앞부분에 값을 삭제
```javascript
var arr=[1,2,3,4];
arr.shift();
console.log(arr); // [2,3,4]

splice()

배열 특정위치에 요소를 추가하거나 삭제

splice( index , 제거할 요소 갯수 , 배열에 추가될 요소 )

var arr = [ 1, 2, 3, 4, 5, 6, 7 ];
arr.splice( 3, 2 );
console.log( arr ); // [ 1, 2, 3, 6, 7 ]   3번째 인덱스에서부터 2개 제거

var arr = [ 1, 2, 3, 4, 5, 6, 7 ]; arr.splice( 2, 1, "a", "b"); console.log( arr ); // [ 1, 2, "a", "b", 4, 5, 6, 7 ] 2번째 인덱스에서 1개 제거 후 "a"와 "b"를 추가





### slice()
- 배열의 startIndex부터 endIndex까지(endIndex는 불포함)에 대한 shallow copy를 새로운 배열 객체로 반환

```javascript
var arr = [ 1, 2, 3, 4, 5, 6, 7 ];
var newArr = arr.slice( 3, 6 );
console.log( 'slice',  newArr ); // [ 4, 5, 6 ]

concat()

다수의 배열을 합치고 합친 새로운 배열을 반환

var arr1 = [ 1, 2, 3 ];
var arr2 = [ 4, 5, 6 ];
var arr3 = arr1.concat( arr2 );
console.log( arr3 ); // [ 1, 2, 3, 4, 5, 6 ]

every()

배열의 모든 요소가 제공한 함수로 구현된 테스트를 통과하는지를 테스트

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {

  // value가 2의 배수이면 true를 반환한다.
  return value % 2 === 0;
};
console.log( arr.every( isEven ) ); // false  모든 요소가 true이면 true를 return 하고 그렇지 않으면 false

some()

지정된 함수의 결과가 true일 때까지 배열의 각 원소를 반복

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {

  // value가 2의 배수이면 true를 반환한다.
  return value % 2 === 0;
};
console.log( arr.some( isEven ) ); // true  하나라도 true이면 true를 return

forEach()

배열의 각 원소별로 지정된 함수를 실행한다.

var arr =[ 1, 2, 3 ];
arr.forEach( function( value ) {
  console.log( value );   // 1 2 3
});

map()

배열의 각 원소별로 지정된 함수를 실행한 결과로 구성된 새로운 배열을 반환한다.

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {
  return value % 2 === 0;
};
var newArr = arr.map( isEven );
console.log( newArr ); // [ false, true, false, true, false, true, false, true, false, true ]

filter()

지정된 함수의 결과 값을 true로 만드는 원소들로만 구성된 별도의 배열을 반환한다.

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {
  return value % 2 === 0;
};
var newArr = arr.filter( isEven );
console.log( newArr ); // [ 2, 4, 6, 8, 10 ]

reverse()

배열의 원소 순서를 반대로 바꾼다.

var arr =[ 1, 2, 3, 4 ];
arr.reverse();
console.log( arr ); // [ 4, 3, 2, 1 ]

toString()

배열을 문자열로 바꾸어 반환한다

var arr =[ 1, 2, 3, 4 ];
console.log( arr.toString() ); // 1, 2, 3, 4

valueOf()

toString과 비슷하지만 배열을 반환 (toString 은 문자열을 반환)

var arr =[ 1, 2, 3, 4 ];
console.log( arr.toString() ); // 1, 2, 3, 4

join()

배열 원소 전부를 하나의 문자열로 합친다.

var arr =[ 1, 2, 3, 4 ];
console.log( arr.join() );      // 1,2,3,4
console.log( arr.join( '-' ) ); // 1-2-3-4

sort()

배열을 정렬하기 위해 사용하는 함수

//오름차순 정렬
const arr = [2, 1, 3, 10];

arr.sort(function(a, b)  {
  return a - b;
});
document.writeln(arr + '
'); // [1, 2, 3, 10]

//내림차순 정렬
const arr = [2, 1, 3, 10];

arr.sort(function(a, b)  {
  return b - a;
});
document.writeln(arr + '
'); // [10, 3, 2, 1]

//객체 정렬
const arr = [
  {name: 'banana', price: 3000}, 
  {name: 'apple', price: 1000},
  {name: 'orange', price: 500}
];

arr.sort(function(a, b) {
  return a.price - b.price;
});

document.writeln(JSON.stringify(arr[0]) + '
');
document.writeln(JSON.stringify(arr[1]) + '
');
document.writeln(JSON.stringify(arr[2]) + '
');

[Vue] Vuetify 사용하기

Mon, 09 Jan 2023 03:32:02 GMT

Vuetify란 무엇인가?

뷰 자바스크립트 프레임워크에 머티리얼 디자인을 사용할 수 있는 컴포넌트 프레임워크
구글의 머티리얼 디자인 스펙 2를 충실하게 표현
현대 웹앱에 필요한 컴포넌트를 편리하게 사용

뷰티파이가 주목받는 4가지 특징

구글 머티리얼 스펙의 충실한 지원
80개 이상의 시맨틱 머티리얼 디자인 컴포넌트
빠른속도
쉬운 학습 곡선
vuetify 참고 사이트

https://vuetifyjs.com/

Vuetify 시작하기

CDN으로 시작하기




  
  
  
  


  
    
      
        Hello world

위 템플릿은 html 문서에 붙혀넣기 해주면 기본 세팅 완성

템플릿은 vuetify.com 에서 제공함

npm으로 시작하기

1. vue CLI로 프로젝트를 설정한다.

create vue [프로젝트 명]

2. 초기 프로젝트를 구성한 뒤 , vuetify를 vue-cli로 설치

vue add vuetify

3. vuetify.com 홈페이지에서 필요한 기능들을 찾아서 사용하기 !

예제 - 기본3단 레이아웃 만들기



  
    
    
    
    
  
  
    
      
        
        
          
          마스터 페이지
          
          
          
            mdi-dots-vertical
          
        

        
        
          
            안녕하세요
            마스터 페이지 입니다.
            
            안녕하세요
            마스터 페이지 입니다.
          
        

        
        
          Copyright ©

예제 2 - 카드 UI 만들기



  
    
    
    
    
  
  
    
      
        
          
            
            
              
              

              
              
                
                  카드 UI
                  카드 디자인에 출력될 텍스트를 입력합니다.
                
              

              
              
                확인
                취소
                취소

[Vue] Vue-cli 설치와 프로젝트 생성

Fri, 06 Jan 2023 09:46:39 GMT

Vue-cli 시작하기

Vue-cli(Command Line Interface)

vue 개발환경을 설정해는 명령어 실행 도구
기본적인 프로젝트 구조 세팅으로 디렉토리 구조 및 webpack 등 설정

Vue-cli 설치

-기본적으로 Node.js 및 npm이 설치 되어있어야 한다.

#global 설치
npm install -g @vue/cli

#버전확인
vue --version

npm install -g @vue/cli 는 컴퓨터 환경 전역에 vue cli를 설치하는 것입니다.

Vue 프로젝트 생성

1. 프로젝트를 만든 폴더를 생성후 터미널에서 경로 설정

2.터미널에서 커맨드 입력

vue create [프로젝트 명]

vue create .   <-- create . 을하면 현재 선택된 디렉토리에 프로젝트가 생성됨

vue create . 을 했을때 나오는 문장 // 현재 디렉토리에 프로젝트를 만들 것 인지 묻는다.

y 를 입력하면 Vue3 , Vue2 버전중 선택할 수 있도록 창이 나옴

선택 후 엔터를 누르면 프로젝트 파일이 자동으로 생성됨

만들어진 프로젝트

3.서버 작동시키기

터미널을 열고 (vscode 단축키 command+j ) 밑에 있는 코드를 작성해준다.

npm run serve

⚠️ 꼭 선택된 폴더가 만들어진 프로젝트 폴더 이어야 한다.

이렇게 개발환경 서버를 만들어주는데 네모 박스친 부분에 option + 마우스클릭을 하면 페이지를 열어준다.

이렇게 npm을 이용한 vue 프로젝트 개발환경세팅에 대해 알아보았다. 이제 우리는 vue.js 를 사용할 준비가 완료 된 것이다!!!

[Vue] Vue.js 시작하기

Fri, 06 Jan 2023 07:19:51 GMT

Vue란 무엇인가 ?

프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크
MVVM패턴의 ViewModel에 해당하여, UI코드와 데이터제어 제어 로직을 분리
SPA(Single Page Application)를 구축하는데 이용 가능

View(html DOM): 사용자에게 보이는 화면.
Model(JS): 데이터를 담는 용기, 보통 서버에서 가져온 데이터를 javascript 객체로 저장
ViewModel: View와 Model의 중간 영역으로 DomListener와 DataBinding을 제공하는 영역
DOM: HTML 문서에 들어가는 요소(tag, class, attribute 등)의 정보를 담고 있는 데이터 트리
DOM Listener: DOM의 변경에 대한 즉각적으로 반응하여 특정 로직을 수행하는 장치
Data Binding: View에 표시되는 내용과 모델의 데이터를 동기화 Vue에서는 기본적으로 단방향 데이터바인딩으로 컴포넌트간 통신은 상위 컴포넌트->하위컴포넌트로 전달

Vue의 장점

배우기 쉽다
React, Angular에 비해 가볍고 성능이 빠름
React(Virtual DOM), Angular(데이터 바인딩)의 장점을 취했음
컴포넌트 기반 프레임워크로 레고 블록과 같이 컴포넌트 조합으로 뷰 구성, 코드 재사용 쉬움

Virtual DOM 이란
화면에 변화가 있을 때마다 실시간으로 DOM Tree 를 수정하지 않고 변경사항이 반영된 Virtual DOM을 이용해 메모리에서 처리하고 한 번만 DOM 수정을 한다. 결과적으로 브라우저는 한번만 렌더링을 하게 됨으로써 불필요한 렌더링 횟수를 줄여 렌더링 성능을 높인다

다음시간에는 Vue-cli 설치와 프로젝트 생성을 알아보도록 하겠다.

si_do.log

React 로 만드는 음악 커뮤니티 사이트 #4 (Firebase로 로그인 / 로그아웃 구현)

구현 내용

1. context 만들기

2.Provider

3. index.tsx 에 provider 씌우기

4.firebase.ts 에 Email로 로그인 하기 추가

5. logout 구현

6.firebase 로그인 상태 감지

useNavigate 로 메인페이지로 이동

Input Animation (Label 을 Placeholder 처럼 사용하기)

로그인과 회원가입 인풋에 들어갈 애니메이션의 최종 버전이다.

🔥 문제

🔥 문제 해결

Peer

React 로 만드는 음악 커뮤니티 사이트 #3 (Firebase로 회원가입 구현)

구현 내용

회원가입 폼 만들기

회원가입

회원가입 구현

만약 오류가 발생한다면,

회원가입이 성공적으로 완료된다면,

🔥 오류 사항

🚀 다음 구현 내용

인풋 버튼 애니메이션

💫 생각한 구조

❗️문제

🔥해결

🧚‍♀️ 마지막으로

React 로 만드는 음악 커뮤니티 사이트 #2 (Firebase로 로그인 셋업)

Firebase 프로젝트 생성 및 로그인 설정

프로젝트 추가하기

로그인 제공 방법 선택

Firebase 앱 생성하기

Firebase 앱 초기화

React 로 만드는 음악 커뮤니티 사이트 #1

1.구성

2.구조

[React.js] useState 란 무엇인가?

useState 와 Hook

useState 란?

사용법

1. Import 해오기

2.useState 선언하기

3.setState 를 사용해 상태값 변경하기

[Javascript] 배열 메소드 정리

pop()

unshift()

splice()

concat()

every()

some()

forEach()

map()

filter()

reverse()

toString()

valueOf()

join()

sort()

[Vue] Vuetify 사용하기

Vuetify란 무엇인가?

뷰티파이가 주목받는 4가지 특징

vuetify 참고 사이트

Vuetify 시작하기

CDN으로 시작하기

npm으로 시작하기

1. vue CLI로 프로젝트를 설정한다.

2. 초기 프로젝트를 구성한 뒤 , vuetify를 vue-cli로 설치

3. vuetify.com 홈페이지에서 필요한 기능들을 찾아서 사용하기 !

예제 - 기본3단 레이아웃 만들기

안녕하세요

안녕하세요

예제 2 - 카드 UI 만들기

카드 UI

[Vue] Vue-cli 설치와 프로젝트 생성

Vue-cli 시작하기

Vue-cli(Command Line Interface)

Vue-cli 설치

Vue 프로젝트 생성