Web/Vue

Vue.js 적용, 설치, 세팅 및 이벤트버스 (Event Bus) 사용 방법

✋ vue.js 개념, 설치, 세팅, package.json, 이벤트버스 (Event Bus) 방법 현재 Vue는 다른 프레임워크들 ( react: Facebook, angular: Google ) 과 어깨를 나란히 견줄 수 있을만큼 무섭게 성장하는 프레임워크입니다. Vue는 지금 현재 급격히 관심이 늘고 있는 자바스크립트 프레임워크입니다. 2014년에 출시를 하였고, Vue는 ES5기능을 이용하기 때문에 그 아래 버전을 구현한 IE8 이하 버전에서는 사용이 불가합니다. ⚡️ vue.js Vuejs는 브라우저에서 바로 적용해서 사용하실 수 있습니다. 기존 프로젝트에 추가로 적용되더라도 전혀 충돌없이 함께 사용할 수 있기 때문에 부담없이 시작할 수 있습니다. Vue는 자바스크립트 프레임워크입니다. View..

코딩테스트/Javascript

코딩테스트 자바스크립트(JS) 기초 대비2

✋ 자바스크립트 (JS) 기초적인 다양한 문제들을 다루겠습니다. ⚡️ 백준 구구단 문제, 합 문제 백준내의 대표적이고 기초적인 두문제에 대해서 다루겠습니다. 📌 백준 2739번 구구단 문제 for문과 template의 literal 형식을 사용하여 풀이를 해봤습니다. 다음문제는 사용자의 입력을 받는 문제입니다. 따라서 const input = require('fs').readFileSync('/dev/stdin').toString().split('\n');을 선언하는 것이 중요합니다. 사용자 입력 관련해서 아래 링크를 참조하면 자세한 설명을 볼 수 있습니다. 2022.06.23 - [코딩테스트/Javascript] - 코딩테스트 기초 대비 (Javascript 입력 input 방법) 📌 백준 8393번 ..

디자인패턴

(디자인 패턴) 옵저버 패턴이란 (Observer Pattern)

✋ 옵저버 패턴이란 (Observer Pattern) 옵저버 패턴 (Observer) 관찰자 이벤트가 발생하면 각 옵저버는 콜백을 받습니다. ⚡️ 옵저버란 옵저버 패턴(observer pattern)은 객체의 상태 변화를 관찰하는 옵저버(관찰자)들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 notify를 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴 주로 분산 이벤트 핸들링 시스템을 구현. 발행/구독 모델로 알려져 있기도 하다. notify 함수는 관찰 대상이 발행한 메시지 이외에, 옵서버 자신이 생성한 인자값을 전달가능합니다. 각각의 파생 옵서버는 notify 함수를 구현함으로써 이벤트가 발생했을 때 처리할 각자의 동작을 개발자가 작성해야합니다. 옵서버 패턴은 (Model-..

디자인패턴

(디자인 패턴) MVC, MVP, MVVM 패턴

✋ (디자인 패턴) MVC, MVP, MVVM 패턴 실무에서 가장 많이 적용되고 알려져있는 패턴들입니다. 다음과 같이 이 패턴들이 작업공간에서 3가지부분으로 나눈 이유는 각 계층을 분리시킴으로써 코드의 재활용성을 높이고 불필요한 중복을 막기위해서입니다. Model과 VIew의 의존성을 어떻게 구성하고 제어하는지에 따라 각 패턴이 분류 됩니다. 세가지 패턴 모두 공통적으로 Model과 View가 들어가있습니다. ⚡️ MVC, MVP, MVVM 축약 MVC => Model - View - Controller MVP => Model - View - Presenter MVVM => Model - View - ViewModel 📌 3가지 패턴 관점에서 MVC 설명 사용자의 입력은 Controller로 들어갑니다...

디자인패턴

(디자인 패턴) MVC 패턴이란

✋ (디자인 패턴) MVC 패턴이란 다음 이미지에서 보이듯이 View와 Controller가 서로간에 연결되어 있습니다. 그 외에 Controller는 Model을 작동시키고, Model은 View를 업데이트합니다. ⚡️ MVC란 MVC = Model + view + controller 웹애플리케이션을 3가지의 구성요소로 나누어 개발과 유지보수를 편하게 하고자 하는데 목적을 둡니다. 📌 MVC로 나누는 이유 어플리케이션을 만들기위한 코드가 모두 한곳에 모여있다고 한다면 웹디자이너는 어플리케이션의 디자인을 바꾸기 위해서 코드의 디자인 부분과 제어를 위한 부분을 모두 살펴봐야합니다. 그것에 대해 모든 지식이 있어야 필요한 부분만을 바꿀 수 있을 것이고 그것은 개발자나 디자이너에게 부담을 증가시킬 것입니다. ..

디자인패턴

(디자인 패턴) MVP 패턴이란

✋ (디자인 패턴) MVP 패턴이란 다음 이미지에서 보이듯이 Model과 View는 서로 연결되어있지 않고 Presenter를 매개체로 하여 서로 연동된다. ⚡️ MVP란 MVP = Model + View + Presenter 📌 구조 Model 일종의 데이터(Data)라고 생각하면 됩니다. 데이터 뿐만이 아니라 데이터를 가공해서 처리하는 간단한 로직도 model안에 포함이 되는 부분입니다. 어플리케이션에서 사용하는 데이터 및 그 데이터를 처리합니다. View 사용자에게 보여지는 화면입니다. 사용자에게 제공되어지는 UI Layer를 의미합니다. 브라우져나 모바일 화면에서 View는CSS/HTML/XML 등으로 렌더링 되어서 보여주는 화면을 가리킵니다. Presenter View에서 요청한 정보로 Mode..

디자인패턴

(디자인 패턴) MVVM 패턴이란

⚡️ MVVM이란 MVVM = Model + View + ViewModel 📌 구조 Model 일종의 데이터(Data)라고 생각하면 됩니다. 데이터 뿐만이 아니라 데이터를 가공해서 처리하는 간단한 로직도 model안에 포함이 되는 부분입니다. 어플리케이션에서 사용하는 데이터 및 그 데이터를 처리합니다. View 사용자에게 보여지는 화면입니다. 사용자에게 제공되어지는 UI Layer를 의미합니다. 브라우져나 모바일 화면에서 View는CSS/HTML/XML 등으로 렌더링 되어서 보여주는 화면을 가리킵니다. View Model View를 표현하기 위해 존재합니다. 즉 View를 위한 Model입니다. 그 외에는 View를 나타내기 위한 데이터 처리를 하는 역할을 지닙니다. *Model과View는 MVC 패턴과..

코딩테스트/Javascript

코딩테스트 자바스크립트(JS) 기초 대비1 (사용자 입력 input 방법)

자바스크립트 간단한 문법부터 복잡한 코딩테스트 문제까지 다양한 문제들을 다룰 예정입니다. 먼저 간단한 자바스크립트 문법입니다. ⚡️ 기초적인 자바스크립트 문법 일단 해당 문법은 자바스크립트 문자열을 출력하는 자바스크립트 문법입니다. 📌 JS 입력 모듈 *자바스크립트로 코딩을 할 경우 알아야 할 점이 있습니다. 바로 입력을 할 경우 인데요. 자바스크립트는 입력 모듈을 따로 require해야 합니다. 이런 식으로 입력 문제의 경우 무조건 첫 줄에 명시를 해주어야 합니다. 다음 문제에서 적용한 예시를 보이겠습니다. 백준 9498번 시험 성적을 입력하고 출력하는 문제입니다. 다음과 같이 첫줄에 'fs'라는 모듈을 require한 후에 입력을 받습니다. 그 다음 if문 처리를 하여 문제를 해결하였습니다. 항상 위..