전체 글

Vue.js 디렉티브(v-접두사)

디렉티브 HTML 요소에 동작과 기능을 부여를 더 쉽게 할 수 있습니다. HTML 태그 안에 v-접두사 형식으로 표시되며, Vue.js가 HTML을 해석하고 동적으로 조작할 수 있도록 돕습니다. 첫 번재 문장 {{ system }} 두 번째 문장 세 번째 문장 네 번째 문장(경고 창) new Vue({ el: '#app', data: { flag1: false, flag2: true, systems: ['android', 'ios', 'window'], uid: 10 }, methods: { popupAlert: function () { return alert('경고 창 표시'); } } }); {{ }} (v-text): 데이터 바인딩 HTML 화면 요소에 뷰 인스턴스 데이터를 연결하고 표시합니다. v..

Vue.js axios를 이용한 HTTP 통신

axios HTTP 통신을 하는 방법들이 있지만 그 중 Vue.js에서 권고하는 방식은 axios 입니다. axios는 Promise 기반의 API 형식이고 다른 방법들에 비해 문서화도 잘되어 있고 많이 사용됩니다. axios 설치 NPM을 사용하여 설치하는 방법 (링크) CDN을 이용하여 설치하는 방법 axios 사용법 해당 URL 값 가져오기 new Vue({ el: '#app', methods: { getData: function () { axios.get(`URL`) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); } } }); axios HTTP 요청 메서드 ..

Vue.js Router로 싱글 페이지 어플리케이션(SPA) 페이지 라우팅 구현

Vue.js Router Vue.js Router는 Vue.js 프레임워크에서 사용되는공식 라우터 라이브러리로, SPA에서 페이지 라우팅을 구현하는데 사용됩니다. Vue.js Router는 Vue 어플리케이션에서 다양한 View와 URL 간의 매핑을 정의하고, 사용자가 브라우저의 주소 표시줄을 통해 URL을 변경하거나 링크를 클릭할 때마다 적절한 뷰를 렌더링합니다. 각 라우트에 대해 컴포넌트를 매핑하고, 중첩된 라우트와 동적 라우팅을 설정하여 사용할 수 있습니다. 또한 뒤로/앞으로 버튼을 클릭할 때마다 적절한 컴포넌트를 자동으로 로드하여, SPA에서 페이지 전환을 간편하게 관리할 수 있습니다. 💁‍♂️싱글 페이지 어플리케이션(SPA)이란? 싱글 페이지 어플리케이션이란 우리가 기본적으로 알고있는 어플리케이..

Vue.js 컴포넌트: Props, Emit, Event Bus를 활용한 통신 방법

Vue 컴포넌트 컴포넌트 Vue 어플리케이션에서 코드를 재사용할 수 있는 기본 단위입니다. 각각의 컴포넌트는 특정한기능과 템플릿을 갖고, 데이터와 메서드를 정의하여 독립적으로 동작할 수 있습니다. 컴포넌트를 이용하면 HTML 요소들을 확장하고 화면을 구조화함으로 코드를 캡슐화하여 재사용 및 유지보수를 용이하게 해줍니다. Vue 컴포넌트 작성 {{ title }} {{ count }} Count 증가 Vue 컴포넌트 등록 전역 등록 main.js: import Vue from 'vue'; import GlobalComponent from './components/GlobalComponent.vue'; Vue.component('global-component', GlobalComponent); new Vue..

Vue.js 뷰 인스턴스와 인스턴스 라이프 사이클

Vue 인스턴스 Vue 어플리케이션을 개발하기 위해 Vue 인스턴스를 생성하여 적용합니다. {{ message }} Vue.js에서 인스턴스를 생성할 때, data 옵션을 사용하여 데이터를 정의할 수 있습니다. 이때, data 옵션을 정의하는 방식은 두 가지가 있습니다. data: {} 위 예제처럼 객체 리터럴을 사용하여 data 객체를 정의하는 방식입니다. 이 방식은 객체 안에 정의된 프로퍼티가 Vue.js의 반응성 시스템에 등록되어, 해당 프로퍼티가 변경될 때마다 화면이 자동으로 업데이트 됩니다. data() { return {} } data 옵션을 함수 형태로 정의하는 방식입니다. 이때 함수는 객체를 반환해야 하고, 이 객체 안에 정의된 프로퍼티 역시 Vue.js의 반응성 시스템에 등록됩니다. 차이..

JS Fetch API를 이용한 Ajax 통신

Fetch API 방식 이용한 Ajax Ajax는 정통적으로 XMLHttpRequest() 객체를 사용하여 서버와 데이터를 교환합니다. 하지만 이 방식은 코드가 복잡하고 가독성이 좋지 않아 최신 기술인 fetch() 메서드를 통해 Ajax 통신하는 법에 대해 포스팅하겠습니다. Fetch API 사용 장점 Fetch API는 Promise 기반으로 구성되어 있어 비동기 처리 방식에 적합한 형태입니다. 체이닝 방식으로 작성 가능하기 때문에 가독성이 좋습니다. Fetch API는 JavaScript 기본 기능이기 때문에 JQuery 같은 라이브러리를 가져다 쓰지 않기 때문에 가볍습니다. Fetch 문법 사용법 fetch("URL", option) .then((response) => response.text()..

JS AJAX ( Asynchronous JavaScript And XML )

AJAX: Asynchronous JavaScript And XML AJAX는 Javascript와 XML을 이용한 비동기적 정보 교환 기법입니다. AJAX를 이용함으로 사용자가 서버에 자료를 요청할 때 화면 전환 없이 요청한 자료를 받을 수 있습니다. 또한 사용자가 기다릴 필요 없이 다른 작업을 바로 수행할 수 있습니다. Ajax 기초 메서드 종류 설명 load() (데이터를 전송하여) 외부 콘텐츠를 가져올 때 사용 $.ajax() 데이터를 서버에 HTTP POST, GET방식으로 전송할 수 있음. HTML, XML, JSON, 텍스트 유형에 데이터를 요청할 수 있음. $.post(), $.get(), $.getJSON() 메소드의 기능을 하나로 합쳐 놓은 통합적인 메서드. $.post() 데이터를 서..

JS JSON: JavaScript Object Notion

JSON: JavaScript Object Notion JavaScript 객체 표기법으로 작성된 텍스트 기반의 방식입니다. JSON은 쉽게 읽고 작성할 수 있고, 소프트웨어에서 파싱 및 생성하기도 쉽습니다. 때문에 주로 컴퓨터간 데이터 교환 형식으로 쓰입니다. JSON 표기법 {}로 데이터를 묶고 key: value로 구성 데이터는 ,로 구분합니다. {중괄호}는 객체를 구성 [대괄호]는 배열을 구성 // 예제 1 '{"name":"kim", "age":25, "address":null}' // 예제 2 { "students":[ {"name":"kim", "age":25}, {"name":"lee", "age":30}, {"name":"choo", "age":18} ] } JSON ↔ JS 객체 파싱 ..

JS JQuery ( + JQuery 사용 방법 )

사실 JQuery가 무거워서 일를 사용하기 보다는 기존 JS를 이용하여 개발을 하는 것이 더욱 좋은 퍼포먼스를 낼 수 있다는 말도 있습니다. 실제로 프로트엔트 커리큘럼 한 자료에서는 JQuery가 빠졌을 정도로 대체가 가능하지만 그래도 아직은 사용하는 곳이 많은거 같기 때문에 간단하게라도 봐보도록 하겠습니다. JQuery JQuery란 화면의 동적 기능을 JS(자바스크립트)보다 쉽게 개발할 수 있게 해주는 JS 기반 라이브러리입니다. DOM과 이벤트 객체는 브라우저 종류가 다를 경우 다른 결과 값을 나타낼 수 있다는 단점이 있습니다. 이런 호환성 문제는 JQuery를 이용함으로 해결되었습니다. 호환성 문제만이 아니라 JQuery는 다양한 애니메이션과 효과를 지원하는 메서드를 지원하기 때문에 개발 시간을 ..

JS Web API ( storage, fetch, geolocation )

Storage API Web Storage API는 브라우저에서 Key-Value 구조 데이터로 저장하고 검색하기 위한 방법을 제공합니다. window.localStorage 특정 웹사이트의 로컬 저장소에 대한 접근을 제공 해당 도메인에 대한 데이터를 저장, 읽기, 수정, 삭제 할 수 있습니다. 데이터는 만료일이 없이 저장되어 브라우저를 닫아도 삭제되지 않습니다. localStorage.setItem("name", "Kim"); // 저장소에 데이터 저장 localStorage.getItem("name"); // 저장소에서 데이터 항목 검색 window.sessionStorage localStorage 객체와 세션에 저장한다는 차이점만 빼면 똑같습니다. 세션에 저장하기 때문에 브라우저를 닫으면 데이터가 ..

JS BOM( Browser Object Model ): 브라우저 객체 모델

BOM: 브라우저 객체 모델 브라우저에 내장된 객체를 브라우저 객체라고 합니다. window는 브라우저 객체의 최상위 객체이고, window 객체에는 하위 객체가 포함되어 있습니다. window window 객체는 브라우저의 창을 나타냅니다. 모든 전역 변수, 객체, 함수들은 window 객체의 멤버가 됩니다. 심지어 DOM의 document도 window 객체에 포함되기 때문에 아래 두 코드는 같은 결과를 나타냅니다. window.document.getElementById("header"); document.getElementById("header"); window 객체 window.open("URL", "새 창 이름", "새 창 옵션") - 새 창 열기 window.close() - 현재 창 닫기 w..

JS DOM( Document Object Model ): 문서 객체 모델

DOM: 문서 객체 모델 문서 객체 모델(DOM)은 HTML 문서 구조를 말합니다. HTML 문서의 구조에서 최상위 객체로는 이 있으며, 그 하위 객체로는 와 가 있습니다. 모든 HTML 태그는 객체 또는 노드라 합니다. Document는 document 노드라 하고 태그들도 모두 노드입니다. HTML 태그 내의 텍스트 역시 텍스트 노드라 하고 주석도 주석 노드라 합니다. 위 그림 처럼 노드들은 트리 구조를 구성기 때문에 태그를 루트 노드가 되고, 태그와 태그는 루트 노드의 자식 노드가 됩니다. 이 같은 노드들은 모두 JS를 통해 접근할 수 있고 조작할 수 있습니다. 예를 들어 태그는 document.body로 접근할 수 있고 텍스트 노드는 innerHTML속성으로 접근할 수 있습니다. DOM 노드 탐색..

JS async & await

async & await async와 await은 JS의 비동기 처리 방식인 Promise를 더 쉽게 작성하고, 가독성이 좋게 만들어주는 문법입니다. async function 함수명() { await 비동기_처리_메서드명(); } async는 함수가 Promise를 반환하도록 하는 키워드입니다. await은 async 함수 내에서 사용할 수 있는 키워드로 함수 실행을 일시 중지하고 Promise가 처리되면 결과와 함께 함수가 다시 실행됩니다. async async는 function 앞에 붙이는 키워드로 함수가 Promise를 반환하도록 하는 키워드입니다. 만약 Promise가 아닌 값을 반환하더라도 Promise.resolve("반환값") 형식인 이행된 Promise가 반환됩니다. 아래 예시를 보면 "..

JS Promise를 사용한 비동기 처리

비동기 처리 비동기 처리란 코드가 끝나기를 기다리지 않고 다음 코드를 실행하는 것을 말합니다. 비동기 처리 예제 setTimeout(function(), ms) console.log("first"); setTimeout(function () { console.log("second"); }, 3000); console.log("third"); 위 예제 코드에 대한 결과는 다음과 같습니다. "first" 출력 "third" 출력 "second" 출력 setTimeout은 지정한 초(예제에서는 3초) 만큼 기다린 후에 코드가 실행됩니다. 하지만 비동기 방식으로 실행되기 때문에 기다리는 동안 다음 코드가 실행됩니다. Promise 사용 전 비동기를 위한 방법: 콜백 함수 JS에서 비동기 처리에 대한 글을 보면 ..

JS addEventListener 사용법 ( + capturing, bubbling )

addEventListener() addEventListener()는 지정된 요소에 하나 이상의 이벤트 핸들러를 등록할 수 있습니다. removeEventListener() removeEventListener()는 addEventListener()로 연결된 이벤트 핸들러를 제거합니다. 이때 주의할 점은 반드시 addEventListener()를 사용했을 때와 마찬가지로 매개 변수를 설정해주어야 한다는 점과 addEventListener()과 같은 단계에 있어야 한다는 점입니다. element.addEventListener(event, function, useCapture) 1. element document, window 같이 이벤트를 적용할 요소입니다. 2. event 첫 번째 매개변수로 이벤트 유형을..

JS 정규식

정규식 정규식은 문자열에서 특정 내용을 찾거나 대체할 때 사용됩니다. 문장이 필터링 되어야 하는 경우 정규표현식을 이용하면 간편하게 처리할 수 있어 유용합니다. JS에서 주로 search(), replace(), match(), split() 등과 같은 메서드에 쓰입니다. 문자열.search(정규표현식) 문자열.replace(정규표현식, 치환문자열) 문자열.match(정규표현식) 문자열.split(정규표현식) 정규표현식.exec(문자열): 패턴과 일치하는 문자열을 배열로 반환 정규표현식.test(문자열): 패턴과 일치하는 문자열이 있는지 여부를 반환 정규식 규칙: /패턴/수정자 패턴 패턴 부분 정규식 규칙을 대부분 비슷합니다. 정규식 규칙 정규식 규칙 기호 | OR a|b [문자] 대괄호 내에 지정된 문..

JS Map과 Set

Map Key(키)와 Value(값)을 쌍으로 이루어진 컬렉션입니다. // Map 생성 및 선언 const map = new Map(); const map = new Map([ ['Apple', 1200], ['Banan', 1500], ['Orange', 2500] ]); // Map 값 추가 map.set('Apple', 1200); map.set('Banana', 1500); map.set('Orange', 2500); // Map 값 삭제 map.delete('Apple') // Map 값 가져오기 map.get('Apple'); // Map 값 존재하는지 확인 map.has('Apple'); // true or false // Map 크기 map.size; // Map 모든 값 삭제 map.cl..

JS 자바스크립트 반복문(Loop) / for in, for of 차이점

반복문 종류 for: 코드 블록을 반복 forEach: 배열의 각 요소에 대해 콜백함수를 호출 for in: 객체의 속성을 순회할 때사용 for of: 반복 가능한(iterable) 객체를 순회할 때 사용 for문: 가장 기본적인 순회 방법입니다. for (let i = 0; i { console.log(value); }); array.forEach((value, index) => { console.log("index: " + i..

JS 내장 객체: String, Date, Math, Array, 정규식 객체 등

내장 객체 내장 객체는 JS 엔진에 내장되어 있어 필요시에 사용할 수 있습니다. 내장 객체는 다음과 같은 방법으로 선언할 수 있습니다. 참조 변수 = new 생성 함수(); 내장 객체 종류는 대표적으로 아래와 같이 있습니다. 문자열 내장 객체 (Click) 날짜 내장 객체 (아래 설명) 수학 내장 객체 (아래 설명) 배열 내장 객체 (Click) 정규식 객체 (Click) 날짜 정보 객체: Date 날짜 객체 생성 const date = new Date(); new Date() // 현재 날짜와 시간 new Date(date string) // 날짜 문자열에서 날짜 객체 생성 // 연도, 월, 일, 시, 분, 초, 밀리초 (순서) new Date(ms) new Date(year,month) new Dat..

JS 자바스크립트 배열(Array) + 배열을 다루는 내장 API들 소개

배열(Array) 배열(Array)은 순서가 있는 데이터 집합을 다루기 위한 데이터 구조입니다. JS에서 배열은 다른 프로그래밍 언어와 다른 점이 있습니다. 바로 JS에서 배열은 특수한 형태의 객체로 다룬다는 점입니다. 또한 JS는 변수의 타입이 런타임에 결정되는 동적 타입 언어이기 때문에 배열에 담기는 데이터타입이 동일하지 않아도됩니다. var arr = []; console.log(typeof arr); // Object 출력 const mixedArr = [1, "two", true, {age: 4}, [5, 6, 7]]; 배열 선언 방식: const 배열을 선언할 때 const 키워드를 사용하는 것이 일반적입니다. 배열을 const로 선언하는 이유는 배열 변수가 재할당되지 않도록 하기 위해서입니다..

JS 문자열 메서드

let text = "ABCDEFGHI"; 문자열 길이 let length = text.length; //9 문자열 부분 자르기 slice(start, end) let str = text.slice(2, 5); // CDE let str = text.slice(2); // CDEFGHI let str = text.slice(-4); // FGHI let str = text.slice(-4, -2); // FG substring(start, end) let str = text.substring(2, 5); // CDE let str = text.substring(2); // CDEFGHI substr(start, length) let str = text.substr(2, 5); // CDEFG let st..

JS 자료형과 타입 변환 모음

자료형 변수에 저장할 수 있는 자료형은 다음과 같습니다. 문자열: String 숫자형: Number 논리형: Boolean 빈 데이터: undefined 자료형 구하기: typeof 지정한 테이너 또는 변수에 저장된 자료형을 알고 싶을 때 typeof를 이용하면 구할 수 있습니다. let num = 5; let str = "문자열"; let obj = {name: 'kim', age: 25}; console.log(typeof num); // numver console.log(typeof str); // string console.log(typeof obj); // object 문자열 문자열 → 숫자 Number(): Number("100"), Number(" ") 빈 문자열인 경우 0 반환 단항 + 연..

JS 호이스팅과 var, let, const 차이점

호이스팅 호이스팅(hoisting) JavaScript의 인터프리터가 함수나 변수 선언을 선언들이 속해 있는 스코프의 최상단으로 끌어올리는 동작을 의미합니다. 즉, 함수나 변수를 선언하기 전에도 사용할 수 있다는 것을 의미합니다. 코드 실행 전, 자바스크립트 엔진이 해당 스코프에서 선언된 함수와 변수를 모두 찾고, 함수 선언문을 가장 최상단에 끌어올리고 그 다음으로 변수 선언을 올립니다. 아래 예제들을 보면서 설명하도록 하겠습니다. console.log(value); var value = "hello"; // undefined 여기서 변수 value 선언이 끌어 올려지기 때문에 다음과 같이 해석됩니다. var value; // 변수 value 호이스팅 console.log(value); // value ..

JS 현재 창 인쇄하기: window.print()

JS는 window.print() 메서드를 통해 현재 브라우저 창을 인쇄할 수 있습니다. DOCTYPE html> 현재창 인쇄 인쇄

JS 데이터 표시하는 방법(innerHTML, write(), console.log(), alert())

innerHTML document.getElementById(id)를 사용하여 HTML 요소에 접근할 수 있습니다. 아래처럼 innerHTML 속성을 사용하여 HTML 내용을 작성할 수 있습니다. DOCTYPE html> h1 태그 div 태그 document.getElementById("test").innerHTML = "id가 test인 곳에 innerHTML 사용"; document.write() document에 출력하는 문법입니다. 아래 예제와 같이 HTML 문서가 로드된 이후, document.write()를 사용하면 기존 HTML이 모두 삭제됩니다. 때문에 document.write()는 테스트용도로만 사용하는 것이 좋습니다. DOCTYPE html> h1 태그 div 태그 TEST docu..

JS 작성 위치(<body>태그 가장 아래 위치하는 이유)

/ 태그 안에 직접 작성하기 태그 안에

AWS EC2 Swap File로 메모리 부족 대처(feat. EC2 Build 멈춤 해결)

EC2에서 빌드 중 계속 멈추는 현상이 발생했습니다. 문제는 프리티어는 RAM 1GB만 지원해주기 때문이었습니다. 이러한 메모리 부족 현상은 Amazon Docs에 설명되어 있듯이 하드디스크를 가상 메모리로 변환시켜 사용(Swapping)하여 해결할 수 있었습니다. 1. 메모리의 상태 확인 $ free 2. Swap File 생성 $ sudo dd if=/dev/zero of=/swapfile bs=128M count=32 dd 명령을 통한 루트 파일 시스템에 Swap File 생성 bs: 블록 크기, bs는 인스턴스에서 사용 가능한 메모리보다 작아야 합니다. count: 블록 개수 bs(128M) * count(16) = 4GB(4,096MB) 3. 생성한 Swap File 권한 설정 사용자의 읽기 및..

AWS Amazon RDS DBeaver에 연결 (+ EC2에서 접속)

DBeaver 1. 새 데이터베이스 연결 2. 자신 환경에 맞게 선택 3. Connection Settings RDS 인스턴스 들어가 정보를 확인한 후 아래에 기입해줍니다. 엔드포인트 및 포트 확인 [RDS 인스턴스] > [연결 & 보안] 탭 > 엔드포인트 및 포트 확인 이를 통해 연결을 할 수 있습니다. DB 이름 & RDS Username 확인 [RDS 인스턴스] > [구성] 탭 > DB 이름 & 마스터 사용자 이름 EC2에서 접속 EC2에 mariaDB 설치 # mariadb 설치 $ sudo yum install mariadb # RDS 접근 $ mysql -u {username} -p -h {엔드포인트}

AWS Amazon RDS (feat. MariaDB)

Amazon RDS(Relational Database Service) AWS에서 제공하는 관계형 데이터베이스 서비스입니다. EC2 인스턴스(서버) 안에 DB를 같이 두어 서비스할 수도 있는데 왜 RDS를 사용할까요? 만약 서비스를 운영하다가 서버에 문제가 생기면 서비스를 중단해야 하는 경우, 또는 트래픽에 따라 서버를 줄이고 늘리는 경우 등 서버와 DB를 분리하는 것이 유리합니다. 이를 좀 더 개념적이고 자세하게 설명하면 다음과 같습니다. 클라우드에서 관계형 데이터베이스를 간편하게 설정, 운영 및 확장할 수 있습니다. 하드웨어 프로비저닝, 데이터베이스 설정, 패치 및 백업과 같은 시간 소모적인 관리 작업을 자동화하면서, 비용 효율적이고 크기 조정 가능한 용량을 제공합니다. 사용자가 애플리케이션에 집중해..

AWS EC2에 Spring Boot 배포하기 (Amazon Linux)

작업한 프로젝트를 AWS EC2에 배포하기 위해서 다음과 같은 절차로 진행합니다. EC2 서버로 Github에서 코드를 가져옵니다. build하여 jar 파일을 생성합니다. 물론 로컬에서 build하여 jar 파일을 생성한 후 EC2 서버로 보내는 방법도 가능합니다. 1. 환경셋팅: Java 설치 / Git 설치 1-1) Git 설치 $ sudo yum install git 1-2) Java 설치 (JDK 11) yum은 jdk 1.8 까지만 설치가 가능합니다. 때문에 다음과 같은 방식으로 jdk11를 설치해주어야 합니다. 참고 yum 사용: CentOS, Red Hat 계열 apt-get 사용: Debian, Ubuntu # Amazon Corretto를 이용한 jdk 11 파일 다운로드 # -o 옵션..