티스토리

귤귤의 대모험
검색하기

블로그 홈

귤귤의 대모험

tantangerine.tistory.com/m

It 개발자 프리랜서로 살아남기

구독자
5
방명록 방문하기
공지 웹팩 포스팅 관련 library 버전⋯ 모두보기

주요 글 목록

  • Javascript, React에서 새창이 닫힐때 특정기능을 실행하려면? 새 창을 열고 닫힐 때 특정 기능을 실행하는 방법 ? 웹 사이트를 개발하다 보면, 사용자의 편의성을 높이기 위해 새창을 열고, 해당창이 닫힐 때 특정 동작을 수행하고 싶을 때가 있습니다. 이번 포스팅에서는 이러한 상황을 'React'를 활용해 어떻게 구현할 수 있는지 알아보도록 하겠습니다. 먼저 기본이 되는 몇 가지 JavaScript 메소드에 대해 알아보겠습니다: window.open() : 새 창을 여는 메소드로, 이를 통해 반환받은 창 객체 참조를 저장할 수 있습니다. setInterval() : 주기적으로 코드를 실행하게 해주는 타이머 함수입니다. windowObject.closed : 창이 닫혔는지 확인하는 속성으로, 창이 닫히면 true를 반환합니다. clearInterval() : 기능을 사.. 공감수 0 댓글수 0 2024. 3. 21.
  • JavaScript 모듈 기본값 정의하고 가져오기 - default 키워드 활용법, export, import ES6 모듈 시스템에서는 default 키워드를 사용하여 모듈에서 기본으로 내보내는 값을 정의할 수 있다. 숫자, 문자, 불리언과 같은 기본형 값과 객체, 함수, 클래스와 같은 참조형 값 모두올 수 있다. export default 'hello'; export default function hello(name) { console.log('hello' + name); }; export default class Hello { constructor(greeting) { this.greeting = greeting; } hi(name) { console.log(`${this.greeting} ${name}`); } } default 키워드 사용에 있어 중요한 점이 있는데, default 키워드는 하나의 모듈에서.. 공감수 0 댓글수 0 2020. 6. 8.
  • 자바스크립트 모듈 시스템 이해하기 - 번들링(Bumdling) 웹팩(Webpack) ES6의 모듈 자바스크립트 코드를 담고 있는 하나의 파일이다. 즉 하나의 파일이 하나의 모듈이라고 볼 수 있다. ES6의 모듈은 엄격한 모드의 코드이고 import와 export 키워드를 사용한다. export 키워드르르 이용하여 모듈내의 특정 코드를 외부에서 사용할 수 있다. 그리고 import 키워드를 이용해서 export 한 코드를 가지고 올 수 있다. 간단히 모듈을 정의하고 코드를 외부로 내보내고 가지고 오는 예제를 살펴보자. //File: hello.js export function hello(name){ console.log(`hello ${name}`); } //File: app.js import {hello} from './hello.js'; hello('es6 module'); // he.. 공감수 0 댓글수 0 2020. 6. 8.
  • 자바스크립트 모듈 이해하기 - 네임스페이스 오늘은 자바스크립트의 모듈에 대해서 이야기 해보자 모듈은 파일이나 코드의 묶음 단위로 애플리케이션 하나의 구성요소로 볼 수 있다. 이렇게 모듈로 정의 하면 모듈단위로 코드를 재사용 할 수 있고, 하나의 애플리케이션이라는 큰 기능을 작은 기능단위로 잘게 분리하여 관리할 수 있다. 예를 들어, 베이스볼 게임이라는 애플리케이션을 문제 생성 모듈, 플레이어 관리 모듈, 등과 같이 여러 모듈로 구성할 수 있다 * 위와 같이 여러 장점들이 있지만 너무 많이 모듈화를 한다면 유지 보수나 다른 개발자들이 수정작업을 할때 불필요한 작업들이 발생한다 관리모듈이든, 문제 생성 모듈이든, 그 모듈은 분명한 작업들을 관리하는 작업이야 한다 단순히 어떠한 기본값들을 모듈화해서 관리할 필요는 없을 것이다 ECMAScript 5.x.. 공감수 0 댓글수 0 2020. 6. 6.
  • Java Script - push() 배열 뒤에 요소 추가하기(추가설명) 배열 뒤에 요소를 추가하는 방법으로 push를 알아보도록하자 자바스크립트 배열 자료형은 Linked List 자료구조 형태를 갖고 있다. 따라서 배열 앞과 뒤에서 요소를 추가하는 것이 가능하다 Array 내장객체 메소드 push는 배열 뒤에서 요소를 추가한다 const festa = ['mang']; festa.push('chimmy'); festa.push('tata') festa.push('cooky'); festa.push('shooky'); festa.push('koya'); festa.push('rj'); festa.forEach(name => { console.log(name); }); //결과 mang chimmy tata cooky shooky koya rj 문장 순서대로 festa 배열 .. 공감수 0 댓글수 0 2020. 6. 4.
  • Java Script - splice - 배열 인덱스로 특정 요소 수정하기 Array 객체의 메소드 splice는 특정 위치의 요소를 샂게하거나 수정할 수 있다. 배열.splice(시작 인덱스, 삭제할 요소의 개수, 추가될 요소들 ...) 첫 번째 인자인 시작 인덱스는 배열 요소가 변경될 시작 지점입니다. splice는 측정 위치의 요소를 지정하는 것이 필수이므로 반드시 첫 번째 인자값은 배열 길이보다 작아야 유효한다 두 번째 인자인 삭제할 요소의 개수는 시작인덱스의 위치부터 삭제하고자 하는 개수만큼 요소를 제거한다. 이때 해당 요소가 제거됨과 동시에 메소드 호출 결과로 값을 반환한다. 세 번째 인자에 추가될 요소들을 지정하면, 시작 인덱스부터 해당 요소들이 추가된다. const fruits const fruits = ['melon', 'lemon', 'source', 'app.. 공감수 1 댓글수 0 2020. 6. 2.
  • 자바스크립트 문자열 병합, 객체프로퍼티 나열 join, Object.keys, for...in, forEach, for...of 문자열 병합 배열의 문자열 요소들을 몇몇 구분자로 합치려할 때 사용하며, 매개변수가 생략됐을 때의 기본값은 쉼표이며, 정의 되지않은 요소, 삭제된 요소는 모두 빈 문자열로 취급한다 const array15 = [1, null, "hello", "world", true, undefined]; delete array15[3]; array15.join(); // "1,,hello,,true," array15.join(''); // "1hellotrue," array15.join(' -- '); // "1 -- -- hello -- -- true --" // 문자열 병합과 Array.prototype.join을 함께 쓰면 HTML 리스트 같은 것도 만들 수 있다 const attributes = ["Nimble.. 공감수 0 댓글수 0 2020. 4. 1.
  • 자바스크립트 배열 push(), pop(), unshift(), shift() Java script 배열 push(), pop(), unshift(), shift() 배열의 처음이나 끝에서 요소 하나를 추가하거나 제거하고 나머지를 변수에 저장한다 const array2 = ["b", "c", "d"]; const a9 = array2.push("e"); 배열의 요소 "e"가 마지막 배열 인덱스에 추가되고 배열길이 값을 a9에 저장된다 const a8 = array2.pop(); "e"는 변수 a8에 저장되고 마지막 배열인 "e"가 제거된다 const a7 = array2.unshift("a"); 배열 요소 "a"가 제일 첫 배열 인덱스에 추가하고 배열길이 값을 a7에 저장된다 const a6 = array2.shift() "a"는 변수 a6에 저장되고 첫번째 배열인 "a"가 제거된다 공감수 0 댓글수 0 2020. 4. 1.
  • 자바스크립트 배열의 끝에 여러 요소 추가하기 concat() Java script 배열의 끝에 여러 요소 추가하기 concat() concat 메서드는 배열의 끝에 여러 요소를 추가한 사본을 반환한다 const array3 = [1, 2, 3]; const a5 = array3.concat(4, 5, 6); const a4 = array3.concat([4, [5, 6]]); 변수 a5에 두개의 문자열을 합쳐서 저장하고 array3의 원본값은 변경되지 않는다 배열에 배열을 묶어 합치게 되어 [1, 2, 3, 4, [5, 6]] 사본이 a4에 저장된다 공감수 0 댓글수 0 2020. 4. 1.
  • 자바스크립트 slice() 배열 일부 가져오기 Java script 배열 일부 가져오기 slice() const array4 = [1, 2, 3, 4, 5]; const b3 = array4.slice(1,3); 변수 b3에 array4 배열 인덱스 1부터 3까지 요소를 저장하고 원본은 변동이 없다 첫 번째 매개변수 어디서 부터 가져올지 정하며 두번째는 어디까지 가져올지를 정한다 공감수 0 댓글수 0 2020. 4. 1.
  • 자바스크립트 splice() 임의의 위치에 요소 추가하거나 제거하기 Java script splice() 임의의 위치에 요소 추가하거나 제거하기 const array5 = [1, 3, 5, 7]; const b4 = array5.splice(1, 2); 매개 변수 첫번째 값은 배열의 인덱스 넘버부터 두 번째 인자값의 숫자만큼 요소를 제거한다 제거하고 남은 변수 b4에 저장한다 이 예제에서는 [3, 5]이다 (매개변수 세번재, 네번째는 추가할 요소를 지정할 수 있다) 첫 번째 매개변수 어디서부터 가져올지 정하며 두 번째는 어디까지 가져올지를 정한다 공감수 0 댓글수 0 2020. 4. 1.
  • 자바 스크립트 특정 값으로 배열채우기 – fill() Java script 특정 값으로 배열채우기 – es6 fill() 배열 생성자 Array와 함께 사용하며 배열의 일부만 채우려 할 때 시작 인덱스와 끝 인덱스를 지정하면된다 const array7 = new Array(5).fill(1); array7.fill("c", 2, 4); array7에 배열 인덱스 번호 2부터 숫자 4개 자리까지 "c"를 채운다 array7.fill(0, -3, -1); array7에 배열 인덱스 번호 공감수 0 댓글수 0 2020. 4. 1.
  • 자바스크립트 배열정렬과 역순정렬 sort() reverse() Java script 배열정렬과 역순정렬 sort() reverse() array4.reverse(); array4는 이제 [5, 4, 3, 2, 1] 입니다 array4.sort(); array4는 이제 [1, 2, 3, 4, 5] 입니다 const array8 = [{ name : "Suzanne" }, { name : "Jim" }, { name : "Taervor" }, { name : "Amanda" }]; array8.sort((a, b) => a.name > b.name ); array8은 name 프로퍼티의 알파벳 순으로 정렬됩니다. array8.sort((a, b) => a.name[1] < b.name[1] ); array8은 name 프로퍼티의 두번째 글자의 알파벳 역순으로 정렬됩니다 공감수 0 댓글수 0 2020. 4. 1.
  • 자바스크립트 배열 검색 find() findIndex() indexOf() lastIndexOf() lastIndexOf() Java script 배열 검색 - 일치하지 않는 것을 찾지 못하면 –1을 반환한다 indexOf() lastIndexOf() lastIndexOf() const o9 = { name : "Jerry" }; const array9 = [1, 5, "a", o, true, 5, [1, 2], "9"]; array9.indexOf(5); // 1 array9.lastIndexOf(5); // 5 마지막 인덱스에 가까운 번호가 저장 array9.lastIndexOf(5, 4); // 1 두 번째 매개변수 값은 검색을 끝낼 인덱스 값이다 findIndex()는 indexOf 보다 더욱 다양한 상황에서 활용할 수 있다 const array10 = [{ id : 5, name : "Judith" }, { id : 7, name : "F.. 공감수 0 댓글수 0 2020. 4. 1.
  • 자바스크립트 some, every 조건에 맞는 요소가 있는지 없는지 확인만 필요할 때 Java script some, every 단지 조건에 맞는 요소가 있는지 없는지 확인만 필요할 때 사용하는 메서드 some은 조건에 맞는 요소를 찾으면 즉시 검색을 멈추고 true를 반환하며, 찾지 못하면 false를 반환한다. const array12 = [5, 7, 12, 15, 17]; array12.some(x => x %2 === 0); true; 12는 짝수입니다. array12.some(x => Number.isInteger(Math.sqrt(x))); false; 제곱근 수가 없다. every는 배열의 모든 요소가 조건에 맞아야 true를 반환하여 그렇지 않다면 false를 반환합니다. every는 조건이 맞지 않는 요소를 찾아야만 검색을 멈추고 false를 반환합니다. const array13 = [4, 6.. 공감수 0 댓글수 0 2020. 4. 1.
  • 자바스크립트 map과 filter 두개 메서드로 유용한 활용법 Java script map과 filter * 가장 유용한 메서드이다 map과 filter 메서드는 모두 사본을 반환하며 원래 배열은 바뀌지 않으며 함수로 구성된 배열을 말한다 함수로 구성된 배열이 있는데 프라미스가 필요하다면, 일정한 형식의 배열을 다른 형식으로 바꿔야 한다면, Map을 사용하기 바랍니다. 아래의 예제를 참고하세요 const cart = [{ name : "Widget", price : 9.95 }, { name : "Gadget", price : 22.95 }]; const names = cart.map( x => x.name ); ["Widget", "Gadget"]; const prices = cart.map( x => x.price ); [9.95, 22.95]; const discountPrices.. 공감수 0 댓글수 0 2020. 4. 1.
  • 자바스크립트 splice() 특정 인덱스 부터 인덱스까지 값 추가 삭제 변경 Java script splice() - 특정 시작 인덱스부터 인덱스까지 값을 추가하거나 그 자리에 있는 값을 삭제할 수 있는 메서드 - 배열. splice(시작 인덱스, 삭제할 요소의 개수, 추가될 요소들) 첫번째 인자인 시작인데스는 배열 요소가 변경될 시작 지점입니다. splice는 특정 위치의 요소를 지정하는 것이 필수라 반드시 첫 번째 인자 값은 배열 길이보다 작아야 유효합니다 두 번째 인자인 삭제할 요소의 개수는 시작 인덱스의 위치부터 삭제하고자 하는 개수만큼 요소를 제거합니다. 이때 해당 요소가 제거됨과 동시에 메서드 호출 결과로 값을 반환합니다 세 번째 인자에 추가될 요소들을 지정하면, 시작 인덱스부터 해당 요소들이 추가됩니다. const fruits = ['melon', 'lemon', 'source', 'ap.. 공감수 0 댓글수 0 2020. 4. 1.
  • 자바스크립트 배열 reduce 활용법 - 배열 내 값을 누적시키기[Java scrpt] 배열의 마법사 reduce 매우 중요하다 Array 객체의 메소드 reduce는 배열 요소를 순환하면서, 정의된 callback 함수에 의해 단일 값으로 누적시킬 수 있다 reduce 메소드의 형태는 인자로 callback 함수와 초기값을 받는다 첫 번째 callback 함수는 기존과 메소드와 달리 여러 매개변수를 정의 한다 아래와 같이 최대 4개까지 매개변수를 받고, 첫 번째 누적된 값과 현재 요소 값은 필수이다 reduce 메소드가 처음에 실행할 때, 누적된 값은 두번째 인자(초기값)을 할당 받는다 이후에는 배열 순환이 끝날 때까지 callback 함수에서 반환된 값을 재할당된다 배열 내 값을 누적시키기 const numArr = [1, 2, 3, 4, 5]; const result = numArr... 공감수 0 댓글수 0 2020. 4. 1.
  • 자바스크립트 배열에서 삭제되거나 정의되지 않은 요소들 Java script 삭제되거나 정의되지 않은 요소들 Array 메서드는 삭제되거나 정의되지 않는 요소들을 다룰 때 쫌 당혹스럽게 동작하곤 한다 const array = Array(10).map((x) => 5); 이렇듯 array 요소는 전부 undefined이다 이와 비슷하게 배열 중간의 요소를 삭제하고 map을 호출하면 배열 가운데 undefined가 생긴다 const arr4 = [1, 2, 3, 4, 5]; delete arr4[2]; arr4.map(x => 0); // [0, 0, undefined, 0, 0]; 일반적으로 배열을 다룰때는 정의된 배열을 다루고, 의도적으로 배열안에 빈 부분을 만든다 하더라도 delete를 사용하지 않는다 그래서 현실적으로 이런 동작이 문제를 일으킬 가능성은 거의 없다 하지만 알아.. 공감수 0 댓글수 0 2020. 4. 1.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

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

    © Kakao Corp.