본문 바로가기

개발 일기13

[HTML/CSS] mouse hover 확대 css 효과주기 element 위에 마우스 올렸을 때 확대효과 주기 .element:hover { transform: scale(1.04); } 2021. 9. 3.
[자바스크립트] 자바스크립트의 메모리 관리 - 가비지 컬렉션에 대해서 (javascript garbage-collection) 메모리 생명 주기 프로그래밍 언어와 상관없이 매모리 생명 주기는 아래와 같이 항상 동일하다. 필요한 메모리 할당 할당된 메모리 사용(읽기, 쓰기) 해당 메모리가 필요 없어지면 해제 메모리 할당 및 해제 high level language인 자바스크립트는 필요한 메모리를 자동으로 할당하고 더 이상 사용하지 않는 메모리는 자동으로 회수하지만 "모든" 필요없어진 메모리를 해제하는 것은 아니며, 더 이상 필요없는 "몇몇"의 메모리를 찾아낸다. 필요없는 메모리를 식별하기 위한 방법은 무엇인가요? 1. Referenct-counting 파일, 소켓 메모리 슬롯 등 할당된 각 리소스를 가리키는 참조의 수를 계산하는 것. var bar = { name: 'bar' } bar = '' 위에서 bar는 새로운 값을 받았기.. 2021. 8. 29.
호이스팅에 대해서 알아보자(feat. 함수 선언문 & 함수 표현식) in Javascript 호이스팅이란 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다. 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. 유효 범위: 함수 블록 {} 안에서 유효 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다. 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다. 실제 메모리에서는 변화가 없다. // 호이스팅의 대상 var 변수 선언과 함수선언문( function test () {} ) 에서만 호이스팅이 일어난다. var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지.. 2020. 12. 20.
filter, map, reduce in javascript 간단 정리 /** * map, filter * 공통점 : 새로운 배열을 만든다. * 차이점 : filter는 조건을 통해 배열안의 값을 삭제 (걸러내기) * map은 원하는대로 배열안의 값을 변경 (변경하기) */ // 1보다 큰 값만 뽑아내서 새로운 배열 만들기 let arr = [1, 2, 3, 4, -1]; // let filterResult = arr.filter(function(num) { // return num > 1 // }) let filterResult = arr.filter(num => num > 1); console.log(filterResult); // [2, 3, 4] // 배열에서 1씩 더해주고싶을 때 let mapResult = arr.map(num => num + 1); console.. 2020. 11. 4.
다형성, 커링 in javascript /** * 3-2. 외부 다형성 */ console.log('---외부 다형성') console.log( [1, 2, 3].map((val) => { return val * 2; }) ); console.log( [1, 2, 3].filter((val) => { console.log(val); return val % 2; }) ); /** console.log( document.querySelectorAll('*').map(function(node) { return node.nodeName; }) ); // querySelectorAll 의 결과가 array가 아니라서 .map을 사용할 수 없음. */ /** * 3-3. 커링 : 함수와 인자를 다루는 기법 함수에 인자를 하나씩 적용해나가다가 * 필요한 .. 2020. 11. 3.
기존의 코드를 함수형 코드로 전환하기 in javascript DOCTYPE html> Document var users = [ { id: 1, name: 'id', age: 36 }, { id: 2, name: 'bj', age: 35 }, { id: 3, name: 'jn', age: 44 }, { id: 4, name: 'as', age: 33 }, { id: 5, name: 'df', age: 52 }, { id: 6, name: 'gh', age: 21 }, { id: 7, name: 'jk', age: 30 }, { id: 8, name: 'lm', age: 29 }, ] /** * 1. 명령형 코드 */ // 1-1. 30세 이상인 user를 검색 var temp_users = []; for (var i=0; i= 30) { temp_users.push.. 2020. 11. 2.

티스토리툴바