javascript

1
2
3
4
5
6
7
8
9
10
window.addEventListener("scroll"function () {
  const SCROLLED_HEIGHT = window.scrollY;
  const WINDOW_HEIGHT = window.innerHeight;
  const DOC_TOTAL_HEIGHT = document.body.offsetHeight;
  const IS_BOTTOM = WINDOW_HEIGHT + SCROLLED_HEIGHT === DOC_TOTAL_HEIGHT;
 
  if (IS_BOTTOM) {
    alert('is bottom');
  }
});
cs

ref : https://hye-on-astrogrammer.tistory.com/21

 

+) 응용.

스크롤이 없는 페이지에서 자동적으로 나오게 하고싶다면?

함수로 따로 떼어서 진행한다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//스크롤시
window.addEventListener("scroll"function () {
    check_scroll_appear_footer();
});
 
//DOM로드시
document.addEventListener("DOMContentLoaded"function(){
     check_scroll_appear_footer();
});
 
function check_scroll_appear_footer(){
 
    const SCROLLED_HEIGHT = window.scrollY;
    const WINDOW_HEIGHT = window.innerHeight;
    const DOC_TOTAL_HEIGHT = document.body.offsetHeight;
    let is_bottom = WINDOW_HEIGHT + SCROLLED_HEIGHT === DOC_TOTAL_HEIGHT;
 
    //문서의 총길이가 창길이보다 작으면 스크롤이 발생되지 않으므로 바닥이 보이는 상태로 설정한다.
    if(DOC_TOTAL_HEIGHT < WINDOW_HEIGHT){ is_bottom = true; }
 
    if (is_bottom) {
        alert('IS_BOTTOM'); //바닥이 붙거나 스크롤이 없을때
    }else{
        alert('IS_NOT_BOTTOM'); //바닥에서 떨어질때
    }
 
}
cs

유체가 퍼지는 효과 : css Mask 전환효과

 

모 애니메이션 홈페이지에 들어가면 잠시의 로딩후 마치 번지는 먹효과 처럼 이미지가 전개되는걸 보고

쪼랩인 나는 우와아아아!!! 하면서 눈이 초롱초롱 했었더랬다. 

 

잉크가 퍼지는 듯한 효과

 

처음에는 검정이 나와서 블루가되고 블루배경이 이미지 배경으로 되는 2중효과인데.

랜덤효과라고 하기에는 일정한 모양과 패턴으로 지나가서 svg나 이런걸 썼나 싶었다. 

영상이라고 하기에는 태그나 끊김 로딩시간이 적었기때문에 생각하지않기로 했다. 

 


결론적으로 말하면 css animation으로도 가능한 범위라는 것이다. 

약간의 트리거를 위해 javascript(Jquery)도 이용된다. 

 

각각의 배경을 담당하는 레이어, 아래의 -점이 퍼저나가는 듯한- 이미지를 중첩하여서 더 밑쪽의 레이어에 있는 이미지를 보이게 하는 방식이다.

아래처럼 퍼지는 효과의 이미지가 필요하고. 이걸 적용하면, 위쪽 처럼 전환되는 효과를 볼수있다. 

css수정으로 효과의 이미지, 중첩양과 속도에 따라서 퍼져나가는 모양을 다르게 줄수도 있다.

 

-참고 기술 

*demo1 캐러셀 변경효과(총 2가지가 있으며 위의 효과는 2번째)

 https://tympanus.net/Tutorials/CSSMaskTransition/index.html

*다른 형태의 유체(잉크번짐)효과

 https://codyhouse.co/demo/ink-transition-effect/index.html

 

Ink Transition Effect | CodyHouse

My Modal Content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad modi repellendus, optio eveniet eligendi molestiae? Fugiat, temporibus! A rerum pariatur neque laborum earum, illum voluptatibus eum voluptatem fugiat, porro animi tempora? Sit h

codyhouse.co


코드는 아래와 같다

처음에 블랙배경먼저만들고 나서 블루를 만들고 해서.

HTML 구조가 엉망이긴한데 뜯어보고 분석하시다 보면 커스텀은 꽤 쉬운편이며,

 

퍼지는 간격 시작점 속도등은

css mask, animation: mask-play 만 잘조절하면된다.

Jquery 와 배경이미지(blue_bg.jpg), (위에 올려놓은)잉크가 퍼지는 연속이미지(ink_sprite.png)가 필요하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<style>
 
#mid {display:block; width:100%; height:100vh; position:relative;}
 
#full{background-color:#000;  height:100%; display:block; z-index:4; position:absolute; left:0; right:0; top:0; bottom:0; z-index:2;}
 
#full.active{
 
    -webkit-mask: url('./ink_sprite.png');
 
    mask: url('./ink_sprite.png');
 
    -webkit-mask-size: 2300% 100%;
 
    mask-size: 2300% 100%;
 
    -webkit-animation: mask-play 0.7s steps(22) forwards;
 
    animation: mask-play 0.7s steps(22) forwards;
 
}
 
#blue_bg{ background-image: url("./blue_bg.jpg"); height:100%; display:block; position:absolute; left:0; right:0; top:0; bottom:0; z-index:2;}
 
#blue_bg.active{
 
    -webkit-mask: url('./ink_sprite.png');
 
    mask: url('./ink_sprite.png');
 
    -webkit-mask-size: 2300% 100%;
 
    mask-size: 2300% 100%;
 
    -webkit-animation: mask-play 0.7s steps(22) forwards;
 
    animation: mask-play 0.7s steps(22) forwards;
 
}
 
 
 
@-webkit-keyframes mask-play {
 
  from {
 
    -webkit-mask-position: 0% 0;
 
    mask-position: 0% 0;
 
  }
 
  to {
 
    -webkit-mask-position: 100% 0;
 
    mask-position: 100% 0;
 
  }
 
}
 
 
 
@keyframes mask-play {
 
  from {
 
    -webkit-mask-position: 0% 0;
 
    mask-position: 0% 0;
 
  }
 
  to {
 
    -webkit-mask-position: 100% 0;
 
    mask-position: 100% 0;
 
  }
 
}
 
 
 
#mid > div:nth-child(1){z-index:2;}
 
#mid > div:nth-child(2){z-index:1;}
 
 
 
#contents {z-index:0; background:red;}
 
</style>
 
 
 
<div id='mid'>
 
    <!-- 효과구역 { -->
 
    <div>
 
        <div id="blue_bg" class='blue_bg'></div>
 
    </div>
 
    
 
    <div>
 
        <div id="full"></div>
 
    </div>
 
    <!-- 효과구역 } -->
 
    
 
    <div id='content'>
 
        {content 내용을 입력해 주세요.}
 
    </div>
 
</div>
 
<script>
 
$(window).load(function(){
 
    $('#full').addClass("active");
 
    /*Animation 효과 종료시*/
 
    $("#full.active").on('webkitAnimationEnd AnimationEnd',function(){
 
        $("#full").css('opacity''0');
 
        $('#blue_bg').addClass("active");
 
        $("#blue_bg.active").on('webkitAnimationEnd AnimationEnd',function(){
 
            $("#blue_bg").remove();
 
        });
 
    });
 
 
 
});
 
</script>
cs

 


포타에 거의 동일한 글을 작성했으며 한번 보셨다.. 싶으시면 저 맞습니다.

 

1. 페북 개발자페이지 인스타그램 베이직 토큰생성시 오류가 뜸.

2. php사용자이며, curl 이용함. 

3. 더 간단하거나 정리잘된분 계시면 덧글로 링크좀 남겨주세요 ㅠㅠㅠㅠㅠㅠ.... (하..)

4. 공식문서를 차근차근 뜯어봐야... ㅠㅠ

5. 장기토근 갱신방법 추가.

 

 

 

일단 무슨문제인지는 몰라도 남들 블로그에 하나같이 올려놓은 인스타 토큰 생성방법이 나에게는 통하지 않았다. 

 

 

Generate Token 버튼을 누르면 반겨주는건 오류창뿐.... 

 

 

 

무려 사흘을 남들이 써놓은 정공법으로 도전해보았다. (앱생성 > 인스타베이직설정 > auth url설정 > 테스트... > 인스타.. )

 

하지 않은건 앱검수뿐..

하지만 이걸 하자니 너무 많은게 필요했고 다른사람들은 이러지 않아도 생성버튼하나면 된다고 했는데.. ㅠㅠ....

 

 

그렇게 고생을 하고 하나씩 하기로 했다. 

타인의 블로그글과 공식문서를 보면서...

 

일단 url 로 아이디와 값을 만들면 된다고 했다. 

 

1
2
3
4
5
https://api.instagram.com/oauth/authorize
  ?client_id={app-id}
  &redirect_uri={redirect-uri}
  &scope=user_profile,user_media
  &response_type=code
cs

{app-id} {redirect-uri} 에 해당하는 값을 넣어서 한줄로 만든다음 브라우저의 주소란에 붙여놓고 엔터를 누르면

 

이렇게 긴 주소줄이 남는다... 

ssl적용된 홈페이지를 넣었다면 그쪽으로 재대로 들어갔을수 있었겠지만. 

적용안된 도메인 사이트url이라서..

대략 뒤에 엄청나게 긴 키값이 딸려왔는데...

 

여기서 또 하루 삽질을 한다. 아무리해도... 남들이 만들어놓은 코드에 키를 넣어도 400을 밷는것이었다. 

ㅠㅠ 공식문서를 자세히 읽어보니 

.... #_ 을 제거해야했다.... (과거의 나야  글좀 꼼꼼히 읽자;;)

 

이제서야 코드를 토큰으로 교환한다... 참 멀리도 왔다..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
$url = "https://api.instagram.com/oauth/access_token/";
$post_data = array(
 
    "client_id" => "{Instagram 앱 ID}",
    "client_secret" => "{Instagram 앱 시크릿 코드}",
    "grant_type" => "authorization_code",
    "redirect_uri" => "{유효한 OAuth 리디렉션 URI}",
    "code" => "{key}",
 
);
 
function post($url, $fields)
 
{
 
    $post_field_string = http_build_query($fields, '', '&');
 
    $ch = curl_init();
 
    curl_setopt($ch, CURLOPT_URL, $url);
 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
 
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
 
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
 
    curl_setopt($ch, CURLOPT_POSTFIELDS, $post_field_string);
 
    curl_setopt($ch, CURLOPT_POST, true);
 
    $response = curl_exec($ch);
 
    curl_close ($ch);
 
    return $response;
 
}
 
 
 
// post함수 호출
 
$result = post($url, $post_data);
$recv = json_decode($result , true);
 
 
echo "<br>=======<br>";
 
echo print_r($recv);
cs

 

대충 이렇게 만들고 브라우져에서 돌려보니

 

값이 나와준다 다행이다... 

그리고 어떤 친절한 현자분의 인스타 리스트 구현 코드에 키값과 id값을 부여해주니

 

 

매우 잘나온다... 다행이다.. 

 

이제 장기 엑세스 코드 발급만 잘하면 될것같다. ㅠ_ㅠ.....

 

티슷에 글쓰는 동안 단기 코드의 유효기간이 지났고... 다시 발급부터 했지만 다행히 기록하면서 만든 코드예제때문에 살았다..

 

.... 이제와서 생각하는건데 curl 쓰지 말고 postman 같은걸로 할수있지않나?;;; 하는 생각이 들고있다.

 

**장기엑세스 코드 업데이트는 맨아래에 올림.

장기 엑세스 코드는 그냥 

curl -i -X GET "https://graph.instagram.com/access_token
  ?grant_type=ig_exchange_token
  &client_secret={instagram-app-secret}
  &access_token={short-lived-access-token}"

공식문서 샘플코드 부분만 채워서 url에 넣으면 코드가 웹브라우저 상에 표기된다.

 

 

장기.. 라고해도 60일 까지가 한계라서 기간내에 한번씩 새로발급받아야 하는데..

(기간넘겨서 토큰값이)죽어버리면 처음부터 다시..)

 

샘플 요청

curl -i -X GET "https://graph.instagram.com/refresh_access_token
  ?grant_type=ig_refresh_token
  &access_token={long-lived-access-token}"

샘플 응답

{
  "access_token":"{long-lived-user-access-token}",
  "token_type": "bearer",
  "expires_in": 5183944 // Number of seconds until token expires
}

 

기존 토큰값이 유효하면 새 토큰값을 할당해주는 방식인것 같다..

바꾼 장기 토큰값이 며칠간 유효한지 확인해보고 유효성이 확인되면 받은 값을 가지고

1달에 1번정도 새토큰값을 자동으로 할당되도록 만들어야 할것 같다.

 

 

 

==================================

 

매번 새 페이지 로딩시 엑세스 코드요구는 자원낭비, 매번 수동갱신은 귀찮으니

언제나 물고다니는 config 정보를 이용하여 1달에 1번 자동 키값업데이트를 구현하기로했다. 

 

준비한 config 값은 last_ins_date(마지막조회일)과 ins_key_token(인스타토큰값저장).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?
$today_date = date("Y-m-d H:i:s"); //오늘
$chk_date = date("Y-m-d H:i:s", strtotime("+1 months", strtotime($config[last_ins_date]))); // 최종갱신일자에서 1달째되는 날자.
$ins_token = ''//업데이트할 인스타 토큰을 담는 변수.
 
if($chk_date < $today_date){ //발급일자+1달 보다 오늘이 클때(1달지났다~)
 
    //인스타토큰을 갱신 합쉬다~
    $url = "https://graph.instagram.com/refresh_access_token?
            grant_type=ig_refresh_token&access_token="
.$config[ins_key_token];
 
    $ch = curl_init();                                 //CURL 세션 초기화
    curl_setopt($ch, CURLOPT_URL, $url);               //URL 지정    
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 3);       //connection timeout 3초
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);    //요청 결과를 문자열로 반환
    $response = curl_exec($ch);                        //쿼리 실행
    curl_close($ch);
 
    $res = json_decode($response); //json 값으로 넘어오니 쓰기 편하게 디코드 해줍니다.
    $ins_token = $res[access_token];
   //$res[token_type]:토큰타입, $res[expires_in]:만료기간도 있으니 같이 저장해둬도 좋을것같습니다.

 
    //ins token과 오늘의 시간을 주고 업데이트.
    $inskey_update_query = "
        UPDATE config
        SET 
            ins_key_token = '{$ins_token}', 
            last_ins_date = '{$today_date}' "
;

    mySql_query($inskey_update_query);
}
?>
cs

일단 10번정도 테스트 해봤는데 알아서 갱신된다.

놀라운점은 expires_in 값만큼 토큰이 살아있고, 새로 발급받아도 expires_in 기간만큼은 토큰값이 보장되는것 같다. 

(.... 테스트하다가 토큰이 교체식으로 진행되어 날라가서 처음부터 하면 어쩌나.. 하고 많이 쫄았다..)

 

나쁜소식(인증방식의 변경)만 없으면 페이지 접근만으로도 다달이 키값갱신은 성공적일것 같다. 

 

+ Recent posts