삐뚤빼뚤 프론트 개발

https://hwannny.tistory.com/92

요 글을 읽으면서 간단히 머리로 oauth를 붙일때 데이터 흐름을 정리해보았다.

다이어그램을 보니 좀 더 이해가 쉽다.

다음에는 어렴풋이 알고 있는 jwt, refresh token에 대해서도 좀 더 알아보고 싶다.

간단히 이해 한데까지 정리해보면 다음과 같다.

플러터로 투두리스트를 만들어보고자 한다.

여기에 oauth를 붙여보고 싶다.

이경우 내 서비스의 서버를 거북서버라고 이름 붙임.

거북투두리스트(내 서비스)를 이용하고자 하는 사용자가 있다.

이 사용자의 아이디, 패스워드를 가지고 있는 서버를 리소스 서버라고 한다.

그리고 리소스서버(구글)에 있는 사용자 정보를 확인하고 거북서버에 authorization token, accesstoken 을 내려주는 서버를

authorization server라고 한다.

크게 보면 이 세개(거북서버, auth server, resource serve)가 서로 필요한 정보를 요청하고 응답을 하는게 oauth이다.

장점으로는 내 개인정보가 듣보잡 서비스에 넘겨지는게 불안하고 무엇보다 지구를 구하는일보다 귀찮은 회원가입절차를 생략하게 해주는 것이 이따.

개발문서나 영상을 영어로 볼때 거침이 없었으면 좋겠당!!

이걸 위해서.. 조금씩 내가 할 수 있는것들을 해보쟈!! 얍압 !!

그래도 이 책 올해 1회독 하는 마음속의 루즈한 목표는 조금씩이라도 채워져 가고 있다. 👍

20210418토 , 20210501토

회사의 야근 시즌이 한텀 지나고, 이주정도 다시 여유로운 주간이되니 슬슬 다시 공부를 하고있다.

오늘 공부한 것 - 콜백함수

js에서 함수는 object이다.

그래서 함수가 함수내에서 인자로 쓰이기도 하고, 리턴값으로 쓰이기도 한다.

함수를 인자 또는 리턴값으로 가지고 있는 함수를 고차함수(한국어이름이 좀 구림  영어로는 higher order function) 라고 하고,

인자 또는 리턴값으로 쓰이는 함수를 콜백(callback function)라고 한다.

항상 콜백함수라는 개념이 api call 하는 promise, async await과 함께 나오는 개념이라서  세뚜세뚜 개념인줄 알았는데, 꼭 그런건 아니고,

생각보다 콜백의 개념은 좀 더 포괄적인 개념인거 같다. 다만 api call 하고 리턴값을 받아와서 처리하는 경우에 대다수 콜백의 개념을 쓰고 있었기 때문에 위에서 말한 promise, async await과 늘 같이 설명되는것 같다. 😁😁😁😁😁😁😁😁😁

오늘 나에 대해서 느낀점 나는 집에서 보다 카페나 바깥 세상에 나와야 공부를 열심히 한다. (허세끼가 좀 있는겅가)

아래 글에 잘 설명되이 있당!! 😍

이제 콜백함수는 정보옥!!! 잘해써 궁디팡팡!! 나도 이러케 설명을 쉽게 잘하는 살암이 되어야징 😻

아참참!!! 비동기 처리와 관련해서 어제 하나 더 알게 된것. Promise 의 경우 예제들을 보면 항상 resolve, reject(?) 요런것들로 return을 받아서 처리하는 데, 실무 코드에서는 도무지 저딴 텍스트를 볼 수 가 없고 바로 .then()으로 처리를 한다. 그게 왜 그런고 하니..보통 실무에서 axios라는 api를 처리하는 라이브러리를 쓰는데, 그 라이브러리 내부에 resolve, reject를 이미 처리해서 주기 때문에 그걸 가져다 쓰는 입장에서는 그 코드가 안보인다고 한당 🤠👻🤠👻🤠👻 그렇구먼?! 늘 궁금했는데 이제 알아씀!!! 

medium.com/@oasis9217/%EB%B2%88%EC%97%AD-javascript-%EB%8F%84%EB%8C%80%EC%B2%B4-%EC%BD%9C%EB%B0%B1%EC%9D%B4-%EB%AD%94%EB%8D%B0-65bb82556c56

다음주에는 이거 보쟈아: programmingsummaries.tistory.com/325

케이스 : 팝업 open > esc key 를 눌렀을때 > 아무 동작안하고 팝업이 닫히길 원하는데, 현재는 특정 버튼이 동작하게 되어 있었음

해결방법 :

• 1 > watch, computed 를 사용해서 구현해야겠다고 막연히 생각 > 삽질
• 2 > 구글링을 하니 created 안에 window.addEventListener를 사용해서 해결하는 예제가 있었음. data에 state 하나 만들고 esc 키를 눌렀을때 해당 state 값을 boolean 값으로 처리 해서 해결함

해결은 되었는데, 이것이 최선인가? 라는 의문은 좀 남음

• 될 지 안될지 모르겠고, 될 것도 같은데.. 안 될 꺼 같은 시나리오가 있다면 일단 생각한대로 코드를 붙여서 실행시켜보자. 의외로 동작하는 경우가 많다. 왜 되는지 모르겠다는건 함정이지만. 이런 경험들이 쌓이다보면 왜 되는지 알게되는 시점이 있을꺼라고 본당

동료가 이벤트 루프 강의 링크를 공유해줬다.
https://youtu.be/8aGhZQkoFbQ

자막과 코드를 동시에 보려니 매우 헷갈림.

일단 이해한거 까지는...
스택, 큐, 웹api(뭔가스토리지 같음)라는게 있고.
js가 싱글레드이지만 웹api라는스토리지라는게 있어서 이걸 멀티쓰레드 처럼 쓰니까 비동기처리가 가능하다.

그렇다면 이벤트루프란... 스택과 웹api같은데서 서로 핑퐁하면서 이벤트을 반복해서 실행하는거아닐까?

더 찾아봐야징 (ღ◕ܫ◕ღ)

hr {

border: 0;

height: 1px;

background: red

}

 chrome 에서 이쁘게 나옴