티스토리

Posis

검색하기

블로그 홈

Posis

coonihong.tistory.com/m

CooNiHong 님의 블로그입니다.

구독자: 11

방명록 방문하기

주요 글 목록

[JavaScript] js 파일을 불러오는 방식 async와 defer 웹을 동적인페이지로 만들기 위해서는 JavaScript 파일을 불러오는 것은 필수라고 생각합니다. 하지만 기능이 많아지고 페이지가 많아질수록 로직이 많아지는데 이렇게 된다면 JavaScript의 파일크기는 엄청나게 커지는 것은 당연합니다. JavaScript에 파일이 커질수록 불러오는데 시간이 많아지면서 웹페이지 로딩이 점점 느려집니다. 이를 해결하기 위해서 파일을 비동기 방식으로 불러오는 방식을 통해서 로딩 시간을 줄일 수 있습니다. 오늘은 파일을 로드하는 비동기 방식 async와 defer에 대해서 알아보고, 두 속성 사이의 차이에 대해서 정리해보고자 합니다. script 아무것도 작성하지 않은 방식으로 script 파일을 불러오면 HTML 파일의 모든 것을 분석하지 않은 상태에서 a.js 파일을 다.. 공감수 1 댓글수 2 2023. 1. 15.
[JavaScript] 숫자, 가격, 날짜 사용하기 편리한 메서드 숫자 간결하게 나타내기 ko const views = 9744642; const formatter = new Intl.NumberFormat(`ko`); const formatter2 = new Intl.NumberFormat(`ko`, { notation: 'compact' }); console.log(formatter.format(views)); // 9,744,642 console.log(formatter2.format(views)); // 974만 en const views = 9744642; const views2 = 154270; const formatter = new Intl.NumberFormat(`en`); const formatter2 = new Intl.NumberFormat(`en`.. 공감수 0 댓글수 0 2023. 1. 11.
[JavaScript] 자료형 자료형이란 컴퓨터가 처리할 수 있는 자료의 형태 종류 설명 예시 기본 유형 숫자형 따옴표 없이 숫자로만 표기 let birthYear = 2000; 문자열 작은따옴표(' ')나 큰따옴표(" ")로 묶어서 나타냄 숫자를 따옴표로 묶으면 문자열로 인식 let greeting = 'Hello'; let birthYear = '2000'; 논리형 참(true)과 거짓(false)이라는 2가지 값만 있는 유형 true와 false는 소문자로만 표시 let isEmpty = true; 복합 유형 배열 하나의 변수에 여러 개의 값을 저장할 수 있음 let seasons = ['봄', '여름', '가을', '겨울']; 객체 함수와 속성을 함께 포함 let date = new Date(); 특수 유형 undefined .. 공감수 0 댓글수 0 2023. 1. 9.
[JavaScript] js의 역할 웹 요소를 제어 웹 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음 웹 사이트 UI 부분에 많이 활용 ex) 마우스 포인터를 올렸을 때 펼쳐지는 메뉴, 한 화면에서 탭을 눌러 내용만 바뀌도록 하는 콘텐츠 다양한 라이브러리를 사용할 수 있음 웹을 중심으로 하는 서비스가 늘어나면서 브라우저에서 처리해야 할 일이 늘어남 -> 라이브러리와 프레임워크가 계속 등장 ex) 시각화를 위한 d3.js, 머신러닝을 위한 tensorflow.js, DOM 조작을 위한 jQuery 등 ex) 웹 애플리케이션 개발을 위한 React, Vue, Angular 등 웹 애플리케이션을 만듬 최근의 웹 사이트는 사용자와 실시간으로 정보를 주고 받으며 애플리케이션처럼 동작 ex) 온라인 지도의 길찾기 서비스, 데이.. 공감수 0 댓글수 0 2023. 1. 9.
[JavaScript] 비구조화 할당 비구조화 할당 배열이나 객체 속성을 해체하여 개별 변수에 값을 담을 수 있는 JavaScript 표현식을 말합니다. 또는 구조 분해 할당이라고 말합니다. 장점 난잡한 코드들을 매우 간단하게 바꿀 수 있습니다. 필요한 객체와 나머지 요소 분리가 매우 간단합니다. 기본값 지정이 가능합니다. 사용방법 배열 const arr = ['HTML', 'CSS', 'JavaScript']; const language1 = arr[0]; const language2 = arr[1]; const language3 = arr[2]; console.log(language1, language2, language3); // HTML CSS JavaScript 위 코드가 기본적으로 배열의 값을 다른 변수에 넣어서 값을 출력하는 코.. 공감수 1 댓글수 0 2021. 12. 27.
[JavaScript] 배열 내장 함수 이번 포스팅에서는 배열의 내장 함수 종류들의 대해서 다뤄보겠습니다. 배열이란? 배열은 간단하게 변수 하나에 여러 가지 데이터를 담아두는 것을 말합니다. const arr = [1, 2, 3, 4, 5]; console.log(arr); // [1, 2, 3, 4, 5] forEach forEach 메서드는 배열을 한 번씩 순회하며 각각의 요소에 대해서 실행하는 함수입니다. const arr = [1, 2, 3, 4, 5]; arr.forEach((value) => { console.log(value); }); // 1 // 2 // 3 // 4 // 5 forEach를 이용해 다른 배열에 데이터를 넣어줄 수 있습니다. const arr = [1, 2, 3, 4, 5]; const newArr = []; .. 공감수 1 댓글수 1 2021. 12. 16.
[JavaScript] Equality(==) 지양 혹은 줄이기 Equality란? Equality는 동등 연산자를 말하는데 두 개의 피연산자가 동일한지 체크하고 Boolean값인 true와 false를 판별해주는 것을 말합니다. Equality의 문제점 JavaScript는 동적인 언어인데 0과 ''을 비교하면 어떤 값이 출력되는지 아시나요? console.log(0 == ''); // true Number와 String을 비교하는데 왜 true가 나올까요. 이는 JavaScript Equality에서 타입을 비교하지 않고 피연산자를 체크하기 때문입니다. 0과 ''은 둘 다 false로 인지하기 때문에 false == false로 생각하고 true라는 값을 출력하게 됩니다. 이를 보완하기 위해서 Strict Equality(===)가 있습니다. Strict Equa.. 공감수 0 댓글수 0 2021. 12. 6.
[JavaScript] var를 지양해야 하는 이유 var를 지양해야 하는 이유 재선언이 가능하므로 코드에 에러가 생길 수 있다. var은 같은 변수명으로 재선언이 가능합니다. 이로 인해서 코드가 길어졌을 때 의도치 않게 같은 변수명을 선언했을 경우 밑에 선언된 var의 변수의 데이터가 할당되게 됩니다. var age = 22; var age = 23; var age = 24; var age = 25; console.log(age); // 25 만들었던 프로젝트의 코드가 몇천 줄이 넘어갈 때 100번째 줄에서 var age를 선언하고 3500번 줄에서 다시 한번 var age를 선언하게 된다면 3500번 줄에서 재 선언한 age의 데이터가 할당되게 됩니다. 그러면 결괏값이 의도치 않게 다른 값을 출력할 수 있게 되고 이 오류를 찾기 위해서 코드를 다시 한.. 공감수 0 댓글수 0 2021. 12. 3.
[JavaScript] 이벤트 버블링(Bubbling)과 캡쳐링(Capturing) 이번 포스팅에서는 이벤트 버블링과 캡쳐링에 대해서 다뤄보겠습니다. 이벤트 버블링(Bubbling) 버블링이란 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 계속해서 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작하는 것을 말합니다. See the Pen Untitled by MinJaeHong (@jaehong94) on CodePen. 위에 예시를 클릭해보면 P 상자를 클릭할 경우: P -> DIV -> FORM -> Body -> HTML 순으로 알림 창이 뜨는 것을 확인할 수 있습니다. DIV 상자를 클릭할 경우는 DIV 부터 HTML 순으로 알림 창이 뜹니다. 이러한 현상, 클릭한 요소에서 최.. 공감수 0 댓글수 0 2021. 10. 26.
[JavaScript] Carousel.js 슬라이드 이번 포스팅은 Carousel.js의 공식 Github페이지를 토대로 작성하였습니다. DEMO: https://ryujun.github.io/demos/JavaScript/Carousel/ Github: https://github.com/RyuJun/Carousel.js 지원 chrome, firefox, while 등등의 모던 브라우저 및 ie9 버전 이상에서 지원함 ( ie9 에서는 transition이 적용되지 않아서, Motion 등이 default로 적용됨 ) 설치 및 사용방법 일반 웹 페이지 웹 페이지에서 사용하려면 html파일 ... carousel.js는 es6++문법으로 작성되어 ie에서 작동하지 않습니다. carousel.min.js는 트랜스 파일링이 완료된 파일로써 이를 사용하면 ie.. 공감수 1 댓글수 0 2021. 10. 25.
[JavaScript] Ajax 란? Ajax(Asynchronous JavaScript and XML) 란? JavaScript를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 새로고침(Reloaded) 하지 않고 필요한 부분만 렌더링 하는 프로그래밍 방식을 말합니다. Ajax의 장단점 장점 페이지 이동 없이 고속으로 화면을 전환할 수 있다. 서버 처리를 기다리지 않고, 비동기 요청이 가능하다. 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다. 플러그인 없이도 인터렉티브 한 웹페이지 구현할 수 있다. 단점 Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다. HTTP 클라이언트의 기능이 한정되어 있다. 페이지 이동없는 통신으로 인한 보안상의 문제 지원.. 공감수 0 댓글수 0 2021. 10. 20.
[JavaScript] 여러 개 모달창 닫기 이번 포스팅은 여러 개 모달창 또는 대화상자같은 창들을 원하는 순서대로 제거하는 것을 구현해보겠습니다. 완성된 화면 HTML Alert1 X Alert2 X Alert3 X Alert4 X CSS .alert-box { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; border-radius: 8px; height: 80px; padding: 20px; box-sizing: border-box; } .alert-box:nth-of-type(1) { background: indianred; } .alert-box:nth-of-type(2) { background: royalblue; } .alert-b.. 공감수 0 댓글수 0 2021. 10. 19.
[JavaScript] 이미지 슬라이드 만들기 이번 포스팅에서는 라이브러리 없이 JavaScript 코드만을 사용해서 이미지 슬라이드를 구현해 보겠습니다. 구현하는 방법은 무수히 많기 때문에 이 사람은 이런 식으로 구현했구나라고 참고하시면 될 것 같습니다. HTML Next Prev Bootstrap에 container만 이용했습니다. CSS .slide { overflow: hidden; position: relative; } .slide-container { width: 300vw; height: 400px; display: flex; transition: all 0.8s; } .slide-box { width: 100vw; } .slide-box:nth-of-type(1) { background: center/cover no-repeat url.. 공감수 1 댓글수 0 2021. 10. 19.
[JavaScript] 변수란? var, let, const의 차이점 변수(variable)란? 변수는 간단하게 데이터를 저장하는 곳입니다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말합니다. 사용하는 이유 흔히 이름, 나이와 같은 데이터를 저장할 수도 있고 DOM의 셀렉터로 찾은 HTML 요소도 저장할 수 있습니다. document.querySelector와 같은 셀렉터를 탐색하는 명령어를 매번 사용하면 사용할 때마다 DOM을 탐색해야 하지만 여러 번 사용하게 될 때 변수에 저장해두면 한 번만 탐색하고 저장한 데이터를 바로바로 사용하니 JavaScript의 동작속도를 조금 더 빠르게 할 수 있습니다. var 함수(function) 레벨 스코프입니다. function test() { var age = 22.. 공감수 2 댓글수 2 2021. 10. 17.
JavaScript 개요 JavaScript의 탄생 1995년 넷스케이프라는 브라우저에 웹페이지를 보조적인 기능을 수행하기 위해 개발한 언어이다. 처음에는 모카(Mocha)로 명명되었고 그 해 9월에 라이브스크립트(LiveScript)로 이름이 바뀌었다가 12월에 JavaScript로 최종 명명되었다. ECMAScript JavaScript의 초기는 크로스 브라우징 이슈가 계속 발생하게 되면서 웹개발을 하기가 무척 어려웠던 시기입니다. 이를 해결하기 위해 ECMA 인터내셔널에 JavaScript의 표준화를 요청하게 됩니다. 그 이후에 1997년에 ECMAScript v1이 완성되었고 정식 명칭을 JavaScript에서 ECMAScript로 명명하게 됩니다. ECMAScript는 매년 새로운 버전을 공개하였고 2009년에 HTML.. 공감수 0 댓글수 0 2021. 10. 13.
[JavaScript] 참과 거짓(Truthy & Falsy) JavaScript에서는 꼭 Boolean 값을 쓰지 않고 true & false를 구별할 수 있는 방법이 있습니다. Truthy true 0이 아닌 수 '값' {} [] if (1) console.log('Truthy'); // Truthy if ('true') console.log('Truthy'); // Truthy if ({}) console.log('Truthy'); // Truthy if ([]) console.log('Truthy'); // Truthy Falsy false 0 '' null undefined NaN if (0) console.log('Truthy'); else console.log('Falsy'); // Falsy if ('') console.log('Truthy'); el.. 공감수 2 댓글수 0 2021. 8. 18.

문의안내

티스토리
로그인
고객센터

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