본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


Javascript/[기초] Javascript30

(기본/기초) javascript setTimeout setInterval clearInterval setTimeout 메서드는 일정시간후 함수를 실행한다. 1번만 동작하고 그 이후에는 동작하지 않는다. //setTimeout(fn, delay); 실행할함수, 간격 setTimeout(function(){ console.log('setTimeout') }, 1000); //1초후 setTimeout출력 setInterval 메서드는 일정시간마다 함수를 실행한다. //setInterval(fn, delay); 실행할 함수, 간격 setInterval(function(){ console.log('setInterval') }, 1000) //1초마다 setInterval출력 clearInterval 메서드는 setInterval로 반복하고 있는걸 멈추게 한다. // clearInterval(setInterv.. 2019. 11. 8.
(기본/기초) 자바스크립트 var, let, const (Javascript var) 자바스크립트에서 var 가 붙은 변수들은 대부분 어디서든 접근 가능하다. 물론 클로저형태는 빼고 말이다. 간혹..이러한 글로벌한 형태의 참조변수를 햇갈려서 아래 소스코드를 만나면 버그? 로 생각하는 경우가 있었다. for(var i = 0; i { console.log(num); },100); } 정말로 당연히 num 값이 0부터 9까지 나올줄 알았는데..결과는? 흑..이래서 기본에 충실해야 되는구나~ 라는 것을 정말 많이 느꼈다. 저기 저 setTimeout이라는 함수가 시간을 주고 num을 바라보고 있을때는...이미 반복문 for에 의해서 "참조" 하고 있는 i값이 전부 증가 해 버렸기 때문에 발생하는 현상이다. 반복문이 0부터 1.. 2019. 10. 4.
(기본/기초) Javascript 클로저, Javascript closure, 자바스크립트 클로저 웹 개발을 공부하면서 사실 기본을 처음부터 익히지 않고 무작정 달려들었던 것 같다. 원리와 기본 개념이 없어도 쉽다고 생각한 것이 자바스크립트였는데...막상 몇몇 기본적인 현상과 마주치고 나니.. "이건 버그야!" 라고 생각하는 경우도 종종 있었다. 아무튼, 클로저라는 개념을 모르고 사용한 코드가 아래처럼 종종 있었다. function hi(name) { var _name = '안녕! '; //클로저~ return function() { console.log(_name + ', ' + name); }; } var mm = new hi('world'); mm(); 위 경우를 살펴보면 _name으로 선언한 변수는 앞에 var가 붙었음에도 불구하고 글로벌하게 사용되지 않는 것을 볼 수 있다. 즉, 내가 무슨짓.. 2019. 10. 4.
(기본/기초) 브라우저 개발자도구 브라우저에서 F12키나 Ctr + Shift + I 키를 누르면 개발자 도구가 실행이 된다. 이 개발자 도구는, javascript 테그 않에 있는 명령어들이 실행되면서 에러나 사용자의 console.log 명령을 받게되면 해당 내용을 출력하거나 각종 정보를 보여주는 역할을 한다. 개발자 도구가 익숙하지 않는 사람들은..alert를 띄우거나 로그를 만드는 html 테그를 만들어서 디버깅 하기도 한다. 특히 alert 을 사용하는 디버깅은 속도도 느릴 뿐만 아니라 Object를 console로 찍었을 때 나오는 상세한 정보를 볼 수 없으므로 요즘은 대부분 개발자 도구를 키고 console.log안에 확인해야 될 데이터를 넣는다. 또한 이러한 개발자 도구는 html를 바로 편집하게도 해주며, 테그를 지우거나.. 2019. 4. 27.
(기본/기초) Html 페이지 생성시 Content-type의 중요성 얼마전 프론트에서 indexof를 활용하여 한글 데이터를 비교 한 뒤에 해당 데이터에 대한 처리 프로세스가 필요한 경우가 있었다. 워낙 쉽고 간단한 일이라 5분이내 해주겠다 하고선 작업하다가.. 왠걸? 동작이 안되는 것이다..;;;; indexOf, include 등등..여러 메소드를 동작시켰지만 단순한 비교가 되지 않아서 맨탈붕괴가 왔었는데.. 파이어 폭스로 돌려보니 에러 힌트를 알려줘서 금방 해결했다. 저 말인 즉슨...해당 페이지타입이 설정 안되서 문자 깨지는건 네가 감수하시오~ 라는 뜻이다... 테스트용 소스코드를 보니.. 메타테그에 cotent-type이 설정되어있지 않았다;;; 나중에라도...이런실수를 하지 않기위해서는 페이지를 만들 때 반드시 규칙에 맞게 만들도록 하는 습관을 길러야 겠다; 2019. 4. 27.
(기본/기초) Javascript 배열 Map, Filter, Reduce 자바스크립트 배열에서 forEach나 if문을 활용해서 나름 필터기능을 사용하고는 했었다. 함수형 기법을 조금 적용해 보면, 그러한 행위보다는 위에 나온 3가지 메서드를 활용하는 방법이 조금 더 효율적이고 코드가 깔끔 해 진다. Map은 배열 내부의 데이터를 변환하는 메소드 이며, Filter는 true, false를 반환하여 if문의 효과를 가져온다. Reduce는 데이터의 결과를 단일로 만드는 기능인데..필터기능이 추가된 것이라 보면 될 것 같다. 아래 소스코드를 보자. var array = [1, 2, 3]; array = array.map((res)=>{ return res * 2}); console.log(array); //1,2,3 배열값이 *2가된다. array = array.filter((.. 2019. 4. 26.