programming
-
[JavaScript] 함수 선언식과 표현식programming/JavaScript&jQuery 2019. 11. 5. 00:00
1. 함수 선언식 1 2 3 4 5 function area(width, heigth){ return width*heigth; } console.log(area(5,10)); cs 2. 함수 표현식 1 2 3 4 5 6 7 var area = function(width, height) { return width * height; } console.log(area(5,10)); cs 두 방식의 가장 큰 차이점은 함수 표현식은 호이스팅(hoisting) 되지 않는다는 것이다. https://leeborn.tistory.com/entry/자바스크립트-호이스팅이란 지난번 작성한 호이스팅 관련 포스트에서도 적으려 했지만, 호이스팅에 대한 설명이 없어서 따로 적진 않았다. 또, 함수 표현식으로 사용할 때는 익명 함..
-
[JavaScript] 호이스팅이란?programming/JavaScript&jQuery 2019. 11. 4. 00:00
1. 호이스팅이란? 호이스팅이란? Hoisting 호이스팅(hoisting)은 ECMAScript® 2015 언어 명세 및 그 이전 표준 명세에서 사용된 적이 없는 용어입니다. 호이스팅은 JavaScript에서 실행 콘텍스트(특히 생성 및 실행 단계)가 어떻게 동작하는가에 대한 일반적인 생각으로 여겨집니다. 하지만 호이스팅은 오해로 이어질 수 있습니다. developer.mozilla.org 간단하게 설명하면, 자바스크립트에서 함수 및 변수 선언이 코드 순서상 먼저 일어나지 않아도, 실행할 수 있는 것이다. 예를 들어, 호이스팅을 변수 및 함수 선언이 물리적으로 작성한 코드 상단으로 옮겨지는 것으로 가르치지만, 실제로는 그렇지 않습니다. 변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서..
-
[JavaScript] let 그리고 const 사용법programming/JavaScript&jQuery 2019. 11. 3. 00:00
1. ECMA Script 6 줄여서 ES6라고 부르는 스크립트의 버전. 해당 버전에서 let과 const가 새로 생겼다. 이외에도 많은 게 생겼지만 여기선 let과 const만 적어본다. 2. let and const let과 const는 var 혼자서 하던 일을 대체하기 위해서 나왔다. 이전의 JavaScript에서는 var만 사용해도 모든 것을 처리할 수 있었지만, 똑같은 변수 선언 및 재할당이 너무나도 자유로워서, 잘못 사용할 경우가 있었다. 이러한 경우를 "블록 유효 범위"를 가지는 let과 const로 보충할 수 있다. 3. 사용법 let 1 2 3 4 5 6 7 let i = 1; for(let i = 0 ; i
-
[알고리즘] 해커랭크 알고리즘 사이트programming/Algorithm 2019. 11. 1. 00:00
예전에 코딩 테스트를 몇 번 본 적이 있다. 그때 시험쳤던 사이트로 처음 알게 된 사이트다. https://www.hackerrank.com HackerRank Join over 7 million developers. Practice coding, prepare for interviews, and get hired. www.hackerrank.com 다른 알고리즘 사이트와는 UI말고는 다를 게 없어 보이지만, 아주 큰 차이점이 있다. 모두 영어로 되어 있다는 것. 외국 사이트니까 당연한 것이지만, 처음 시험을 이 사이트로 볼 때는 조금 당황했었다. 영어실력도 같이 보겠다는 조금의 의미도 있겠지만, 몇 번 문제를 풀다 보면 영어에는 어렵지 않게 적응할 수 있다. (아직 문제를 많이 풀어보지 못해서, 뒤에 ..
-
[jQuery] each() 사용법programming/JavaScript&jQuery 2019. 10. 31. 00:00
1. each() 배열 같은 여러개의 데이터를 탐색할 때 사용할 수 있는 함수다. text1 text2 text3 text3 위와 같은 코드가 있을때, $("#btnDiv>button")로 접근하면, 길이가 4인 버튼 배열을 가져온다. 이때 저런 배열을 탐색하기 편하게 해주는 함수가 each()다. 2. jQuery $(function(){ $("#btnDiv>button").each(function(index, obj){ console.log(index); console.log(obj); }) }); each로 사용하면 첫번째로 index, 두번째로 객체를 전달해준다. index는 배열의 순서대로 0에서 3까지 나오게 된다. obj는 button 태그 전체를 반환한다. 그래서 인덱스별로, 객체별로 접근..
-
[html&jQuery] $.data()로 data-value 속성 사용하기programming/JavaScript&jQuery 2019. 10. 30. 00:00
1.data-value 속성 test1 button 태그를 기준으로 위와 같이 data를 저장할 수 있다. data-* 의 형태로 변수의 이름을 지정할 수 있다. ex) data-val1, data-max-width, data-length 2.$.data() 제이쿼리의 data() 함수를 통해서 위의 값들을 가져올 수 있다. $("#test1").data('btn-width'); // 200 $("#test1").data('btnWidth'); // 200 data()로 호출할 때는 "data-" 부분은 빼고 호출한다. data()에 작성된 변수명을 보면 다르게 작성되어있지만, 같은 동작을 한다. "-"로 연결된 부분은 camelCase 형태로도 호출할 수 있다. 3.$.attr() attr()로 호출할..
-
[Window, 크롬] 컴퓨터 어두운 테마 적용하기programming/ETC 2019. 10. 27. 00:00
컴퓨터를 많이 사용하는 직업은 계속 하얀 화면들을 모니터로 보다 보니 눈이 피곤할 때가 많다. 눈이 피곤한게 다른 이유일 수 도 있지만, 나는 컴퓨터의 하얀 배경이 문제인 것 같다. 그래서 보통 IDE들은 다크 테마를 주로 사용한다. 처음으로 비쥬얼 스튜디오나, 이클립스 등을 사용할 때는 그냥 흰 화면으로 했었다. 근데 주변에서 다크 테마로 이용하는것을 보고 바꿔보니 눈이 편해지는 것 같아서, 이후로는 모든 IDE에 다크테마를 적용시켜서 쓴다. 최신 IDE들은 아예 기본으로 다크 테마가 기본으로 되어 있는 것들도 많은 것 같다. (파이참이나, VSCode ...) 나는 거의 윈도우 + 크롬으로 작업하기 때문에 해당 기기들에서 어두운 테마를 사용하는 법을 정리해본다. - 윈도우 다크 테마 적용 검색 "설정..
-
[html] 스크립트 삽입 위치와 async, defer 속성programming/HTML&CSS 2019. 10. 26. 00:00
html에 자바스크립트를 사용할 때, 사이에 삽입할 수 도 있고, 사이에 삽입할 수 도 있다. 의 첫 부분에 태그를 넣을 수도 있고, 의 끝부분에 넣을 수 도 있다. 위의 위치들과 전혀 상관없이 스크립트를 작성할 수 도 있다. 다만 html이 로드되고 실행돼야 하는 스크립트의 경우에는 의 끝부분에 작성을 했다. 이런 방식의 스크립트 작성은, 규모가 큰 사이트의 대규모 스크립트나 스타일시트가 있을 경우, 필요한 화면 로딩이 느려질 수 도 있다. 이때 필요한 속성이 "async", "defer" 속성인데 아래와 같이 사용할 수 있다. async와 defer는 스크립트 로딩을 html과 같이 동기로 실행시켜준다. 그래서 test $("#test").click(function(){ alert("async-def..