모카 스터디/웹 지식 썸네일형 리스트형 The Movie DB API Key The Movie DB API Key 생성하기 https://www.themoviedb.org/ The Movie Database (TMDB) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 회원가입 및 로그인 나의 계정 설정에서 api key 확인 The Movie DB API 요청을 위한 Axios 인스턴스 생성 및 요청 보내기 npm install axios --save api 환경변수 등록 및 axios 인스턴스화 및 사용할 url 더보기 YouTube API Key 획득 및 사용법 유튜브 api 공식 홈페이지로 이동하기 https://developers.google.com/youtube/v3 YouTube Data API | Google for Developers 동영상 업로드, 재생목록 만들기 및 관리 등의 YouTube 기능을 애플리케이션에 추가합니다. developers.google.com Developer Console's 클릭 프로젝트 만들기 약 30초 소요 생성된 대시보드로 들어가기 우측 상단에 있는 버튼 눌러 권한 생성 위와 같은 순서로 진행하면 API key 를 얻을 수 있다. 절 때 외부로 노출 시키지 안도록 하자 ! API 사용법 상단의 reference를 누르면 여러 사용 가능한api를 활용할 수 있다. list로 들어가면 여러 사용 정보에 대해 적혀 있어 그것.. 더보기 프론트엔드 CORS 개념 정리 https://www.youtube.com/watch?v=bW31xiNB8Nc&ab_channel=%EC%96%84%ED%8C%8D%ED%95%9C%EC%BD%94%EB%94%A9%EC%82%AC%EC%A0%84 얄박한 코딩사전 채널을 토대로 정리 프론트 개발을 하던 중 만들고 있는 웹사이트에서 외부 API에서 정보를 받아 오려고 할때 주로 발생한다. 즉, 한 사이트에서 주소가 다른 서버로 요청을 보낼 때 발생 Postman이나 다른 익스텐션 어플로 테스트를 하면 이상이 없지만 웹사이트(브라우저)에서의 요청에서는 CORS 에러가 나온다. 해당 하는 서버에서 요청을 막는 것이 아니라 브라우저(크롬) 쪽에서 연결을 막는 것이다. 주로 브라우저에서 접속하는 사이트 들은 당연하게도 되부 사이트여서 의심을 하는.. 더보기 세션, 쿠키, JWT 토큰 및 인증(Authentication)과 인가(Authorization) 개념 정리 로그인기능을 구현한는 것도 어렵지만 무엇보다 로그인 상태를 '유지'하는거도 만만치 않게 어려운 일이다. 예로 들어 naver에 로그인을 했을 때 메일함을 들어가고 나올때, 보낸 메일함과 받은 메일함을 들어갔다 나올때 마다 로그인을 다시 하면 사용자들은 상당히 불편할 것이다. 그래서 서버에서 현재 사용자가 로그인을 했는지 안했는지를 알수 있어야 로그인 상태가 유지가 된다. 인증(Authentication). : 로그인 ==> 내가 이 사이트에 가입된 회원임을 즉, 특정 서비스에 일정 권한이 주어진 사용자임을 아이디랑 비밀번호를 통해서 인증을 받는것 인가(Authorization) ==> 한번 인증을 받은 사용자가 이후 서비스의 여러기능을 사용할 때 매번 로그인 되어있음을 알아보고 허가 해주는것. 예) sn.. 더보기 백엔드 로드맵 로드맵 개요 인터넷과 HTTP 인터넷은 서로 정보를 주고받을 수 있도록 한 거대한 네트워크이다. 네트워크 : 여러대의 컴퓨터가 서로 통신을 한다. 라우터를 활용한 네트워크의 확장 웹소켓 버전 컨트롤 git : 분상형 버전 관리 시스템 Git Hub : 깃 기반의 호스팅 서비스 GitAction : 코드 저장소에 어떤 이벤트가 일어날때 특정 작업이 일어나게 하거나 주기적으로 어떤 작업들을 반복시켜서 실행하고 싶은 경우에 사용 개발언어 Java : 정적 타입에 JVM위에서 돌아간다. Javacript /Typescript : 웹기반 언어이지만 요즘은 서버에서도 돌아간다. Python : 데이터표현법(JSON,YAML) json(java script object notation) : 데이터 표현법 yaml .. 더보기 리눅스 & 서버 [생활코딩] 디렉토리와 파일 1. 명령어를 통해서 조작한다. (CUI) 2. 아이콘으로 조작한다. (GUI) 내가 내리는 명령은 현재 내가 있는 디렉토리를 기준으로 명렁을 받아 들인다. ==> pwd / 최상위(루트) 디렉토리 ex) cd /home/ubuntu 절대경로 (/로 부터 시작한다) .. 부모 디렉토리 ex) cd .. 상태경로 리눅스 명렁어 기초 sudo : super user do 즉, 슈퍼 유저가 하는 일 권한이 있어야만 설치를 할 수 다. 파일 편집에는 nano나 vi 를 통해 할 수 있다. 초급자는 nano 중 상급자는 vi를 주로 사용한다. 패키지 매니저 앱 스토어와 같이 필요한 프로그램을 설치해주는게 리눅스에서는 패키지 매니저 이다. ex) apt, yum apt 서버에 접속해서 최신 다운.. 더보기 google 로그인 [생활코딩] NO backend 회원 정보를 직접 가지고 있는 것 보다 거대기업들에 이미 저장되어 있는 회원정보를 가져오는 것을 선호 한다. 구글에 클라이언트로서 등록 구글 api console 검색 후 프로젝트 생성 credentials로 글어가서 OAuth consent screen에 들어가서 설정. 이후 공식문서를 보고 진행하여 클라이언트 아이디와 클라이언트 비밀번호를 발그 받는다. 로그인 구현 구글 플랫폼 라이브러리 스크립트(인증과 관련된 복잡한 코드) 추가 및 클라이언트 아이디 입력 로그인 버튼 추가 sign in 버튼을 누르면 구글로 로그인이 진행 된다. 그리고 시간이 지나면 왼쪽과 같이 singed in 버튼으로 바뀐다. 더보기 facebook 로그인 [생활코딩] NO backend 인증과정과 Access token password 대신 access token을 발급 받아 인증을 한다. 페이스북 앱 등록 나의 웹사이트 url을 적어준다. 그리고 쭉 공식 문서를 보며 진행을 하여 클라이언트의 아이디와 비밀번호를 발급 받는다 ! 사용자의 아이디와 비밀번호가 아닌 우리 서비스 자체의 아이디와 비밀번호이다 ! 페이스북 로그인 구현 계획 sdk ( software developer kit)를 사용해서 페이스북에서 제공한 api을 손쉽게 다룰 수 있다. SDK의 설치과 설정 1. 페이스북의 sdk를 다운받아 가져오는 코드이다. 2.sdk에 대한 설정을 하는 코드설정 클라의 id와 페이스북의 버전을 기재 한다 ! 로그인 여부 확인 왼쪽의 어려운 코드를 이해하고 보기 쉽게 오른쪽으로 변경 로그.. 더보기 이전 1 2 3 다음
