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

오늘 밤부터 Node.js 공부를 시작해보려고 한다. 사실 JDBC 공부를 먼저 하는 것이 좋겠지만 왠지 이 공부부터 하고 싶어졌다. 수업 분량이 많지 않아서 맘 잡고 하루 정도 하면 다 끝낼 수 있을 것 같다.   이론 1 - Node.js 시작하기 이에 따라 고성능의 자바스크립트가 필요하게 되었다. V8 엔진은 크롬 브라우저에서 사용하는 엔진으로 자바스크립트를 좀 더 빠르게 사용할 수 있도록 한다.    이 실행기를 통해 자바스크립트 기반의 다양한 어플리케이션을 만들 수 있게 되었다.     크로스 플렛폼은 윈도우, 리눅스, 맥 등의 다양한 환경에서도 실행이 가능한 것이다.     Node.js는 다양한 환경에서 사용할 수 있는 프로그램이다.    퀴즈 1 - Node.js의 이해     학습을 마치..

지난주에 일주일 동안 열심히 공부했던 자바스크립트 기초 수업 이수증을 정리해 볼 시간이 되었다. 어제 조금 정리하는 글을 쓰다 졸려서 다 하지 못하고 다음날에 추가 작성해 본다. 이수 현황 학습 현황 학습 상세 현황 그 외에 부록으로 2주 차의 수업이 있는데 그 내용은 학습 현황에 집계되지 않았다. 난 이 부록 학습이 많이 힘들었다. 특히 마지막 부록은 시간은 많이 투자하며 실습 과제를 풀어보았다. 이수증 엘리스 이수증이 달라졌다. 이렇게 이수증이 나오니 정말 뿌듯하다. 다른 과목들도 열심히 공부해서 이수증을 꼭 딸 것이다. 정리를 마치고그동안 2주 동안 열심히 공부한 성과가 학습 현황을 통해 그래프로 볼 수 있어서 무척 기뻤다. ..

이어서 영화진흥위원회에서 받은 키로 JSON 실습을 진행해보겠다.    영화진흥위원회 API 실습해보기  1. JSON의 객체 타입 객체 안에 키와 VALUE를 접근하는 실습을 진행했었다. 이제 본 프로젝트 실습으로 넘어가보자.    2. 폼 태그에서 중요한 3가지 내가 만든 사이트의 정보를 가지고 오고 싶다면 비동기 통신의 Ajax를 사용할 수 있다. 요청을 받으면 사이트로 요청을 보낼 것이다. 클릭할 때마다 데이터를 가져오되 화면에서만 가져오는 비동기로 만들어보려고 한다. 폼 태그에서 제일 중요한 것은 action과 method이다. 서버의 주소와 전달할 방법, 그리고 넘겨줄 데이터가 필요하다.   이것을 제이쿼리 방식으로 받아오려고 한다.    3. 기본적인 정보 작성하기조금 전에 보았던 영화 정보..

제이쿼리에서 효율적으로 활용하는 Ajax에 대해서 공부해 볼 것이다. 이 수업부터는 인공지능 사관학교에서 진행되었던 자바스크립트 수업이다. 어제 수료식도 했지만 난 여전히 한 달 동안 열심히 공부해서 이곳에서 배웠던 모든 것들을 블로그에 정리해서 학습일지로 올릴 생각이다.이번 달에는 공부일지를 많이 올리지 못해 남은 3일 동안 최대한 많이 올려야 매달 목표량인 300개를 채울 수 있을 것 같다.     Ajax 기본 개념과 동기와 비동기의 차이  XML은 HTML과 비슷하다. XML은 태그를 통해 주고 받는 것을 말한다. 동기화에서 synchro는 모든 동작을 똑같이 하는 것이다. 여기에 a가 불으면 부정의 뜻으로 비동기를 뜻한다.      클라이언트는 서버에게 요청을 하고, 서버는 그에 따른 응답을 한..

이제 마지막으로 미션 문제만 풀면 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..