코드 리뷰: 함수화

함수화, 그룹화, 모듈화

코드 읽고 쓰는 팁

함수 { } 괄호 안에 쓰는 부분 vs 밖에 쓰는 부분
- { } 괄호 안에서 변수를 새로 만들면, 해당 { } 밖에서는 그 변수를 찾거나 쓸 수 없다.
- 괄호 밖에서는 p5js 전용 함수들이 실행되지 않는다. setup(), draw() 함수가 자기 { } 괄호 내부에서 직접 함수를 실행하거나 호출하는 경우 실행된다.
내가 직접 함수를 만들고 이름을 새로 붙이고 정의할 수 있다.

1. 알파벳을 그린 코드들을 함수로 만들어보자

컴포넌트 혹은 모듈: 레고 블럭이라고 생각하기.
- 현재 하나의 글자에 여러가지 도형이 들어가 있으니, 코드를 읽거나 바꾸기가 쉽지 않다.
- 우리가 만든 도형을 나중에 더 편리하게 재사용하고 더 쉽게 알아보기 위해서 각 글자마다 함수로 구분해주자.
지금까지는 p5js 함수 이름을 그대로 갖다 써왔다. 이제는 우리가 직접 함수를 만들어보자.
함수 이름도 변수 이름처럼, 알아보기 쉽게!
- myLetterA(), myAlphabetA()
- myRectA(): rectangle로 만든 글자 A
- myCircleB(): ellipse로 만든 글자 B
대/소문자로 단어 구분
- 원래 언어 문법대로라면 my circle B 이겠지만, 띄어쓰기를 하면 컴퓨터가 하나의 이름으로 인식하지 못하기 때문에 띄어쓰기 후 시작되는 단어는 대문자로 바꿔서 구분해준다: myCircleB()
대소문자 대신 _로 사용도 가능하다
- 자바스크립트에서는 대소문자로 이름을 꾸미는 편이다 => 이를 CamelCase 라는 용어로 부른다.
- 파이썬에서는 소문자와 _의 조합으로 변수명을 많이 꾸민다 => 이를 snakecase 라는 용어로 부른다.

function draw() {
    /* 생략 */
    myLetterA()           // 이 함수를 실행한다.
    my_letter_A()         // 이 함수를 실행한다.
}
function myLetterA() {    // 새로운 함수를 정의한다.
    // 코드 여기로 옮기기
}
function my_letter_A() {  // 새로운 함수를 정의한다.
   // 코드 여기로 옮기기
}

2. 알파벳을 함수로 그룹화, 모듈화 시키자

함수로 만들고 사용할 때 주의할 점
- 함수 블럭 { } 괄호로 도형을 그린 코드를 이동시킨다.
- 그 다음, function setup() 혹은 draw() 처럼 p5js에서 제공한 함수 내에서 우리가 만든 함수의 이름을 불러줘야 한다!
- 함수의 이름을 부르지 않으면, 우리는 함수를 만들기만 하고 사용하지 않는 꼴이 된다.

function draw() {
    /* 생략 */
    myRectA()               // 함수 이름을 부른다.
    myCircleB()             // 즉, 함수를 실행한다.
}
function myRectA() {        // 여기서는 함수를 만들기만 한다. 
    push();                 // 바로 실행되는 것이 아님. 
    fill("#ff00ee");
    translate(50, 50);
    rect(_, _, _, _);       // 물론 여러분이 실제 코드를 작성할 때는, _자리에 숫자나 변수를 넣어줘야 한다.
    pop();
}
function myCircleB() {
    push();
    fill("#00ffee");
    translate(100, 100);     
    ellipse(_, _, _, _);
    pop();
}

3. 함수 안에서 변수를 만들자.

함수 밖에 쓴 변수는 Global(전역) 변수: 코드 아무데서나 쓸 수 있다.
함수 안에 쓴 변수는 Local(지역) 변수: { } 이 영역 안에서만 쓸 수 있다.

let globalW = 100;
function my_alphabet_A() {
    let w = 100; 
    let h = 100;

    push();
    fill("#00ffee");
    translate(50, 50);
    rect(10, 10, w, h);
    rect(10, h+30, w, h);
    pop();
}

4. 함수에 파라미터를 적용하자.

변수를 함수 안에서 만드는 것이 아니라
함수 이름을 밖에서 부를 때 (호출할 때) 파라미터 값을 넘겨주는 것.
아래 예시에서 w, h 기호로 파라미터를 적은 이유는, 이 함수를 여러 곳에서 호출할 수 있는데, 그 때마다 어떤 파라미터 숫자값이 들어올지 모르기 때문에, 함수 정의를 할 때에는 파라미터를 기호로 표시해준다.
- 우리가 p5js reference 레퍼런스 페이지에서 함수 문법과 설명을 봤을 때와 비슷하죠?
- 예) 밖에서 이 함수를 my_alphabet_A(10, 20) 이렇게 호출하면,
  - 그 시점에는 w=10, h=20으로 인지되어서 rect(10, 10, w, h) 코드가 rect(10, 10, 10, 20)으로 실행될 것이다.

function my_alphabet_A(w, h) {
    push();
    fill("#00ffee");
    translate(50, 50);
    rect(10, 10, w, h);
    rect(10, h+30, w, h);
    pop();
}

5. 예제: 도형으로 알파벳 O를 그려본 코드

아래 코드의 ellipse_guide() 함수 이름은 ellipse()로 교체하고 파라미터 값은 그대로 둬도 된다.

function myCircleB() {
    // ellipse로 만든 B
    ellipse(20, 40, 50, 50);
    ellipse(20, 80, 50, 50);
}

function myCircleO() {
    // 위에서 아래로 그리기 때문에, 
    // 가장 앞에 있어야할 레이어(도형)를 가장 나중에 그려야 겠죠?
    push();
    noStroke();
    fill(255);    // 흰색 큰 원
    ellipse(0, 0, 100, 100);
    fill(150);   // 회색 중간 원
    ellipse(0, 0, 60, 60);
    fill(0);     // 검은색 작은 원
    ellipse_guide(0, 0, 30, 30);
    pop();
}

원 2개로 그린 B모양이 B알파벳스럽지 않다면, arc를 활용해봐도 좋겠죠?

6. 코드 파일 정리

week1.js : 1주차 숙제 코드가 다 들어있으면 된다.
week1-1.js : 1주차 코드를 위와 같이 함수화한 버전으로 변경해서 이 파일에 저장한다.
myAlphabets.js: 내가 만든 커스텀 도형 함수들을 여기에 싹 몰아서 정리.
- 아직 html, css, js 구조가 잘 이해가 안 된다면, 굳이 myAlphabets.js 로 옮기지 않아도 된다.

Previous실습: 2D 도형으로 알파벳 만들기 (1)Next마우스 인터렉션

Last updated 1 year ago