본문 바로가기

Programming/Javascript5

Javascript Tip 1. 해당 dom element 의 innerHtml = '' 를 수행한후, 해당 dom element 에 대한 접근이 수행될경우, ( element.clientWidth ) dom element 는 기존의 dom element 의 값을 재 계산하게된다. 이로인해, 만일 스크롤된 화면에서, 작업을 수행하다가 위의 절차를 진행하는 순간, 스크롤이 위로 올라간다. 왜냐면, height 가 0 이 되면서, scrollTo(0,0) 의 효과를 갖게 된다. 2019. 4. 27.
Google Calendar API 휴일데이터 받아오기. 1. API 키 발급. ( 다른 인증을 사용해도 좋다. ) https://console.developers.google.com/apis/dashboard?project=quickstart-1552639953833&folder=&organizationId= 2. 구글 아이디로 로그인 후, 구글 캘린더에 원하는 국가의 휴일을 추가한다. ( 필수 ) 3. calendarList list api 를 통해서, 현재 나의 캘린더 리스트를 받아온다. https://developers.google.com/calendar/v3/reference/calendarList/list?apix_params=%7B%7D CalendarList: list | Calendar API | Google Developers Requires.. 2019. 4. 9.
Tip for React javascript React 를 사용해 템플릿 작업을 하면서 알게된 팁들을 하나씩 적어가겠습니다. 첫번째 TIP. this.setState 후처리 TIP setState 이후에 수행하고 싶은 작업이 있을 경우 아래처럼 작성하셔서 진행 가능합니다. promise 객체로 setState 를 한번 감싸서 던져주시면. then 구문을 통해서 후처리가 가능해집니다. popupClicked = (key, value) => { return new Promise((resolve) => { this.setState(update(this.state, {[key]: {$set: value}}),()=>{ resolve(someValue) }) }) } this.popupClicked('key','value').then((someValue)=.. 2019. 4. 3.
자바스크립트의 비동기 자바스크립트로 작업을 하면서 가장 중요한 부분 중 하나는 비동기처리라고 생각한다. 그 동안 자바스크립트를 사용해오면서, 패러다임이 조금씩 바뀌어 왔는데. 처음 자바스크립트를 사용할때는 통신 후 callback function 으로 리턴값을 넘겨서 처리하였다. 이해를 돕기위해 예제를 통해 하나씩 짚어가고자 한다. 아래는 유저의 닉네임을 통해 , 유저의 정보를 요청한 후 유저의 아이디로 유저의 책 정보들을 가져오는 일련의 로직이다. function methodA(nickName, callback){ $.get( `/api/v1/account/${nickName}`, function( data ) { callback(data) }) } function methodB(account, callback){ $.ge.. 2019. 4. 3.
반응형