Web

[firebase] 웹 로그인 구현하기 (email,google) -2

Email 회원 가입, 로그인 기능 구현 구현할 앱 프로젝트 구조 UI 간단한 로그인 UI가 제공되며 로그인 성공시 로그인한 이메일과 uid를 보여줍니다. 이메일과 패스워드를 작성한 후 각각의 버튼을 누르면 로그인과 회원가입을 합니다. 로그인에 성공하면 고유한 uid와 로그인한 email을 보여줍니다. Email 로그인, 가입 구현 직접 email과 password를 입력해서 회원가입과 로그인하는 방법을 알아보겠습니다. 로그인 기능을 위한 라이브러리를 import 해줍니다. //firebase.js import { initializeApp } from "https://www.gstatic.com/firebasejs/9.2.0/firebase-app.js"; import { getAuth,// authen..

[firebase] 웹 로그인 구현하기 (email,google) -1

firebase를 이용하면 별도의 서버 구현 없이 쉽게 db, 사용자 계정 기능 등을 구현할 수 있습니다. 직접 서버를 구현하여 로그인 기능을 구현한다면 손이 꽤 많이 가는 유효성 검증 및 보안부분을 신경쓰지 않고 간편하게 서비스 구축이 가능합니다. 직접 email,password를 입력하여 로그인 하는 방법과 google계정으로 로그인하는 방법을 알아보겠습니다. Firebase 프로젝트 생성 및 로그인 설정 프로젝트 추가 firebase console로 이동하면 보이는 메인페이지입니다. 프로젝트 추가 버튼을 눌러 새로운 프로젝트를 생성합니다. 프로젝트 이름을 작성해주고 계속을 클릭합니다. 애널리틱스를 사용하지 않으므로 체크는 해제하고 프로젝트를 생성해줍니다. 새 프로젝트가 생성되고 계속 버튼을 누르면 ..

인프런 알고리즘 강의 mac에서 채점하기

https://www.inflearn.com/course/%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98/ it 취업을 위한 알고리즘 문제풀이 (with C/C++) : 코딩테스트 대비 - 인프런 | 강의 알고리즘과 자료구조를 이용해 문제해결력을 기르는게 주 목적입니다., 문제를 풀면서 자료구조와 알고리즘 기초·중급 개념을 확실히 잡고 다양한 문제를 통해 어떤 문제도 해결할 수 있는 문 www.inflearn.com 인프런에서 알고리즘 문제풀이 강의를 수강중인데 mac os는 채점파일이 제공되지 않아서 간단하게 작성해본 쉘 스크립트입니다. 방법 1. 쉘 스크립트 생성 2. 채점 파일 등록 3. 메인 코드 수정 4. 실행 5. 결과 확인하는 법 + 실행 시간 1. 쉘 스크립트 생성 작성한..

리액트에서 font awsome 아이콘 사용법

설치 및 사용법 1. npm으로 font awsome 패치지들을 설치해 줍니다. $ npm i @fortawesome/fontawesome-svg-core npm install @fortawesome/free-solid-svg-icons npm install @fortawesome/react-fontawesome 2. 원하는 아이콘의 스타일을 설치 해 줍니다. 어떤 스타일을 설치해야 하는지 모르겠으면 아래에 기술한 내용을 봐주세요. $ npm install --save @fortawesome/free-brands-svg-icons 3. 사용하고자 하는 리액트 컴포넌트에서 import해주면 끝! import { FontAwesomeIcon } from '@fortawesome/react-fontawesom..

[JS] 3. Custom Video Player

프로젝트 설명 html5의 비디오를 이용하여 custom player를 제작합니다. 영상을 재생하면 재생 아이콘이 일시정지 아이콘으로 바뀌고, 일시정지시에는 재생 아이콘을 보여줍니다. 영상의 진행 시간을 실시간으로 보여주며, 진행 바에서 원하는 지점 클릭시 이동이 가능합니다. 기억하고 싶은 내용 영상을 사용할 때 유튜브 비디오를 임베디드해야만 한다고 생각 했는데, html5 내장 api가 생각보다 잘 구현되어 있단걸 알았습니다. 컨트롤을 하나 하나 조절 할 수 있고 외부 api를 사용할 필요가 없기 때문에 간편합니다. 영상 파일을 직접 갖고 있다면 유용할듯합니다.

[JS] 2. Movie Seat Booking

프로젝트 설명 간단한 영화관 좌석 선택 기능 구현입니다. 영화관 좌석 배치표를 보여주며 선택 가능한 좌석을 클릭하면 해당 좌석을 강조해줍니다. 좌석표 아래에는 몇 개의 좌석을 선택했는지와 총 영화표 값을 보여줍니다. 기억하고싶은 내용 CSS nth-of-type .seat:nth-of-type(2) { margin-right: 18px; } .seat:nth-last-of-type(2) { margin-left: 18px; } 왼쪽, 오른쪽은 두열씩 배치됨을 보여주기 위해 사용한 css문법입니다. 좌석은 각 행에 8좌석씩 존재합니다. 양쪽 두 좌석 사이에 길이 있기 때문에 떨어트려 보여줍니다. 해당 css가 적용되지 않는다면 이렇게 좌석들이 붙어있게 됩니다. 만약 제가 이것을 예제처럼 구현한다면 flex..