Web

네이버 로그인 구현하기 (네아로 api/ javascript )

네이버 로그인 api를 이용하면 간단하게 네이버 아이디 연동 가입,로그인이 가능합니다. 모든 정보를 새롭게 입력하지 않아도 되므로 신규 유저의 손쉬운 가입을 유도할 수 있습니다. 네이버 api를 사용하여 웹페이지에서 로그인 연동 방법을 알아보겠습니다. 네이버 API 문서의 튜토리얼은 API version 1.0.3을 사용하는데요, 이 글에선 가장 최근 업데이트된 2.0.2 버전을 사용합니다. 전체 코드는 하단에 있습니다. Naver Developers 애플리케이션 등록 네이버 디벨로퍼 홈페이지 - Application - 애플리케이션 등록 으로 이동합니다. 애플리케이션 이름을 작성해 주고 사용 API는 네아로를 선택합니다. 가입시에 회원에게 받을 정보들을 선택합니다. 로그인 오픈 API 서비스 환경 환경..

[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를 사용할 필요가 없기 때문에 간편합니다. 영상 파일을 직접 갖고 있다면 유용할듯합니다.