Programing/JavaScript123

• 

  springboot thymeleaf properties 값 가져오기 springboot thymeleaf properties 값 가져오기 Springboot project에서 properties 파일이나 yml 파일에 설정된 값을 thymeleaf에서 가져오는 방법을 알아보겠습니다. 우선 환경설정 파일에 저장된 값을 가져올 때는 아래와 같이 사용합니다. ${@environment.getProperty('properties.key')} 그리고 환경 변수 값을 가져오기 위해선 아래의 taglib을 추가하셔야 합니다. 예를들어 카카오지도의 키를 properties active에 따라 다르게 하기 위해선 아래와 같이 설정합니다. thymeleaf에서 사용하기 application.yml spring: profiles: active: dev . . . spring: config:.. Programing/JavaScript 2022. 9. 28.

• 

  Thymeleaf layout 적용 방법 Thymeleaf layout 적용 방법 Spec springboot 2.6.7 thymeleaf 3.0.15 Apache tiles와 같은 기능을 해주는 Thymeleaf layout을 적용하는 방법을 알아보겠습니다. layout은 별도의 설정파일 없이 .html 코드만 수정하면 적용이 가능하기 때문에 tiles 에 비해 적용이 쉽습니다. Dependency 추가 (gradle) implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation group: 'nz.net.ultraq.thymeleaf', name: 'thymeleaf-layout-dialect' layout을 사용하기 위해서는 thymeleaf-l.. Programing/JavaScript 2022. 5. 19.

• 

  Google V8 엔진, Javascript의 동작원리 알짜만 빼먹기 Google V8 엔진, Javascript의 동작원리 알짜만 빼먹기 이번 포스팅에서는 Chrome 등의 브라우저에서 사용되는 V8 엔진과 Javascript의 동작원리에 대해서 알아보려고 합니다. Javascript 개발자로서 꼭 알아야되는 것은 아니지만, 알면 좋은... 여기까지 알아야 하나 하면서도 알면 좋은(?!) 내용이니 가볍게 훑어 보도록 합시다. V8 이 뭔데? V8은 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 자바스크립트 엔진입니다. C++로 작성되어 있으며, 자바스크립트코드를 바이트코드(bytecode)로 컴파일 하고 실행하는 방식을 사용합니다. 2016년 이전에는 FullCode generator, Crankshaft, TurboFan 이라는 컴파일링 기법이 사용되었고, 이 후.. Programing/JavaScript 2022. 4. 6.

• 

  Javascript 효율적인 DOM 접근, 추가, 수정 코드 작성법 Javascript 효율적인 DOM 접근, 추가, 수정 코드 작성법 페이지 내 DOM을 컨트롤 하는 것은 Javascirpt 에서 처리하는 가장 흔한 일 중 하나입니다. 효율적인 DOM 접근, 조작, 이벤트 처리방법을 알아두고, 가독성, 성능이 좋은 코딩을 하도록 합시다. 반복문 내 DOM 접근은 피한다 /* 안티패턴 */ for(let i=0, n=10; i Programing/JavaScript 2022. 4. 4.

• 

  Javascript spread syntax 전개구문 알짜만 빼먹기! 간결한 코딩 방법 Javascript spread syntex 전개구문 알짜만 빼먹기! 간결한 코딩 방법 전개구문(Spread Syntax) 는 함수의 호출, 배열과 객체의 리터럴에서 사용됩니다. 함수호출과 배열의 리터럴에서 사용 시에는 Iteratorable Object 여야 합니다. Iteratorable Object 에는 String, Array, TypedArray, Map, Set이 있습니다. 문법 객체 앞에 '...' 을 붙여 사용합니다. func(...iteratableObject); [...iteratableObject, 1, 2]; {...object} 예시 코드를 보면서 사용법과 활용방법에 대해 알아보겠습니다. 함수의 호출 const print = function(a, b){ console.log(a, .. Programing/JavaScript 2022. 3. 24.

• 

  Javascript 칭찬받는 코딩 방법 / 코드 줄이는 방법 Javascript 칭찬받는 코딩 방법 / 코드 줄이는 방법 현업에서 Javascript로 개발할 때 칭찬받는 방법과 코드 줄이는 방법을 같이 알아보겠습니다. '당연한건데?' 라고 느끼실 수도 있고 '오 이거 괜찮네?' 라고 느끼실 수도 있습니다. ■ var 사용 X / let, const 사용 O 아직도 변수를 선언할 때 var를 사용하시는 분이 있을지 모르겠습니다. var는 아주 편하고 유연하게 변수를 선언, 사용할 수 있지만, 원치 않는 결과를 불러올 수도 있습니다. let, const만을 사용하여 변수를 선언합시다. Link : https://aljjabaegi.tistory.com/352 javascript var, let, const 의 차이, 차이점 javascript var, let, co.. Programing/JavaScript 2022. 3. 23.

• 

  Javascript 논리연산자 (||) 와 Nullish Coalescing (??) 차이 Javascript 논리연산자(||) 와 Nullish Coalescing (??) 차이 null, undefined 인 값을 초기화 할때 논리연산자와 Nullish Coalescing을 자주 활용합니다. 이 둘을 활용하면 코드를 간결하게 작성할 수 있죠. 그럼 예시코드를 보겠습니다. const test = function(name){ let msg = ""; if(name === null || typeof name === "undefined"){ msg = "아무개님 안녕하세요!"; }else{ msg = name +"님 안녕하세요!"; } console.log(msg); } name 파라메터를 받아 콘솔로 인사말을 출력하는 test 함수가 있습니다. 이제 이 함수 내 if문 조건을 논리연산자를 활용해.. Programing/JavaScript 2022. 3. 23.

• 

  Javascript JQuery 구조 따라해보기 jQuery 처럼 라이브러리 만들기 Javascript JQuery 구조 따라해보기 jQuery 처럼 라이브러리 만들기 이번 포스팅에서는 jQuery 를 따라해보는 시간을 갖어볼까 합니다. 예를들어 $("#aa") 와 같이 Selector에 접근하고 $.ajax() 처럼 메소드를 실행하는 구조를 따라해보겠습니다. 우선 Selector 기능을 담당하는 DomControl Class를 생성합니다. class DomControl{ constructor(selector){ this.selector = document.querySelectorAll(selector); } append(element){ for(let ele of this.selector){ ele.append(element); } } } 이 클래스는 Element에 대한 기능을 담당.. Programing/JavaScript 2022. 3. 19.

• 

  Javascript Array Object 정렬 숫자 한글 키 값 정렬 how to align all object in javascript Javascript Array Object 정렬 숫자 한글 키 값 정렬 how to align all object in javascript Javascript 에서 모든 객체의 정렬 방법을 알아보겠습니다. 기본적으로 배열에서는 sort라는 정렬 메서드를 제공합니다. sort 문법 Array.sort([compareFunction]); sort 메소드는 기준이 되는 배열을 복사해서 정렬하는 것이 아니라 원본 데이터가 변경됩니다. compareFunction은 생략이 가능하며, 생략할 경우 배열의 값의 유니코드 코드 포인트 값에 따라 정렬됩니다. 기본적으로 오름차순으로 정렬되며(ASC) 내림차순으로 정렬할 때는 compareFunction을 활용합니다. 숫자로 이루어진 배열의 오름차순 정렬 const num.. Programing/JavaScript 2022. 3. 16.

• 

  Javascript Object to Array, Array to Object 모든 키, 값 추출 접근 entries Javascript Object to Array, Array to Object 모든 키, 값 추출 접근 entries Javascript Object는 property name : property value의 쌍으로 구성됩니다. const member = { name: "geon", phone: "010-0000-0000", age: 36 } name, phone, age 가 Object의 Property name 이고 "geon", "010-0000-0000", 36 이 Property value 입니다. 이것을 [property name, property value] 의 배열로 변경 할때는 Object.entries() 메소드를 활용합니다. Object.entries() entries는 Array의 .. Programing/JavaScript 2022. 3. 15.

• 

  Javascript Cavans 내 텍스트 이미지 드래그, drag & drop text, image in canvas Javascript Cavans 내 텍스트 이미지 드래그, drag & drop text, image in canvas Canvas Element 내 추가된 text와 image지의 drag & drop 기능에 대해서 알아보겠습니다. Canvas에는 Javascript 에서 Element에 적용할 수 있는 Dragstart, Dragend 와 같은 Drag 이벤트가 제공되지 않습니다. 그럼 어떤 마우스 이벤트가 제공되는지 보도록 하죠. Cavans Mouse Event click, dblclick, contextmenu, mousedown, mouseup, mouseenter, mouseover, mouseleave, mouseout, mousemove 위 마우스 관련 이벤트 중에 mousedown 과 .. Programing/JavaScript 2022. 3. 8.

• 

  Javascript 특정 시간마다 반복 setInterval, setTimeout Javascript 특정 시간마다 반복 setInterval, setTimeout 이번 포스팅에서는 Javascript에서 특정 시간마다 반복할 수 있는 기능인 setInterval과 setTimeout에 대해서 알아보도록 하겠습니다. setInterval setInterval은 window 메서드로, 매개변수인 시간만큼 함수를 반복 하는 기능을 합니다. [argument1, argument2..] 는 옵션이고 전달되는 함수의 매개변수로 사용됩니다. 문법) const intervalId = setInterval(function(arg1, arg2..){}, milisecond, [argument1, argument2...]); setInterval 사용 예제) const testFunc = functio.. Programing/JavaScript 2022. 3. 3.

• 

  Javascript 배열 값에 접근하는 간결하고 가독성을 높이는 방법 at() Javascript 배열 값에 접근하는 간결하고 가독성을 높이는 방법 at() Javascript 에서 배열에 접근 할때는 대괄호와 index를 사용해서 접근 할 수 있습니다. [대괄호 & 인덱스로 접근] const array = [1,2,3,4,5]; const firstValue = array[0]; /*첫번째 값 반환(index 0)*/ const lastValue = array[array.length - 1]; /*마지막 값 반환(index 4)*/ Javascript 에서는 대괄호 표기법보다 간결하고 가독성을 높일 수 있는 at() 이라는 메서드를 제공합니다. [at 문법] array.at(index); at 메서드에 파라메터로 index를 넘기면 해당 index의 값을 리턴해줍니다. 위의 대괄.. Programing/JavaScript 2022. 2. 24.

• 

  Javascript Canvas drawImage 이미지 추가 방법 Javascript Canvas drawImage 이미지 추가 방법 Canvas에 이미지를 추가하기 위해서는 CanvasRenderingContext2D.drawImage() 를 활용합니다. 파라미터의 개수에 따라 일반 이미지 추가와 추가할 이미지의 일부 영역을 추가로 구분됩니다. 일반 이미지 추가 문법은 아래와 같습니다. 일반 이미지 추가 문법 drawImage(image, sx, sy, sWidth, sHeight); 파라메터 설명 [image]*필수 CSSImageValue, an HTMLImageElement, an SVGImageElement, an HTMLVideoElement, an HTMLCanvasElement, an ImageBitmap, or an OffscreenCanvas. [sx.. Programing/JavaScript 2022. 2. 18.

• 

  Javascript Canvas Text 객체 삭제 방법 fillRect Javascript Canvas Text 객체 삭제 방법 fillRect 앞선 포스팅에서 Text 객체를 Canvas에 추가하는 방법을 알아보았습니다. Link : https://aljjabaegi.tistory.com/599 Javascript Canvas 텍스트 추가 fillText, strokeText Javascript Canvas 텍스트 추가 fillText, strokeText Canvas 에 텍스트를 추가하는 방법에 대해 알아보겠습니다. 우선 Canvas 태그를 생성해줍니다. 그럼 아래와 같이 Canvas가 보이실꺼에요. 324x68 사이.. aljjabaegi.tistory.com 이제 이 추가된 텍스트를 삭제하는 방법에 대해서 알아보겠습니다. Canvas에서 그려진 객체를 삭제한다기 보다.. Programing/JavaScript 2022. 2. 7.