문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

현재 위치: start » wiki » miscellaneous » pwa
wiki:miscellaneous:pwa

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

다음 판 		이전 판
wiki:miscellaneous:pwa [2021/02/02 08:54]
emblim98 만듦 		wiki:miscellaneous:pwa [2023/01/13 18:44] (현재)
줄 1: 줄 1:
 ====== PWA ====== ====== PWA ======
 <WRAP left notice 80%> <WRAP left notice 80%>
-  * description : PWA 관련+  * description : PWA  
   * author      : 오션   * author      : 오션
   * email       : shlim@repia.com   * email       : shlim@repia.com
-  * lastupdate  : 2021-02-02-Tue+  * lastupdate  : 2021-02-01
 </WRAP> </WRAP>
 <WRAP clear></WRAP> <WRAP clear></WRAP>
  
-===== PWA ===== +====== Ref ====== 
-   * Progressive Web Apps, 프로그레시브 웹앱+   * 출처 : "Do it! 프로그레시브 웹앱 만들기", 저자 : 김응석, 2020년 8월, 이지스퍼블리싱
 \\ \\
-   - 네이티브 앱 (native app) +===== Promise [프로미스] ===== 
-     * 스마트폰 운영체제에서만 작동하는 앱 - 운영체제 환경에 맞는 별도의 프로그래밍 언어와 SDK 개발도구 이용 필요  +   * 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 오브젝트이다. 
-   - 모바일 웹앱 (mobile web app) +   * 정해진 장시간 동안 기능을 수행하고 나서 정상적으로 기능이 수행이 되었다면 성공의 메시지와 함께 처리된 결과값을 전달해준다.  
-     * 브라우저로 통신하여 운영체제에 얽매이지 않고, 웹 표준 언어로 만들어 저렴한 제작비용과 비교적 짧은 개발기간 +   * 기능 수행 시 예상치 못한 문제가 발생하면 에러를 전달해준다.  
-   - 하이브리드 앱 (hybrid app)    +\\ 
-     * 웹 표준 기술을 사용하여 웹앱을 만들고나서 별도의 프레임워크를 이용해 네이티브 앱으로 변환해서 배포 +===== var 변수 선언 ===== 
-   - 프로그레시브 웹앱 (progressive web app) +   * 함수 스코프(function scope)만 지원한다 --> var 변수는 함수 내부에서만 유효하다. 
-     * 웹의 쉽고 편리한 접근성을 유지하면서, 네이티브 앱의 원활한 사용자 경험을 제공+   * 블록 스코프(block scope)는 지원하지 않는다 --> 블록 내부에서 var키워드로 변수를 선언해도 블록 외부에서 사용할 수 있다.  
 +   * 블록 스코프를 지원하지 않는다는 의미는 함수 외부에서 선언한 변수는 모두 전역 변수처럼 사용된다는 뜻이다.  
 +   * var변수는 **중복으로 선언할 수 있다**는 의미는 기존 선언된 변수를 덮어 쓴다는 의미이다    
 +      * 스코프(scope) : 변수의 유효 범위 
 +      * 변수의 유효 범위 : 변수를 사용할 수 있는 범위 
 +\\ 
 +===== mutable[뮤터블, 가변의] vs immutable[이뮤터블, 불변의] ===== 
 +   * mutable : 프로그래밍에서 값을 변경할 수 있는 것을 의미     --> let 선언 변수  
 +   * immutable : 프로그래밍에서 값을 변경할 수 없는 것을 의미   --> const 선언 변수 
 +\\ 
 +===== let 사용법 ===== 
 +<code javascript> 
 +{  
 +   let 변수명;         // 변수 선언 
 +   let 변수명 = 값;    // 변수 선언과 동시에 값 할당 
 +} 
 +</code> 
 +\\ 
 +===== const 사용법 ===== 
 +<code javascript> 
 +{ 
 +   const 변수명 = 값;     // 변수 선언과 동시에 반드시 값을 할당해야 함 
 +} 
 +</code> 
 +\\ 
 +===== 블록 스코프(block scope) 예시 - let과 const로 선언한 변수의 사용법 ===== 
 +<code javascript> 
 +{ 
 +   let apple = 3; 
 +   console.log(apple);     // 3 출력 
 +   apple = 5;              // let 선언 변수는 재할당 허용 
 +   console.log(apple);     // 5 출력 
 +   let apple = 7;          // 같은 이름으로 중복 선언을 허용하지 않으므로 오류! 
 +    
 +   const car;              // 선언과 동시에 값을 할당하지 않으므로 오류! 
 +   const carname = "하이브리드카"; 
 +   console.log(carname);   // '하이브리드카' 출력 
 +   carname = "디젤카"      // const 선언 변수는 불변이므로 오류; 
 +} 
 +console.log(apple);       // 블록 밖이므로 오류! 
 +console.log(carname);     // 블록 밖이므로 오류! 
 +</code> 
 +\\ 
 +===== 모던 자바스크립트에서 변수 사용 3원칙 ===== 
 +   * let과 const 키워드로 선언한 변수는 유효 범위가 블록 스코프로 제한된다 
 +   - const를 가장 먼저 사용한다. 특히 변숫값을 변경할 필요가 없을 경우 사용한다 
 +   - 만약 중간에 변숫값을 변경해야 한다면 const 대신에 let을 사용한다. 
 +   - var는 ES6+에서는 사용하지 않는다. 다만 전역 변수가 꼭 필요할 때 최상위 수준에서만 예외로 사용한다. 
 +\\ 
 +===== 템플릿 리터럴 [Template Literal] ===== 
 +   * ES6부터는 역따옴표(백틱 ``)을 사용할 수 있다. 이처럼 역따옴표로 묶은 문자열을 '템플릿 리터럴'이라고 한다.  
 +   * 템플릿 리터럴을 사용하면 문자열 안에 달러 기호($)와 중괄호( { } )를 사용해서 표현식을 넣을 수 있으며 여러 줄로 만들어 사용하기 편리하다.  
 +   * 이전처럼 문자열을 + 연산자로 연결하지 않아도 표현식을 문자열과 함께 조합해서 사용할 수 있다. 
 +   * 템플릿 리터럴 예시 
 +<code javascript> 
 +console.log('사과:' + apple + ', 자동차:' + carname);     // 이전 스타일 
 +console.log(`사과: ${apple}, 자동차: ${carname}`);        // ES6 스타일(템플릿 리터럴) 
 +</code>  
 +\\ 
 +===== 화살표 함수 ===== 
 +   * 화살표 함수(arrow function)는 ES6 문법에서 함수를 표현하는 새로운 방식이며 가장 효과적으로 변경된 문법이며, 모던 자바스크립트 프로그래밍에서 가장 많이 사용하는 방식이다 
 +   * **=>** 는 두꺼운 화살이라는 의미로 '팻 애로우(fat arrow)'라고 한다 
 +\\ 
 +==== 전통적인 함수 선언 방식 ==== 
 +<code javascript> 
 +const fnPlusNumbers = function (pNum1, pNum2) { 
 +   return pNum1 + pNum2; 
 +} 
 +</code> 
 +\\ 
 +==== 화살표 함수로 구현 ==== 
 +<code javascript> 
 +const fnPlusNumbers = (pNum1, pNum2) => { 
 +   return pNum1 + pNum2; 
 +} 
 +</code> 
 +\\ 
 +==== return 키워드를 생략한 화살표 함수 ==== 
 +<code javascript> 
 +const fnPlusNumbers = (num1, num2) => num1 + num2; 
 +</code>     
 +   * 함수가 실행되는 문장(statement)가 단 한 줄이므로 블록을 나타내는 중괄호도 생략할 수 있다.  
 +   * 화살표 함수는 return키워드를 생략해도 자동으로 값을 반환한다. 이것을 '암묵적 반환'이라고 한다. 화살표 뒤에 있는 num1 + num2의 결괏값이 자동으로 반환된다 
 +   * 매개변수가 1개일 때 소괄호 ()를 생략할 수 있고, 매개변수가 없을 때는 반드시 소괄호를 사용해야 한다. 
 +\\ 
 +       * 매개변수가 1개일 때 소괄호 생략 가능 
 +<code javascript> 
 +const fnPlusNumbers4 = pNum => pNum + 1; 
 +</code>  
 +       * 매개변수가 없을 때는 반드시 소괄호 사용 
 +<code javascript> 
 +const fnSayHello = () => '안녕하세요!'; 
 +</code> 
 +      
 +\\ 
 +==== 동기 처리 방식과 비동기 처리 방식 비교 ==== 
 +^  구분     ^  동기 처리 방식                    |  비동기 처리 방식                                  | 
 +|  실행 순서  | 모든 코드가 위에서 아래 순서로 실행         | 코드들이 독립적으로 실행                               | 
 +|  실행 대기  | 명령을 요청한 후 결과가 나올 때까지 계속 기다림  | 명령을 요청한 후 결과가 나올 때까지 기다리지 않고 다음 작업을 연이어 수행  | 
 +| :::     | 반환 결과를 계속 기다리므로 시간 지연이 큼     | 결과가 완료되면 다시 돌아와 필요한 것을 마무리하는 방식             | 
 +\\ 
 +==== 콜백 함수 ==== 
 +   * 자바스크립트는 비동기 처리 방식을 구현하기 위해 콜백 함수(callback function)를 사용한다. 
 +   * 함수는 보통 매개변수로 값을 전달받는데 자바스크립트에서 함수는 객체(Object)로 취급하므로 함수의 매개변수로 **함수**를 전달받을 수 있다.  
 +   * 어떤 함수의 매개변수로 전달된 함수를 콜백 함수(callback function)라고 부른다. 
 +   * 콜백 함수는 다른 함수와 상관없이 독립적으로 실행되므로 비동기 처리를 구현할 때 사용한다. 
 +   * 매개변수로 전달받은 함수를 콜백 함수로 이용할 때는 관용적으로 매개변수 이름에 'callback'이라는 단어를 함께 표기한다. 
 +\\ 
 +   * 콜백 함수를 이용한 비동기 처리 
 +<code javascript> 
 +function fnFunctionA(pNumA) { 
 +   console.log(pNumA); 
 +} 
 +function fnFunctionB(pNumB, fnCallback) { 
 +   fnCallback(pNumB);     // 매개변수로 받은 함수를 실행하여 비동기 처리의 시작 담당 
 +} 
 + 
 +fnFunctionB("콜백 함수 실핼!", fnFunctionA); 
 +</code> 
 +\\ 
 +   * 콜백 함수 구조를 단순화한 예 
 +   * fnFunctionB() 함수를 실행할 때 두 번째 매개변수에 콜백 함수 선언과 정의를 함께 작성한 방식이며, 실무에서 이 방식을 선호한다. 
 +<code javascript> 
 +function fnFunctionB(pNumB, fnCallback) { 
 +   fnCallback(pNumB);      
 +} 
 + 
 +// 매개변수 전달 시 함수 선언과 정의를 함께 작성함: 비동기 처리의 완료 담당 
 +fnFunctionB("콜백 함수 실핼!", function fnFunctionA(pNumA) { 
 +   console.log(pNumA); 
 +}); 
 +</code> 
 +\\ 
 +==== 프로퍼티 접근 ==== 
 +   * 프로퍼티에 접근하는 방법은 다음과 같이 두 가지이다. 
 +     * 마침표 프로터피 접근 연산자(**.**)를 사용하는 **마침표 표기법<sup>dot notation</sup>** 
 +     * 대괄호 프로퍼티 접근 연산자(**[...]**)를 사용하는 **대괄호 표기법<sp>bracket notation</sup>** 
 +   * 프로퍼티 키가 식별자 네이밍 규칙을 준수하는 이름, 즉 자바스크립트에서 사용 가능한 유효한 이름이면 마침표 표기법과 대괄호 표기법을 모두 사용할 수 있다. 
 +   * 마침표 프로퍼티 접근 연산자 또는 대괄호 프로퍼티 접근 연산자의 좌측에는 객체로 평가되는 표현식을 기술한다. 마침표 프로퍼티 접근 연산자의 우측 또는 대괄호 프로퍼티 연산자의 내부에는 프로퍼티 키를 지정한다.  
 +<code javascript> 
 +var person = { 
 +  name: 'Lee' 
 +}; 
 + 
 +// 마침표 표기법에 의한 프로퍼티 접근 
 +console.log(person.name);   // Lee 
 + 
 +// 대괄호 표기법에 의한 프로퍼티 접근 
 +console.log(person['name']);   // Lee 
 +</code>  
 +\\ 
 +   * 대괄호 표기법을 사용하는 경우, **대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열**이어야 한다. 대괄호 프로퍼티 접근 연산자 내에 따옴표로 감싸지 않은 이름을 프로퍼티 키로 사용하면 자바스크립트 엔진은 식별자로 해석한다.  
 +<code javascript> 
 +var person = { 
 +   name: 'Lee' 
 +}; 
 + 
 +console.log(person[name]);   // ReferenceError: name is not defined 
 +</code> 
 +* 위 예제에서 ReferenceError가 발생한 이유는 대괄호 연산자 내의 따옴표로 감싸지 않은 이름, 즉 식별자 name을 평가하기 위해 선언된 name을 찾았지만 찾지 못했기 때문이다. 
 +* **객체애 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다.** 이때 ReferenceError가 발생하지 않는 데 주의하자. 
 +<code javascript> 
 +var person = { 
 +   name: 'Lee' 
 +}; 
 + 
 +console.log(person.age);   // undefined 
 +* 프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는 이름, 즉 자바스크립트에서 사용 가능한 유효한 이름이 아니면 반드시 대괄호 표기법을 사용해야 한다. 단, 프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표를 생략할 수 있다. 그 외의 경우 대괄호 내에 들어가는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다는 점을 잊지 말자. 
 + 
 +</code> 
 +\\ 
 +===== ES11, ES6 Syntax Summery ===== 
 +   * 출처 : 드림코딩 by 엘리, 자바스크립트 최신 문법 (ES6, ES11) | 모르면 후회하는 최신 문법과 사용법 정리 
 +\\ 
 +   * Optional Chaining (ES11)  
 +     * [[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining|Optional Chaining]] 
 +\\ 
 +   * Nullish Coalescing Operator (ES11) 
 +     * [[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator|Nullish Coalescing Operator]] 
 +\\ 
 +   * Shorthand property names (ES6) 
 +     * [[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer|객체 초기자]] 
 +\\ 
 +   * Destructuring Assignment (ES6) 
 +     * [[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment|구조 분해 할당]]    
 +\\ 
 +   * Spread Syntax (ES6) 
 +     * [[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax|전개 구문]] 
 +\\ 
 +   * Default parameter (Es6) 
 +     * [[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters|기본값 매개변수]] 
 +\\ 
 +   * Ternary Operator (ES6) 
 +     * [[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator|삼항 조건 연산자]] 
 +\\ 
 +   * Template Literals (ES6) 
 +     * [[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals|템플릿 리터럴]] 
  
  
-{{tag> 오션 주석, pwa}}+{{tag>오션 pwa}}
/volume1/web/dokuwiki/data/attic/wiki/miscellaneous/pwa.1612223692.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki