IT 내맘대로 끄적끄적

[용어 정리] 객체지향(OOP)란? 객체 지향 프로그램(Object-Oriented Programming)이란? 객체 지향 프로그래밍은 컴퓨터 프로그래밍의 패러다임의 하나 객체 지향 프로그래밍은 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하고자 하는 것 각각의 객체는 메시지를 주고받고, 데이터를 처리할 수 있다. 객체 지향 프로그래밍은 프로그램을 유연하고 변경이 용이하게 만들기 때문에 대규모 소프트웨어 개발에 많이 사용된다. 또한 프로그래밍을 더 배우기 쉽게 하고 소프트웨어 개발과 보수를 간편하게 한다 보다 직관적인 코드 분석을 가능하게 하는 장점도 있다. 그러나 지나친 프로그램의 객체화 경향은 실제 세계의 모습을 그대로 반영하지 못한다는 비판도 있다. 프로그램은 특수한 목적을 가지고 데이터를 처리하기 위하여 만들어진다. 그런데 복잡한 데이터를 수많은 함수로만 처리하다 보면 여러가지 에러와 버그가 발생하는 문제점이 나타난다. 클래스는 이러한 문제를 해결하고 복잡한 데이터를 조금 더 쉽게 처리하게 도와준다. 주의점 일반적으로 프로그램을 만들때 항상 염두에 둬야 할 중요 포인트 2개 같은 코드를 반복하지 않는다. 코드는 항상 바뀔 수 있다는 것을 기억한다. 또한 클래스를 사용하면 사전이나 리스트가 지원하지 않는 상속과 같은 클래스의 기능도 사용 가능 출처 http://schoolofweb.net/blog/posts/

[JS] client에서 json객체를 key값으로 value뽑아내기 var param = {}; param.menuName = 'coffee'; param.price = 3500; param.customer = 'zorba'; //param = { "menuName" : 'coffee', "price" : 3500, "customer" : 'zorba'} console.log(param['customer']); //결과값: zorba json객체['key값']을 사용하면 json객체에 담긴 value를 뽑아낼 수 있다. 출처 https://zorba91.tistory.com/entry/%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8%EB%8B%A8%EC%97%90%EC%84%9C-json%EA%B0%9D%EC%B2%B4%EB%A5%BC-key%EA%B0%92%EC%9C%BC%EB%A1%9C-value-%EB%BD%91%EC%95%84%EB%82%B4%EA%B8%B0

[Vue] Hide div onlick 버튼 숨기기 방법 1 var app = new Vue({ el: '#app', data: { isHidden: false } }) <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <div id="app"> <button v-on:click="isHidden = true">Hide the text below</button> <button v-on:click="isHidden = !isHidden">Toggle hide and show</button> <h1 v-if="!isHidden">Hide me on click event!</h1> </div> 방법 2 new Vue({ el: '#app', data () { return { toggle: true } }, }) <script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script> <div id="app"> <button @click='toggle = !toggle'> click here </button> <div v-show='toggle'>showing</div> </div> 출처 https://stackoverflow.com/questions/48929139/hide-div-onclick-in-vue

[JS] 자바스크립트 일관성 있는 코딩 원칙 절대 스페이스와 탭을 섞어 쓰지 않는다. 프로젝트를 시작할 때 코드를 작성하기 전에 먼저 스페이스와 탭 중 하나를 선택 가독성을 위해서는 항상 편집기의 들여쓰기 크기를 2 문자로 설정을 권장 중괄호{}, 괄호(), 줄바꾸기 // if나 else, for while, try를 쓸 때에는 항상 빈 칸을 띠우고, 괄호를 사용하고, 여러 줄로 나누어 쓰세요. // 이렇게 하면 가독성이 더 좋아집니다. // 2.A.1.1 // 빼곡해서 알아보기 어려운 구문의 예 if(condition) doSomething(); while(condition) iterating++; for(var i=0;i<100;i++) someIterativeFn(); // 2.A.1.1 // 가독성이 높아지도록 빈 칸을 띠워주세요. if ( condition ) { // 코드 } while ( condition ) { // 코드 } for ( var i = 0; i < 100; i++ ) { // 코드 } // 아래처럼 하면 더 좋습니다: var i, length = 100; for ( i = 0; i < length; i++ ) { // 코드 } // 아니면 이렇게 할 수도 있죠... var i = 0, length = 100; for ( ; i < length; i++ ) { // 코드 } var prop; for ( prop in object ) { // 코드 } if ( true ) { // 코드 } else { // 코드 } 따옴표 작은 따옴표로 하냐 큰 따옴표로 하느냐 큰 상관없지만, 한 스타일만 고수 형변환과 비교 // 4.2.1 // 형변환 과 비교에 관한 메모 `===` 가 `==` 보다 좋습니다. (느슨한 형 비교가 필요하지 않는 이상) === 는 형변환을 하지 않습니다. 무슨뜻인가 하면:...

[JS] 배열에 값 추가 또는 제거  자바스크립트에서 배열에 새로운 값을 추가하고 싶으면, 앞이나 뒤에 추가 가능 배열에 값 추가 test.unshift('123'); // 앞에 새로운 배열값 추가 test.push('890'); // 뒤에 새로운 배열값 추가 배열에 값 제거 var myArray = [1,2,3,4,5,6]; myArray = myArray.filter(value => value !== 5); [1,2,3,4,6]; // 5 has been removed from this array 물론 splice () : anArray.splice(index, 1); delete : delete anArray[index]; 위와 같은 방법도 있지만,, 별로 비추... 특히 delete는 배열에 length는 업데이트 안되서 구멍이 날 수 있음 여기 에 더 자세히 나와있음 출처 https://www.google.co.kr/webhp?hl=ko&sa=X&ved=0ahUKEwi39I6R2fPcAhXFxLwKHdhPDzgQPAgD

[JS] 배열을 객체로 변환하는법 ['a', 'b', 'c']를 { 0: 'a', 1: 'b', 2: 'c' } 으로 변환하는법 1. jQuery의 경우 $.extend({}, ['a', 'b', 'c']); 2. Object.assign사용 Object.assign({}, your_array) Object.assign({}, ['a', 'b', 'c']) // {'0':'a', '1':'b', '2':'c'} assign에 대한 자세한 내용은 여기 클릭 3. ...사용 const array = ['a', 'b', 'c']; console.log({...array}); // it outputs {0:'a', 1:'b', 2:'c'} 출처 https://code.i-harness.com/ko-kr/q/4053b9

[JS] DOM이란? JavaScript를 공부하다보면 브라우저 기반의 여러 객체들에 대하여 듣게 됩니다. 처음부터 이 객체들을 구체적으로 파악하기는 쉽지 않다. 하지만 Javascript는 이러한 웹 브라우저 기반의 객체 위에서 동작하니 잘 알아야 한다. BOM(Browser Object Model) 웹 서비스 개발은 브라우저와 밀접한 관련이 있다. 모든 서비스는 사실 웹 브라우즈를 바탕으로 실행 됨 이 브라우저와 관련된 객체들의 집합을 BOM이라고 부름 이 브라우저 객체 모델(BOM)을 이용해서 Browser와 관련된 기능들을 구성한다. DOM은 이 BOM중의 하나 DOM(Document Object Model) DOM의 정의 문서 객체 모델로써 JavaScript Node 개체의 계층화된 트리 DOM은 HTML, XML 문서의 프로그래밍 API이다. 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공 문서 구조, 스타일 내용 등을 변경할 수 있게 돕는다. Document : 문서 Object : 객체  Mode: 모델 즉, 문서 객체 모델 문서 객체 : <html>, <body> 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(Object)로 만들면 그것을 문서 객체라고 함 모델 : 문서 객체를 '인식하는 방식' 즉, DOM은 넓은 의미 : 웹 브라우저가 HTML 페이지를 인식하는 방식 좁은 의미 : document객체와 관련된 객체의 집합 이제 DOM을 보게 되면 웹 브라우저가 html페이지를 인식하는 방식을 이야기하거나 문서 객체와 관련된 객체의 집합이라는것을 추측가능 DOM은 어떻게 생겼을까? 두번째 그림은 DOM에 포함된 <p> 태그를 더 자세히 본 그림 <p>태그에도 자식 노드들과 속성(attribute)들이 ...

[Vue] mapState, mapGetters, mapMutations, mapActions 정리 mapState Vuex에 선언한 state 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼 // App.vue import { mapState } from 'vuex' computed() { ...mapState(['num']) // num() { return this.$store.state.num; } } // store.js state: { num: 10 } ------ .vue ------ <!-- <p>{{ this.$store.state.num }}</p> --> <p>{{ this.num }}</p> mapGetters Vuex에 선언한 getters 속성을 뷰 컴포넌트에 더 쉽게 연결 해주는 헬퍼 // App.vue import { mapGetters } from 'vuex' computed() { ...mapGetters(['reverseMessage'])} // store.js getters: { reverseMessage(state) { return state.msg.split('').reverse().join(''); } } -------- .vue -------- <!-- <p>{{ this.$store.getters.reverseMessage }}</p> --> <p>{{ this.reverseMessage }}</p> mapMutations Vuex에 선언한 mutations 속성을 뷰 컴포넌트에 더 쉽게 연결 해주는 헬퍼 // App.vue import { mapMutations } from 'vuex' methods: { ...map...

[JS] Promise, async, await 정리 Promise Promise는 완료(실패하든 성공하든)될 것으로 기대되는 비동기 작업을 나타내는 객체 const asyncTask = new Promise((resolve, reject) => { try{ setTimeout(() => resolve('resolved'), 500); } catch(e) { reject(e); } }); asyncTask .then(result => console.log(result)) // result는 resolve를 통해 전달된 값 .catch(e => console.log(e)); // e는 reject를 통행 전달된 값 for(let i = 0; i < 10; i++) { console.log(i); } // 0 ~ 9 숫자가 출력된 후 프로미스가 resolve 됨 Promise 생성자 내부에서 setTimeout 함수를 통해 500ms 이후에 프로미스가 resolve(성공)된다. resolve되기 전에 에러가 발생한다면 promise는 reject(실패)된다. 위의 예제 코드에서 Promise객체인 asyncTask는 500ms내에 성공(resolve) 또는 실패(reject)할 것을 '약속'함 아직 완료되지 않은 프로미스의 상태는 pending상태라고 함 async/await async와 await은 프로미스가 포함된 코드(비동기 코드)를 동기 코드처럼 작성할 수 있도록 도와줌 function getText () {   return new Promise ( resolve => {     setTimeout( () => resolve( 'resolved' ), 3000 );   }); } async function asyncFunction () {   const text ...

[JS] JavaScript 함수 선언하고 호출하기 방법 1(함수 선언식) function functionName( argument1, argument2, ... ) { // Do Something } 방법 1로 함수를 선언한 경우, 함수 호출은 선언 전 또는 함수 선언 후에 모두 가능 방법 2(함수 표현식) 추천! var functionName = function( argument1, argument2, ... ) { // Do Something }; 방법 2로 함수를 선언한 경우 함수 호출은 함수 선언 후에 가능 함수 호출하기 functionName( value1, value2, ... ); 인자를 사용하는 함수에서 인자의 개수 = 값의 개수   - > 아무런 문제 없이 출력 인자의 개수 > 값의 개수   - >  undefined 인자의 개수 < 값의 개수   - > 인자보다 많은 값들은 무시 출처 https://www.codingfactory.net/10386

[JS] setTimeout과 custom sleep  javascript에서 일정시간 후에 실행되었으면.. 하는 코드가 존재하게 된다 가장 먼저 떠오르는 건 setTimeout()함수이다 setTimeout(function(){ // 1초 후 작동해야할 코드 alert("hello world"); }, 1000); setTimeout()은 유용한 함수이지만, 스레드 자체가 1초동안 블록킹 되기를 바랄때는 사용할 함수가 아니다 setTimeout()은 비동기 이벤트로 실행되는 함수로서 setTimeout()에 전달된 콜백함수는 1초뒤에 실행되겠지만, setTimeout()아래에 있는 코드는 곧바로 실행되기 때문이다 setTimeout(function(){ alert("hello world"); }, 1000); alert("goodbye world"); 스레드 자체가 블록킹되길 원할때는 그 스레드가 1초간 실행되어야할 함수를 호출해야한다 구글 javascript sleep으로만 검색해도 수천개의 코드가 나오는데 그 중 하나를 살펴보자 function sleep (delay) { var start = new Date().getTime(); while (new Date().getTime() < start + delay); } 블록킹되길 원하는 시간을 인자로 전달하면 해당 시간만큼 반복문이 돌아서 코드가 실행되지 않도록 한다 출처 https://multifrontgarden.tistory.com/157

[JS] JavaScript 날짜에서 GetTime()은? 자바 스크립트를 사용하다보면 얻어온 시간에 getTime() 메소드를 적용할 경우 아래와 같은 숫자들을 볼 수 있다 1548226472637 이 숫자의 의미들은 무엇일까? currentDate = new Date(); currentDate.getDate(); var start = new Date().getTime(); //1548226472637를 반환 13자리 숫자가 의미하는 것들 현재시간을 숫자로 나열 나열된 시간은 millisecond 즉, 1/1000초를 나타냄 1970년 1월 1일 자정을 기준으로 함 만약 음수로 나타날 경우 1970년 이전 출처 https://webisfree.com/2017-04-07

[how to] Google App engine에 deploy하는 방법 공통 터미널 명령어 실행하는 디렉토리를 잘 설정해야 함 자바 Maven활용시 app.yaml 파일에서 service : {name} 에  알맞은 name쓰기 APISERVER 디렉토리에 있을 수도 있음 github에서  master를 clone한 후 (Opitional) gcloud auth list 확인후 만약 auth가 다르면 바꾸기  gcloud auth application-default login  Y입력후 바꾸기 gcloud config list project확인 후 만약 project가 다르면 바꾸기 mvn clean package -Dmaven.test.skip=true mvn appengine:deploy -Dmaven.test.skip=true vue.js NPM활용시 디렉토리 app.yaml이 있는 곳에서 진행 npm install npm run build gcloud app deploy 참고 https://cloud.google.com/sdk/gcloud/reference/app/deploy

[Vue] Computed, Watch, methods 차이   Computed(계산된 속성) <p>뒤집힌 메시지: "{{ reversedMessage() }}"</p> // 컴포넌트 내부 methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } } 복잡한 Javascript 표현식은 HTML 정보가 들어가야하는 부분보다는 vue인스턴스 안에서 처리하는 것이 좋음 간단한 연산을 할때는 좋지만, 너무 많은 연산을 하면 코드가 비대해지고 유지보수가 어려움 computed 속성은 그런 처리를 담당하는 데이터 연산들을 정의하는 영역 computed는 data 속성에 변화가 있을 때 자동으로 다시 연산 computed는 message같은 프로퍼티가 변화가 있을 때만 다시 연산을 하고 한번 연산한 값을 캐싱해놓았다가 필요한 부분에 다시 재 활용 같은 페이지내에서 같은 연산을 여러번 반복할 때 사용하면 효율적 computed: { now: function () { return Date.now() } } 또한 Data.now()처럼 아무곳에도 의존하지 않는 computed속성의 경우 절대로 업데이트 되지 않음 methods 캐싱이라는 개념이 없기 때문에 매번 재 렌더링 됨 캐싱 효과가 필요없으면 methods 사용하고, 필요하면 computed 사용할 것 ex) 데이터가 자주 변동되면, 비용적인 면에서 -> computed ex) 데이터가 수시로 업데이트 된다면, 계속해서 캐시를 저장하는 computed보다는 mehtods가 더 효과적 Watch(감시자) 데이터(data()) 변화를 감지하여 자동으로 특정 로직(<temple> 등)을 수행 대부분의 경우 comput...

[용어 정리] 콜백(callback)함수란? CallBack함수란 이름 그대로 나중에 호출되는 함수 콜백 함수라 해서 그 자체로 특별한 선언이나 문법적 특징을 가지고 있지는 않다 콜백 함수도 일반적인 자바스크립트 함수일 뿐 콜백 함수는 코드를 통해 명시적으로 호출하는 함수가 아니라, 개발자는 단지 함수를 등록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수 즉, 콜백 함수는 유니크한 문법적 특징을 가지고 있는 것이 아니라, 호출방식에 의한 구분 대표적인 콜백 함수의 사용 예로는 자바스크립트에서 이벤트 핸들러 처리이다. <button id="button1" onclick="button1_click();">버튼1</button> <script> function button1_click() { alert("버튼1을 누르셨습니다."); } </script> HTML에 onclikc에 buttion1_click함수는 브라우저의 javascript API에서 DOM 이벤트 핸들러에 전달(등록)되고, 해당 버튼에 클릭이벤트가 발생했을 이벤트 핸들러가 콜백함수를 호출함 $( "#target" ).click(function() { alert( "Handler for .click() called." ); }); 위처럼 Jquery에서도 콜백함수를 자주 사용 함 콜백함수란 특정함수에 전달되어 특정함수가 어떤 조건에 의해 호출되는 함수 출처 https://blog.hanumoka.net/2018/10/24/javascript-20181024-javascript-callback/

[JS] 데이터 바인딩이란? 자바스크립트 웹 애플리케이션의 복잡도가 증가하면서 브라우저의 메모리에 있는 여러 개의 자바스크립트 객체 와 화면에 있는 데이터 를 일치시키기가 매우 어려워졌다 이러한 어려운 작업을 쉽게 해주는 해결책이 데이터 바인딩 데이터 바인딩 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법 즉, 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 기법 많은 자바스크립트 프레임워크가 이러한 데이터 바인딩 기술을 제공하고 있다. 단방향 데이터 바인딩 vs 양방향 데이터 바인딩 단방향 데이터 바인딩 : 데이터와 템플릿을 결합하여 화면을 생성 양방향 데이터 바인딩 : 데이터의 변화를 감지해 템플릿과 결합하여 화면을 갱신하고 화면에서의 입력에 따라 데이터를 갱신 즉, 데이터와 화면사이의 데이터가 계속 일치 출처 https://sungjk.github.io/2015/11/22/AngularJS(2).html

[용어 정리] 식별자(identifier), 리터럴(literal) 정리 리터럴(literal) let currentTempC = 22 위의 코드에서 22가 리터럴이다 리터럴 : 값을 프로그램 안에서 직접 지정한다는 의미 즉, 데이터 그 자체 리터럴은 값을 만드는 방법 자바스크립트는 개발자가 제공하는 리터럴 값을 받아 데이터를 만든다. 식별자(identifier) let room1 = conference_room_a room1은 변수를 가르키는 식별자 그리고 conference_room_a는 문자열 리터럴인 동시에 room1의 값 출처 https://blog.hanumoka.net/2018/09/21/javascript-20180921-javascript-var-let-const/#%EC%8B%9D%EB%B3%84%EC%9E%90%5Cidentifier-%EB%A6%AC%ED%84%B0%EB%9F%B4%5Cliteral-%EC%9A%A9%EC%96%B4%EC%A0%95%EB%A6%AC

[Vue] Axios(엑시오스)란? Vue에서 권고하는 HTTP 통신 라이브러리는 엑시오스 Promise 기반의 HTTP 통신 라이브러리이며, 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘 되어 있고 API가 다양함 엑시오스 설치 프로제그 엑시오스를 설치하는 방법은 CDN방식과 NPM방식 2가지가 있음 CDN 방식 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> NPM 방식 npm install axios Axios사용 방법 라이브러리를 설치하고 나면 axios라는 변수에 접근할 수 있게 됨 axios변수를 이용해서 아래와 같이 HTTP GET 요청을 날리는 코드를 작성 <div id="app"> <button v-on:click="fetchData">get data</button> </div> new Vue({ el: '#app', methods: { fetchData: function() { axios.get('https://jsonplaceholder.typicode.com/users/') .then(function(response) { console.log(response); }) .catch(function(error) { console.log(error); }); } } }) 위 코드는 get data 버튼을 클릭했을 때 사용자 정보를 받아오는 코드 실행하면 사용자 정보가 브라우저 개발자 도구의 콘솔에 출력됨 만약 API에서 GET으로 URL을 가져오면 Axios도 GET메서드를 활용하면 된다 기타 엑시오...

[JS] 전개 연산자(Spread Operator) 배열을 좀 더 직관적으로 활용하기 위한 것 전개 연산자는 함수를 호출하는 인자로 배열을 사용하고 싶을때나, 배열을 정의하는 리터럴 내에서 사용 가능 표현식은 아래와 같음 1. 함수를 호출 하는 인자로 배열을 사용할 때 myFunction(...iterableObj); 2. 배열 리터럴 [...iterableObj, 4, 5, 6] [a, b, ...iterableObj] = [1, 2, 3, 4, 5]; 다음 예를 살펴보자 function add(a, b, c){ return a+b+c; } var arr = [2, 4, 5]; add.apply(null, arr); // 11 기존 자바스크립트 문법으로 add함수를 정의하고, arr배열도 정의 add함수를 호출 할 때 인자값으로 arr배열의 원소들을 사용하려면 기본 메서드인  apply를 활용 똑같은 예제를 ES6의 전개연산자를 이용해서 표현 const add = (a, b, c) => { return a+b+c; } var arr = [2, 4, 5]; add(...arr); // 11이 출력 출처 http://pro-self-studier.tistory.com/13?category=659080

[JS] 배열의 map 메소드 map 메소드의 첫번째 인자 : 콜백함수 map 메소드의 두번째 인자 : 콜백함수를 실행할 때 this로 들어오는 값을 지정하는 것 생략 가능하며, 기본 값은 window객체 map 메소드를 이용하면 기존의 배열과 같은 길이의 배열을 리턴함 var arr = [1, 2, 3, 4, 5]; var newArr = arr.map(function(item){ return item*2 }); console.log(newArr); // (5) [2, 4, 6, 8, 10] 출처 http://pro-self-studier.tistory.com/12