ImgGG 완성 후 결과

이미지

OAuth2

이미지
  OAuth2 (Open Authorization, Open Authentication 2)   인증을 위한 표준 프로토콜 Authorization Server를 통해 회원 정보를 인증하고 Access Token을 발급을 받아 Access Token을 이용해 타사의  API 서비스를 사용이 가능하게 만들어 주는 기능이다. 다른 블로그에서 좋은 페이스북 예제가 있어서 가지고 와보왔다 1. 사용자(Resource Owner)가 서버에게 로그인을 요청합니다. 2. 서버는 사용자에게 특정 쿼리들을 붙인 페이스북 로그인 URL을 사용자에게 보냅니다. 3. 사용자는 해당 URL로 접근하여 로그인을 진행한 후 권한증서(code)를 담아 서버에게 보냅니다. 4. 서버는 해당 권한 증서를 Facebook의 Authorization Server로 요청합니다. 5. 서버는 권한 증서를 확인 후, Access Token, Refresh Token, 유저의 정보(고유 id 포함) 등을 돌려줍니다. 6. 받은 고유 id를 key값으로 해서 DB에 유저가 있다면 로그인, 없다면 회원가입을 진행합니다. 7. 로그인이 완료되었다면 세션/쿠키 , 토큰기반 인증 방식을 통해 사용자의 인증을 처리합니다. 여기서 OAuth와 OAuth2의 달라진 점은 기능의 단순화, 기능과 규모의 확장성 등을 지원하기 위해 만들어 졌다 1.0a는 만들어진 다음 표준이 된 반면 2.0은 처음부터 표준 프로세스로 만들어짐. https가 필수여서 간단해 졌다. 암호화는 https에 맡김. 1.0a는 인증방식이 한가지였지만 2는 다양한 인증방식을 지원한다. api서버에서 인증서버를 분리 할 수 있도록 해 놓았다. 라고한다. 참고로 찾아본 곳 https://oauth.net/2/ https://tansfil.tistory.com/60

Subclass Dance Party

이미지
이번에 class(es6) / pseudoclassical(es5)를 사용해보는 시간을 가졌다 Html 창에서 이미지나 도형을 삽입 시키고 그것을 css를 이용해 변경해보았다. 처음에 "돌아가게 만들어보세요"라는 말을 듣고 바로 생각 난 것이 히오스였다 그래서 히오스문양에 마우스를 올려두면 돌아가게 만들고 4초뒤에 로고가 뜨게만들었다. 만드는 도중 css에서 :hover / transition  / transform 을 사용했다 나름 결과물에 만족을 하고 있었는데 다른 분들의 결과물을 보고  마음속에 "만족"이라는 단어가 사라지게 되었다. 한번 마우스로 이벤트 관리를 하는 것이 아니고 키보드를 이용해서 이벤트 관리를 해보고 싶다.

Object Oriented Programming

이미지
Computer Programming 알고리즘이 모여 특수목적을 갖게 되면은 프로그램이 된다 컴퓨터 프로그램에는 크게 3가지가 존재한다. 1. Machine Languages(기계어) 2. Assembly Languages(어셈블리어) 3. High-Level Languages(고급언어) 고급언어에 가까울 수록 사람의 언어와 점점 비슷해지는 특징이 있다. Machine Languages 0과 1만으로 이루어져 있는 언어 그래서 사람이 알아 듣기가 매우 어렵다. Assembly Languages 기계어를 사람이 사용할 수 있게 변환시켜준 언어이다 하지만 소수의 명령어, 변수 밖에 없기 때문에 매우 불편하다 High-Level Languages line by line 으로 읽으면서 바로 컴퓨터에서 볼 수 있도록 변환을 해준다 고급언어에도 크게 2가지로 볼 수 있다  Procedural Languages(절차지향 언어): C, COBOL,Fortran, LISP, Perl, HTML, VBScript... Object-Oriented Languages(객체지향 언어): Java, C++, Python, JavaSCript... 객체 지향의 특징과 장점으로는 크게 4가지가 있다 1. Encapsulation(캡슐화) 복잡성을 줄여주고 재사용성을 높여준다 2. Ingeritance(상속) 똑같은 코드가 겹치지 않게 해준다. 3. Abstaction(추상화) 복잡성을 줄여준다. 4. Polymorphism(다향성) switch/case 문을 쓰지 않고 깨끗하게 코드를 사용할 수 있게 해준다 Instantiation Patterns 말 그대로 인트턴스를 만드는 과정을 뜻한다. 자바스크립트에서의 Class가 나오기 전 사용하던 Class선언 방식으로 4가지가 있다 1. Functional 2. Functional Shared 3. Prototypal 4. Pseudoclassical Functional var Car = function (position){ v...

회고록

 이번 프리기간동안 배운것도 많았고 후회되는 점도 많았습니다. 그 중에 가장 후회 되는게 마지막 이틀 페어프로그래밍이였습니다. 제가 코드스테이츠에서  느낀 것은 사람들과 대화를 하면서 상대방의 나랑 다른 생각을 배우는 것을 가장 큰 장점일 수 있다고 생각 했습니다. 앞에 같이 페어를 했던 분들과는 완벽히 페어프로그래밍을 한 것은 아니지만 그 분의 생각과 내가 부족한 점을 같이 생각하고 찾아봤었기 때문에 정말 크게 실력이 향상됐다는 느낌을 받았습니다. 하지만 마지막 페어분과는 처음부터 삐걱거린 이유는 배우려고 온 것이 아니라 학원에 온 듯이 과제의 완성에만 포커싱을 맞추는게 제 입장에서는 그리 탐탁치 여기지는 않았습니다만 사람마다 다르고 지금까지 해왔던 것이 다 다르기 때문에 이해할 수 있었습니다. 하지만 여기서 중요하게 여긴 것이 '페어 프로그래밍'의 역활을 박살내고 개인 혼자서만 하고 커뮤니케이션이 전혀 되지 않았다라는 점에서 화가 났었습니다. 그래도 첫날 마지막에 제가 불편한 점을 말을 했고 이해한다고 하셨다라고 하셔서 저는 다음날에는 뭔가 오늘과는 다른 하루가 될줄 알았지만 서로 한번 좋지 않은 모습을 본 후에는 사소한 것도 좋지 않게 보였던 것이 있었던 것 같습니다. 그래서 페어분도 나는 전혀 그런 생각도 없었지만 그렇다고 개인 메세지를 받았고 저도 어제 내가 1시간 동안 말한 내용이 조금도 지켜지지 않는 모습을 보고 화가 나기 시작 했었습니다. 여기서 저의 잘못이 있었다고 생각합니다. 이제 페어프로그래밍 4시간만 지나면 끝나니까 그냥 참고 하자... 좋게 좋게 끝내자... 라는 마인드로 진행을 하다 페어분이 갑자기 쉬자하시면서 메세지로 좋지 않다라는 말을 듣고 화가나서 엄청 말로 쏘기 시작했습니다. 그러다가 전혀 대화가 되지 않는 것을 느끼고 포기하고 끝맺음을 하려했습니다. 이 내용은 나의 입장에서 본 상황이기에 나의 화가난 이유만 써있지만 분명 상대분의 상황은 또 다를 것입니다. 그런데 그 상황에서 나에게 불편했던 점을 끝까지 알지 ...

PRE코스 종료 아깝고 좋았던 점

 정말 4주 동안 배운게 많았던거 같았습니다. 끝나고 혼자 공부하는 시간에 시간가는줄 모르고 퇴근버튼을 누르지 못한적도 있었다. 블로그도 시작해서 맨날 하고 싶었지만... 마지막 4일은 과제를 하느라 생각조차 하지 못했다. 트위틀러 만들때 너무나 힘이 들었지만 그 힘든 과정이 끝나고 결과값이 눈앞에 나올때 희열을 느꼈고 동기여부가 되었다. 하지만 그렇다고 정말 다른 사람에게 이 코스를 무조건 추천하기는 너무나 어려울 것 같다고 느꼈다. 일단 하면서 사람들과 커뮤니케이션이 있었는데 나랑 잘맞는 경우도 있지만 정말로 안맞는 경우가 있는데 괜한 감정소비를 한다는 느낌이 들었다. 이게 정말 절실하거나 성실한 사람에게만 추천할 수 있는 과정이라고 많이 느꼈다. 이제 프리코스 과정 중 HA가 남았다, 준비를 해야하는데 지금 Dom에 대한 문제와 this에 대한 의문이 남아있는 상황이다. 물론 다른 곳이 완벽한건 아니지만 일단 제일 부족한 부분부터 준비를 해야할 것 같다. 지금 솔직히 피곤해서 내가 무슨말을 쓰고 있는지 나도 정리가 안된다 ^^... 지금까지 저랑 같이 페어를 같이 하신분들 너무 감사하고 배운 점 많았습니다. 전부 이머시브 과정에서 다시 만났으면 좋겠습니다~

15일차 부트캠프

 arr.map((v) => { function()} v는 배열(현재값)을 차례대로 읽는다 그래서 function안에 있는 조건식을 계산하고 새로운 값을 저장한다. arr.filter((v) => { if(v === ?) return true; else  return false; }); map과 동일하게 v(현재값)는 배열을 차례대로 값을 읽는다. 그래서 조건에서 true를 하면 그대로 배열에 가져오고 false라면 배열에서 삭제한다. 쉽게말하면 원하는 것을 제거할때 사용한다. arr.reduce((acc, cur, i, ?) => {return 결과}, 초깃값); acc=누적값, cur=현재값, i=인덱스, ?=요소 만약 초기값을 정해주지 않으면 저절로 0번째인덱스 값이 초기값이 됩니다. reduce는 누적값 acc가 중요한거 같다. acc의 누적 값은 자신이 조건을 통해서 원하는대로 누적시킬 수 있다. *arr.filter(function(v) {  });  arr.map(function(v) {  });  arr.reduce(function(acc, cur) {  }, 초기값); 이렇게도 쓸 수 있는데 위의 값과는 달라지지 않으나 es5, es6에서의 문법 차이로 보인다 es6에서는 arrow function(=>)이 가능해 지면서