Merge pull request #20 from suu3/develop

문서 구조 수정, 코드펜 플러그인

.changeset/modern-berries-deny.md

@@ -0,0 +1,5 @@
+---
+"gatsby-blog": minor
+---
+
+codepen 플러그인, 문서 구조 변경 및 추가

content/CSS/[2022-05-22]animation-timeline으로 css만으로 스크롤 애니메이션 만들기/index.md

@@ -0,0 +1,99 @@
+---
+title: "animation-timeline으로 css만으로 스크롤 애니메이션 만들기"
+date: "2022-05-22"
+description: "animation-timeline으로 css만으로 스크롤 애니메이션 만들기"
+tag: ["CSS"]
+category: "CSS"
+thumbnail: ./1.png
+---
+
+## 개요
+
+예전에 동아리에서 CSS 애니메이션이 가득한 사이트를 클론 코딩하는 과제를 받았던 적이 있다.
+
+당시에 스크롤을 내리면서 나타나는 애니메이션을 보며 이것도 JS 없이 CSS로 할 수 있는 건가?(아무래도... js없이 css로 애니메이션을 만드는게 성능에 더 좋으니깐.) 궁금했었는데, 스택오버플로우에서 찾아보니 단호하게 방법이 없다는 글만 나왔던 기억이 있다.
+
+그러다 [**`animation-timeline`**](https://developer.mozilla.org/en-US/docs/Web/API/AnimationTimeline)이라는 Web Animations API를 알게 됐다.
+어쩐지 한글 문서는 잘 안 나오더라니 크롬 experimental 기술이었다.
+chrome experiments는 크롬에서 최신 웹 기술을 선보이는 것이라고 한다.
+
+사용하려면 `chrome://flags에 접속해서 experimental web platform features`를 enabled로 바꿔줘야 한다.
+
+![1.png](./1.png)
+
+여기서 하나 알고 가야할 [**`@supports`**](https://developer.mozilla.org/ko/docs/Web/CSS/@supports) 라는 at-rule이 있는데, 사용 시 브라우저가 지원이 될 때 스타일을 적용시킨다.
+
+scroll-timeline에 대한 자세한 설명은 [**여기서**](https://www.bram.us/2021/02/23/the-future-of-css-scroll-linked-animations-part-1/) 볼 수 있다.
+
+먼저 `time-range`를 알아보면, time range는 *시간을 의미하는 게 아니라, 스크롤 바 진행정도와 애니메이션 진행정도에 맵핑되는 숫자*라고 한다.
+
+> TIP: Always set time-range to the exact same time as the animation-duration, unless you have a very good reason not to.
+
+팁에 따라 애니메이션 duration time과 time-range를 일치시키도록 하자.
+
+`linear vs ease-in`에 대한 설명도 나와 있다.
+
+> TIP: Always set animation-timing-function to linear when working with @scroll-timeline.
+
+문서에서는 linear을 쓰는 걸 권장하는데, 이유는 애니메이션 진행정도와 스크롤 진행정도는 맵핑되는데 스크롤에 따라 갑자기 빨라지는 애니메이션은 이상하게 느껴지기 때문이다.
+
+## 실습
+
+그럼 스크롤에 따라 다른 속도 애니메이션을 만들어보자.
+
+```html
+<section id="first">
+  <div><h1 class="first-header">This is Header</h1></div>
+  <div><h1 class="second-header">This is Header</h1></div>
+</section>
+```
+
+```css
+@supports (animation-timeline: works) {
+  .first-header {
+    animation: 3s linear forwards move-text-down;
+    animation-timeline: move-timeline-first;
+  }
+
+  @scroll-timeline move-timeline-first {
+    time-range: 1s;
+  }
+
+  @keyframes move-text-down {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(200%);
+    }
+  }
+
+  .second-header {
+    animation: 1s linear forwards move-text-up;
+    animation-timeline: move-timeline-second;
+  }
+  @scroll-timeline move-timeline-second {
+    time-range: 1s;
+  }
+  @keyframes move-text-up {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(-100%);
+    }
+  }
+}
+```
+
+https://codepen.io/suu3/pen/azoZLEe
+
+지원되는 브라우저에서만 확인해 볼 수 있다.
+
+translateY 값을 다르게 줘서 속도에 차이를 줬다. 두 h1이 같은 크기지만 first-header가 먼저 border를 침범하게 된다.
+
+## Reference
+
+1. [https://www.youtube.com/watch?v=EkEyA4RtfNE](https://www.youtube.com/watch?v=EkEyA4RtfNE)
+2. [https://css-tricks.com/practical-use-cases-for-scroll-linked-animations-in-css-with-scroll-timelines/](https://css-tricks.com/practical-use-cases-for-scroll-linked-animations-in-css-with-scroll-timelines/)
+3. [https://www.bram.us/2021/02/23/the-future-of-css-scroll-linked-animations-part-1/](https://www.bram.us/2021/02/23/the-future-of-css-scroll-linked-animations-part-1/)

content/Django/[2022-01-21][django]_google_social_login/[2022-01-21][django]_google_social_login.md → content/Django/[2022-01-21][django]_google_social_login/index.md

@@ -7,22 +7,28 @@ category: "Django"
 thumbnail: ./1.png
 ---
 
-1. allauth를 사용하는 방법과
+## 개요
 
-2. social-auth-app-django를 이용하는 방법이 있다.
+장고 프로젝트를 진행하면서 구글 소셜 로그인을 맡게 되었다.
 
-결론부터 말하면 1번대로 했다가 생각대로 안 되는 부분이 있어서 **2번 방법**을 사용했다.
+구글 로그인에는
+
+1. **allauth를 사용하는 방법**
+2. **social-auth-app-django를 이용하는 방법**
+
+두 가지가 있다.
+
+결론부터 말하면 1번대로 했다가 생각대로 안 되는 부분이 있어서 나는 **2번 방법**을 사용했다.
 
 ## **0. 공통: google API 발급받기**
 
-[https://console.cloud.google.com/](https://console.cloud.google.com/)
+[**구글 클라우드**](https://console.cloud.google.com/)에서 API 키를 발급 받을 수 있다.
 ![1.png](./1.png)
-
-3번까지 수행하면 client id와 key를 발급받을 수 있다.
+사진에서 3번까지 수행하면 client id와 key를 발급받을 수 있다.
 
 ![2/img.png](./2.png)
 
-일단 이렇게 넣고, 후에 오류가 뜬다면 리디렉션 URI를 수정해야 한다. 관련 부분은 뒤에서 서술하도록 하겠다.
+일단 사진과 같이 넣고, 후에 오류가 뜬다면 리디렉션 URI를 수정해야 한다. 관련 부분은 뒤에서 서술하도록 하겠다.
 
 ## **1. allauth**
 
@@ -74,20 +80,14 @@ urlpatterns = [
 
 admin 계정으로 db에 들어가면 **sites와 social accounts가** 새로 생겼을 것이다.
 
-**sites**에 들어가 보면 기본적으로 example이 생성되어 있는데,
-
-example을 127.0.0.1:8000로 수정하거나 새로 127.0.0.1:8000를 추가한다.
+**sites**에 들어가 보면 기본적으로 example이 생성되어 있는데, example을 127.0.0.1:8000로 수정하거나 새로 127.0.0.1:8000를 추가한다.
 
 display와 도메인 이름에 127.0.0.1:8000을 적어준다.
-
 localhost 주소를 추가했을 때 example을 수정했다면 위의 settings.py에서 SITE_ID를 1로,
 
 그다음 **Social applications-Add social application**으로 들어가 새로 앱을 추가해준다.
 
-provider를 google로 설정하고,
-
-id와 secret key를 0번에서 발급받은 키로 넣는다.
-
+provider를 google로 설정하고, id와 secret key를 0번에서 발급받은 키로 넣는다.
 sites에는 127.0.0.1:8000를 추가한다.
 
 **4. html**
@@ -113,24 +113,20 @@ sites에는 127.0.0.1:8000를 추가한다.
 
 ![img.png](./4.png)
 
-[https://learndjango.com/tutorials/django-log-in-email-not-username](https://learndjango.com/tutorials/django-log-in-email-not-username)
+찾아봤을 때 다음 글을 참고할 수 있었다.
 
-(🔼 참고 웹사이트. template 커스텀 방법까지 나와있다.)
+- [**template 커스텀 방법까지 나와있는 참고 사이트**](https://learndjango.com/tutorials/django-log-in-email-not-username)
+- [관련 Issue](https://github.com/pennersr/django-allauth/issues/345)
 
-[https://github.com/pennersr/django-allauth/issues/345](https://github.com/pennersr/django-allauth/issues/345)
-(🔼 관련 Issue)
-
-나는 바로 소셜로그인 화면으로 바뀌는걸 원했어서... 2번으로 넘어갔다.
-
-(2번은 db설정을 해줄 필요가 없어서 좀 더 간편하다.)
+위 글들을 참고했을 때, 나는 바로 소셜로그인 화면으로 바뀌는걸 원했어서 1번은 포기하고 2번 방법으로 넘어갔다. (\*2번은 db설정을 해줄 필요가 없어서 좀 더 간편하다.)
 
 ## **2. social-auth-app-django**
 
 ```python
 pip install social-auth-app-django
 ```
 
-역시나 먼저 패키지를 설치해줘야 한다.
+먼저 패키지를 설치해줘야 한다.
 
 **1. settings.py**
 
@@ -157,20 +153,14 @@ LOGIN_REDIRECT_URL='/'#소셜 로그인 후 돌아갈 화면
 
 SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = '발급받은 id'
 SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = '발급받은 비밀키'
-SOCIAL_AUTH_GOOGLE_OAUTH2_SCOPE = ['email']# 이메일로 식별하겠다.
+SOCIAL_AUTH_GOOGLE_OAUTH2_SCOPE = ['email'] # 이메일로 식별하겠다.
 ```
 
 작성 후 migrate를 해줘야 한다.
 
-나는 login이라는 app 안 urls.py에 social url을 추가했기 때문에
-
-**SOCIAL_AUTH_URL_NAMESPACE = 'login:social'라고** 써주었지만,
-
-기본 프로젝트 urls.py에 social url을 추가해줬다면 'social'이라고 적어줘야 한다.
+나는 login이라는 app 안 urls.py에 social url을 추가했기 때문에 **SOCIAL_AUTH_URL_NAMESPACE = 'login:social'라고** 써주었지만, 기본 프로젝트 urls.py에 social url을 추가해줬다면 'social'이라고 적어줘야 한다.
 
-KEY의 경우 깃헙에 올라가지 않게 안전하게 보관해야 한다는 것을 유의하자.
-
-env 설정 방법이 있는데 여기선 생략한다.
+KEY의 경우 깃헙에 올라가지 않게 안전하게 보관해야 한다는 것을 유의하자. env 설정 방법이 있는데 여기선 생략한다.
 
 **login/urls.py**
 
@@ -198,7 +188,4 @@ urlpatterns = [
 login app -> social namespace -> begin
 
 begin은 신경 쓸 필요 없으나 위에서 app 이름과 nampspace를 어떻게 적어줬는지 주의해서 작성하자.
-
-여기서도 마찬가지로 리다이렉션 시 **Error: redirect_uri_mismatch** 가 뜬다면
-
-**redirect URI in request**~ 에 나온 주소를 0번의 **승인된 리다이렉션 URI**에 추가한다.
+여기서도 마찬가지로 리다이렉션 시 **Error: redirect_uri_mismatch** 가 뜬다면 **redirect URI in request**~ 에 나온 주소를 0번의 **승인된 리다이렉션 URI**에 추가한다.