본문 바로가기

Javascript32

함수가 뭐지? 자바스크립트 함수 이해하기! 안녕하세요! 오늘은 자바스크립트 함수에 대한 내용들을 정리해 보려고 합니다. 개인적으로 자바스크립트를 10년 이상 사용해 오면서 함수를 자주 활용해 왔지만 함수를 제외하고 자바스크립트를 개발해 본 적은 없었던 것 같습니다. 그만큼 자바스크립트에 있어서 함수는 굉장히 중요한 부분입니다. 이번에는 함수의 본질과 특징을 다시 자세히 공부하고 정리해 보려고 합니다. 함수의 기본 개념 함수는 프로그래밍 언어에서 코드의 재사용성을 높이고 구조를 모듈화하기 위한 핵심적인 요소입니다. 자바스크립트에서 함수는 특정 작업을 수행하는 코드 블록으로, 필요한 시점에 호출하여 실행할 수 있습니다. 예시 코드 function functionName(parameters) { // 함수의 동작을 정의하는 코드 블록 // 파라미터를 .. 2023. 8. 14.
[jQuery] 제이쿼리 empty 함수 사용 방법 알아보기 안녕하세요! 오늘은 jQuery의 empty 함수에 대해 소개하려고 합니다. 지난번에 다뤘던 remove 함수와 유사하지만, DOM 요소를 다루는 데에 있어서 차이점이 있습니다. empty 함수는 jQuery를 사용하는 웹 개발에서 자주 활용되며, UI 업데이트나 동적인 요소 제거를 다룰 때 유용합니다. remove 함수가 특정 DOM 요소를 완전히 삭제하는 데 중점을 두는 반면, empty 함수는 선택한 요소의 모든 자식 요소들을 삭제하는 데 중점이 있습니다. 예를 들어, 특정 컨테이너 요소의 내용을 모두 지우고 싶을 때 empty 함수를 사용하면 됩니다. 이를 통해 해당 요소의 자식 요소들만 제거하고 컨테이너 요소 자체는 유지할 수 있습니다. 이번 블로그 포스팅에서는 empty 함수의 활용법과 rem.. 2023. 8. 14.
[jQuery] 제이쿼리 remove 함수 사용 방법 알아보기 안녕하세요! 오늘은 jQuery의 기본 함수 중 하나인 'remove' 함수에 대해 알아보려고 합니다. 웹 개발을 하다 보면 사용자 인터페이스(UI) 프로세스에 따라 DOM 요소를 삭제해야 하는 상황이 자주 발생합니다. 이럴 때 'remove' 함수를 활용하면 간편하게 처리할 수 있습니다. 웹 페이지의 DOM(Document Object Model)은 웹 요소들의 계층 구조를 나타내는데, 이 구조를 수정하거나 조작할 때 'remove' 함수는 유용하게 사용됩니다. 이 함수는 선택한 DOM 요소를 삭제하는 역할을 합니다. remove() jQuery의 'remove' 함수는 선택한 DOM 요소를 제거하는 메서드입니다. 이 함수를 사용하면 웹 페이지에서 특정 요소를 동적으로 삭제할 수 있습니다. 예시 코드 .. 2023. 8. 8.
[React-Native] 리액트 네이티브 clean build folder 실행시 'clean failed' 해결하기 안녕하세요! 오늘은 리액트 네이티브 개발 시 종종 발생할 수 있는 Xcode 빌드 관련 에러에 대해 정리해보려고 합니다. 특히 아래와 같은 에러 메시지가 발생하는 경우를 살펴보겠습니다. "Could not delete /Users/project/ios/build because it was not created by the build system." 이런 에러가 발생한 경우, 아래의 단계를 따라 에러 내용을 확인할 수 있습니다. 1. Xcode에서 프로젝트를 열고 화면 상단 우측에 위치한 'Show the Report navigator' 버튼을 클릭합니다. 2. 아래와 같이 에러 내용을 확인할 수 있는 Report navigator가 열립니다. 그럼 위와 같은 에러가 발생하였을 경우 어떻게 처리하면 되는지.. 2023. 8. 7.
[javascript] 자바스크립트 querySelector 알아보기 안녕하세요! 오늘은 자바스크립트의 기본 문법 중 하나인 querySelector에 대해 자세히 알아보려고 합니다. querySelector는 HTML 문서를 간편하게 조회하고 조작할 수 있도록 도와주는 유용한 함수입니다. 이 함수를 사용하면 웹 페이지의 요소들을 선택하여 원하는 동작을 수행할 수 있습니다. querySelector를 효과적으로 활용하면 웹 개발을 더욱 편리하고 효율적으로 할 수 있습니다. querySelector 자바스크립트의 querySelector는 HTML 문서에서 원하는 요소를 선택하는 기능을 제공하는 함수입니다. 이 함수는 CSS 선택자를 활용하여 원하는 요소를 찾을 수 있으며, 첫 번째로 일치하는 요소를 반환합니다. querySelector를 사용하면 웹 페이지의 요소들을 동적.. 2023. 8. 6.
[vue3] vue3-echarts 라인, 바 차트 만들기 안녕하세요! 오늘은 vue3-echarts 라이브러리를 활용하여 라인 차트와 바 차트를 조합한 응용형 시각화 차트를 구현해보려고 합니다. 이전 포스팅에서는 라인 차트와 바 차트를 각각 구현해 보았는데, 이번에는 이 두 가지를 유기적으로 결합하여 더 다양한 시각화를 표현하는 차트를 만들어보고자 합니다. 자바스크립트와 vue3-echarts의 기능을 최대한 활용하여 효과적인 차트를 구현해 볼 예정입니다. 그럼 바로 시작해 보겠습니다. vue3-echarts vue3-echarts는 Vue.js 3 프레임워크에서 사용할 수 있는 시각화 차트 라이브러리입니다. 이 라이브러리는 ECharts라는 JavaScript 시각화 라이브러리를 Vue.js 3에 쉽게 통합할 수 있도록 도와줍니다. ECharts는 다양한 유.. 2023. 8. 4.
[javascript] 자바스크립트 함수 이벤트 전파 막기 안녕하세요! 오늘은 자바스크립트 함수를 사용할 때 발생하는 이벤트 중복 현상을 방지하는 방법에 대해 정리해 보려고 합니다. 이벤트 중복은 때때로 웹 개발에서 문제가 발생할 수 있는 상황 중 하나입니다. 이를 방지하기 위해 자바스크립트에서 제공하는 두 가지 기능인 preventDefault와 stopPropagation에 대해 알아보겠습니다. 이벤트 전파 자바스크립트에서 이벤트 전파란, 웹 페이지의 요소에서 발생한 이벤트가 상위 요소로 전파되는 과정을 말합니다. 이벤트 전파는 크게 두 가지 방식으로 동작하는데, 이를 이벤트 버블링(Event Bubbling)과 이벤트 캡처(Event Capturing)라고 합니다. 이벤트 버블링 (Event Bubbling) - 이벤트 버블링은 하위 요소에서 발생한 이벤트.. 2023. 8. 3.
[javascript] 자바스크립트의 기본 문법과 구문 안녕하세요! 오늘은 자바스크립트의 기본 문법과 구문에 대해서 간략하게 정리해 보려고 합니다. 자바스크립트는 웹 개발을 비롯하여 다양한 분야에서 널리 사용되는 프로그래밍 언어로, 브라우저에서 동적인 웹 페이지를 구현하고 서버 사이드에서도 활용됩니다. 이러한 중요성과 활용성으로 인해 자바스크립트를 잘 이해하고 활용하는 것은 개발자에게 매우 중요합니다. 자바스크립트의 핵심적인 기본 문법으로는 변수, 조건문, 반복문, 함수, 객체, 클래스, 배열, 비동기 처리 등이 있습니다. 기본 문법들은 어떤 특징이 있는지 정리해 보도록 하겠습니다. 변수와 자료형 자바스크립트에서는 크게 변수와 자료형으로 정리할 수 있습니다. 1. 변수 (Variables) 변수는 데이터를 저장하는데 사용되는 식별자입니다. var, let, .. 2023. 8. 2.
[javascript] 자바스크립트 해당연도의 주차수 구하는 방법 안녕하세요! 이번 포스팅에서는 자바스크립트에서 특정 연도의 주차 수를 구하는 방법에 대해 알아보려고 합니다. 자바스크립트에서 주차 수를 계산하는 것은 시간적인 정보를 다루는데 매우 유용하며, 특히 날짜와 시간을 다루는 웹 애플리케이션에서 많이 활용되는 기능 중 하나입니다. 자주 사용하진 않지만 가끔씩 업무에서 상황에 따라 필요한 경우가 있습니다. 그럼 주차수를 구하는 방법을 예제를 통해서 정리해 보도록 하겠습니다. 해당연도 주차수를 구하는 함수의 활용 1. 업무 일정 관리 특정 프로젝트나 업무의 일정을 주차별로 구분하여 관리할 때 사용할 수 있습니다. 특정 날짜가 해당 연도의 몇 주차에 해당하는지 알면 일정 관리에 용이합니다. 2. 레포트 작성 데이터를 분석하고 리포트를 작성할 때, 주차별로 데이터를 구.. 2023. 8. 1.
[Vue3] vue3-echarts 라인 차트 만들기 안녕하세요! 오늘은 Vue3에서 시각화 차트로 자주 활용되는 vue3-echarts 라이브러리를 활용한 라인 차트에 대해 정리해 보려고 합니다. 데이터를 시각화하고자 할 때 다양한 유형의 차트로 시각화를 할 수 있지만, 그중에서도 라인 차트는 기본 형태의 차트로서 다양한 환경에서 활용하기 좋습니다. 다양한 예제와 설명을 통해 vue3-echarts 라이브러리를 사용하여 라인 차트를 구현하는 방법을 자세히 알아보도록 하겠습니다. vue3-echarts 라인 차트 Vue3-ECharts는 Vue.js와 ECharts를 통합하여 데이터 시각화를 위한 강력한 도구를 제공하는 라이브러리입니다. ECharts는 빠르고 강력한 차트 라이브러리로서 다양한 유형의 차트를 제공하며, Vue.js와 함께 사용하면 데이터 시.. 2023. 7. 31.
[javascript] 자바스크립트 날짜 포맷 date format 알아보기 안녕하세요! 오늘은 자바스크립트에서 날짜 형식의 데이터를 다루는 방법에 대해 포스팅하려고 합니다. 자바스크립트에서는 날짜를 다루는 데에 유용한 내장 객체인 Date 객체를 사용합니다. 이 객체를 활용하여 날짜 데이터를 원하는 형식으로 포맷하는 방법과 문자 형식의 데이터를 다시 날짜 형식으로 변환하는 방법을 알아보겠습니다. 날짜 형식의 데이터를 처리하는 경우, 데이터의 형식에 따라 문자열로 변환하거나 날짜 객체로 변환하는 작업이 필요합니다. 이러한 기능들을 효율적으로 활용하여 데이터를 다루는 방법을 정리해 드리겠습니다. 그럼 함께 자바스크립트에서 날짜 데이터를 처리하는 방법을 알아보도록 하겠습니다. Date Format 이란? 자바스크립트에서 Date 객체를 사용하여 날짜를 다룰 때, 날짜 데이터의 포맷을.. 2023. 7. 30.
[javascript] 자바스크립트 Promise 알아보기 안녕하세요! 오늘은 자바스크립트의 내장 함수인 Promise에 대해 포스팅하려고 합니다. 프로미스는 자바스크립트에서 비동기적인 작업을 처리하고 처리 결과를 다루는데 유용한 기능입니다. 자바스크립트를 초창기 개발했을 때는 프로미스와 같은 기능이 없었기 때문에 비동기 작업을 처리할 때 콜백 함수를 중첩해서 사용해야 하는 "콜백 지옥"이라고 불리는 복잡한 상황이 종종 발생했습니다. 하지만 Promise가 공식적으로 도입되면서 콜백 지옥을 탈출할 수 있는 방법이 생겨났습니다. Promise는 비동기 작업을 보다 간결하고 직관적으로 처리할 수 있도록 도와주는 객체입니다. Promise를 사용하면 비동기 작업의 성공 또는 실패를 처리하는데 용이하며, 연속적인 비동기 작업을 보다 가독성 좋게 처리할 수 있습니다. 또.. 2023. 7. 29.
[javascript] 자바스크립트 isNaN 함수 정리 안녕하세요! 오늘은 자바스크립트의 기본 내장 함수인 isNaN 함수에 대해 자세히 포스팅하려고 합니다. 자바스크립트를 이용하여 개발을 하다 보면 사용자 인터페이스(UI)에서 숫자형 데이터를 판별하는 상황이 빈번하게 발생합니다. 이럴 때 저 또한 isNaN 함수를 자주 활용하고 있습니다. isNaN 함수는 "Is Not a Number"의 줄임말로, 주어진 값이 숫자가 아닌지를 확인하는 역할을 합니다. 이 함수의 특징과 사용 방법을 하나씩 정리해 보도록 하겠습니다. IsNaN 함수의 특징 1. isNaN 함수는 주어진 값이 숫자가 아닌 경우 true를 반환하고, 숫자인 경우 false를 반환합니다. 2. 숫자가 아닌 경우, NaN(Not a Number) 값을 반환합니다. 3. NaN은 자바스크립트의 특수.. 2023. 7. 27.
[javascript] 자바스크립트 "[object Object]" is not valid JSON 에러 알아보기 안녕하세요! 오늘은 자바스크립트에서 종종 마주치게 되는 "[object Object]" is not valid JSON 에러에 대해 알아보려고 해요. 이 에러는 주로 JSON.parse() 함수를 사용할 때 발생하곤 합니다. JSON.parse() 함수는 JSON 형식의 문자열을 자바스크립트 객체로 변환해 주는데, 그런데 JSON 형식이 아닌 문자열을 이 함수에 전달하면 에러가 나타나게 됩니다. 정말 간단하게 말하면, JSON 형식의 규칙에 맞지 않는 문자열을 사용하면서 JSON.parse() 함수를 호출하면 이 에러가 나타나게 됩니다. 그러면 어떤 상황에서 위와 같은 에러가 발생을 하는지 간단한 예제 코드를 통해서 정리해 보도록 하겠습니다. JSON.parse() JSON.parse()는 자바스크립트의.. 2023. 7. 26.
[vue] Echart bar 차트 만들기 Vue Echarts는 Vue.js에서 사용되는 데이터 시각화 차트 라이브러리이다. Vue.js 애플리케이션에서 쉽게 Echarts를 통합하고 사용할 수 있도록 도와주는 도구로, Vue 컴포넌트로 차트를 감싸고 데이터를 손쉽게 바인딩할 수 있다. 목차 오늘은 Vue에서 훌륭한 차트 라이브러리인 vue3-echart을 활용하여 bar 형태의 차트를 만들어보려고 합니다. Vue를 개발하는 업무에서 여러 가지 차트 라이브러리를 사용해 봤지만, Apache에서 나온 오픈소스인 vue3-echart는 다양한 기능과 뛰어난 성능으로 좋은 결과를 만든 기억이 있습니다. 라이브러리 이름에 Vue3가 들어갔듯이, 이번 예제에는 Vue3 기반으로 만들어졌습니다. 그럼 예제를 통해서 하나씩 정리해 보도록 하겠습니다. vue.. 2023. 7. 23.

티스토리툴바