Javascript
[JS][DOM] Template (feat. textContent)
Template와 textContent 먼저 블로그에 배운것에 관하여 정리하는 텀이 길어지게 되었는데 그동안에 배운것을 머릿속으로 정리하는데 개념이 명확하게 잡히지 않았고 배운것을 적용하는대에 정말 어떻게 해야할지 알것같으면서 잡히지 않아서 긴시간을 고통받았기 때문에 오늘 하나의 기능을 구현하고 구글에 검색해도 한국어로는 정리가 안되어 있는 것 같아 정리를 해보고자 쓰게되었다. 1. Template란. 특별한 어플리케이션을 위한 시작점으로 사용되는 미리 작성된 형식을 가진 문서나 파일입니다. 즉, 형식(Format)은 사용될 때마다 매번 재생성하지 않아도 됩니다. 정의는 저렇게 나와있고 쉽게 말해서 HTML문서에서 특정한 서식을 작성해두고 JS파일에서 그 서식을 이용하여 기능을 구현할수 있도록 하는 태그..
[JS] web기초 Flex Box
예전의 방식 Float float : left 이미지를 왼쪽에 두고 이미지의 옆에 글이 자연스레 오도록 한다. float : center 이미지를 가운데 두고 이미지의 양옆에 글이 자연스레 오도록 한다. float : right 이미지를 오른쪽에 두고 이미지의 옆에 글이 자연스레 오도록 한다. 클래스를 만들때에 팁 div.container>div.item.item$ {$} * 4 1 2 3 4 // 이런식으로 만들어진다 Flex box Container 속성 container 안에서 100vh를 쓰면 보이는 전체를 지정하는것 만약 vh를 안쓰고 %를 쓴다면 container의 부모인 body 부모인 html까지 값을 100%로 해줘야 지정이된다 따라서 vh만 쓰면 부모신경을 안써도되겠다. 플렉스 박스는 ..
[JS] if (Number(str[i])===true) 의 값
if (Number(str[i])===true) 만약 str[i]가 숫자형태의 문자열일때 위의 값은 무엇이 될까? 간단하게 생각해 본다면 true가 나온다고 생각할수 있으나 실상은 False가 출력된다 만약 사용자가 값을 if (Number(str[i])) 단순히 이렇게 했다면 True가 출력되게 된다. 그 이유는 조건문에서는 NaN을 제외한 숫자는 truthy판정을 받기 때문이다. 그럼 위의 값은 왜 false가 되는것일까? 그이유는 if(Number(str[i])) 의 뜻은 str[i] 가 숫자 일때 ture 라는 뜻이라고 판단되고. 하지 만 if(Number(str[i]) === ture)는 (숫자=== ture) 라는 값을 물어보는것이기 때문이다... 따라서 숫자와 boolean 값은 다르니 if..
[JS]Closure에 대해
it('closure를 사용해 만든 property는 private하고 변경이 불가능합니다.', function() { function Person(firstname, lastname) { let fullName = firstname + ' ' + lastname; this.getFirstName = function() { return firstname; }; this.getLastName = function() { return lastname; }; this.getFullName = function() { return fullName; }; } let aPerson = new Person('John', 'Smith'); aPerson.firstname = 'Penny'; aPerson.lastname ..
[JS]Chain Scope 예시 2개
{let variable = "top-level"; function parentfunction() { let variable = "local"; function childfunction() { return variable; } return childfunction(); // 'local' } variable의 값은 무엇이 나올까? 첫번째 예시에서 variable의 값은 무엇이 나올까 언뜻보면 맨위의 anonymous function을 보면 variable의 값이 top-level이 아닐까 하는 생각이 든다 하지만 문제에서 요구하는 것은 parentfunction()을 실행시켯을때의 variable의 값이다 따라서 안쪽에서 실행된 함수 parentfunction() 새로운 변수 variable을 만들고 생..
[JS]Scope 변수의 변화 해설
나를 혼란에 빠트린 두가지 예시 내가 스코프에 대해서 배웠던 가장 간단한 사실. 안에서는 밖을 볼수있고 밖에서는 안을 볼수없다. 스코프를 가장 간단하게 설명할수 있지만 그만큼 예시를 보지않으면 알수가 없다. 아래의 첫번째 예제를 보면 밖에서 선언된 a,b라는 변수가 있고 첫번째 예제 함수안에는 a를 재할당 한것과 b.name를 재할당하는 식이 있다. 하지만 두번째 예제에는 함수 실행식만 있을뿐이지 인자를 받지는 않는다. 두번째 예제와 첫번째 예제가 틀린점은 함수의 파라미터가 있는것과 없는 것이다. 이 두가지 차이가 틀린 이유는 인자로 들어가느냐 안들어가느냐의 차이에 따라 값이 할당이 되는건지 아니면 그냥 값을 받아가는지가 결정되기 때문이다 그다음 중요한것은 변수의 할당에서 "Primitive type"은..