전체 글 (24) 썸네일형 리스트형 [JavaScript] this 알아보기 자바스크립트를 하면서 제일 헷갈리고 알기 쉽지 않은 this에 대해서 알아보기로 했다. 어렵지만 한 번쯤은 제대로 정리하고 넘어가야 좋을 것 같다. 자바에서 this는 클래스의 인스턴스 자신을 가리키며 멤버 변수에 접근할 수 있었다. 자바스크립트에서 this는 뭔가 비슷하면서도 다른 것 같다.. 뭘까? 공식 사이트를 통해서 this에 대한 설명을 찾아봤다. 몇 가지 키워드를 살펴보면 1. this의 값은 함수를 호출한 방법에 의해 결정되고, 호출할 때마다 다를 수 있다는 점 2. ES5에서는 bind 메서드를 통해 this 값을 설정할 수 있다는 점 3. ES6에서는 스스로의 this 바인딩을 제공하지 않는 화살표 함수가 추가된 점 세 가지의 특징을 확인할 수 있었다. 하나씩 살펴봐야겠다. this의 값.. [jQuery] find(), children() 비교해보기 jQuery 소스를 보다 보면 find()가 많이 쓰인다. find()는 범위를 넓게 검색하고 있다는 걸로 알고 있고 비효율적이라고 생각해 사용하지 않았다. 그래도 제대로 한번 알아보고자 비슷한 두 개의 함수 find()와 children()을 함께 비교해보기로 했다. a b c 가장 간단한 예제인 ul, li 태그로 비교해보기로 했다. 태그에 자식 요소 3개가 있고 요소마다 자식 요소가 한 개씩 있는 상태다. 우선 기준으로 을 찾아보기로 했다. 시작부터 find와 children이 다르게 동작한다. find는 태그 3개를 찾았고 children은 찾지 못했다. 그렇다면 좀 는 찾을 수 있을까? 태그를 찾은 결과는 같았다. find는 하위 요소를 전체 탐색하여 모두 찾을 수 있고 children은 한단계.. [jQuery] size(), length 비교해보기 jQuery를 사용하다 보면 선택자(Selector)를 통해 DOM을 제어하는 일이 대부분이다. 그중에 선택된 객체들의 개수를 구하고 싶을 때가 있다. 그때 쓰이는 size()와 length를 알아보기로 했다. foo bar 간단한 예제로 size()와 length를 사용해봤다. 결과는 같았다. 무슨 차이가 있을까? jQuery 소스를 확인해보니 size 함수는 결국 length를 반환하는 것이다. trigger('click')이랑 click()의 차이처럼 함수로 한번 감싸서 속도의 차이가 있을 것 같다. 하지만 속도를 비교했을땐 거의 비슷하며 근소한 차이였다. 그래서 공식문서를 찾아봤다. The .size() method is functionally equivalent to the .length pro.. [jQuery] 선택자(selector) id, name, class 비교해보기 업무 하면서 input 태그를 사용하는 일이 많아졌다. 그러다 문득 1개의 input 태그를 id로 가져오는 것과 name으로 가져오는 것의 차이가 궁금했고 여러 개의 input을 가져올 때 name과 class도 비교해보고 싶었다. 우선 한 개의 태그를 기준으로 비교해봤다. console.time("time"); for(var i=0; i class > name 순으로 빠른 것을 확인했다. 단건 태그는 id로 진행해야겠고 부득이한 경우에는 name보다는 class를 활용하는 게 좋겠다. 그럼 여러 개의 태그는 어떨까? console.time("time"); for(var i=0; i [JavaScript] for in, for of 차이 알아보기 코드 리뷰할 때 for of에 대한 내용이 나와서 한번 정리해야겠다는 생각이 들었다. for in과 for of 등 반복문을 사람마다 다양하게 사용하는 것을 발견하였고 각자 업무에 따른 의도가 있을 것 같다. for in에 대한 공식 문서의 설명은 다음과 같다. for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (Symbol로 키가 지정된 속성은 무시합니다.) for in은 객체에서 쓰이는 반복문으로 알고 있고 순서가 보장되지 않으며 key값으로 반복한다고 알고 있다. 설명을 봤을 때 알고 있는 내용이 포함되어있지만 "상속된 열거 가능한 속성"에 초점을 맞춰서 알아봐야겠다. var arr = [5, 6, 7]; for(var.. [LeetCode] Longest Common Prefix 이번에도 문자열 관련 문제를 풀어봤다. 문제는 간단하지만 답은 조금 생각이 필요했던 문제여서 기록해본다. Longest Common Prefix Write a function to find the longest common prefix string amongst an array of strings. If there is no common prefix, return an empty string "". Example 1: Input: strs = ["flower","flow","flight"] Output: "fl" Example 2: Input: strs = ["dog","racecar","car"] Output: "" Explanation: There is no common prefix among the.. [LeetCode] Valid Palindrome 공부 주제가 떠오르지 않을 때 코딩 문제를 풀어보기로 했다. LeetCode의 Top Interview Questions 문제들로 시작해봐야겠다! 여러 문제 중 Strings 카테고리의 Valid Palindrome 문제가 눈에 띄었다. 기업 코딩 테스트에서 자주 보던 주제여서 다시 한번 풀어보기로 했다. Valid Palindrome A phrase is a palindrome if, after converting all uppercase letters into lowercase letters and removing all non-alphanumeric characters, it reads the same forward and backward. Alphanumeric characters include .. [Web] 쿠키(Cookie) 이해하기 세션에 대해서 먼저 알아보았고 쿠키에 대한 이해가 필요했었다. 순서가 반대로 됐지만 이번에는 쿠키에 대해 자세히 알아봐야겠다! 상태를 저장하지 않는 게 HTTP 프로토콜의 Stateless 특성인데 상태 값을 저장해야하거나 하고 싶은 웹사이트도 있을 것이다. 그럴 때 사용할 수 있는 게 바로 쿠키..! 사용자의 로컬 환경에 저장되는 임시 데이터 파일이라고 정리해볼 수 있겠다. 쿠키는 키와 값 형태로 저장되며 이름, 값, 만료일, 경로 정보 등이 포함된다. 사용자의 로컬 환경에 저장되기 때문에 서버에는 부담이 적은 게 장점이고 반대로 로컬 환경에 저장되기 때문에 위변조 등 보안에 취약한 것이 단점이다. 클라이언트에 300개의 쿠키가 저장이 가능하고 도메인 당 20개의 쿠키를 가질 수 있으며 하나의 쿠키 당.. 이전 1 2 3 다음
