분류 전체보기 검색 결과

224 개의 검색 결과가 있습니다.

Frontend/JavaScript

[JS] 디자인 패턴 (MVC, MVP, MVVM)

1️⃣ MVC MVC는 Model + View + Controller를 말한다. 1-1. 구조 Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분 View : 사용자에서 보여지는 UI 부분 Controller : 사용자의 입력(Action)을 받고 처리하는 부분 1-2. 동작 사용자의 Action들은 Controller에 들어오게 된다 Controller가 사용자의 Action를 확인하고, Model을 업데이트한다 Controller가 Model을 나타내줄 View를 선택한다 View가 Model을 이용하여 화면을 나타낸다 ※ 참고 - MVC에서 View가 업데이트 되는 방법 View가 Model을 이용하여 직접 업데이트 Model에서 View에게 Notify 하여 업데이트 Vie..

2021. 9. 14. 16:38

Frontend/JavaScript

[JS ] 모듈 패턴 (Module Pattern)

📌 모듈 패턴은 특정 구성요소를 다른 구성요소와 독립적으로 유지하는 패턴을 말한다. 장점: 재사용성을 높히기 위한 코드를 작성할 때 유용하다 단점: 코드가 길어지고 파일 크기도 늘어난다 🚀 모듈 패턴 (Module Pattern) 모듈은 프로젝트의 코드를 간결하고 재사용성이 좋은 구조로 작성하는 데 도움을 주며, 모듈을 구현하는 가장 쉬운 방법은 객체 리터럴을 사용하는 방법이다. var obj = { key: 'value', method: function () { console.log('hello world'); } } 객체 리터럴은 사용하기 편하지만 위와 같이 작성했을 경우 보안에 취약하다. 자바스크립트에서 리터럴을 사용할땐 글로벌 공간에 변수를 선언하는 것은 되도록 피해야 한다. const PlusM..

2021. 9. 13. 00:16

Frontend/JavaScript

[JS] 자바스크립트 Web Storage

Web Storage는 HTML5부터 제공하는 기능으로 해당 도메인과 관련된 특정데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능으로 쿠키(cookie) 와 비슷한 기능이다. 1. Web Storage의 필요성 쿠키가 아래와 같은 단점을 갖기 때문에 Web Storage를 사용한다. 4KB의 데이터 저장 제한 HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안에 취약 쿠키는 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있음 2. Web Storage 의종류 Web Storage도 쿠키와 세션처럼 localStorage와 sessionStorage를 제공한다. sessionStorage라고 해서 세션처럼 서버에 저장된다고 생각할..

2021. 9. 12. 00:08

Frontend/JavaScript

[JS] 매개변수(Parameter)와 전달인자(Argument)

🌈 매개변수(parameter)와 전달인자(argument)란? function testFun(a,b) { return a + b } testFun(2,3); 위 코드에서 함수를 선언할 때 (a,b)의 a,b가 매개변수(parameter)이며 매개변수는 말 그대로 변수이다. 또한, 함수를 호출할 때의 (2,3)이 변수에 들어가는 값이며 인수(arguments) 라고 한다. 자바스크립트에서 arguments는 함수에 전달된 인수에 해당하는 객체이며 유사 배열에 해당한다. 정리하자면, 위 이미지에서 x와 y는 매개변수(Parameter, 인자)에 해당하며 함수의 정의에서 사용되는 변수이다. 그리고 add(2, 5)에서 2와 5를 전달인자(argument, 인수) 라고 부르며 파라미터에 할당되는 값을 말한다...

2021. 9. 11. 00:51

Frontend/JavaScript

[JS] 함수를 호출하는 메서드 Call, apply, bind

자바스크립트에서 함수를 호출하는 방법에는 일반적 방법인 함수 뒤에 ()를 붙여 호출하는 방법과 call, apply를 사용하여 호출하는 방법이 있다. 1. call() call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출한다. func.call(thisArg[, arg1[, arg2[, ...]]]) // thisArg: func 호출에 제공되는 this의 값 // arg1, arg2, ...: func이 호출되어야 하는 인수 function Product(name, price) { this.name = name; this.price = price; } function Food(name, price) { Product.call(this, name, price); this.ca..

2021. 9. 9. 00:32

Frontend/JavaScript

[JS] 즉시 실행 함수(IIFE) 사용 방법

즉시 실행 함수는 (IIFE, Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 함수이다. (function () { // 코드작성 })(); 즉시 실행 함수는 크게 두 부분으로 나눌 수 있다. 첫번째는 괄호( function () { } )로 둘러싸인 익명함수 부분이다. 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부에 다른 변수들이 접근하는 것을 막을 수 있는 방법이다. 두 번째 부분은 즉시 실행 함수를 생성하는 괄호()이다. 이를 통해 함수를 즉시 해석해서 실행한다. ▶ 문법 기본적인 문법은 다음과 같다. (function() { // 코드작성 }()); (function() { // 코드작성 ..

2021. 9. 8. 00:47