IT 내맘대로 끄적끄적

[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 // 형변환 과 비교에 관한 메모 `===` 가 `==` 보다 좋습니다. (느슨한 형 비교가 필요하지 않는 이상) === 는 형변환을 하지 않습니다. 무슨뜻인가 하면:

[Vue] prop이란? 컴포넌트는 parent-child관계에서 가장 일반적으로 함께 사용하기 위한 것 컴포넌트A는 자체 템플릿에서 컴포넌트B를 사용 가능 서로 의사소통 부모는 자식에게 데이터를 전달해야 할 수도있으며, 자식은 부모에게 일어난 일을 알릴 필요가 있다. 그러나, 부모와 자식이 명확하게 정의된 인터페이스를 통해 가능한한 분리된 상태로 유지하는 것도 매우 중요 이렇게하면 각 컴포넌트의 코드를 상대적으로 격리 할 수 있도록 작성하고 추론할 수 있음 Vue.js에서 부모-자식 컴포넌트 관계는 props는 아래로 events는 위로 부모는 props를 통해 자식에게 데이터를 전달하고 자식은  events를 통해 부모에게 메시지를 보냄 Props로 데이터 전달하기 모든 컴포넌트 인스턴스에는 자체 격리 된 범위가 있다. 즉, 하위 컴포넌트의 템플릿에서 상위 데이터를 직접 참조할 수 없으며 그렇게 해서도 안됨 데이터는 props옵션을 사용하여 하위 컴포넌트로 전달 가능 prop는 상위 컴포넌트의 정보를 전달하기 위한 사용자 지정 특성 하위 컴포넌트는 props옵션을 사용하여 수신 할 것으로 기대되는 props를 명시적으로 선언해야 함 Vue.component('child', { // props 정의 props: ['message'], // 데이터와 마찬가지로 prop은 템플릿 내부에서 사용할 수 있으며 // vm의 this.message로 사용할 수 있습니다. template: '<span>{{ message }}</span>' }) 그런 다음 일반 문자열을 다음과 같이 전달 할 수 있음 <child message="안녕하세요!"></child> 결과 출처 https://kr.vuejs.org/v2/guide/components.html

[Vue] @의 의미 <!-- 위와 같습니다 --> <input v-on:keyup.enter="submit" /> <!-- 약어 사용도 가능합니다 --> <input @keyup.enter="submit" /> @ = v-on 출처 https://kr.vuejs.org/v2/guide/events.html

[Vue] 이벤트 리스너 v-on v-on 디렉티브를 사용하여 DOM 이벤트를 듣고 trigger 될 때 Javascript를 실행할 수 있다. v-on 이벤트 리스너의 역할 ex) 로그인 페이지에서 아이디와 패스워드를 넣고 실행 버튼을 누르는 순간에 로그인 버튼은 자신이 클릭 되는 순간에 이 로그인 이벤트를 실행 여기서 이벤트를 실행하기 위한 trigger(로그인 버튼 클릭)와 이벤트를 연결 해주는 것이 이벤트 리스너 v-on:이벤트이름=”method 이름” ex) v-on:click= "rollDice()" 출처 https://medium.com/@hozacho/%EB%A7%A8%EB%95%85%EC%97%90-vuejs-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A6%AC%EC%8A%A4%EB%84%88-v-on-vuejs-directive-625bfc661c75

[JSON] JSON키 값 재 정의 방법 [ { "_id":"5078c3a803ff4197dc81fbfb", "email":"user1@gmail.com", "image":"some_image_url", "name":"Name 1" }, { "_id":"5078c3a803ff4197dc81fbfc", "email":"user2@gmail.com", "image":"some_image_url", "name":"Name 2" } ] 위와 같은 JSON파일에서 _id -> id로 키를 변경하고 싶다면 [ { "id":"5078c3a803ff4197dc81fbfb", "email":"user1@gmail.com", "image":"some_image_url", "name":"Name 1" }, { "id":"5078c3a803ff4197dc81fbfc", "email":"user2@gmail.com", "image":"some_image_url", "name":"Name 2" } ] 아래와 같이 하면 됨 var json = '[{"_id":"5078c3a803ff4197dc81fbfb","emai

[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

[용어 정리] jar, war 차이 정리 Java로 개발한 application을 배포할 때는 jar, war형태로 배포하게 된다. 이 둘은 완전히 동일한 형식임 즉, 확장자를 서로 바꿔도 문제는 없지만, 만들어진 목적이 서로 다름 war는 Web application을 배포하는 형식 jar는 library나 일반 application을 배포하는 형식 JAR(Java ARchive) jar압축은 하나의 application기능을 가능하도록 java파일 등을 압축하고 지원 만드는 목적 : 자바 클래스 파일들이 주이며, EJB 파일들을 포함 EJB(Enterprise Java Beans) : 기업 환경의 시스템을 구현하기 위한 서버측 컴포넌트 모델 path등의 경로를 유지하기 때문에 jar파일을 사용하는 사용자들은 각 파일들에 대한 path문제에서 벗어날 수 있다. ex) ojdbc14.14, servlet-api, jar 등 WAR(Web Archive) war압축은 jar과 달리 웹 어플리케이션을 지원하기 위한 압축방식 웹 어플리케이션을 지원하기 위해서 war 압축방식은 jsp, servlet, gif, html, jar 등을 압축하여 지원 이는 jar과 같은 맥락으로 servlet context 접근을 위해 관련된 모든 파일들을 패키지화 만드는 목적 : 웹 어플리케이션에 관련된 파일들을 포함한다. ex) jsp, servlet 파일 등 출처 https://teamescape.tistory.com/51

[Spring] setheader, Content-Disposition 정리 setHeader(Object headers) Sets the headers for the web service response. 웹 response를 위해서 해더를 설정 return값 -> void A javaScript object listing each header and the value to assign that header 각각의 헤더와 해당 헤더를 할당할 값에 나열하는 자바스크립트 객체 var headers = {}; headers.X-Total-Count=100; headers.Location=‘https://instance.service-now.com/ '; response.setHeaders(headers); Content-Disposition HTTP response에서 그 컨텐츠가 inline(default)으로 보여질것인지 아니면 attachment로 다운로드 되어서 로컬에 저장될 것인지를 결정 Content-Disposition: inline Content-Disposition: attachment Content-Disposition: attachment; filename="filename.jpg" ;(세미콜론)을 기준으로 여러 파라미터를 추가 가능 단 맨 처음은 form-data탕비 와야 함 Content-Disposition: form-data Content-Disposition: form-data; name="fieldName" Content-Disposition: form-data; name="fieldName"; filename="filename.jpg" res.setHeader(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=" +

[용어 정리] 개발자 vs 엔지니어 개발자 목적에 맞는 프로그램을 만드는 일 고객대상( 고객과의 대화) 프로그램 설계 및 개발 프로그램 테스트  엔지니어 프로그램 설계, 개발 프로그램 테스트 프로그램 유지보수 프로그램 발전고려 출처 https://m.blog.naver.com/PostView.nhn?blogId=wipr82914&logNo=220402091814&proxyReferer=https%3A%2F%2Fwww.google.com%2F

[JAVA] ByteBuffer란? 초기화 // ByteBuffer 의 위치는 java.nio.ByteBuffer 입니다. int capacity = 1024; ByteBuffer buffer1 = ByteBuffer.allocate(capacity); ByteBuffer buffer2 = ByteBuffer.allocateDirect(capacity); allocate와 allocateDirect는 무슨 차이일까? allocate : 자바에서 주로 쓰이는 일반적인 할당 allocateDirect : 자바의 힙이 아닌 외부(운영체제 시스템)의 할당 때문에 운영체제 시스템을 이용하는 입출력(소켓통신의 read/write  등)에서 중간 개체를 거치지 않아 속도적 이득이 있는 반면에, 일반적인 가비지 컬렉터 밖의 범위에 있으며, 할당과 해제시 한 단계 더 거치기 때문에 이러한 동작의 속도는 감소 자바 문서에서는 운영체제 시스템을 이용하는 입출력이며 할당과 해제가 잘 일어나지 않는 부분에 allocateDirect를 사용하라고 권고하고 있다. 생성된 객체가 다이렉트인지 아닌지 알기 위해서는 isDirect를 사용하면 된다. if (buffer2.isDirect()) { // allocateDirect 로 생성된 객체입니다. } 주요 포인터/ 반환함수 int capacity() 전체 크기  처음 allocate / allocteDirect에 할당된 크기를 반환 이 값은 객체가 소멸될때까지 변하지 않음 int position() 포인터의 시작 포지션 첫 생성값은 0 int limit() 포인터의 끝, 첫 생성값은 capacity()와 동일 ByteBuffer buf = ByteBuffer.allocate(100); System.out.println("처음생성"); System.out.println(buf.capacity()); System.out.println(b

[JAVA] split을 출력하고 싶을 때 String[] parsedFilePath = location.split("/") System.out.println(parsedFilePath); // 이상한게 나옴 Arrays.toString(parsedFilePath); //제대로 나옴

[Spring] Ant path style이란? Ant path style은 스프링 프레임워크에서 사용된다. 출처 https://stackoverflow.com/questions/2952196/learning-ant-path-style

[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)들이

[Maven] maven wrapper란? Apache Maven은 자바 프로젝트에서는 없어서는 안 될 의존성 관리 도구 이를 좀 더 쉽게 최신 버전을 유지하기 위해 Maven wrapper가 나옴 Maven wrapper가 설정된 프로젝트는 Maven 설치 없이도 빌드 가능 Maven Wrapper Apache Maven을 프로젝트에서 요구하는 버전으로 유지하기 위해 사용하는 도구 만약 로컬 시스템에 mvn이 설치되어 있지 않거나 혹은, mvn 버전이 2.x대의 낮은 버전이라면, maven을 설치하는 것도 프로젝트를 설정하는데 번거로운 작업일 것 실행하기 일반적으로 Maven은 다음과 같은 명령으로 실행 함 mvn clean package 하지만, mvnw가 설정된 프로젝트의 경우 다음과 같은 명령어로 실행한다. 만약 mvnw에 실행 권한이 없다면 실행 권한을 추가해야 한다  chmod  +x mvnw ./mvnw clean package 또는 윈도우에서는 다음과 같은 명령어로 실행한다. mvnw.cmd clean install 사용되는 maven의 버전은 .mvn/wrapper/maven-wrapper.proeprties 파일에 distributionUrl  속성에 정의된다. 프로젝트 최상단 디렉토리에 mvnw, mvnw.cmd와  .mvn 디렉토리가 있다면, mvnw가 설정되어 있는 프로젝트이다. 프로젝트에 mvnw 초기 구성 그렇다면, mvnew가 구성되지 않은 프로젝트의 경우에는 어떻게 구상해야 할까? 우선 mvn 명령어가 동작하게 maven 환경을 구성해야 함 maven 구성 방법은 Apache Maven 사이트에서 직접 내려 받는 방법 등 여러가지가 있다 maven환경이 설정되었으면, 다음의 명령어를 실행 할 수 있다. mvn -N io.takari:maven:wrapper -Dmaven=3.3.3 만약 -Dmaven 버전을 명시하지 않으면

[Maven] pom.xml 분석 Maven Maven은 자바 프로젝트의 빌드(build)를 자동화 해주는 빌드 툴이다. 즉, 자바 소스를 compile하고 package해서 deploy하는 일을 자동화 해주는 것 Maven이 참조하는 설정파일 Maven 전체를 보기보다 프로그래밍에 직접적인 연관이 있는 두 개의 설정파일을 보면 됨 1. settings.xml settings.xml은 maven tool 자체에 관련된 설정을 담당 MAVEN_HOME/conf/ 아래에 있다. MAVEN_HOME은 환경변수에 설정한 경로 Maven 자체에 설정 값을 바꾸는 일은 일단 잘 없으므로 넘어가고 기획한대로 pom.xml을 보자 2. pom.xml 하나의 자바 프로젝트에 빌드 툴로 maven을 설정했다면, 프로젝트 최상위 디렉토리 "pom.xml"이라는 파일이 생성되었을 것이다. pom.xml은 POM(Project Object Model)을 설정하는 부분으로 프로젝트 내 빌드 옵션을 설정하는 부분 꼭 pom.xml이라는 이름을 가진 파일이 아니라 다른 파일로 지정할 수도 있다 mvn -f ~~.xml test 그러나 maven의 원칙으로 다른 개발자들이 헷갈릴수 있으므로 그냥 pom.xml을 쓰자 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion&g

[Maven] mvnw, mvnw.cmd란? mvnw, mvnw.cmd는 Maven wrapper 이다 mvnw, mvnw.cmd를 사용하면 Maven설치와 path설정을 하지 않고 Maven프로젝트를 실행 가능 Maven build를 하기 위한 모든것이 들어가 있음 올바른 Maven 버전을 다운로드 함 mvnw -> 리눅스 버전 mvnw.cmd -> 윈도우 버전 필요한 모든 Maven 래퍼 파일을 만들거나 업데이트 하려면 다음 명령어를 사용하면 됨 mvn -N io.takari:maven:wrapper Maven에 다른 버전을 사용하려면 다음과 같이 버전을 지정 가능 mvn -N io.takari:maven:wrapper -Dmaven=3.3.3 위 두개의 명령어는  maven을 필요로 함 먄약 mvnw를 가지고 있다면 mvn명령어를 ./mvnw대신 사용 가능 maven기본 명령어 옵션을 보고 싶으면 여기 클릭 출처 https://stackoverflow.com/questions/38723833/what-is-the-purpose-of-mvnw-and-mvnw-cmd-files

[Linux] netstate 명령어 netstat는 시스템의 네트워크 연결 목록(tcp, udp, 소켓 연결) 을 보여주는 유틸리티 네트워크 연결 정보 외에도 라우팅 정보나 네트워크 인터페이스 상태, Masqurade 연결 상태 및 멀티캐스트 멤버 정보 등을 조회 가능 가장 기본적이고 간단한 명령으로 현재 연결을 모두 보여주는 것( 옵션으로 a 사용) 출처 https://sisiblog.tistory.com/12

[Linux] 리눅스 ps 명령어  ps 명령어는 현재 시스템에서 돌고 있는 프로세스를 보여주는 가장 기본적인 명령어 ps 명령어는 top이나 htop같이 실시간으로 시스템 자원을 출력하는 명령과는 달리 ps 명령어를 입력한 순간의 정보(user id, cpu 사용량, memory 사용량, 사용한명령 등) 을 보여준다 ps명령 ps aux | grep 8080 이런식으로 사용 출처 https://sisiblog.tistory.com/19

[How to] java.lang.reflect.InvocationTargetException 에러 처리 Spring을 돌리다가  java.lang.reflect.InvocationTargetException에러가 나왔다. 무엇이 잘못된지 구글링을 해보다가 결국에는 도움을 얻었다 알고보니 8080포트에 다른것이 백그라운드에서 돌아가고 있었던것 netstat | grep 8080  8080포트에서 돌아가고 있는것을 확인 ps aux | grep jar jar가 실행중인지 확인하는 명령어 ps aux | grep java java가 실행중인지 확인하는 명령어 프로세스 확인 후  kill 명령어 쓰기  ex) kill 71914

[Vue] Vue 인스턴스 <div id="app">{{ msg }}</div> <script> var vm = new Vue({ el: '#app', data: { msg: 'Hello world' } }); </script> Vue 생성자 함수로 뷰모델을 만드는데 이것이 Vue 인스턴스이다. Vue 인스턴스 자바스크립트 객체인데, 내부적으로 연결된 템플릿이 필요하다 그것을 el 키에 셀렉터 값으로 넣어주면 된다 { el: '#app' } 그리고 data 객체는 인스턴스 상태를 저장하는 역할을 하는데 템플릿에 바인딩할 데이터들의 집합이다. msg 변수값을 템플릿에 인터폴레이션 문법으로 바인딩하여 출력하였다 {{ msg }} 출처 http://blog.jeonghwan.net/vue/2017/03/27/vue.html

[용어 정리] XML, JSON 비교 XML? JSON? 이것들은 무엇일까? XML과 JSON은 구조화된 문서를 전송 가능하게 만든 텍스트 포멧 형식을 말한다 이 둘은 모두 특정한 의미를 가진 데이터를 담는 포멧을 정의 ex) RSS피드의 경우 현재는 XML방식이 널리 사용되는데 RSS정보를 분리하여 정보를 읽을수 있도록 내용을 DB에서 불러와 XML포맷으로 변환한다. 일단 XML과 같은 텍스트 방식의 전달방식은 텍스트로만 정보가 이루어 지기 때문에 기기에 구애받지 않고 어느 환경에서건 사용이 가능하도록 플랫폼에서부터 자유로운 방식 JSON은 XML의 단점을 보완 JSON이 XML보다 많이 쓰이는 이유 복잡성 무거운 시스템보다는 유연하고 구성 가능한 툴이 환영받고 있는데 JSON은 이런 흐름을 잘 타고 있다. 보안 XML은 적절하게 파싱(Parsing)을 거쳐도 BL(Billion Laughs)공격 또는 EE(External Entity)공격 같은 보안 취약성을 일부 가지고 있다.  하지만 JSON은 그렇지 않다.  JSON을 이러한 위험성에 노출되는 툴을 개발하기 어렵지만, XML은 능동적으로 확인하고 피해야 함 자바스크립트 JSON은 자바스크립트로 작성되었다.  JSON을 사용하면 송신과 수신 족에서 새 데이터 요소를 패키지화하고 해체하는 추가 작업이 적다. 본래 자바스크립트와의 손쉬운 상호운용성을 위해 자바 스크립트에서 사용하는 문법을 그 자체의 데이터 형식으로 뽑아내도록 정의됐다. 툴지원 JSON의 인기가 높아지면서 더 많은 개발자 툴이 표준으로 받아들여지고 있다. 출처 https://usbs.tistory.com/entry/ https://12bme.tistory.com/202

[Vue] Vue란? Vuex 로 해결 할 수 있는 문제 MVC 패턴에서 발생하는 구조적 오류 컴포넌트 간 데이터 전달 명시 여러 개의 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제 Vuex 개념 State : 컴포넌트 간에 공유하는 데이터 data() View : 데이터를 표시하는 화면 template Action : 사용자의 입력에 따라 데이터를 변경하는 methods Vuex 구조 Component -> async logic -> sync logic -> state state : 여러 컴포넌트에 공유되는 데이터 data getters : 연산된 state 값을 접근하는 속성  computed mutations : state 값을 변경하는 이벤트 로직, 메서드  methods actions : 비동기 처리 로직을 선언하는 메서드  aysnc methods State state가 변경되면 자연스럽게 뷰 리액티비티에 의해서 화면이 다시 갱신됨 // Vue data: { message: 'hi vue' } // Vuex state: { message: 'hi vue' } ----------------------------------------- // vue {{ message }} // vuex {{ this.$store.state.message }} Getter state값에 접근한다. computed()처럼 미리 연산된 값에 접근한다 // store.js state: { num: 10 }, getters: { getNumber(state) { return state.num; }, doubleNumber(state) { return state.num * 2; } } -----------------------------

[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

[Vue] actions, getters, index, mutations 란? actions 함수 dispatch 로 actions 사용 가능 ex) this.$store.dispatch("scenarios/getScenariosOutput") getters 불러오는 것 index 기본 파일 ...mapGetters( {})로 index에 있는거 가져올 수 있음 state 로 index 사용 가능 ex) context.rootState.open_api~~; mutations 함수(비동기식) commit mutations 사용 가능 context.commit("setOutputData", data_json.data); context를 보려면 JSON.stringify(context) Vuex 저장소에서 실제로 상태를 변경하는 유일한 방법은 mutation을 사용하는 것

[용어 정리] 서버리스(serverless) 컴퓨팅이란? 서버리스 컴퓨팅을 통해 개발자는 클라우드 기반 서버, 인프라 및 운영 체제를 사용함 실제로 서버리스라고 하지만 서버가 계속 관련됨 그러나 완전히 관리되는 서비스로서 설정, 용량 계획 및 서버관리는 클라우드 공급자에 의해 처리되므로 사용자에게 표시되지 않음 기존 황경에서 개발자는 서버를 프로비전 및 구성하고, 운영 체제를 설치하고, 인프라를 지속적으로 관리해야 했었지만 서버리스 아키텍처를 사용하면 인프라를 걱정할 필요 없이 요청 시 크기가 조정되는 앱을 자유롭게 만들고 관리하고 배포할 수 있음 ex) GCP, AWS, Azure 등이 제공 출처 https://azure.microsoft.com/ko-kr/overview/what-is-serverless-computing/

[용어 정리] Commit이란? COMMIT : 저장되지 않은 모든 데이터를 데이터베이스에 저장하고 현재의 트랜잭션을 종료하라는 명령 데이터베이스에서 트랜잭션(Transaction) 이란, 논리적인 일의 단위를 말함. 예를들어서, 생각해보면 사용자가 INSERT 문을 사용해 데이터를 삽입하고, UPDATE문으로 데이터를 갱신하고, DELETE 문으로 데이터를 삭제하였다고 하자 만약 이 모든 과정이 오류없이 수행되었다면 지금까지 실행한 모든 작업을 ' 실제로' 수행하라는 명령 을 내릴 수 있는데 이 때의 명령이 바로 COMMIT 명령 COMMIT 명령을 주기 전까지의 모든 작업은 ROLLBACK 명령으로 원상태로 되돌릴 수 있음 만약, INSERT작업 후 SAVEPOINT A라는 명령을 실행하였다면 나중에 ROLLBACK 라는 명령을 통해 INSERT작업을 한 그 위치로 되돌아 올 수 있음 그러나 COMMIT을 실행하면 불가능 이와 같이 COMMIT 명령으로 하나의 작업이 성공적으로 끝났을 때, 트랜잭션이 끝났다고 볼 수 있음 출처 https://m.blog.naver.com/PostView.nhn?blogId=woghdi8318&logNo=51124164&proxyReferer=https%3A%2F%2Fwww.google.com%2F

[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

[Linux] 마운트(mount)란? window에는 마운트라는 개념이 별로 사용되지 않지만, 윈도우 등은 장치들을 이름으로 식별하는 것과 달리, 리눅스는 그 위치로 장치들을 식별한다. 리눅스에서는 하드디스크의 파티션, CD/DVD, USB 메모리등을 사용하려면 특정한 위치에 연결을 해 줘야 한다.  이렇게 물리적인 장치를 특정한 위치(대게는 디렉토리)에 연결해주는 과정 을 마운트라고 한다 즉, 논리적으로 디스크와 디렉토리를 붙이는 것 유닉스에서 마운트 되어있는 상태에서는 CDROM 드라이브 eject버튼이 먹히지 않는다 그 이유는 아직 마운트 되어있기 때문이다. 언마운트 명령을 내려주어야 eject가 가능하다 출처 https://sksstar.tistory.com/7 http://www.terms.co.kr/mount.htm

[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메서드를 활용하면 된다 기타 엑시오

[Database] SQL 문장의 실행 원리 SQL문장의 실행 과정 정리 User Process가 서버 위치 정보가 들어있는 tnsnames.ora를 참고해 해당 서버로 찾아감 TNS(Transparent Network substrate) : 오라클에서 사용하는 기술로, Client/Server 또는 Server/Server간에도 Data의 전송을 가능하게 해주는 기술 tnsnames.ora : 오라클 client측에서 오라클 서버로 접속할 때 필요한 프로토콜 및 포트번호, 서버주소, 인스턴스등을 설정해주는 파일로서 client쪽에 위치 서버 쪽 listener.ora 파일 안에 접속하려는 서버 IP가 있으면 리스너는 해당 Server Process를 불러옴 listener.ora : 오라클 서버에서 클라이언트의 요청을 듣고, 클라이언트와의 통신 환경을 설정하는 파일 User Process는 Server Process에게 수행해야할 쿼리 전달 Server Process는 Parse -> Execute -> Fetch 과정을 통해 쿼리 수행 SQL문장을 받은 서버프로세스는 Syntax check, Semantic Check를 한후 권한 검사 실행 계획이 있는 경우 : Execution 단계로 진행 실행 계획이 없는 경우(=공유 X, Soft Parse실패) : 옵티마이저를 찾아가 실행계획을 찾아달라 함(Hard Parse) 작업이 끝나면 Server Process는 결과값은 User Processd에게 전달하고, User Process는 사용자에게 전달 주의할점 오라클과 리스너는 서로 다른 프로그램이기 때문에 server는 켜져 있는데 listener가 죽어있는 경우도 있음 --> 신규 접속 불가능 리스너는 새로 들어오는 client만 관리 이미 들어와 있는 사용자는 리스너를 통하지 않고 바로 server process와 연결함 리스너에 장애가 나면 전에 접속한 사람은 이용가능하지만, 신

[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

[JS] 자바스크립트의 비동기 작업 처리방식 자바 스크립트는 내부적으로 stack, webapis, takse queue, event lppo를 가지고 있다 stack : 코드를 실행하는 작업장으로, 해당 작업은 스코프 단위로 수행 webapis : 비동기 작업을 stack으로부터 넘겨받아 해당 코드를 실행 task quere : webapi가 완료한 작업을 저장하는 공간, rask queue에 저장된 task들은 해당 시점에서 stack이 비워지면 stack위로 올라가 실행될 예정이 작업들 event loop : stack을 모니터하고 있다가 stack이 비워지면 task queue에 있는 작업들을 stack으로 올리는 역할 stack에서 scope단위로 코드를 실행함 실행 도중 비동기 처리가 필요한 코드가 있으면 webapis로 넘기고, stack에서는 코드를 계속 실행 함 webapis는 넘겨받은 코드를 실행함 webapis에서 코드 실행이 끝나면 리턴값을 task queue로 넘김 task queue에서 대기 한 scope의 실행이 끝나면 event loop가 task queue에 있는 task들을 stack으로 올림 올라간 코드가 실행되고, 1과정으로 돌아가 반복 자세한 내용은 여기 출처 http://pro-self-studier.tistory.com/10

[JS] Template literals란? ES6에서  Template literals가 등장 사용 방법 ``안에 문자열을 그대로 쓰고 변수(혹은 함수)를 사용할 때는 ${변수명/함수}으로 사용하면 됨 var obj = {a:1, b:2}; console.log('In the obj object, there are properties. a is '+obj.a+' and b is '+obj.b+'.'); // In the obj object, there are properties. a is 1 and b is 2. 위의 예제에서는 변수 obj안에 객체를 담았음 console.log메서드를 호출할 때 문자열은 ''안에 표현하고, 문자열고 변수를 합칠때는 +를 사용함 이 방식은 문자열에 들어와야하는 변수가 많아지면 복잡해지고 띄오쓰기 등 혼란이 일어남 따라서 등장한 것이 Template literals var obj = {a:1, b:2}; console.log(`In the obj object, there are properties. a is ${obj.a} and b is ${obj.b}.`); // In the obj object, there are properties. a is 1 and b is 2. 위의 예제는 Template literals를 사용한 것 `string text` `string text line 1 string text line 2` `string text ${expression} string text` tag `string text ${expression} string text` 이렇게 사용하면 됨 줄 바꿈도 가능함, 기존 자바스크립트는 \n을 사용했어야함 console.log("string text line 1\n"+ "string text line 2"); // &qu

[JS] 함수의 범위 https://www.zerocho.com/category/JavaScript/post/5740531574288ebc5f2ba97e

[JS] Arrow Function(화살표 함수) 정리 ES6에서는 람다식 표현을 더욱 간결하게 해주는 Arrow문법이 추가되었다 표현식 const(let) 변수명 = (파라미터) => {... 함수내용 ...} 실수로 비교연산자['<=' '>=']를 가끔 '=>'로 쓰는 사람들이 있는데 앞으로 주의하자 // ES5 var selected = allJobs.filter(function (job) { return job.isSelected(); }); // ES6 var selected = allJobs.filter(job => job.isSelected()); // ES5 var total = values.reduce(function (a, b) { return a + b; }, 0); // ES6 var total = values.reduce((a, b) => a + b, 0); {}이 객체인지 블럭인지 구분이 안될때는 아래와 같이 처리해주자 var chewToys = puppies.map(puppy => {}); // Error var chewToys = puppies.map(puppy => ({})); // 객체로 인식 기존 자바스크립트에서 익명함수를 변수에 할당하는 것과 비교 var _addFunc = function(a, b){ return a+b; } 다음은 같은 예제를 arrow function으로 만든것 const _addFunc = (a, b) => { return a+b; } 만약, 위의 예제와 같이 함수의 내용이 한줄이면 블럭('{}')을 생략 가능 블럭을 생략한다는것은 바로 return한다는 것 const _addFunc = (a, b) => a+b; 출처 http://pro-self-studier.tistory.com/11?cat

[JS] var, let, const 정리 var 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // var는 function-scope이기 때문에 for문이 끝난다음에 i를 호출하면 값이 출력이 잘 된다. // 이건 var가 hoisting이 되었기 때문이다. for ( var  j = 0 ; j < 10 ; j + + ) {    console .log( 'j' , j) } console .log( 'after loop j is ' , j)  // after loop j is 10 // 아래의 경우에는 에러가 발생한다. function  counter () {    for ( var  i = 0 ; i < 10 ; i + + ) {      console .log( 'i' , i)   } } counter() console .log( 'after loop i is' , i)  // ReferenceError: i is not defined Colored by Color Scripter cs function-scoped 기존의 자바 스크립트는 var를 이용해서 변수를 선언함 다른 프로그래밍 언어는 보통 블럭단위 유효범위를 가지고 있지만 var은 함수에 대해서만 Scope를 가지고 있움 let 1 2 3 4 5 6 7 // 이미 만들어진 변수이름으로 재선언했는데 아무런 문제가 발생하지 않는다. var  a  =   'test' var  a  =   'test2' // hoisting으로 인해 ReferenceError에러가 안난다. c  =   'test' var  c Colored by Colo