2021.12.31의 기록

올해 마지막 날의 아침. 날씨가 좋아서 좋아.

- 오늘의 평가 및 느낀 점 - 

=> 오늘은 2021년 마지막 날이다. 이제 진짜 시간이 빨리가는게 체감이 된다. 23살까지는 시간이 느렸는데 24살부터는 진짜 빨리 흘러간다. 오늘 새벽에 일어나서 웨이트를 하고 맑은 하늘을 보며 학원을 오면서 생각했다. 올해를 돌아보았다. 난 올해 무엇을 이뤘을까. 올해 초만 하더라도 막연했었다. 무엇을 공부할지도 모르고 진로를 어떻게 정해야 하는지 생각도 안했었다. 진짜 생각없이 마지막 학년 1학기를 다녔었다. 막연하게 임베디드 프로그래머로 진로를 생각하고 학교 수업만 잘 따라가고 점수만 잘 받겠다는 생각만 했었다. 방학이 다가오고 임베디드 프로그래밍 과목 팀 프로젝트 기말이 남았다. 정말 코딩을 잘하던 동기형과 같은 팀을 했었는데, 너무 높은 실력 차이로 나는 팀 프로젝트에 아무 도움을 줄 수가 없었다. 정말 창피하고 자괴감이 들면서 자존심이 많이 상했었다. 점수는 팀원 덕에 A+을 받았지만 나는 내 자신에게 큰 실망을 한 경험이었다. 방학을 하면서 제대로 진로를 정하기로 했다. 작년 C#을 공부했던 경험으로 본격적인 웹 프로그래밍 과정을 공부해보기로 했다. 다행히 그 형이 가이드라인 정도로 도움을 줬다. 그 방식대로 했지만 빨리 실력이 늘고 싶어 조급했던 나머지 제일 기본인 JAVA도 제대로 이해를 못하고 진도만 나갔던 기억이 난다. 결국 스프링에서 그 한계가 드러났고 휴학을 결심하고 국비학원을 등록했다. 여기까지 오면서 올해 개발 공부를 제대로 했던 기억은 정말 없다. 하지만 국비지원 학원을 오고나서 내 생각보다 기본부터 열심히 하고 있다는 생각이 든다. 실력도 많이 늘었고, 기본  공부했던 지식 덕분인지 두번 세번 보는 개념이 많아서 강의를 들으며 이해가 수월한걸 보면 앞으로도 잘 해낼 자신 생긴다. 스터디 형들에게도 참 고맙다. 같은 목표 의지로 한 명이 꺾이면 잡아주고, 이끌고 공부하는 분위기를 제공하며 무엇보다 공부만을 위해 모인 순수한 관계라는게 좋다. 두서 없이 길게 내 기억을 나열했지만, 생각한걸 정리하며 기록하다보니 지난날의 후회, 실패를 앞으로의 계획에 개선점으로 반영하게 되니 많은 도움이 되는 것 같다. 내년엔 더 성장하는 내 모습을 기대하며 오늘도 여느때처럼 힘내보자.

---

- 이번 주 공부 계획 -

• 파일 입출력 공부 (아마 토요일)? 파일 입출력 간단 코드 짜서 머리에 넣기
• 토요일 팀원 자바, 입출력 같이
• JS, JQuery 완벽 복습

---

- 공부 내용 - 

jQUERY

attr 메소드

• $(selector).atttr(name, value) : 검색 엘리먼트의 태그 속성값을 변경하는 메소드
• $(seleltor).attr(name) : 검색 엘리먼트 태그 속성값을 반환하는 메소드
• 검색 엘리먼트의 태그 속성값을 여러 개 변경할 경우 attr() 메소드의 매개변수에 JSON으로 표현된 Object 객체를 전달하여 객체의 프로퍼티와 값으로 태그 속성값 변경

text 메소드와 html 메소드

• $(selector).text() : 검색 엘리먼트의 태그내용을 반환하는 메소드 ⇒ HTML 태그를 제외한 태그내용 반환
• $(selector).html() : 검색 엘리먼트의 태그내용을 반환하는 메소드 ⇒ HTML 태그를 포함한 태그내용 반환
• $(selector).text(value) : 검색 엘리먼트의 태그내용을 변경하는 메소드 ⇒ 변경 태그내용에 HTML태그가 포함된 경우 문자값으로 처리
• $(selector).html(value) : 검색 엘리먼트의 태그내용을 변경하는 메소드 ⇒ 변경 태그내용에 HTML태그가 포함된 경우 태그로 인식되어 처리
• 묵시적 반복에 의해 검색된 모든 엘리먼트가 같은 태그내용으로 변경 가능 같은 태그를 객체화 했을 때
• each 메소드를 호출하여 명시적 반복을 이용해 태그내용 변경 ⇒ 콜백함수로 검색 엘리먼트의 태그내용을 다르게 변경
• text 메소드와 html 메소드를 이용하여 태그내용을 변경할 경우 변경값 대신 콜백함수를 사용하여 태그내용 변경 가능 - 명시적 반복 ⇒ 콜백함수에서는 반드시 검색 엘리먼트의 변경 태그내용을 반환 ⇒ 콜백함수의 매개변수에는 처리 엘리먼트의 위치값과 태그내용이 자동 저장되어 저장

태그(Element 객체)의 추가(삽입)과 삭제

• $변수명 : jQuery 객체를 저장한 변수 >> jQuery 메소드 호출
• $(html) : HTML 태그를 이용하여 jQuery 객체 생성 - Element 객체 생성
• $(selector).appendTo(targetSelector) : 검색 엘리먼트를 타겟 엘리먼트의 마지막 자식 엘리먼트로 추가(이동)하는 메소드 => 검색 엘리먼트가 없는 경우 엘리먼트를 생성하여 추가하고 검색 엘리먼트가 있는 경우 이동
• $(selector).prependTo(targetSelector) : 검색 엘리먼트를 타겟 엘리먼트의 첫번째 자식 엘리먼트로 추가(이동)하는 메소드 => 검색 엘리먼트가 없는 경우 엘리먼트를 생성하여 추가하고 검색 엘리먼트가 있는 경우 이동
• $(selector).insertBefore(targetSelector) : 검색 엘리먼트를 타겟 엘리먼트의 이전 엘리먼트로 삽입(이동)하는 메소드 => 검색 엘리먼트가 없는 경우 엘리먼트를 생성하여 삽입하고 검색 엘리먼트가 있는 경우 이동
• $(selector).insertAfter(targetSelector) : 검색 엘리먼트를 타겟 엘리먼트의 다음 엘리먼트로 삽입(이동)하는 메소드 => 검색 엘리먼트가 없는 경우 엘리먼트를 생성하여 삽입하고 검색 엘리먼트가 있는 경우 이동
• $(targetSelector).append(newElement) : 타겟 엘리먼트를 검색하여 마지막 자식 엘리먼트로 새로운 엘리먼트를 생성하여 추가하는 메소드
• $(targetSelector).prepend(newElement) : 타겟 엘리먼트를 검색하여 첫번째 자식 엘리먼트로 새로운 엘리먼트를 생성하여 추가하는 메소드
• $(targetSelector).before(newElement) : 타겟 엘리먼트를 검색하여 타켓 엘리먼트의
• $(targetSelector).after(newElement) : 타겟 엘리먼트를 검색하여 타겟 엘리먼트의
• $(selector).remove([selector]) : 검색 엘리먼트를 삭제하는 메소드 ⇒ 부모 엘리먼트를 삭제하면 몯ㄴ 후손 엘리먼트 삭제 ⇒ remove() 메소드의 매개변수에 선택자를 전달하여 특정 엘리먼트만 선택하여 삭제

태그(Element 객체)의 이동

• 새로운 엘리먼트를 생성하여 추가(삽입)하는 메소드 : append, prepend, before, after
• 엘리먼트를 검색하여 검색된 엘리먼트를 타겟 엘리먼트에 추가 (삽입) 하는 메소드 ⇒ 기존 엘리먼트 이동 ⇒ appendTo, prependTo, insertBefore, insertAfter ⇒ 검색된 엘리먼트가 없는 경우에는 엘리먼트 생성하여 추가(삽입)

jQuery Event Handler

• $(selector).click(callback) : 검색 엘리먼트에서 클릭 이벤트가 발생된 경우 호출될 이벤트 처리 함수를 등록하는 메소드 ⇒ 단축형 : 엘리먼트에 하나의 이벤트에 대한 이벤트 처리 함수 등록
• $(selector).on(events, callback) : 검색 엘리먼트의 특정 이벤트가 발생된 경우 호출될 이벤트 처리 함수를 등록하는 메소드 ⇒ 일반형 : 엘리먼트의 다수의 이벤트에 대한 이벤트 처리 함수 등록
• 엘리먼트에서 발생되는 다수의 이벤트에 대한 이벤트 처리 함수를 등록할 경우 on() 메소드의 매개변수에 JSON으로 표현된 Object 객체를 전달하여 이벤트 처리
• this : 이벤트 처리 함수에서 이벤트를 발생한 엘리먼트를 표현하는 키워드
• $(selector).mouseover(callback) : 검색 엘리먼트에 마우스 커서가 진입할 경우 호출되는 이벤트 처리 함수를 등록하는 메소드
• $(selector).mouseout(callback) : 검색 엘리먼트에 마우스 커서가 벗어날 경우 호출되는 이벤트 처리 함수를 등록하는 메소드
• $(selector).on({event : callback, event : callback, ...}) : 검색 엘리먼트에 여러 개의 이벤트와 이벤트 처리 함수를 등록하기 위한 메소드
• $(selector).off(event) : 검색 엘리먼트에 등록된 이벤트를 제거하는 메소드 ⇒ 이벤트에 등록된 이벤트 처리 함수 제거 (단축형)
• a 태그는 클릭 이벤트가 발생된 경우 브라우저 주소를 href 속성값으로 설정된 url 주소로 변경하여 서버에 웸문서(웹 프로그램) 요청

Mouse Event

• click : 엘리먼트에서 마우스 버튼을 누른 경우 발생되는 이벤트
• dblclick : 엘리먼트에서 마우스 버튼을 두번 연속 누른 경우 발생되는 이벤트
• mouseenter : 마우스 커서가 엘리먼트에 위치한 경우 발생되는 이벤트
• mouseleave : 마우스 커서가 엘리먼트에 위치하지 않은 경우 발생되는 이벤트
• mouseover : 마우스 커서가 엘리먼트에 진입한 경우 발생되는 이벤트
• mouseout : 마우스 커서가 엘리먼트를 벗어난 경우 발생되는 이벤트
• hover : 마우스 커서가 엘리먼트에 진입하거나 벗어난 경우 발생되는 이벤트
• $(selector).addClass(name) : 검색 엘리먼트에 클래스 선택자의 CSS 스타일 적용 ⇒ 태그의 class 속성의 속성값 추가
• $(selector).removeClass(name) : 검색 엘리먼트에 클래스 선택자의 CSS 스타일 취소 ⇒ 태그의 class 속성 값 제거
• $(selector).toggleClass(name) : 검색 엘리먼트에 클래스 선택자의 CSS 스타일 적용하거나 취소하는 메소드 ⇒ 태그의 class 속성의 속성값이 없으면 추가하고 속성값이 있으면 제거

.

Key Event

입력태그에서 엔터를 눌렀을 때 입력 초점 이동시키거나 submit을 이동 시킬 때 많이 쓰임

• keydown : 엘리먼트에서 키보드를 누른 경우 발생
• keypress : 엘리먼트에서 키보드를 누르고 있는 경우 발생 - KeyCode 반환
• keyup : 엘리먼트에서 키보드를 뛴 경우 - KeyCode 반환
• $(selector).submit(name) : 검색 엘리먼트(form 태그)에서 submot 이벤트를 발생하는 메소드
• Event.keyCode : 이벤트가 발생된 키보드의 문자 코드값(ASCII)을 저장한 프로퍼티

Scroll Event

• $(selector).scroll(callback) : 검색 엘리먼트에서 스크롤 이벤트가 발생된 경우 호출될 이벤트 처리 함수를 등록하는 메소드
• $(selector).height() : 검색 엘리먼트의 높이를 반환하는 메소드
• $(selector).scrollTop() : 검색 엘리먼트의 스크롤 상단 위치값을 반환하는 메소드

---

- 세미 팀플 -

1. 세부 기능 회의 (버튼 별 액션, 페이지라던지.. 간략하게)
2. JDBC
3. 파일 입출력 스트림 
4. DB 분석 (되면)?

 

---

 

- 스터디 계획 및 결과 - 

- jQuery 복습

올해 마지막 스터디 전 팀원 형이 사주신 아이스크림과 함께