JavaScript/2011년스터디

스터디 소개

• 2011년 여름방학동안 JavaScript를 공부하는 모임.
• 스터디 시간 : 매 주 수요일 5시, 토요일 6시
• 참가자 : 김수경, 박정근, 김광순, 정진경, 정의정, 김태진

페이지 리스트

• JavaScript/2011년스터디
• JavaScript/2011년스터디/3월이전
• JavaScript/2011년스터디/7월이전
• JavaScript/2011년스터디/CanvasPaint
• JavaScript/2011년스터디/JSON-js분석
• JavaScript/2011년스터디/URLHunter
• JavaScript/2011년스터디/김수경
• JavaScript/2011년스터디/박정근
• JavaScript/2011년스터디/서지혜
• JavaScript/2011년스터디/윤종하

목표

• 우리의 목표는 뭘까? - 김수경

7월

• 출석체크

날짜	김수경	박정근	정진경	정의정	김광순	김태진
7/6	O	O	O	O	O	-
7/9	O	O	O	X	O	-
7/13	O	O	O	X	O	O
7/16	O	X	X	X	-	O
7/20	O?	O	O	X	-	O
7/27

9일

• 명령형 구조적 프로그래밍 언어로서의 자바스크립트
  • imperative and structured programming language
• 함수형 선언적 프로그래밍 언어로서의 자바스크립트
  • functional and declarative programming language
• 프로토타입 기반 객체지향 프로그래밍 언어로서의 자바스크립트
  • prototype-based object-oriented language
• 웹 브라우저 기반 클라이언트 측 동적 스크립트 언어로서의 자바스크립트
  • web-browser-based client-side dynamic script

후기

• 박정근 - javascript에 관한 전반적인 내용들을 배웠습니다. 지난 시간동안 javascript를 공부하면서 배웠던 내용들을 정리하는시간이 되었던것 같습니다. 게다가 이론으로는 알고잇던 프로토타입같은 내용은 실제로 구글개발자 툴의 콘솔을 이용하여 직접 보면서 설명을 들으니 확실히 이해되기도 하였구요ㅋ 관심가는 부분에는 함수형 선언적 프로그래밍인데 함수형 언어를 사용한 적이 없어서 그런 방식으로 프로그래밍 하는 것에 대해 신선함을 느끼고 더 알고 싶어졌습니다. 또 자바스크립트를 하면서 DOM에 관해서도 알아야 겠다는 생각이 들었습니다. 하아.. 공부할게 많네요ㅋ
• 정진경 - 약 3시간 넘게 특강을 들었습니다.프로토타입에 대해서는 처음 접해본거 같은데 익숙치가 않아서 개념 이해가 버거운 것 같기도 하고-_-;깔짝깔짝 써본 자바스크립트가 이렇게 심오한 언어일 줄은 몰랐습니다. 더글락스 어쩌구 아저씨의 책을 정독해봐야 겠네요. 그전에 기초부터 다져야 하겠지만, 오늘 배운 부분들이 꽤 많은 핵심들을 짚었다고 생각합니다.하지만 자바스크립트로 원하는 기능을 다 구현해보더라도 오늘 배운 것들을 응용할만한 끈기가 저한테 있을지는.. 모르겠습니다;;
• 김광순 - javascript에 관해 특강을 들었습니다. 기초가 부족해서 이해하기 힘든 부분이 많았습니다.(특히 프로토타입쪽이...)

따로 학습을 통하여 기초를 다져야겠다고 생각됩니다..

• 김수경 - 오늘 5피에서 진행되는 세미나가 있길래 4피에서 하려고 했더니 4피 프로젝터가 안 되어 망… 요즘 실습실 관리는 진짜 답이 없다.
  • http://projecteuler.net 에 가입해서 문제를 풀어보려고 했지만 시간 문제로 안 풀게 됨. 앞으로 같이 풀어봐요.
  • 오늘 한 내용은 위에 써있는 네 줄에 대한 설명인데 네 줄 가지고 세시간 넘게 진행. 네트워크가 떠오른다.
  • 네 줄 가지고 세시간 넘게 진행할만큼 중요한 내용이라고 생각한다. 그게 언어든 뭐든 쓰는 법을 익히는 것에만 집중하는 사람들을 많이 봤다. 그게 뭔지 확실히 알지도 못하면서 쓰는 법만 익히려한다. 어떻게 쓰는지를 배우는 건 그렇게 어렵지 않은데 뭔지도 모르고 문법에만 집중하면 쓸 줄은 알아도 잘 쓰지는 못하는 것 같다.
  • JavaScript 스터디를 1년이라면 1년, 반년이라면 반년정도 진행해서 어디선가 다 들어보긴 한 얘기인데… 그래서인지 처음 들을때보다 듣고 알 것 같은 느낌은 든다. 그런데 나한테 설명하라고 하면 저렇게 설명할 수 없을 것 같다.
    • 전 수요일에 하는줄 알았는데 수요일 토요일이었네요? 이런...; -김태진
    • 수요일에 하고 토요일은 특강? 실습? ㅋㅋ 옵션이야 - 김수경

13일

후기

• 박정근 - URLHunter를 짜기는 다 했지만 timeout을 구현하지 않았더라구요. 그 부분을 더 첨가해 보고 또, prototype을 통해 상속받는 구조로 코드를 고치는게 더 좋을 것 같아 구조를 약간 변경시켜 보았습니다.(결국 스파케티를 요리하게 되었지만;;;) 그리고 또 한가지 추가하고 싶은 것은 몬스터의 형태를 바꾸어 글자를 출력하게 하는 것인데 어떻게 될지는 모르겟지만 한번 해 보아야지요ㅎㅎ
• 김태진 - 부산에 갔다오는 바람에 저번주는 스터디를 못하고 이번주에 다시 들어왔습니다. URL헌터를 완성해오는게 숙제였던거 같은데, 저는 하지 않고 왔습니다- 나중에는 자기가 짠 것을 고치거나 못짠사람은 완성하는 것을 했는데, 배열 문법구조가 C와 달라 에러가 떠 코드가 산으로 갈뻔했죠... arr.join()이라는 것을 통해서 기본 틀을 짜는데는 성공했으니 다음시간까지는 a를 먹도록은 짜 봐야겠네요. 하지만 다른사람들과는 다르게 객체지향적일거 같지는 않아요. 우선 구현에 의의를 두고 열심히 짜봐야겠네요;;
• 정진경 - URL헌터의 밸런스를 조금 수정하고 php, mysql과 연동하여 랭크 기능을 넣었습니다. 자바스크립트 변수를 POST를 통해 다른 페이지로 보내는데 성공하긴 했는데 새로고침하면 POST 데이터가 살아남아있어서 데이터가 중복해서 들어가는 문제가 생기네요. 짜고 보니 코드가 썩 깔끔하진 못하지만, 우선 구현하는데에 익숙해지도록 노력해봐야겠네요.

16일

후기

• 김태진 - 다른분들은 오지못해서 거의 제 수준에 맞추어 형진이형이 설명해주셨어요. 일단 오늘 느낀건 함수형 언어의 위대함. + 괄호의 헷깔림 이에요. 한줄에 쓰다보니 헷깔리던.... 자바스크립트가 함수형 언어의 특징을 가지고 있는지라 피보나치를 쉽게 나타낼 수 있고, 그걸 배열에도 어렵지 않게 나타낼 수 있었던거 같네요. 그렇게 함수형언어에 초점맞춰진 코딩은 처음 보는데 절차적이 아니라 뭐랄까 좀 단편적으로 생각해도 된다는 점이 있을것이란 말이 무척 공감이 되었던거 같아요. 요즈음 뭔가 하나를 배우면 그 앞에 3개의 새로운 배울것이 생기는 느낌이네요. 더 열심히..

8월

• 출석체크

날짜	김수경	박정근	정진경	임상현	김태진
8/3	O	O	O	O	O
8/10	-	O	O	X	O
8/17	-	O	O	X	O
8/24	-	O	O	X	O
9/31	-	O	O	X	O

3일

• Canvas를 이용해 그림판을 만들기를 하고 있습니다.
• JavaScript/2011년스터디/CanvasPaint

10일

• Canvas를 이용해 그림판 만들기를 하고 있습니다.
  • 오늘 온 세명 모두 선을 부드럽게 그리는 (뚝뚝끊기지 않는) 것을 짜서, 완성했습니다.

후기

• 좀 더 부드러운 선을 그리는 것을 만들었습니다.(처음에는 두 점을 찍으면 그 사이가 직선이 되는걸 하려고 했지만 ....) 버그로는 마우스를 뗐다가 다시 움직이는 경우에도 직선이 생긴다는거였네요. -김태진
• 프리드로잉, 오른쪽클릭시 발생하는 메뉴에 대한 처리를 했습니다. 함수가 유연하다보니 생각보다 쉽게 되네요. 드래그 중에는 마우스포인터가 캔버스 영역에서 못벗어나도록 하고 싶은데 스크립트만으로는 힘들어보이네요. ㅜㅜ - 정진경

17일

• Canvas를 이용해 그림판을 만들고 있습니다.
  • 각자 리팩토링을 하거나, 실행취소를 연구하거나, 그림판 크기를 자유롭게 만드는 방법을 알아보고 있습니다.

후기

• 오늘은 소스가 너무 스파게티여서 다른걸 첨가할 수 없었기에 리팩토링을 하고있습니다. 그 결과 나름 코드가 깔끔해졌고 기능들을 손쉽게 추가할 수 있게 되었습니다.+html select를 이용해 색깔고르기를 하고 싶었는데 함수를 찾느라 한참 걸렸네요.+ 선으로 그림그려질때 마우스를 up했다 다시down 하면 이전 위치가 저장되어 있었는데, 문제를 해결했습니다. -김태진
  • 으.. 실행취소는 정말 대단한 기능입니다. 도대체가 이 허접한 실력으론 구현할수가 없네요. -김태진
  • ㄴ 동감.... -박정근
• 드래그 중일 때에는 캔버스 안에 마우스포인터를 가두고 싶은데 자바스크립트로 가능할지 잘 모르겠고, 또 엘리먼트가 없는 공간에도 동적인 캔버스를 생성하려는데 바디의 영역이 원하는대로 되지 않네요. HTML 등 배경지식이 부족해 구현에 어려움을 겪고 있습니다.. -정진경
• 드래그중일때는 마우스포인터를 따라 그려지다가 드래그를 떼었을때 그동안의 것들은 사라지고 마지막의 그림만 남도록 하는것을 구현중입니다. 아무리해도 아이디어가 떠오르지 않네요,,, 늘어나는것은 입코딩뿐...ㅋ 정 안되면 다른 기능들 먼저 추가해 볼 생각입니다. p.s. 노트북 포멧을 하면서 백업파일을 제대로 관리하지 않아서 고쳐 작성중이던 파일이 날아갔어요ㅜ 위키작성의 중요성을 실감하는 중입니다. -박정근

24일

• Canvas를 이용해 그림판 만들기를 하고 있습니다.
  • 실행취소에서 난항을 겪는 와중, 각자 다른 방법으로 시도하고 있습니다.
  • 혹은 엘리먼트없이 위치를 받아오게 할 수 있는 방법을 찾고 있습니다.

31일

• Canvas/SVG를 이용해 그림판 만들기를 하고 있습니다.
  • 실행취소 구현을 완료하였습니다.
  • 엘리먼트를 어디서든 받아와 그림판을 만드는 작업을 했습니다.
  • 마우스가 밖으로 나갔다 들어올때 생기는 오류를 해결하지 못하고 있습니다.
  • 자취를 없애는 방법을 여전히 고민 중입니다.

9월

• 출석체크

날짜	박정근	정진경	추성준	김태진
9/14	O	O	O	O
9/21	O	O	X	O
9/28	O	-	X	O

14일

• Canvas만들기를 마무리했습니다.
  • 각자 넣고 싶은 기능들을 잘(?) 넣어서 각자의 그림판을 완성했습니다.
• 다음주 부터는 jQuery를 활용해서 공부해보기로 합니다.

21일

• 예상과는 다르게 학교 소스를 파헤치는 시간이었습니다.
  • 수확으로는 파싱하기 좋은 식단소스입니다.
• 다음주에는 어떻게 진행될지 잘 모르겠습니다..

후기

• 김태진 - 사실 오늘 한거에 대한 후기보다는.. 그림판 퀄리티를 향상시켰어요! UNDO와 REDO 완벽구현!! [1]

• 정진경 - jQuery로 뭔가 하기에 애매해서 스마트중앙을 파헤치는 -_-; 옆길로 빠졌습니다. 생각보다 간단하게 식단정보를 가져올 수 있네요. 결론적으로 자바스크립트가 아니라 자바를 했습니다.

28일

• Cappuccino에 관해 공유(?)했습니다. 하지만 환경이 갖추어진 사람이 1명밖에 없어서 보류...
• jQuery는 잠정 연기하기로 하고 php와 MySQL, js, html을 다 사용하는 방명록 만들기를 하기로 하였습니다.
  • 각자 자신이 만들고 싶은 방명록의 스펙을 정하고, php기본 문법(C에서 기본적으로 쓰는걸 옮길 수 있는정도)을 공부해오기로 하였습니다.
• 10월 첫주는 정모 이후에 할 예정이고, 이후에는 다시 스터디원들의 일정을 고려해서 할 예정입니다.

10월

• 출석체크

날짜	박정근	정진경	추성준	김태진
10/12	O	-	O	O

12일

• 저번주는 축제때문에 두명이 참석하지 못해서 못했네요..
  • 공교롭게도(?) 3명 모두 클러그 회원이어서 클러그 서버를 이용해 MySQL을 받아 써보았습니다.
• 중간고사 이후에는 PHP를 통해 MySQL을 쓰고 지우는 방법에 대해서 알아볼 것입니다.

11월

날짜	박정근	김준석	추성준	김태진
11/2	O	-	O	O
11/16	X	X	O	O
11/23	O	X	O	O

2일

• 오늘은 PHP를 통해 MySQL에 있는 정보를 표시하는 법까지 공부해 보았습니다.
• 수많은 삽질..... (클러그 서버를 이용해서 MySQL을 쓰고 있는데 클러그서버 상태가 좋지않아 고생을 약간 하였습니다.)
• 그걸 배제하더라도 수많은 코드오류...
• 다음주까지 MySQL에 정보를 넣고 볼 수 있는 것을 짜오도록 하였습니다.

후기

• 김태진 - 어쩐지 위에 제가 썼다보니 전반이 제 후기인거같...습니다. 아무래도 우리는 JavaScript스터디라는 명목보다 WebProgramming스터디가 좀 더 적합해지지 않을까 생각이 되는데 다음에 의견을 모아봐야겠네요.

16일

내용

• 오늘은 PHP를 통해 MySQL에 정보를 추가/표시하고, 지우는 것까지 공부하기로 하였습니다.
• 또다시 수많은 삽질이 진행되었습니다.
  • $_POST[]; 는 무조건 대문자로 써야합니다.
  • query문을 날릴때 잘 날려봅시다..
  • echo <<< 문을 쓸때 닫는 단어는 한 줄의 제일 처음에 써야합니다.(띄어쓰기 없어야함)
  • 데이터를 지운 후에 새로 추가하게되면 제일 아래쪽부터 차올라가는게 아니라 없어진 위치에 채우고 새로 채워나갑니다. 이 부분때문에 index의 필요성이 더 커졌습니다.
• MySQL에 원하는 정보를 Delete하려고 하였으나, 그걸 위해서는 index가 필요했고, 인덱스를 만드는 방법을 연구하고 있습니다.
• 테이블 수정에서 유용하게 쓰일만한 MySQL 명령어들입니다.

1. 테이블에 새로운 컬럼 추가
alter table tablename add column [추가할 컬럼명] [추가할 컬럼 데이타형]
2. 테이블에 컬럼타입 변경하기
alter table tablename modify column [변경할 컬럼명] [변경할 컬럼 타입]
3. 테이블에 컬럼이름 변경하기
alter table tablename change column [기존 컬럼명] [변경할 컬럼명] [변경할 컬럼타입]
4. 테이블에 컬럼 삭제하기
alter table tablename drop column [삭제할 컬럼명]
5. 테이블컬럼에 인덱스 주기
alter table tablename add index 인덱스명(인덱스를 줄 컬럼1 , 인덱스를 줄 컬럼2, ... )
6. 테이블컬럼에 인덱스 삭제하기
alter table tablename drop index 인덱스명;
7. 테이블에 Primary Key 만들기
alter table tablename add primary key (키를 줄 컬럼명1 , 키를 줄 컬럼명2, ...)
8. 테이블에 Primary Key 삭제하기
alter table tablename drop primary key;
9. 테이블명 바꾸기
alter table 기존테이블명 rename 새로운테이블명
10. 인덱스 생성
CREATE [UNIQUE] INDEX index_name ON tbl_name (col_name[(length]),... )
11. 인덱스 삭제
DROP INDEX index_name on tlb_name

• 현재 만들고 있는 페이지입니다. 클러그 서버에서 만들고 있습니다.
  • 추성준 방명록만들기
  • 김태진 방명록만들기
• WebProgramming 스터디로 바꾸는 것은 다음 정모때 제가 참여하면 바꿀 예정입니다. 자바스크립트에서 너무 멀리와서 이 부분은 WebProgramming스터디로 하는게 더 좋을거 같네요.

후기

• 김태진 - 둘다 해본적이 없는것을 하는지라 오늘도 삽질의 연속이었습니다. 소문자 대문자때문에 30분 고생하고.. 또 그걸 고쳤더니 새 페이지를 띄울때마다 새로 빈 데이터가 생기질 않나.. 여러가지 코드를 참고해가며 겨우 완성해냈습니다. 약간 느리지만 하나하나씩 완성되어가니 재밌네요.

7일

내용

• 방명록을 만들었습니다.
  • 추성준 방명록만들기
  • 김태진 방명록만들기
  • 박정근 방명록만들기

후기

• 드디어 방명록을 완성하였습니다. 올해가 가기전에 그래도 만들어냈네요...! 내년에도 재밌는 스터디가 되었으면 좋겠네요. -김태진

---

2011년활동지도, 스터디분류