본문 바로가기

Javascript

 (37)
[자바스크립트] 이벤트 버블링과 이벤트 캡처링 쉽게 이해하기 서론 : 이벤트 버블링과 이벤트 캡처링. 책을 읽으면 슥 이해하고 지나갔던 개념이다. 최근 회사에서 이벤트 버블링에 관한 주제로 이야기가 오가는 것을 들은 적이 있는데, 명확하게 이해하지 않고 넘어갔던 내가 생각났다. 그래서 조금 더 분명하게 정리해보고자, 이렇게 글을 쓰게 되었다. 본론 : 이벤트 버블링이란 ? : 책을 통해 처음 접했을 땐 뭔소린고 했지만, 지금와서 생각해보니 생각보다 간단한 개념이었다. 먼저 다음 그림을 보자. 위의 그림은 파란색 -> 흰색 -> 보라색 순으로 nesting 되어 있는 div들이다. 이것을 코드로 확인해보면 아래와 같다. 위 코드에서 볼 수 있듯이, blue의 부모는 white, white의 부모는 puple이다. 자, 이제 이렇게 nested된 박스를 가지고 무엇을..
[타입스크립트 튜토리얼 번역] generics type tutorial | 제네릭타입 https://www.tutorialsteacher.com/typescript/typescript-generic TypeScript Generics TypeScript - Generics In this section, we will learn about generics in TypeScript. When writing programs, one of the most important aspects is to build reusable components. This ensures that the program is flexible as well as scalable in the long-term. Gen www.tutorialsteacher.com 해당 문서를 번역한 글입니다. 더보기 In this sect..
[생활코딩: OAuth - 6,7편] 엑세스토큰의 발급과 api호출 이전 시간에 client가 resourceOwner(유저)를 통해서 인증코드를 받고, 그 인증코드와 함께 client가 resourceServer에 직접 데이터를 전송하는 과정을 봤다. 인증코드와 시크릿 코드, 클라이언트 아이디, redirectURI를 전송하는 것이다. 그럼 그 다음 단계는? 엑세스토큰을 발급하는 것이 OAuth의 목적이다. resourceServer는 드디어 엑세트토큰을 발급한다. 그리고 이 토큰을 클라이언트에게 응답해준다. 실제로는 이렇게 단순하지 않겠지만, 4라는 엑세스 토큰을 발급받았다. 그리고 이 토큰은 무엇을 보장하는 것일까? 저 client가 4라고 하는 토큰으로 접근을 하면, resourceServer는 저 토큰4를 보고, 이 토큰 4는 유저아이디 1번에 해당하는 아이디이..
[생활코딩: OAuth - 5편] resourceServer의 동의를 받는 과정 리소스 오너가 어떤 기능에 대해서 승인했는지에 대한 정보를 이제 가졌다. 그러면 이제 리소스 서버가 승인을 해주는 것을 확인해야 한다. 이때 resourceServer는 바로 accessToken을 발급해주지 않는다. 한번의 절차를 더 거친다. 이때 임시로 사용하는 비밀번호가 있는데, 이것이 authorization code다. 리소스 서버가 리소스 오너에게 이 주소로 이동하라는 명령을 한다. location은 그 뒤에 있는 주소로 이동하라는 말이다. 저기 뒤에 code=3에 붙어있는 3이 인증코드이다. 리소스 오너는 인지도 못한 채, 은밀하게 이 주소로 이동을 하게 된다. 그리고 우리 client는 인증 코드가 3이라는 것을 알게 된다. 그러면 클라이언트는 리소스 오너를 거치지 않고, 바로 리소스 서버..
[생활코딩: OAuth - 4편] resourceOwner(유저)의 동의를 받는 과정 이번시간에는 리소스 오너의 승인을 받는 과정에 대해서 알아보자. 리소스서버와 클라이언트는 clientID, clientSercet, redirectURI 이 3가지 정보를 알게 된다. 그리고 client는 redirectURI 페이지를 준비해놓고 기다려야 한다. '리소스 서버가 가지고 있는 기능이 4개다' 라고 했을 때, client가 resource server의 모든 기능이 필요한 것이 아니라, b,c에 해당하는 2개의 기능만 필요하다면, 최소한의 기능에 대해서만 인증을 받으면 된다. 이런 상황일 때, 어떤 일이 일어나는 것일까? resourceOwner(유저)는 우리의 어플에 접속할 것이다. 이 접속 과정에서 우리가 리소스 서버를 사용해야할 기능이 있다. 페이스북에 글을 적는다던지, 구글 캘린더에 ..
[생활코딩: OAuth - 2,3편] OAuth의 역할과 등록법 무엇이든 우리가 처음 배울 때, 가장 큰 어려움을 경험하는 부분은 용어다. 이번 시간에는 용어에 대해서 설명하는 시간을 가져보자. 지난 시간에 우리가 설정한 3명이 있다. 나 : 서비스의 제공자 유저 : 서비스의 사용자 그들 : 우리의 서비스를 확장시키기 위한 서비스 (구글, 페이스북) 이렇게 설정한 삼자관계는 oAuth에서 가장 중요한 핵심 포인트다. 여기서 우리가 설정한 그들은 oAuth에서 resourceServer라고 부른다. 우리가 필요한 자원을 가지고 있는 자들이다. 그리고 유저는 resourceOwner라고 부른다. 리소스를 가지고 있는 자이다. 그리고 마지막으로 서비스를 제공하는 나는 client라고 부른다. 정리하면, 나 : client, 유저 : resourceOwner, 그들 : re..
[생활코딩: OAuth - 1편] OAuth가 필요한 이유 생활코딩님은 항상 무언가를 가리키기 전에, 해당 개념이 왜 필요한지, 어떤 불편한 상황이 있었는지를 먼저 소개해준다. 내가 오늘 공부하게 된 oAuth도 마찬가지이다. 이것이 왜 필요하게 되었는지, 어떤 불편한 상황이 있었는지 먼저 소개해줬다. 그 내용부터 공유하면서, 시작한다. OAuth라는 기술에 대해서 알아보기 전에, 3명의 참가자가 존재한다는 가정을 해보자. 나, 유저, 그들(구글, 페이스북,트위터) 이들 각각의 역할은 다음과 같다. 나 : 서비스를 제공하는 주체이다. 유저 : 내가 만든 서비스를 이용하는 대상이다. 그들(구글,페이스북) : 내가 만든 서비스를 확장시켜줄 대상이다. (편의상 T라고 부르겠다.) 여기서 시작해보자. 유저가 우리의 서비스를 이용한다. 글을 보고, 글을 기록한다. 그런데..
[타입스크립트] 리액트에서 타입스크립트를 사용하는 방법 리액트에서 타입스크립트를 사용하는 방법을 알아보기 전에, 타입스크립트에 대한 간략한 요약을 먼저하고 지나가겠다. 타입스크립트는 변수, 함수를 만들 때 타입을 지정해주는 것이다. 그게 끝이다. 그럼, 이제부터 리액트에서 타입스크립트를 설치하는 방법부터 알아보겠다. npx create-react-app 프로젝트명 --template typescript 이런 명령어로 설치를 진행하면, 타입스크립트가 적용된 리액트 버전이 설치된다. 만약 기존에 사용중인 리액트 앱에서 타입스크립트를 사용하고 싶다면, npm install --save typescript @types/node @types/react @types/react-dom @types/jest 위 코드를 통해서 타입스크립트를 설치하면 된다. 께알상식+ 위 사..

티스토리툴바