티스토리

권쓰의 일상

검색하기

블로그 홈

권쓰의 일상

dark-child.tistory.com/m

소소한 일상들과 맛집, 리뷰를 소개합니다

구독자: 160

방명록 방문하기

주요 글 목록

[HTML/CSS] mouse hover 확대 css 효과주기 element 위에 마우스 올렸을 때 확대효과 주기 .element:hover { transform: scale(1.04); } 공감수 2 댓글수 0 2021. 9. 3.
[자바스크립트] 자바스크립트의 메모리 관리 - 가비지 컬렉션에 대해서 (javascript garbage-collection) 메모리 생명 주기 프로그래밍 언어와 상관없이 매모리 생명 주기는 아래와 같이 항상 동일하다. 필요한 메모리 할당 할당된 메모리 사용(읽기, 쓰기) 해당 메모리가 필요 없어지면 해제 메모리 할당 및 해제 high level language인 자바스크립트는 필요한 메모리를 자동으로 할당하고 더 이상 사용하지 않는 메모리는 자동으로 회수하지만 "모든" 필요없어진 메모리를 해제하는 것은 아니며, 더 이상 필요없는 "몇몇"의 메모리를 찾아낸다. 필요없는 메모리를 식별하기 위한 방법은 무엇인가요? 1. Referenct-counting 파일, 소켓 메모리 슬롯 등 할당된 각 리소스를 가리키는 참조의 수를 계산하는 것. var bar = { name: 'bar' } bar = '' 위에서 bar는 새로운 값을 받았기.. 공감수 2 댓글수 1 2021. 8. 29.
호이스팅에 대해서 알아보자(feat. 함수 선언문 & 함수 표현식) in Javascript 호이스팅이란 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다. 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. 유효 범위: 함수 블록 {} 안에서 유효 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다. 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다. 실제 메모리에서는 변화가 없다. // 호이스팅의 대상 var 변수 선언과 함수선언문( function test () {} ) 에서만 호이스팅이 일어난다. var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지.. 공감수 6 댓글수 9 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.. 공감수 4 댓글수 3 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. 커링 : 함수와 인자를 다루는 기법 함수에 인자를 하나씩 적용해나가다가 * 필요한 .. 공감수 0 댓글수 0 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.. 공감수 2 댓글수 1 2020. 11. 2.
일급함수 in javascript /** 일급함수 자바스크립트에서는 함수가 일급함수인데 함수를 값으로 다룰 수 있다. 함수를 변수에 담을 수 있고, 변수에 담은 함수가 값으로 다뤄질 수 있다. */ var f1 = function(a) { return a * a; } console.log(f1); var f2 = add; console.log(f2); // 함수가 함수를 인자로 받기 function f3(f) { return f(); } console.log( f3(function() { return 10; }) ); /* add maker 순수함수도 사용되고, a를 기억하고있는 클로저 */ function add_maker(a) { return function(b) { return a + b; } } var add10 = add_mak.. 공감수 0 댓글수 0 2020. 10. 28.
함수형 프로그래밍 정리 (Functional Programming) javasciprt 함수형 프로그래밍 함수형 프로그래밍의 조건1. 인풋이 있고, 아웃풋을 return 하는 형태의 함수- 부작용이 없는 순수함 : 함수가 인풋만을 받아서 인풋만을 사용하고 아웃풋을 계산하여 리턴해야 함. 2. 다른함수를 인풋 또는 아웃풋으로 사용 (고차함수)- ex) map, reduce, filter 3. 모든 데이터를 불변으로 생각하기var rooms = ['h1', 'h2', 'h3'];rooms[2] = 'h4' ['h1', 'h2', 'h4'];rooms => ['h1', 'h2', 'h3']; 출처 : youtube jsconf 채널의 Anjana Vakil - JSUnconfhttps://www.youtube.com/watch?v=e-5obm1G_FY DOCTYPE html> Document /.. 공감수 0 댓글수 0 2020. 10. 28.
vue.js plugin으로 global method 만들기 DOCUMENT 플러그인 사용법 먼저 플러그인은 제공자와 사용자로 나뉩니다. 이때 두 사이를 이어주는 것이 Vue의 install 메서드입니다. 아래는 각각 예제 코드입니다. 제공자 코드 *// my-plugin.js*MyPlugin.install = function (Vue, options) { */* ... */*} 사용자 코드 import MyPlugin from 'my-plugin'; Vue.use(MyPlugin); export 할 js파일 만들기 emptyCheck.js const methods = { // 추후 필요한 method를 추가하기 위해 Object로 선언 isEmpty: (value) => { // 필요한 기능 작성 if (value == "" || value == null || .. 공감수 1 댓글수 0 2020. 10. 6.
[Vue.js] Computed 속성에 대하여 Computed 속성템플릿 문법에서 JavaScript 표현식을 사용하면, 쉽게 원하는 데이터를 DOM에 그릴 수 있습니다. 하지만 복잡한 연산을 템플릿 안에서 하게 되면, 코드를 이해하고, 유지보수하기 어려워집니다. 아래에서 예를 보여드리겠습니다. {{ message.split('').reverse().join('') }} new Vue({ el:'#example', data: { message:'안녕하세요' }, computed: { reversedMessage:function () { return this.message.split('').reverse().join('') } } }) 원본 메시지: "{{ message }}" 역순으로 표시한 메시지: "{{ reversedMessage }}" com.. 공감수 1 댓글수 0 2020. 1. 7.
SQL state [99999]; error code [17004]; 부적합한 열 유형: 1111; 오라클 DB 에러를 해결해보자 SQL state [99999]; error code [17004]; 부적합한 열 유형: 1111; 에러에서 자주 나오는 에러 입니다. 이럴 땐 보통 5가지 경우가 주 원인입니다. 1. 데이터 타입이 다르다. 2. Map을 파라미터로 넘겼을 때 해당 맵안에 파라미터가 null일 경우 3. 화면에서 (jsp view) request parameter값이 없을 때 4. form id 또는 name 값이 없을 때 5. ajax 모듈 사용 시 value값이 null이 있을 경우에 나 같은 경우엔 map에 들어갈 parameter가 null값이 확인되어 나왔던 에러였다. 아까운 내 시간 ... 공감수 7 댓글수 0 2019. 1. 15.
[Vue.js] Vuex 요점 정리 Vuex 란? Vue.js 의 상태관리 를 위한 패턴이자 라이브러리. 다른 상태관리 패턴이나 라이브러리와 비교했을 때 Vue 의 Reactivity 체계를 효율적으로 활용하여 화면 업데이트가 가능하다는 차이점이 있다. 상태관리 (State Management) 가 왜 필요한가? 컴포넌트 기반 프레임워크에서는 화면 구성을 위해 화면 단위를 매우 잘게 쪼개서 컴포넌트로 사용한다. 예를 들면, header, button, list 등의 작은 단위들이 컴포넌트가 되어 한 화면에서 많은 컴포넌트를 사용하게 된다. 이에 따라 컴포넌트 간의 통신이나 데이터 전달을 좀 더 유기적으로 관리할 필요성이 생긴다. 달리 말해, header -> button, button -> list , button -> footer 등의 .. 공감수 6 댓글수 0 2018. 12. 27.
oracle DB연결 후 JDBC 테스트 각 라인마다 주석을 보고 최대한 쉽게 풀어놓았습니다. package test; import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException; ----------DB연결을 위한 클래스 DBConnection.java ---------- public class DBConnection {public static Connection getConnection() {// 2. DB연결 할 Connection 을 선언 import java.sql.Connection;Connection conn = null;try {String user = "system";String pw = "test";String url = "jdbc:o.. 공감수 6 댓글수 0 2018. 12. 27.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.