본문 바로가기

모카 스터디

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와 페이스북의 버전을 기재 한다 ! 로그인 여부 확인 왼쪽의 어려운 코드를 이해하고 보기 쉽게 오른쪽으로 변경 로그.. 더보기
OAuth [생활코딩] 역활 등록 사용자의 아이디와 비밀번호가 아닌 우리 서비스 자체의 아이디와 비밀번호이다 ! 클라이언트 아이디 클라이언트 시크릿 authorized redirect URIs 이 세개가 공통적으로 필요하다. 아이디는 외부에 노출되어도 되지만 시크릿은 절대로 외부에 노출이되면 안된다. resource서버가 authorized code를 보내주는데 그걸 authorized redirect URIs로 보내달라고 요청한다. 위와 같은 과정으로 필요한 클라이언트 아이디 클라이언트 시크릿 authorized redirect URIs 3가지를 얻을 수 있다. Resource Owner의 승인 클라가 저 세가지 소셜 로그인 화면을 보여주어야 하며 그 화면을 누르면 각각에 맞는 클라 아이디와 스코프 리다이렉트 url를 누른.. 더보기
PHP [생활코딩] 추후 필요 시 공부 후 포스팅 코스 소개 사람이 웹페이지를 하나하나 직접 만드는것에 지침 ==> 통합적을 관리하는 것에 대한 필요성을 느낌 또한 웹사이트의 소유자만이 컨텐츠를 관리(수정,생상,제거)를 할 수 있었다. 그래서 HTML 작성을 기계에게 맞기고 싶다는 생각을 하게 되었고 왼쪽과 같은 기술들이 생겨나게 되었다. 즉, 웹사이트가 자동으로 컨텐츠를 HTML로 만든다. ! ==> 하나의 파일로 여러개의 페이지를 관리할 수 있다. PHP의 설치 주로 비트나미를 사용하여 웹서버를 설치한다. (appache,mysql,php) php는 혼자서 돌아가는 프로그램이 아니라 appache라는 프로그램에 기생해서 동작한다. PHP의 원리 PHP의 기초 PHP의 URL파라미터 PHP함수 PHP 제어문과 조건문 PHP 반복문과 배열 PHP 함수 .. 더보기
노드 [생활코딩] 코스 소개 사람이 웹페이지를 하나하나 직접 만드는것에 지침 ==> 통합적을 관리하는 것에 대한 필요성을 느낌 또한 웹사이트의 소유자만이 컨텐츠를 관리(수정,생상,제거)를 할 수 있었다. + 사용자에게 전송할 데이터를 생성 한다. 그래서 HTML 작성을 기계에게 맞기고 싶다는 생각을 하게 되었고 왼쪽과 같은 기술들이 생겨나게 되었다. 즉, 웹사이트가 자동으로 컨텐츠를 HTML로 만든다. ! URL 동기와 비동기 노드는 비동기 처리를 하는데 아주 유용한 도구가 있다. call back 다른 함수에 전달되어 나중에 호출되는 함수 HTML - Form post방식으로하면 쿼리스트링을 url에 노출 안시키고 접근 가능 JavaScipt - 객체 둘다 정보를 정리하는 수납 상자와 같다. 배열은 순서대로 정리를 하.. 더보기
리액트 [생활코딩] 코스소개 위의 코드보다 훨씬 복잡한 코드의 경우 로직이 복잡해 지면 드는 생각이 태그를 간단하게 비슷한 부류끼리 묶는 다는 생각이 든다. 그리고 그걸 바로 리액트가 가능하게 해준다. 바로 아래와 같이 말이다. 리액트의 주요 기능은 사용자 정의 태그를 만드는 것이다. 사용자 정의 태그는 부품으로 사용된다. 리액트는 크게 클래스 방식과 함수 방식이 나눠지는데 최근은 함수 방식으로 주로 하기 때문에 함수 방식으로 공부를 해보자. 소스 코드 수정 방법 처음 리액트가 가동되면 index.js 파일을 찾고 거기서 부터 시작한다. app 태그는 ./App이라는 파일에서 부터 왔다. 왼쪽 코드가 오른쪽 페이지를 나타내고 있다. 또한 app.css에 관련 css문법이 적혀 있으면서 적용이 된다. index.js에서 랜더.. 더보기
jQuery [리액트와의 비교] jQuery는 JavaScript를 기반으로 한 빠르고 간편한 웹 개발을 위한 오픈 소스 JavaScript 라이브러리이다. JQuery는 웹 페이지 상호작용, HTML 문서 탐색, 애니메이션, 이벤트 처리 등을 단순화하고 쉽게 구현하도록 도와준다. jQuery를 사용하면 일반적으로 반복적이고 복잡한 JavaScript 코드를 짧게 줄일 수 있으며, 브라우저 간의 호환성 문제를 해결하는 데 도움이 됩니다. 또한 HTML 문서의 요소를 선택하고 조작하거나, 이벤트를 처리하고 애니메이션 효과를 적용하는 등의 작업을 쉽게 수행할 수 있습니다. jQuery의 주요 특징은 다음과 같다. 선택자 (Selectors): CSS 선택자를 사용하여 HTML 문서의 요소를 쉽게 선택할 수 있습니다. 예를 들어, $('di.. 더보기
Ajax [생활코딩] Ajax는 "Asynchronous JavaScript and XML"의 약자로, 웹 애플리케이션에서 비동기적으로 데이터를 교환하기 위한 기술 Ajax를 사용하면 웹 페이지의 새로고침 없이도 서버와 데이터를 주고받을 수 있으며, 동적인 웹 콘텐츠를 구현하는 데 매우 유용 코스 소개 및 목적 웹페이지의 정보를 구분적으 운영을 하고 싶어짐 한 단어 한단어 필 때마다 추천 검색어가 달라진다. 그때 그떄 서버와의 통신이 이루어 진다. 즉, 모든 페이지가 아닌 원하는 부분만 다운을 받아 정보를 얻어올 수 있다. ajax로 부터 동적으로 데이터를 불러 오기 !1 fetch API 서버에게 css라는 파일을 요구하고 응답이 끝나면 alert가 실행되면서 서버가 응답한 데이터가 text에 저장된다. 원리를 모르고 사용.. 더보기

티스토리툴바