728x90 개발34 ES5, ES6이란? ES(ECMAScript)란? JavaScript가 표준화된 규격, 즉 ECMAScript를 줄여 ES라고 하고 5, 6은 버전을 의미한다. ES가 생긴 배경 Javascript는 넷스케이프 커뮤니케이션즈에서 개발이 되고, MS에서도 JScript를 개발하여 두 언어가 호환되지 않는 경우(크로스 브라우징 이슈)를 해결하기 위해 표준화하였다. ES5와 ES6 버전의 차이점 요약 ES5과 다르게 ES6에서 가능한 것들 템플릿 리터럴 : console.log(`${변수명} 하세요.`) 화살표 함수 : var str = func => ({id : "1"}); this : 자신을 둘러싸고 있는 것을 바라봐 bind가 필요없다. var, const, let : const와 let 추가 모듈 : import와 exp.. 2021. 8. 20. Vue Cli 4.x (Vue3)에서 vue-router 사용하기 Vue를 이용한 토이 프로젝트를 하면서 SPA 구조를 위해 router를 사용하려고 막 구글링을 해서 만든 코드에서 에러가 발생하였다.. 문제 발생 Cannot read property 'use' of undefined 결국은 해결하였지만 몇시간을 헤매 해결방안을 찾았다. 결론부터 말하면 버전의 호환성 문제였다. vue3를 vue2로 낮추면 해결가능하였지만 나는 vue3로 하고 싶었다. 그럼 Vue3로 vue-router를 구현해보자. 해결방안 1. 먼저 vue-router를 다음 명령어로 재설치한다. (버전을 맞추기 위해..) npm i vue-router@next 2. router.js를 만들고 다음 코드를 작성하자. (필자의 프로젝트는 Vue cli 이다.) import {createWebHisto.. 2021. 8. 13. JAVA 성능 향상 시키기 개발을 하면 고민을 많이 하게 된다. 과연 내가 작성한 코드는 효율성이 좋은가? 어떻게 하면 효율적인 코드를 작성할 수 있을까? 물론 알고리즘과 자료구조를 잘 선택하여 개발하면 된다. 하지만 그 밖에 또 무엇이 있는지 알아보고 있다면 어떻게 해야하는지 공부해보았다. 1. String 대신 StringBuilder와 StringBuffer도 생각해보자. 일반적으로 사용하는 쿼리문 작성 방법 String query = ""; query += "select * "; query += "from ( "; query += "select column1, "; query += "column2, "; ... 이를 다음과 같이 StringBuilder를 사용하면 응답 시간과 메모리 사용량을 줄일 수 있다. StringBu.. 2021. 8. 11. stopPropagation 간단정리? event.stopPropagation란? 먼저 propagation이란 파동, 전파란 의미로 예측해보면 stopPropagation은 더이상의 전파를 막는다고 생각할 수 있다. 실제로 예측한 바와 같이 동작하는데 다음 코드를 보며 이해해보자. 위의 코드에서 div를 클릭하게 되면 ClickDiv()가 실행되는데 event.stopPropagation() 를 사용하면 li 태그를 거친 후 ul 태그까지 이벤트가 전달되는 것을 막아 ul의 ClickUl() 실행을 막아주는 역할을 수행한다. event.PreventDefault란? preventDefault 메소드는 현재 이벤트의 기본 동작을 중지 하기 위해 사용한다. a 태그를 예를 들어 보자. PreventDefault 테스트 $("#div").on.. 2021. 8. 5. [Java] StringTokenizer란? 새로운 String 관련 매서드를 알아보자. StringTokenizer이란? StringTokenizer 클래스는 문자열을 사용자가 지정한 구분자(delim)로 쪼개주는 클래스. 그렇게 쪼개어진 문자열을 토큰(Token)이라 한다. StringTokenizer 생성자 public StringTokenizer(String str, String delim, boolean returnDelims); delim의 default값은 공백문자, delim 포함 여부를 returnDelims로 여부확인 StringTokenizer 매서드 StringTokenizer는 어떤 위치 토큰을 사용했는지 기억하고 있고 그 위치를 다음으로 옮김 int countTokens();// 남아있는 toekn 개수 반환 boolean.. 2021. 8. 2. .class와 .java 확장자 .Java와 .class란? 먼저 다음 개념들을 살펴보자. .Java : 확장자가 java인 인간이 작성한 소스 코드 파일 .class : 소스 코드 파일인 .java 파일을 자바 컴파일러를 통해 byte code로 변환한 byte code 파일 JVM : 자바 컴파일러가 변환한 .class(bytecode)를 실행시키는 프로그램 시나리오 1. 결국 자바 컴파일러가 우리가 작성한 코드를 JVM이 읽을 수 있도록 .class 파일로 변환시켜준다. 2. JVM은 이제 .class 파일을 실행시켜 OS가 읽을 수 있도록 해주는 것이다. (JVM이 targetcode를 로드하고 필요한 기능 OS 호출하여 OS가 하드웨어를 제어한다.) JVM에 더 자세히 알고 싶으면 다음 링크를 참고하고 추가적으로 Code의 종.. 2021. 7. 21. Interceptor, DispatcherServlet이란? 회사 Return server에서 interceptor를 처음 보았다. 지금까지 해왔던 프로젝트에서는 interceptor를 사용하지 않았으나 이번에 알게 되어 간단히 요약해 보려 한다. 인터셉터(Interceptor)란? Interceptor는 말그대로 Controller에 들어오는 요청과 응답을 가로채는 역할로 DispatcherServlet이 실행된 뒤 호출된다. DispatcherServlet은 아래에서 설명하겠다. 먼저, Interceptor는 HandlerInterceptor 인터페이스를 반드시 implements 해야한다. HandlerInterceptor안에 있는 메서드인 preHandle()은 Controller보다 먼저 실행되는 메서드이며, postHandle()은 Controller가.. 2021. 7. 16. SPA(Single Page Application)란? Vue.js를 이용한 Single Page Application 즉, SPA 구조로 된 프로젝트를 회사의 서비스앱에서 처음 접하게 되었다. SPA(Single Page Application)란? 단일 페이지로 구현한 사이트(애플리케이션)이다. 이와 반대 개념은 MPA(Multi Page Application)이고 MPA는 여러 페이지로 구성된 즉, 우리가 보통 흔히 보는 사이트들을 예로 들 수 있다. SPA는 하나의 페이지에서 계속 팝업을 띄운다고 생각하면 된다 (사실 팝업은 아니고 처음 화면인 HTML을 DOM으로 랜더링(바꿈)을 해주는 것이지만). 반면 MPA는 로그인 페이지를 누르면 로그인html로 이동한다고 생각하면 된다. SPA의 장점 빠른 반응성, 화면 전환(사용자 친화적) 서버 요청이 적음 .. 2021. 7. 13. [javascript] Promise란? Promise 예제 포스팅을 읽기 전 다음 포스팅 : javascript 비동기란? 을 참고하자 Promise란? Promise는 자바스크립트 비동기 처리에 사용되는 객체로 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 API를 사용합니다. 이때 데이터를 아직 받아오지 못했는데 화면에 데이터를 표시하려고 할때 발생하는 오류를 해결하기 위한 방법 중 하나이다. Promise 사용법(예제) function getSomeData(){ return new Promise(function(resolve, reject){ //데이터를 받으면 resolve 호출 / 실패 시 reject resolve(result); //가져온.. 2021. 7. 12. 이전 1 2 3 4 다음 728x90
