클라이언트/ 서버/ 엔지니어 "게임 개발자"를 향한 매일의 공부일지

이번에는 this에 대해서 자세히 학습하게 된다. 자바스크립트 심화 수업을 통해 이전에 알지 못했던 것들에 대해 알게 되는 것 같다.    이론 3 - this가 가리키는 것 myFunc()처럼 직접 함수를 호출하는 경우가 있고, o.method처럼 객체 메서드를 호출하는 경우도 있다. 이런 식으로 생성자를 호출할 수도 있고, f.call처럼 데이터를 넘겨주는 간접 호출 방식도 있다. call, apply는 function 객체의 메서드이다. 자바스크립트에서 객체를 만들면 모든 함수는 function 객체를 상속받는 인스턴스이다.      콜백 함수가 console.log로 출력한다고 가정해보자. myFunc()를 만들고 name, callback 함수를 받는다고 했을 때 특정 작업을 하고나서 콜백 함수..

어제도 공부를 얼마 하지 못하고 일찍 취침했다. 그리고 다음날 새벽 1시 10분에 일어나 공부를 시작해 본다. 새벽에 일찍 일어나 공부할 수 있어서 정말 기뻤다. 어제는 가족들과 오랜만에 식사도 하며 오손도손 이야기도 나눌 수 있어서 정말 좋았다. 식사 후에는 피곤해서 9시 조금 넘어서 일찍 취침한 것 같다.오늘은 새벽과 아침에 정말 공부를 많이 해서 가능하면 자바스크립트 심화 과정을 거의 끝내고 남은 수업도 모두 들어볼 생각이다. 그래서 저녁까지 해서 심화 과정을 웬만하면 다 끝내고 내일 새벽에는 그동안 정리하지 못했던 것들도 하는 시간을 갖기로 했다. 내일은 수료식이니 내 생애 정말 중요한 날이다.     이론 2 - 실행 컨텍스트  자바스크립트 엔진이 코드를 읽고 실행했을 때 전역 컨텍스트를 먼저 ..

첫 번째 수업을 진행해 보겠다. 수업 영상이 정말 길지만 이 공부까지 마치고 다음 일정을 시작해보려고 한다.    이론 1 - 자바스크립트 함수가 실행되는 과정브라우저와 node.js와 같은 환경에서 실행된다.  어떤 자바스크립트 코드 없이 실행해야 하는 경우에 대해서 알아보겠다.     어떤 코드도 없어도 세 가지 변수를 초기화한다. 이 세 가지 변수를 엔진이 만들게 된다.      this는 코드가 실행되는 시점의 환경 객체를 의미한다. 예를 들어 console.log(this)를 찍을 때 this는  window 객체를 가리킨다. window는 글로벌 스코프가 되고, 변수는 아무것도 실행되지 않았으므로 빈 객체가 된다. Scope chain의 경우 연결된 스코프가 없기 때문에 빈 객체가 된다. co..

오늘부터 화요일까지 이틀 반동안 자바스크립트 심화 과정을 공부해 보기로 했다. 오늘도 내일도 공부를 별로 하지 못할 것 같아 과연 화요일까지 다 마칠 수 있을지 미지수이지만 할 수 있으리라 믿어본다.이 과목과 함께 아직 남아있는 인사교 자바스크립트 수업 2시간 분량의 수업도 듣고 학습일지에 정리해 볼 생각이다. 오늘의 공부 목표는 1주차 수업까지 마치는 것이다.   수업 소개 - 자바스크립트 심화        동기적이라는 것은 특정 시점에서 순차적으로 실행한다는 뜻이다.                     학습을 마치고수업 소개와 함께 이론 첫번째 수업을 함께 묶어서 학습일지를 쓰려고 했는데 분량이 많아서 그냥 오리엔테이션만 진행해 본다. 앞으로 3일 동안 심화 과정 공부를 열심히 해볼 것이다.기초 과정..

이제 마지막으로 미션 문제만 풀면 6주차 공부도 마치게 된다. 5주와 6주는 부록으로 되어 있어 주차에 포함되지 않는 공부이지만 이것까지 해야 진짜 자바스크립트 기초 공부가 끝나는 것이다.미션 문제는 지금까지 배운 것을 총 종합하는 문제이다.    미션 - 자바스크립트, 제이쿼리 최종 완성본    문제 확인하기                      학습을 마치고오늘은 본가 집에 와서 노트북으로 공부를 하다보니 듀얼 모니터를 사용하지 못해 무척 불편하다. 글씨를 아주 작게 해서 화면을 반으로 나눠 작업을 하며, 두 개의 창을 띄워서 이리저리 움직이느라 불편함은 있지만 그래도 공부할만 했다.이번 미션 문제는 문제를 푸는 게 아니라 지금까지 배운 것을 총 점검하는 시간이었다. 한번 코드를 읽어보는 것으로 충분..

아침부터 다른 일정이 있어서 외출을 하고 오후 3시 반이 넘어서 다시 공부를 시작해 본다. 저녁에도 약속이 있어서 오늘은 공부를 거의 못하는 날이지만 그래도 하는 데까지 해볼 것이다. 제이쿼리 이 공부는 적어도 마치고 오늘 저녁 늦게라도 자바스크립트 심화 과정을 시작해 볼 생각이다.     실습 3 - 탭 버튼 기능 구현하기     특정 버튼의 속성값을 가져올 때 사용하는 메서드가 attr이다. 이번에는 탭 버튼을 눌렀을 때 내용이 바뀌도록 코드를 작성해보겠다.      문제 풀기 1. html 파일 살펴보기     이 코드가 탭 버튼을 구현할 부분인데 첫 번째에만 active가 클래스로 들어가 있다. 이 부분이 css에서 어디에 해당하는지 살펴볼 것이다.     2. css 파일 살펴보기  displa..

이번에는 제이쿼리로 홈페이지를 제작하는 내용을 제이쿼리 버전으로 만들어보려고 한다. 수업 영상이 무척이나 길지만 하나씩 따라 하면서 실습을 진행해 보겠다.    실습 1 - 내비게이션 기능 구현하기      제작 사이트 소개        내비게이션 기능  특정 기능을 정지하며 주소값을 가져오는 메서드 등이 있다.      문제 풀기    1. html 파일 확인하기  이제 이 코드를 제이쿼리로 작성하기 위해 js 코드로 작성해 볼 것이다.    2. a 태그 기능 정지하고 hash로 좌표 추적하기preventDefault로 헤더 태그 안에 있는 a 태그를 클릭할 때 정지하는 기능을 추가한다. 변수 e와 target을 생성한다. hash는 이동할 페이지의 좌표가 html의 어디에 있는지 추적한다.     ..

제이쿼리 마지막 수업이 될 것 같다. 낮잠도 자고 방 청소도 하며 집안일을 한 후 점심도 먹고 이제 3시 넘어서 공부를 시작해본다. 오후에는 다른 일이 있어 많이 하지 못하겠지만 할 수 있는데까지 해볼 것이다.    실행 순서 실습하기  이거 실행하면 검은색이 나온다. 왜 그럴까? 코드는 위에서 아래로 흐르므로 위에 것이 먼저 실행이 된 후에 아래 코드가 실행된다. 하지만 여기서는 h1 태그를 먼저 만들지 않았기 때문에 색깔이 적용되지 않은 것이다.     1. 오렌지색으로 바꾸는 코드 작성하기  분명 코드에 오류가 있지만 실행이 된다. 그리고 콘솔 창에 가봐도 아무런 오류가 없이 깨끗하다. 그래서 웹 개발이 어려운 것이다. 백엔드 개발은 구조를 짜는 것이 어렵지만 오류가 확실하다. 프론트엔드의 단점은 ..

오늘은 공부를 별로 많이는 하지 않고 아침에 제이쿼리 수업 다 듣고 정리한 후 오후에는 수학 공부와 엘리스로 6주차 수업만 들을 생각이다. 그리고 시간이 남으면 지난번에 들었던 강의를 정리해볼 생각이다.그럼 제이쿼리 실습을 본격적으로 시작해보겠다.    임포트 실습하기 1. 파일을 불러오는 첫 번째 방식 : 내 파일로 로드 ..은 상위 폴더로 가는 것이다. 기능을 불러오기만 하는 것은 head 태그에 작성한다.   2. 파일을 불러오는 두 번째 방법 : CDN 네트워크제이쿼리 다운로드 파일에 들어가 링크를 복사하여 url을 붙여넣는다. 그러면 위의 코드와 같은 방식으로 동작한다.  내부 방식은 장점이 많아보이지만, 서버에 업로드할 때 불편하고 업데이트될 때 대응이 잘 안되는 점이 있다 . 네트워크 방식은..

제이쿼리 수업은 2시간 반 정도로 짧게 설명하고 끝났지만 이 수업도 다시 듣고 정리하려면 꽤 긴 분량이다. 이제부터 차근차근 수업을 들으면서 엘리스에서 배운 개념들을 더 깊게 적용해보기로 하자. 자바스크립트에서 프론트 개발을 할 때는 Ract과 노드를 많이 쓰고, 자바에서는 스프링을 가장 많이 사용한다. 대한민국을 프로그래밍을 할 때 자바 베이스로 시작했기 때문이다.전자정보 프레임워크는 우리나라에서 만든 스프링 기반 프레임워크로 공공기관에서 주로 많이 사용한다. 신생기업에서는 자바스크립트를 많이 선호한다. 어쨌든 백엔드는 자바로, 프론트엔드는 자바스크립트로 개발을 한다고 생각하면 될 것 같다. 데이터 분석을 하고 싶다면 파이썬을 공부해야 한다.     제이쿼리에 대하여   언어가 체감되고 바뀌려면 5~1..