BumSu Kim

대학생활을 하며
공부한것을 기록합니다

11 분 소요

1. 스크립트 언어

💡 핵심

  • 스크립트 언어는 소프트웨어나 시스템을 빠르게 제어하기 위해 사용되는 언>어이다.
  • JavaScript는 웹 개발에서 HTML/CSS를 제어하며, Node.js를 통해 백엔드에>서도 사용된다.
  • Vanilla JS는 순수 JavaScript로 개발하는 방법론으로, 외부 라이브러리 없이 >작업한다.
  • TypeScript는 JavaScript에 정적 타입 기능을 추가한 언어로, 컴파일 시 순수 >JavaScript로 변환된다..notice–info

1.1 JavaScript

JavaScript는 웹 브라우저에서 HTML과 CSS를 제어하는 데 사용되는 웹 프론트엔드 언어이다. 또한, Node.js를 통해 서버 측에서도 사용된다.

1.2 Shell Script

유닉스 및 리눅스 운영체제에서 시스템 명령어를 실행하는 스크립트 언어이다. 주로 파일 제어, 프로그램 실행, 서비스 관리 등에 사용된다. 확장자는 .sh이다.

1.3 Vanilla JS

외부 라이브러리나 프레임워크 없이 순수 자바스크립트만으로 개발하는 방법을 의미한다. 이는 성능 최적화와 디버깅에 유리하다.

1.4 TypeScript

마이크로소프트가 개발한 자바스크립트의 슈퍼셋으로, 정적 타입 검사와 객체지향 프로그래밍 기능을 제공한다. .ts 확장자를 사용하며, 타입스크립트 코드는 자바스크립트로 컴파일된다.

2. JavaScript와 ECMAScript 이해

💡 핵심

  • 스크립트 언어는 소프트웨어나 시스템을 빠르게 제어하기 위해 사용된다.
  • JavaScript와 ECMAScript는 동일한 의미로, ECMAScript는 >JavaScript>의 공식 버전 명칭이다.
  • JavaScript는 처음에 웹 브라우저에서 HTML/CSS를 제어하기 위한 언어로 사>용되었으나, Node.js의 등장으로 서버와 클라이언트 모두에서 사용 가능한 객>/체 지향 언어로 발전했다.

JavaScript는 원래 웹 브라우저에서 HTML/CSS를 제어하기 위한 프론트엔드 언어로 사용되었다. 그러나 Node.js가 등장한 이후, 서버 측 프로그래밍과 다양한 분야(IoT, 모바일 앱 개발, AI 등)에서 널리 사용되는 객체 지향 언어로 발전했다.

JavaScript와 ECMAScript는 동일한 의미로, JavaScript 언어의 표준 버전을 나타낸다. HTML과 CSS처럼 버전을 명명하는 대신, ECMAScript(ES)라는 명칭을 사용하여 버전명을 붙인다. 2015년까지는 ES1,2,3,4,5로 불리다가, 그 이후로는 ES2015(ES6), ES2016, ES2024 등의 년도식 표기법으로 변경되었다.

3. 변수 상수 사용방법

💡 핵심

  • const는 상수 선언에 사용되며, 값 변경이 불가능하다.
  • var는 전통적인 변수 선언 방식으로, 블록 스코프를 지원하지 않는다.
  • let은 변수를 선언하며, 값 변경이 가능하고 블록 스코프를 지원한다.
  • const는 값이 변경되지 않아야 하는 데이터를 다룰 때 사용된다.
  • let과 var는 변수 값을 변경할 수 있지만, let은 블록 스코프를 준수하여 보다 안전하게 사용된다.

자바스크립트 언어는 전통적으로 var라는 예약어를 통해 컴퓨터 환경에 메모리상에 특정 데이터 값을 저장하고 사용하는 변수 할당 문법을 사용해 왔다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECMAScript 변수, 상수 문법 다루기</title>
</head>
<body>
    <h1>ECMAScript 변수, 상수 문법 다루기</h1>
    <script>

        
    </script>
</body>
</html>

오른쪽 → open with liveserver

image-20240731173335014

3.1 상수 개념 필요성: const

프로그래밍에서 값이 변경되지 않아야 하는 변수를 정의할 필요가 있다. var는 이 기능을 보장하지 못해, 이를 개선하기 위해 const 예약어가 도입되었다. const로 선언된 변수는 초기화 후 값을 변경할 수 없으며, 반드시 선언 시 값을 할당해야 한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECMAScript 변수, 상수 문법 다루기</title>
</head>
<body>
    <h1>ECMAScript 변수, 상수 문법 다루기</h1>
    <script>
        //전통적인 자바스크립트 변수 선언방식var
        var userName='김범수';
        var age = 24;

        //기본 상품 가격
        var price = 1000;
        var isMale = true;

        //기본 배송비
        //정책: 기본 배송비는 한번 할당하면 변경되면 안된다.
        //상수 개념 적용이 필요하다.

        var baseDelyFee = 3000;
        console.log("기본배송비1:", baseDelayFee);
    
        //기본 배송비 변경
        baseDelayFee=13000;

        //var는 상수 개념이 지원이 안된다.
        baseDelayFee =13000;
        console.log("기본배송비2:", baseDelayFee);
        
    </script>
</body>
</html>

크롬 웹브라우저에 해당 페이지가 아래와 같이 오픈되었다면 F12키를 눌러 개발자 도구 영역을 활성화한다.

값이 변경되었다. → var는 상수 개념이 지원되지 않는다.

image-20240731173440403

const 예약어를 통해 새로운 기본 배송비 값을 선언하고 초기값을 할당한다.

//const를 통한 상수 개념 사용하기
        const newBaseDelayFee=5000;
        console.log("상수를 표현하는 기본 배송비:", newBaseDelayFee);
        newBaseDelayFee=15000; //에러 발생 이유!!

오류가 나온다. → const를 사용하면 변수값이 변화하지 못한다.

image-20240731173524454

3.2 var를 대체하는 신규변수 개념 let

let이라는 예약어는 기존의 var 변수처럼 변수를 정의하고 값을 할당하고 최초 할당 이후 그 값을 언제나 변경할 수 있는 신규 변수 정의 예약어이다.

var와의 차이가 있다면 아래에서 다루는 blockscope 개념을 준수한다는 것에 큰 차이가 있다.

		//let으로 선언된 변수는 초기 할당 이후 변수값 변경이 가능하다.
        let totalPayPrice=0;
        console.log("총결제 금액, 기본 배송비",totalPayPrice, newBaseDelayFee);

        //let으로 선언된 변수값을 변경
        //총결제비용 = 총결제비용 + 기본배송비 추가
         totalPayPrice += newBaseDelyFee;
         totalPayPrice += price;
 
         console.log("변경된 총결제금액:", totalPayPrice);

3.3 블록 스코프 이슈 해결책

💡 핵심

  • 블록 스코프: 블록 {} 내에서 선언된 변수/상수는 그 블록 안에서만 사용 가능.
  • var 문제: 블록 스코프를 무시하고 전역처럼 동작, 잠재적 오류 발생 가능.
  • let과 const: 블록 스코프를 준수, 블록 외부에서 사용 시 오류 발생.

block scope(블록스코프)란 개념은 여러분들이 프로그래밍을 진행할 때 특정 조건이나 프로세스를 구현시 특정 코딩 블록을 정의하고

해당 블록 내에서 프로그래밍을 구현하는 것을 의미하며, 주로 블록 스코프는 조건문(if), 제어문(for, switch, each…) 등의 특정 코딩 블록(영역/범위)을 뜻한다.

예를 들어, 아래와 같은 두 개의 조건문과 제어문이 있다고 가정하면

image-20240731173546644

위 코드에서 분홍색으로 표기된 영역이 블록 스코프이다. { ..참인 조건문 블록스코프… } else { …else 블록스코프… }

image-20240731173604699

전역 변수는 프로그램 상단에서 정의되며 어디서든 사용할 수 있다. 그러나 const와 let으로 선언된 변수는 블록 스코프(제어문 등) 내에서만 유효하다. 이를 벗어나면 접근할 수 없어 오류가 발생한다.

반면, var는 블록 스코프를 무시하고 전역 변수처럼 동작하는 문제가 있다. 전역적으로 변수를 사용해야 할 경우, 전역 위치에서 변수를 정의하는 것이 권장된다.

var와 const를 사용
//var변수선언방식은 블록스코프 개념이 없어서 
        //특정 블록안에서 선언된 변수값을 블록범위 밖에서 언제든지 변경이 가능하다.
        //이런 var 변수선언방식은 다양한 문제를 초래했다.

        const region = "제주도";

        //가정문을 통한 블록스코프 기반 var 예약어의 문제점 확인
        if (region == "제주도") {
            //상기 조건에 해당하는 현재 범위를 블록스코프라고함
            //프로그래밍적으로 특정범위내(블록스코프)에서 선언된 변수나 상수는 
            //해당 범위내에서만 사용이 되어야하고 변경이 되어야하지만....
            var msg = "도서지역";
            console.log("if블록스코프내에서 선언된 msg 변수값 정상 사용확인:", msg);
        }

        msg = "일반지역";
        console.log("if블록스코프안에서 선언된 msg 변수값을 밖에서 사용해도 문제가 안된다.", msg);

var 예약어는 블록스코프 개념이 없어 사용 가능하기에 각종 잠재적 에러 발생 요인을 제공하지만

const와 let 명령어는 둘 다 철저히 block scope 개념을 준수하기 때문에 특정 범위 내에서 정의된 변수/상수는 해당 범위 내에서만 사용이 가능하고 범위 밖에서 사용할 때는 에러를 발생시킨다.

//var는 위와 같이 블록스코프 개념준수가 안되지만
//이를 개선하기 위해 let,const 는 블록스코프 개념을 준수하고 위배시 에러를 발생시켜줌.
        if (region == "제주도") {
            const addDelyFee = 2000;
            let addMsg = "도서 배송비가 추가되었습니다.";
            console.log(addMsg);

            totalPayPrice += addDelyFee;
            console.log("if블록스코프내에서 선언된 변수/상수는 그안에서 사용이 가능함", addDelyFee, totalPayPrice);
        }

//특정 블록스코프 내에서 선언된 let,const값은 범위 밖에서 사용시 에러가발생..사용불가
//블록스코프내에서 선언된 let,const값은 그안에서만 사용 및 변경이 가능하다.

        console.log("if구문내에서 선언된 메시지변수 호출시 에러가 발생합니다.");
        addMsg = "에러발생코드"; //블록스코프 에러 발생

4. 템플릿 문자열 문법 다루기

💡 핵심

  • 문제점: 기존 방식은 문자열과 변수의 조합에 + 연산자를 사용해 가독성이 떨어지고 복>잡함.
  • 개선안: 템플릿 문자열은 역홑따옴표()를 사용해 전체 문자열을 감싸고, 변수는 ${변>수명}` 형식으로 삽입.
  • 장점: 가독성이 높아지고, 문자열과 변수를 자연스럽게 조합 가능.

자바스크립트 문자열을 다루는 신규 기술로 템플릿 문자열 문법을 배워보자.

자바스크립트 언어에서 기본적인 문자열 변수를 정의하고 해당 변수에 추가적인 문자열을 조합하는 방식으로는 + 를 통해 문자열과 문자열을 아래 예시와 같이 조합한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECMAScript 변수, 상수 문법 다루기</title>
</head>
<body>
    <h1>ECMAScript 변수, 상수 문법 다루기</h1>
    <script>
        const name = "김범수";
        const age = 24;
        let local = "충청북도 청주시";

        //전통적인 방식의 문장열과 변수값의 조합방식
        //가독성이 떨어지고 코딩하는데 정신이 없다.
        let introduction = "저를 소개합니다. 이름은 " + name + "이고 나이는 " + age + " 살이고 사는곳은 " + local + "입니다.";
        introduction += "추가메시지2" + name;
        introduction += "추가메시지2";

        console.log("전통적인 문자열과 변수의 조합:", introduction);

    </script>
   
</body>
</html>

image-20240731173637990

문제점

조합하려는 문자열이 많아질수록 가독성 및 문맥과 구조를 파악하기 어려워짐.

개선안

템플릿 문자열 문법

키보드의 숫자 1 옆에 있는 역 홑따옴표 (벡틱 문자)를 통해

전체 문자열 문맥을 정의하고 정의된 문자열 중간 중간에 특정 변수 값을

${변수명} 형식으로 위치를 지정 삽입하여 문맥에 따른 변수 값을 할당하여 문자열 조합 시 문제점인 가독성 및 문맥 구조 개선을 도와준다.

템플릿 문자열을 이용한 자기소개 변수명 introduction2는 역홑따옴표(벡틱문자) 을 통해 전체 문맥을 먼저 정의하고 중간중간에 변수 값을 ${변수명}을 추가하여 +` 를 사용하여 문자열을 조합하는 방식보다 획기적으로 개선된 문자열 조합 기법을 제공하게 된다.

		const name = "김범수";
        const age = 24;
        let local = "충청북도 청주시";

        
          //ECMAScript 2015에서 추가된 신규문법 템플릿 문자열 방식으로 변수와 문자열을 조합해보자.
        //템플릿 문자열은 벡틱문자열(역홑따옴표)
        let introduction2 = `저를 소개합니다. 이름은 ${name}이고 나이는 ${age}살이고 사는곳은 ${local}입니다.`;

        console.log("템플릿문자열을 통한 문자열과 변수의 조합", introduction2);

image-20240731173704820

5. 자바스크립트 객체 정의 및 사용법

💡 핵심

  • 객체 정의: 자바스크립트에서 객체는 { 속성명: 속성값, ... } 형식으로 정의된다.
  • 속성 값 변경: 객체의 기존 속성 값을 변경할 수 있다.
  • 동적 속성 추가: 객체에 새로운 속성을 추가할 수 있으며, 두 가지 방법(객체["속성명"] >또는 객체.속성명)이 있다.
  • 리터럴: 고정된 값을 나타내는 표기법으로, 문자열, 숫자, 불린, 배열, 객체 등이 포함된다.
  • 클래스와 객체: 클래스는 객체의 일반화를 표현하며, 객체는 클래스의 인스턴스이다.

자바스크립트 객체의 기본적인 사용법

html코드 복사<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 객체 사용하기</title>
</head>
<body>
    <h1>자바스크립트 객체 사용하기</h1>

    <script>
    
        //예시1) 기본적인 객체구조를 정의하고 사용하기
        let noteBook ={
            productId:"1",
            productName:"gram",
            price: 1000,
            brand:"LG전자",
        };
        console.log("노트북 객체정보:",noteBook);

        //예시2) 객체의 속성값을 변경하기
        noteBook.price =3000;
        console.log("노트북 객체정보:",noteBook);
        
        //예시3) 객체의 속성값을 추가하기
        //자바스크립트 객체는 이미 한번 정의된 객체 구조에 동적으로 속성을 추가할수 있다.

        //동적속성 추가방법2가지: 객체["신규속성명"]=값; 
        noteBook["stock"]=200;
        console.log("노트북 객체정보:",noteBook);

        //또는 객체.신규속성명=값;
        noteBook.spec ={CPU:"i7",memory:"16GB",storage:"512GB SSD"};
        console.log("노트북 객체정보:",noteBook);

        var SalesCenter = "Center";
        for(let i=0;i<10;i++){
            noteBook[`${SalesCenter}-${i.toString()}`]=20;
        }
        console.log("노트북 객체정보:",noteBook);

    </script>
</body>
</html>

  • 객체 정의: noteBook 객체를 정의하고 초기 속성으로 productId, productName, price, brand를 설정한다.

  • 속성 값 변경: 객체의 속성 중 하나인 price 값을 1000에서 3000으로 변경하는 방법을 보여준다.

  • 동적 속성 추가

    :

    • 객체에 새로운 속성 stock을 추가하고 값을 200으로 설정한다.
    • 또 다른 속성 spec을 추가하여, 해당 속성에 CPU, memory, storage 세부 속성을 가진 객체를 할당한다.

  • 동적 속성 추가 (반복문 사용)

    :

    • SalesCenter와 인덱스를 조합하여 Center-0부터 Center-9까지의 동적 속성을 추가하고, 각 속성에 20의 값을 할당한다.

image-20240731173816973

6. 비구조화 할당 문법

💡 핵심

  1. 배열 비구조화 할당: 배열의 요소를 개별 변수에 할당하고, 나머지 요소를 별도의 배열에 >저장 가능하다.
  2. 객체 비구조화 할당: 객체의 속성을 변수에 할당하고, 함수도 함께 할당하여 바로 호출 가>능하다.

이러한 비구조화 할당 문법은 코드의 가독성을 높이고, 변수 할당을 더욱 직관적으로 할 수 있게 해>준다.

비구조화 할당(Destructuring Assignment)은 배열이나 객체의 값을 쉽게 추출하여 변수나 상수에 할당하는 문법이다. 이를 통해 코드가 간결해지고 가독성이 높아진다.

6.1 배열의 비구조화 할당

배열에서 비구조화 할당을 사용하면 배열의 각 요소를 간편하게 변수에 할당할 수 있다.

const books = ['React', 'Vue', 'Angular', 'Svelte', 'Jquery'];

// 전통적인 방식으로 배열의 요소를 추출하여 변수에 할당
var book1 = books[0];
var book2 = books[1];
var book3 = books[2];
console.log("옛날방식으로 추출한 배열값:", book1, book2, book3);

// 비구조화 할당을 사용한 방식
let [book01, book02, book03] = books;
console.log('비구조화된 방식의 배열값 추출 및 변수할당:', book01, book02, book03);

나머지 요소 추출

비구조화 할당을 사용할 때, 특정 요소만 추출하고 나머지는 별도의 배열로 저장할 수 있다.

let [book001, ...extraTech] = books;
console.log('비구조화된 방식의 배열값 추출 및 변수할당:', book001, extraTech);

기본값 할당

비구조화 할당 시 기본값을 설정할 수도 있다. 만약 배열의 요소가 부족하면 기본값이 사용된다.

let [tech1, tech2, tech3, tech4, tech5, tech6 = 'unknown'] = ['React', 'Vue', 'Angular', 'Svelte', 'Jquery'];
console.log('비구조화된 방식의 배열값 추출 및 변수할당:', tech1, tech2, tech3, tech4, tech5, tech6);

6.2 객체의 비구조화 할당

객체에서도 비구조화 할당을 사용하여 객체의 속성을 간편하게 변수에 할당할 수 있다.

const techTrend = {
    front: 'React-Next.js',
    backend: 'Node Nest.js',
    server: 'Linux-Ubuntu',
    rdbms: 'PostgreSQL',
    nosql: 'MongoDB',
    infra: 'Cloud-AWS',
    getAuthor: function() {
        return '김범수';
    }
};

// 전통적인 방식으로 객체의 속성을 변수에 할당
let frontTech = techTrend.front;
let backendTech = techTrend.backend;
let serverTech = techTrend.server;
console.log(frontTech, backendTech, serverTech);

// 비구조화 할당을 사용한 방식
const { front, backend, server, getAuthor } = techTrend;
console.log(front, backend, server, getAuthor());

이 방식은 객체의 속성을 변수로 간편하게 추출할 수 있게 해주며, 코드를 더 짧고 명확하게 만들어준다. 비구조화 할당은 특히 React와 같은 프레임워크에서 컴포넌트의 props나 state를 추출할 때 유용하게 사용된다.

7. 익명 함수와 화살표 함수 사용법

💡 핵심

  • 전통적인 함수: 명확하게 이름을 지정하며, 함수 블록 내에서 로직을 정의한다.
  • 익명 함수: 이름 없이 정의되며, 변수에 할당하거나 인자로 사용된다.
  • 화살표 함수: => 문법을 사용하여 간결하게 함수를 정의하며, this 바인딩이 기존 함수>와 다르다.

JavaScript에서는 함수를 정의하는 여러 가지 방법이 있다. 이번 포스트에서는 전통적인 함수, 익명 함수, 화살표 함수의 개념과 사용법을 예제를 통해 설명하겠다.

7.1 전통적인 함수 (Traditional Function)

전통적인 함수 선언 방식은 function 키워드를 사용하여 함수를 정의하는 방법이다. 이 방식은 명확하게 함수의 이름을 지정하고, 함수 블록 내에서 실행될 코드를 작성한다.

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>전통적인 함수 예제</title>
</head>
<body>
    <h1>전통적인 함수, 익명 함수, 화살표 함수 사용법</h1>

    <script>
        // 전통적인 함수 선언 및 사용
        function fnPlus(a, b) {
            let c = a + b;
            return c;
        }

        var result = fnPlus(1, 2);
        console.log('전통적인 함수 사용:', result);
    </script>
</body>
</html>

위 예제에서는 fnPlus라는 이름의 함수가 정의되어 있으며, 두 개의 인수를 받아 더한 값을 반환한다. 전통적인 방식은 함수의 이름이 명확하게 표시되므로 코드의 가독성이 좋다.

7.2 익명 함수 (Anonymous Function)

익명 함수는 이름이 없는 함수로, 주로 변수에 할당되거나 다른 함수의 인자로 사용된다. 함수의 이름이 필요하지 않거나, 함수가 일회성으로 사용될 때 유용하다.

// 명명된 함수
var namedFunction = function fnName(a, b) {
    return a + b;
};

// 익명 함수
var anonymousFunction = function(a, b) {
    return a + b;
};

// 익명 함수를 사용하는 예시
var result = anonymousFunction(3, 4);
console.log("익명 함수 결과:", result); // 7

익명 함수는 이름이 없으므로 호출할 때는 할당된 변수 이름을 사용한다. 함수 이름이 필요하지 않은 경우나 일회성으로 사용할 때 주로 사용된다.

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>익명 함수 예제</title>
</head>
<body>
    <h1>전통적인 함수, 익명 함수, 화살표 함수 사용법</h1>

    <script>
        // 익명 함수 정의 및 사용
        var plus1 = function(a, b) {
            return a + b;
        };

        var result1 = plus1(100, 200);
        console.log("plus1(100, 200) =", result1);
    </script>
</body>
</html>

위 예제에서는 익명 함수를 plus1 변수에 할당하여 사용하고 있다. 함수 이름이 없기 때문에 할당된 변수 이름으로 함수를 호출한다.

7.3 화살표 함수 (Arrow Function)

화살표 함수는 ES6에서 도입된 새로운 함수 표현식으로, => 문법을 사용하여 간결하게 함수를 정의할 수 있다. 특히 콜백 함수나 간단한 연산을 처리할 때 매우 유용하다.

// 기본적인 화살표 함수
var add = (a, b) => a + b;

//여러 줄의 코드가 필요할 경우 블록 {}을 사용하고, return을 명시해야 한다.
// 블록을 사용하는 화살표 함수
var addWithBlock = (a, b) => {
    return a + b;
};

// 예시
var result1 = add(5, 3);
var result2 = addWithBlock(10, 20);

console.log("화살표 함수 결과1:", result1); // 8
console.log("화살표 함수 결과2:", result2); // 30

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>화살표 함수 예제</title>
</head>
<body>
    <h1>전통적인 함수, 익명 함수, 화살표 함수 사용법</h1>

    <script>
        // 화살표 함수 정의 및 사용
        var plus2 = (a, b) => a + b;
        var plus3 = (a, b) => {
            return a + b;
        };

        var result2 = plus2(1000, 2000);
        var result3 = plus3(10000, 20000);

        console.log("plus2(1000, 2000) =", result2);
        console.log("plus3(10000, 20000) =", result3);
    </script>
</body>
</html>

위 예제에서 plus2는 단일 표현식으로, plus3은 블록을 사용하여 정의되었다. 블록을 사용하는 경우 명시적으로 return을 사용하여 값을 반환해야 한다.

댓글남기기

참고

OpenCV 평균필터

3 분 소요

중심 픽셀(P) 밝기값과, 주변의 8개 픽셀 밝값의 평균값을 출력한다.