2021.12.30의 기록

지하철 가는 길 일출 (내 연령을 대변하는듯. 솟아오르자)

- 오늘의 평가 및 느낀 점 - 

-> 날씨가 좋다 근육통이 너무 심해서 운동 하루 쉬었다. 덜 피곤하네. 오늘 아침 내 취준 계획에 대해서 면담 신청을 했다. 기대가 된다. 파이팅. 아니다. 너무 졸렸다.. 

-> 오늘 면담을 한 후기는 현실적으로 내가 할 수 있고 갈 수 있는 회사에 대해 알게 되었고, 기술 면접이 어떤식으로 돌아가고 기업이 무엇을 원하는지 객관적으로 파악이 가능하게 되어 좋았다. 계획을 작성해서 가니까 팀장님이 좋아하셨다. 앞으로 자잘자잘한거 궁금한 거 있으면 언제든지 오라 하셨으니, 종종 가야겠다. 

-> jQuery를 배우고 표기법 메소드를 배웠는데 처음이라 어색하지만 결국 js이므로 이해가 크게 어렵진 않았다. 하지만 잘 배워두고 머리에 넣어놔야 내 지식이 되니 긴장하자.

=> 팀프로젝트는 크롤링이 애를 먹었는데 겨우 임포트 성공하고 에러 잡고 사이트를 정하게 되어 좀 후련하다. 이제 본격적으로 디자인이랑 화면 정의서 구상 들어간다. 또 지옥시작이구만.

낼은 벌써 연말이네.. 작년에 나는 뭐했더라. 작년에는 막연하게 C#공부 왜해야 되는지도 모르고 했던 것 같아. 그러니 성과가 없었지.. 작년에 비해서 달라진 마음가짐이 좋다. 내년의 나는 무조건 회사원이 되어야지. 

---

- 이번 주 공부 계획 -

• 파일 입출력 공부 (아마 토요일)?
• 토요일 팀원 자바, 입출력 같이
• JS, JQuery 완벽 복습

---

- 공부 내용 - 

자바스크립트

• 입력값 검증 (자바스크립트) 후 form 태그 동작되게

Submit Event - 입력페이지

• FormElement.onsubmit : form 태그에서 submit 이벤트가 발생된 경우 이벤트 처리 함수를 저장(등록)하기 위한 이벤트 속성
• event.prventDefault() : 기본 이벤트 제거 - (submit 이벤트를 취소) >> form 태그 미실행
• return false : 이벤트 처리 함수에서 false를 반환하는 경우 기본 이벤트 제거와 이벤트 전달 중지와 동일한 효과 제공 - submit 이벤트를 취소하며 이벤트 처리 함수 종료

예외처리(Exception Handle)

• 예외(Exception) : 자바스크립트 명령 실행 시 발생되는 오류
• try, catch, finally 다 같음.
• 자바스크립트는 예외처리할 필요가 굳이 없다 (브라우저 엔진이 알아서 에러가 떨어짐)

쿠키(Cookie)

• cookie : 서버와 클라이언트의 연결 지속성을 제공하기 위해 클라이언트에 저장하는 문자값 - 서버명을 이용하여 쿠기가 저장되며 서버의 웹프로그램 요청 시 무조건 전달
• 웹은 연결된 정보가 없으면 소켓을 끊어버림 ( 안 없애면 서버에 부담이 걸림 - 메모리 비효율적) ⇒ 웹은 결과를 주고 받았으면 끊어버림 연결의 지속성을 전달받지 않음
• 쿠키는 클라이언트에 저장 보안성 취약
• 세션은 서버에 저장 보안성 굳
• (쇼핑몰 장바구니를 쿠키로 만들어 줄 수도 있음)
• 쿠키에는 이름과 값을 하나로 묶어 다수의 정보를 저장 - [이름=값] (엔트리)
• ⇒ 쿠키에 저장되는 값은 ;으로 구분하여 다수의 값 저장 가능
• ⇒ 쿠키에는 쿠키명과 쿠키 값이 반드시 저장 (필수 요소)
• ⇒ 적용범위, 도메인, 지속시간 등은 쿠키에 저장 가능 (선택 요소)
• 쿠키변수에 쿠키명과 쿠키 값을 하나로 묶어 저장 ⇒ 쿠키 값은 영문자, 숫자, 일부 특수문자 제외한 문자는 저장 불가능(URL주소 같은 애들) ⇒영문자, 숫자, 일부 특수문자 제외한 문자는 부호화 처리하여 저장
• 쿠키변수에 적용 범위 (이름 : path - 기본 값 : 현재 요청 문서의 디렉토리)를 저장
• 쿠키변수에 지속시간을 저장(이름 : expires - 기본 값 : 0)를 저장
• 지속시간 : 클라이언트에서 쿠키가 유지되는 시간 ⇒ 지속시간 [0]으로 설정된 경우 쿠키는 브라우저 메모리에 저장 - 브라우저가 종료되면 소멸 ⇒ 지속시간을 [0]이 아닌 값으로 설정한 경우 쿠키는 파일에 저장 - 브라우저 종료 후에서 존재
• Date 객체 생성 후 지속시간 더함 - 일 증가
• document.cookie : 클라이언트에 쿠키를 저장하기 위한 프로퍼티
• 쿠키를 제거하는 메소드는 없지만 지속시간을 조작하면 됨. (팝업 창 하루 열지 않기)

JQuery

• script 태그를 이용하여 jQuery 라이브러리 파일을 웹문서에 포함해야만 jQuery 사용 가능
• jQuery 라이브러리 파일을 다운로드 받아 현재 서버 자원으로 저장하여 포함
• CDN 서버의 jQuery 라이브러리 파일을 제공받아 포함
• CDN 서버 : 대용량의 콘텐츠를 빠르고 안정적으로 제공
• jQuery는 CSS 선택자로 엘리먼트(태그)를 검색하여 jQuery 객체 생성 후 메소드 호출 ⇒ DOM Tree(document 객체)에 모든 태그가 로딩된 후 jQuery 객체 생성
• jquery 객체를 생성하여 메소드 호출하는 방법
• 형식) jQuery(Selector|Object|Tag).메소드(값, 값,...)
• jQuery(document).ready(callback) : document 객체가 준비된 경우 callback 함수의 명령 실행 ⇒ window.onload 이벤트 보다 가독성이 좋으며 여러 번 호출 가능
• jQuery 함수명 대신 $ 기호를 사용하여 표현 가능
• script 태그를 body 태그의 마지막 자식 태그로 선언하면 document 객체가 준비된 상태이므로 ready() 를 호출할 필요 없이 jQuery 객체를 생성할 수 있다.

선택자(Selector)

• 태그 선택자로 엘리먼트를 검색하여 jQuery 객체로 생성 후 메소드 호출 ⇒ 다숭 엘리먼트가 검색된 경우 묵시적 반복에 의해 처리
• 클래스 선택자로 엘리먼트를 검색하여 jQuery 객체로 생성 후 메소드 호출, 아이디도 마찬가지
• 선택자로 엘리먼트를 검색하여 생성된 jQuery 객체로 메소드를 연속적으로 호출 가능 - 메소드 체인 ⇒ 하나의 JQuery 객체로 다양한 메소드를 호출할 경우 사용
• jQuery 객체의 메소드 호출 시 전달값이 여러 개인 경우 Object 객체({})로 표현
• 부모 엘리먼트의 자식 엘리먼트를 표현하기 위해 자식 선택자 사용 : > 기호 사용
• $(selector).children([selector]) : 부모 엘리먼트의 자식 엘리먼트를 검색 ⇒ children() 메소드의 선택자를 생략하면 모든 자식 엘리먼트 검색
• 부모 엘리먼트의 후손 엘리먼트를 표현하기 위해 후손 선택자 사용 : 공백 사용
• $(selector).find(selector) : 부모 엘리먼트의 후손 엘리먼트를 검색하기 ⇒ find() 메소드의 선택자를 생략 불가능
• 검색된 엘리먼트 중 특정 엘리먼트를 검색하기 이해 필터 선택자 이용 ⇒ 필터 선택자는 클래스 선택자만 사용 가능
• $(selector).filter(selector) : 검색된 엘리먼트 중 특정 엘리먼트만을 검색하기 위한 메소드 ⇒ filter() 메소드의 선택자는 모든 선택자를 사용하여 특정 엘리먼트 검색이 가능
• $(selector).not(selector) : 검색된 엘리먼트 중 특정 엘리먼트가 아닌 나머지 엘리먼트를 검색하기 위한 메소드
• 검색 엘리먼트 중 원하는 위치의 엘리먼트를 선택하기 위해 가상 선택자 사용 ⇒ :eq(index) : index 위치의 엘리먼트 표현
• $(Selector).eq(index) : 검색 엘리먼트 중 index 위치의 엘리먼트를 검색하기 위한 메소드
• $(selector).first() : 검색 엘리먼트 중 첫번째 엘리먼트를 검색하기 위한 메소드
• eq() 메소드의 매개변수에 -1을 전달하면 마지막 엘리먼트 검색
• $(selector). last() : 검색 엘리먼트 중 마지막 엘리먼트를 검색하기 위한 메소드
• $(selector).next() : 검색 엘리먼트의 다음 엘리먼트를 검색하기 위한 메소드

each 메소드

• 선택자에 의해 다수의 엘리먼트가 검색되면 검색 엘리먼트의 갯수만큼 jQuery 객체를 생성하여 메소드 호출 - 묵시적 반복
• $(selector).size() : 검색 엘리먼트의 갯수를 반환하는 메소드 ⇒ length 프로퍼티로 변경
• $(selector).each(callback([index][,element])) : 선택자로 검색된 엘리먼트를 콜백함수의 명령으로 반복 처리하기 위한 메소드 - 명시적 반복 ⇒ 검색된 엘리먼트의 갯수만큼 명시적으로 반복처리 ⇒ 콜백함수의 매개변수에는 엘리먼트의 위치값(index:첨자)와 처리 엘리먼트(Element 객체)가 자동 저장되어 제공.
• $(this) : 현재 처리중인 엘리먼트(Element 객체)를 표현하기 위한 키워드 제이쿼리 객체

CSS 메소드

• $(Selector).css(name) : 검색 엘리먼트의 CSS 스타일 속성값을 반환하는 메소드
• CSS 스타일 속성은 자바스크립트의 카멜 표기법으로 표현 가능 ( - ) 들어가는 것
• $(Selector).css(name, value) : 검색 엘리먼트의 CSS 스타일 속성값 변경하는 메소드
• 검색 엘리먼트의 CSS 스타일 속성값을 여러 개 변경할 경우 CSS() 메소드의 매개변수ㅇ에 JSON으로 표현된 Object 객체를 전달하여 객체의 Property 와 값으로 CSS 스타일 변경 (,)로 구분

---

[세미 팀플]

 

1번째 안 메인페이지. (팀원 의견 반영)

> 디자인 4개 각 크롤링 후 나한테 압축 파일 보내기(에러는 본인들이 잡아서)

> 완료 후 ppt 기획서 만들기

> 이번 주 토요일 공부 후 세부 기능 회의 (버튼 별 액션, 페이지라던지.. 간략하게)

> 기획서 완료. 

---

- 스터디 계획 및 결과 - 

=> jQuery 코드 리뷰와 js쿠키 개념 중요

=> eq, filter, jQuery 객체 생성 및 표기법