본문 바로가기
반응형

Javascript51

setTimeout(), clearTimeout() 기본 동작 방식 살펴보기 setTimeout(), clearTimeout() 지난 번에 Web 애플리케이션을 만들면서 시간 차를 두고 동작하는 기능에 대한 구현이 필요했었습니다. 그래서 예전에 봐두었던, setTimeout()과 celarTimeout() 함수를 떠올리게 되었고 사용을 하려고 했는데, 돌아서면 까먹는 나이다 보니 잘 생각이 나지 않더라구요. 그래서 오늘은 실행 타이밍을 제어할 수 있는 이 기능에 대해서 정리해두려고 합니다. setTimeout() 기본 동작 방식 setTimeout()은 타이머(Timer) 기능을 한다고 보면 됩니다. 말 그대로 '타임 아웃!' 되는 순간을 세팅해두는 것이죠. 기본적인 사용문법은 다음과 같습니다. setTimeout(() => { 실행할코드 }, 지연시간); setTimeout((.. 2022. 12. 23.
여러 개의 이미지 파일들을 로테이션 해서 보여주기 - Shuffle 효과 최근에 개인프로젝트로 간단한 웹기반 애플리케이션을 만들었습니다. 크리스마스 시즌이기도 해서 신년 인사들을 메신저로 많이 주고받을 텐데요, 그때 지인들에게 보내주면 좋겠다는 생각이 들어서 간단하게 즐길 수 있는 app을 만들어보았습니다. 막상 직접 프로젝트를 진행하다보니 디테일에 점점 욕심이 났지만, 재미로 하는 작업이라 그냥 심플한 수준에서 마무리를 했습니다. MBTI 이상형 여친 찾기 / 남친 찾기 제가 이번에 만들어 본 애플리케이션입니다. 뭔가 거창한 걸 만들 시간은 없고해서 짧게 진행할 수 있는 프로젝트로 선정을 해봤습니다. 연말, 크리스마스에는 뭐니뭐니 해도 옆구리 허전한 사람들에게는 절대적으로 애인이 필요하겠죠?^^; 직접 해보는 게 가장 큰 공부 역시나 그 동안 공부해왔던 내용을 바탕으로 셀프.. 2022. 12. 20.
화살표 함수 기초 개념 정리 - Arrow Function Javascript 소스들을 살펴보다 보면, 언젠가부터 " => " 이런 기호가 곧잘 눈에 들어오곤 합니다. Arrow Function, 즉 화살표 함수라고 불리는 표기법인데요, 기존의 전통적인 Function과는 다양한 차이점이 존재하지만 일단은 눈에 익숙해질 수 있도록 간단하게 기초적인 내용을 정리해보기로 합니다. 화살표 함수 기초 화살표 함수는 ES6 표준으로 제정된 문법이라고 합니다. 대충 자바스크립트 표준에 대한 버전이라고 보면 되는데요, ES2015라고도 부르니, 2015년에 업데이트 되어 제정된 표준을 말합니다. 전통적인 Function 표기 방식 예전부터 함수(Function)는 다음과 같은 표기 방식으로 정의되고 사용되어져 왔습니다. 꽤나 오래도록 자리매김 하고 있던 표기방식이라 뭔가 익.. 2022. 12. 17.
[실무적용 CaseStudy] 다수 개의 동영상 선택적으로 Play 하기 열 개 스무 개 이상, 여러 개의 동영상 파일을 html로 만든 1개의 템플릿에서 선택적으로 돌아가게 할 수 있으면 좋겠다고 생각해오고 있었습니다. 왜냐하면 가끔씩 그런 요청사항이 실무적으로 등장하거든요. 다수 개의 동영상 선택적으로 플레이하기 다수 개의 동영상 또는 다수 개의 이미지 혹은 다수 개의 파일들을 동적으로 핸들링하면서, 1개의 템플릿에 불러들여 사용하는 방식은 이미 주변에서 많이 보아왔습니다. 다만 문제는 제가 그걸 못하고 있다는 게 문제였죠. 역시 공부는 하면 되는군요! Before - 정적(Static) 구성 저의 고객사 중 학회가 몇 군데 있습니다. 학회는 보통 의사 선생님들이 모여서 1년에 몇 번씩 심포지움(Symposium)을 진행합니다. 심포지움을 진행하고 나면, 영상강의 자료가 .. 2022. 12. 15.
반응형