"게임 개발자"를 향한 매일의 공부일지 1기 : 2024년 5 ~ 12월

이제 단원을 마무리하고 미션 문제를 풀어보겠다. 드디어 함수와 이벤터 단원 학습을 마쳤다. 어제 여기까지 공부하려고 했으나 어제는 요즘 열정이 전보다 식고 몸과 마음이 많이 지친 날이라 평소 공부하던 양의 절반밖에 하지 않았다.   단원 한눈에 정리하기      단원 마무리 문제 풀기 문제 1번    문제 풀기 1. 조건에 맞게 코드 추가하기   하지만 출력창에는 아무것도 표시되지 않았다. 코드를 다시 한 번 수정해보겠다.   2. 코드 수정하기  이번에는 출력은 되었으나 문자열과 나온 경우도 있고 변환이 잘 되지 않은 것 같다.   3. 문자열 숫자 형태로 변환하기     이제 답이 잘 나타난다. 책에서는 이 문제를 프롬프트 창에 나타나지 않고 콘솔창에서만 보이도록 했으며, 사용자에게 값을 입력받는 것..

이벤트에 관한 내용은 수업 시간에 객체 단원에서 공부하는 것 같은데 책으로 공부할 때 이어서 학습해 보기로 했다. 대부분의 함수는 사용자가 화면에서 버튼을 클릭하거나 항목을 선택했을 때 실행된다. 이처럼 버튼을 클릭하거나 항목을 선택하는 것을 '이벤트'라고 한다. 그리고 이벤트가 발생했을 때 실행하는 함수를 '이벤트 처리기'라고 한다.     이벤트와 이벤트 처리기 이벤트 알아보기이벤트는 웹 브라우저나 사용자가 행하는 어떤 동작을 말한다. 예를 들어 키보드에서 키를 누르는 것도, 웹 브라우저에서 새로운 페이지를 불러오는 것도 이벤트이다.하지만 웹 브라우저 안에서 이루어지는 모든 동작이 이벤트는 아니다. 이벤트는 웹 페이지를 읽어 오거나 링크를 클릭하는 것처럼 웹 문서 영역 안에서 이루어지는 동작만을 말한..

함수 표현식은 따로 함수 이름을 지정하지 않고 사용하거나, 함수를 호출하지 않고 바로 실행하는 방법이다.   익명 함수익명 함수는 이름이 없는 함수를 말한다. 즉, 익명 함수를 선언할 때는 이름을 붙이지 않는다. 예를 들어 앞에서 살펴봤던 addNumber() 함수를 다음과 같이 이름 없이 선언할 수 있다. 익명 함수 선언하기function(a, b) { // 익명 함수 선언 return a + b;} 익명 함수는 이름이 없는데 어떻게 실행해야 할까? 익명 함수는 함수 자체가 식이므로 함수를 변수에 할당할 수 있으며, 다른 함수의 매개변수로 사용할 수도 있다.다음은 두 수를 더하는 익명 함수를 변수 sum에 할당하는 예제이다. 이렇게 변수에 저장된 익명 함수는 함수 이름 대신 변수를 이용해 함수를 실행한..

이번에는 재사용성 함수를 만드는 방법에 대해서 공부해보겠다. 그리고 새벽에 수업을 통해 공부했던 함수 표현식에 대해서고 학습해볼 것이다.    매개변수, 인수, return 알아보기 한번만 사용하는 함수라면 상관없지만, 프로그램 안에서 여러 번 사용하는 함수인데 입력값을 바꾸지 못한다면 매우 불편할 것이다. 이처럼 변수값이 자주 변하는 상황에서 사용하려면 값을 고정하지 않고 어떤 숫자든지 2개만 addNumber() 함수로 넘겨서 더해주면 된다. 즉, 함수를 실행하는데 필요한 값을 함수 밖에서 제공하는 것이다.이렇게 하려면 함수를 선언할 때부터 외부에서 값을 받아줄 변수를 미리 만들어야 한다. 이것을 매개변수라 하고 함수를 호출할 때 괄호 안에 매개변수의 이름을 넣는다.  함수 선언할 때 매개변수 지정하..

var 예약어를 사용하는 변수는 함수 영역의 스코프를 가지고, 재할당과 재선언을 할 수 있다. 그래서 var 예약어를 자칫 잘못 사용하면 예상하지 못한 프로그램 오류를 발생시킬 수 있다. 그래서 ES6부터는 var를 보완한 let과 const 예약어가 등장한다.    let을 사용한 변수의 특징ES6 이전의 자바스크립트 프로그램에서는 var 예약어만으로 변수를 선언했다. 앞에서 살펴본 것처럼 var 예약어를 빠뜨리면 의도하지 않게 전역 변수가 되기도 하고, 프로그램 길이가 길어지다 보면 실수로 사용하는 변수를 재선언하거나 값을 재할당해 버리는 경우가 생기기도 한다.그래서 ES6에서는 변수를 선언하기 위한 예약어로 let과 const가 추가되었고, 되도록이면 var 예약어는 사용하지 않을 것을 권한한다. ..

자바스크립트 ES6 버전에서는 변수를 선언하기 위해 let과 const라는 새로운 예약어가 생겼다. 기존에 var가 있는데 왜 let과 const가 필요했을까? 그렇다면 먼저 var 예약어를 사용한 변수의 특징을 알아야 한다.    변수의 적용 범위 스코프 알아보기자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 범위를 스코프라고 한다. 변수가 어디까지 유효한지 범위를 가리키는 영역이 필요한 것이다. 자바스크립트 함수에서 변수를 사용할 때는 이 영역에 주의해야 한다.한 함수 안에서만 사용하고 다른 함수에서는 사용할 수 없는 변수가 있고, 어느 함수에서나 다 사용할 수 있는 변수가 있다. 한 함수에서만 사용할 수 있는 변수를 지역 변수 또는 로컬 변수라 하고, 스크립트 소스 전체에서 사용할 수 있..

이제 책으로 돌아와서 함수에 대한 공부를 시작해보려고 한다. 요즘 공부에 대한 체력과 열정이 많이 떨어져서 힘이 많이 부치는 편이다. 아니면 정말 하고 싶지 않은 두 마음을 갈등이 많이 된다. 그래도 오후에 조금이라도 힘을 내서 공부를 시작해보고 있다. 지루할 때는 내가 좋아하는 방송을 틀어놓고 하면 그래도 할만하다.함수는 프로그래밍에서 가장 중요한 뼈대를 이룬다. 실제로 웹 브라우저에서는 함수를 사용해서 명령을 내리기 때문이다.    여러 동작을 묶은 덩어리, 함수자바스크립트 프로그램은 단순히 동작 하나만 실행되는 게 아니라 여러 가지 동작이 연결된다. 이렇게 동작해야 할 목적으로 묶은 명령을 함수라고 한다. 함수를 사용하면 각 명령의 시작과 끝을 명확하게 구별할 수 있고, 묶은 기능에 이름을 붙여서 ..

이어서 함수에 대한 표현식을 공부해 보겠다. 이번에는 화살표 함수라는 다소 어려운 개념이 등장한다. 처음 들을 때는 무슨 말인지 하나도 알아듣지 못했지만 지금은 대부분 이해하고 적용할 수 있게 되었다.정말 신기한 일이다.     함수의 구조에 대한 개념 두번째  최근에 많이 사용되는 함수 구조이다. function이라는 키워드 대신 화살표가 생겼다. 특징은 매개변수가 없을 때는 소괄호로 표시하고, 하나일 때는 생략이 가능하다. 중괄호 안쪽에 함수의 실행 문장이 하나라면 return과 중괄호로 생략할 수 있다.마지막 문장처럼 나타내도 함수인 것을 알 수 있어야 한다.   화살표 함수 실습해 보기 1. JS 파일 만들고 HTML 문서에 연결하기   2. 함수 선언을 화살표 함수로 바꾸기01 파일에서 실습했던..

오늘부터는 함수 단원에 들어간다. 함수까지만 이틀 동안 한 선생님이 가르치시고 이어서 객체부터는 다른 선생님이 오셔서 수업을 진행하셨다. 다 합쳐서 5일이 되지 않는 짧은 시간이었지만 그래도 4시간씩 진행되는 수업이라 다시 듣고 시청하며 실습 코드를 하나하나 작성하는 작업도 만만치 않았다.전에 수업을 열심히 들었다면 파일이 남아 있을 텐데 이 수업부터 아마도 웹 개발 공부가 많이 힘들어서 거의 포기하다시피 했던 것 같다. 그래도 난 결코 공부를 포기하지 않았고 혼자서 자기주도학습을 진행하며 모든 수업들을 다 따라잡고 있다. 사람들은 팀 프로젝트에다 다른 행사를 따라가느라 수업은 뒷전일 때 나는 착실하게 매일 한 걸음씩 개발 공부를 해왔다.이 실력이 쌓여서 지금은 그 어떤 과목도 소화할 수 있는 기본 베이..

드디어 미션 문제를 두 문제 풀고 2주차 학습을 마치려고 한다. 엘리스 수업에는 함수 단원이 빠져있어서 그 내용은 인사교 수업과 책을 통해서 보충하려고 한다. 이런 중요한 단원이 왜 빠져있는지 모르겠다.이제 문제를 풀어볼 것이다.   미션 1 - 구구단 만들기    문제 풀기 1. 구구단을 출력하는 코드 작성하기 무엇이 문제인지 아무것도 출력되지 않았다. 두 번째 for문이 잘못 작성되어 있어서 출력이 되지 않은 거였다. 우선, n은 매개변수로 받아온 값으로 유지해야 하며, 함수로 한 단을 불러오기 때문에 이중 for 문은 필요하지 않다.전에 자바나 C 언어에서 이런 식으로 작성했기에 문제를 잘못 생각했다.   2. 코드 수정하기   이제 100점 만점이다.    미션 2 - 반복문으로 구구단 완성하기 ..