본문 바로가기
레거시

2021.12.28의 기록

by GroovyArea 2021. 12. 28.

 

- 오늘의 평가 및 느낀점 - 

=> ㅎㅇㅎㅇ 오늘도 6:30 기상 넘무 피곤하다. 하지만 카페인은 자제한다. 피로 누적 되어서 더 피곤해진다. 운동 마치면 오히려 더 졸리다. 하지만 이거라도 안하면 밥을 못 먹는다.. 더 시간 애껴야지.. 

스터디형 말대로 쪽잠 15분 정도 잤더니 개운하다. 자주 이용할 것.

졸리다. 아까 회의를 했는데 생각보다 너무 열심히 참여해줘서 고마웠다. 따로 말하지 않은 것도 해오시니까 너무 기특하다. 나도 더 열심히 해야겠다. 안주하지 말고 취업 꼭 하자.

[ 채용 사이트 참고하자 ]

Wanted나 LinkedIn 로켓펀치 플랫폼, 사람인에서 만든 IT 구직용 플랫폼 점핏, 인크루트
https://www.wanted.co.kr/wdlist/518/660?country=kr&job_sort=company.response_rate_order&years=0&locations=seoul.all&locations=gyeonggi.seongnam-si

 

- 오늘 공부 계획 -

  • 자바스크립트 복습
  • 팀 회의 (2차 정기 모임 디스코드(화상 요망))
  • JVM 구조 및 접근 지정자 공부
  • 갑자기 생겨난 파일입출력 공부 오히려 좋아.. =>난 눈으로만 보면 모른다. 구체적으로 코드를 쳐보는 거로 바로 실행한다.

 

- 공부 내용 - 

 

=> 첨자중에 1부터 시작하는건 [오라클] 밖에 없다.

자바스크립트

Number 클래스 함수

  1. 숫자값을 저장하는 객체를 생성하기 위한 클래스 함수 - 객체에 대한 프로퍼티와 메소드 제공받음
  2. Number.toString([radix]) : Number 객체에 저장된 숫자값을 원하는 진수의 문자값으로 변환하여 반환하는 메소드 ⇒ 진수값이 전달되지 않은경우 10진수의 문값으로 변환하여 반환
  3. 객체 변수 출력 시 toString() 메소드 자동 호출
  4. 자바스크립트는 모든 값을 객체 관점으로 처리
  5. ⇒ number 자료형은 내부적으로 Number 객체로 처리
  6. ⇒ Number 자료형의 변수도 Number 클래스 함수에 선언된 프로퍼티와 메소드 사용 가능
  7. Number 자료형의 변수에는 프로퍼티 또는 메소드 추가 불가능 - 에러 발생
  8. Number 클래스 함수는 문자값을 전달 받아 숫자 값으로 변환하여 반환 - NaN 발생 가능

String 클래스 함수

  • 문자값을 저장하는 객체를 생성하기 위한 클래스 함수 - 객체에 대한 프로퍼티와 메소드 제공
  • String.toString() : String 객체에 저장된 문자값을 반환하는 메소드 (생략 가능함)
  • String 객체에 저장된 문자값 중 첨자(index) 위치의 문자를 가져옴
  • 문자값은 내부적으로 배열 처리되므로 [ ] 연산자에 첨자를 사용하여 문자 표현 가능
  • String.indexOf(search) : String 객체에 저장된 문자값에서 전달값을 검색하여 시작첨자를 반환
  • replace(search, replace), toUpperCase(), toLowerCase(), subString(), split()
  • substr(from, length) : String 객체에 저장된 문자 값에서 시작첨자부터 원하는 갯수의 문자값을 분리하여 반환하는 메소드
  • String 자료형은 내부적으로 String 객체로 처리 ⇒ string 자료형의 변수는 String 클래스 함수에 선언된 프로퍼티 또는 메소드 사용 가능

Date 클래스 함수

  • 날짜와 시간을 저장하는 객체를 생성하기 위한 클래스 함수 - 객체에 대한 프로퍼티와 메소드 제공
  • 클라이언트 플랫폼(OS)의 현재 날짜와 시간이 저장된 Date 객체 생성
  • Date.toString() : Date 객체에 저장된 날짜와 시간을 문자값으로 변환하여 반환하는 메소드
  • Date.setXXX(Value) : Date 객체에 저장된 날짜와 시간 중 원하는 값을 반환하는 메소드
  • toLocalDateString(), getTime()

Math 클래스 함수

  • 수학 관련 프로퍼티와 메소드 제공하는 클래스 함수
  • Math.PI : 원주율이 저장된 프로퍼티
  • Math.ceil(), floor(), round(), pow()

JSON 클래스 함수

  • JSON 관련 프로퍼티와 메소드를 제공하는 클래스 함수
  • JSON.stringify(object) : 자바스크립트 객체를 전달받아 JSON 형식의 문자값으로 변환하여 반환 ⇒ AJAX 기능으로 웹프로그램 요청 시 자바스크립트 객체를 문자값으로 변환하여 전달 할 때 사용
  • JSON.parse(string) : JSON 형식의 문자값을 전달받아 자바스크립트 객체로 변환하여 반환하는 메소드 ⇒ AJAX 요청에 의해 응답받은 결과가 JSON 형식의 문자값인 경우 자바스크립트 객체로 변환하기 위해 사용

BOM(Browser Object Model) - window 객체

  • BOM : 브라우저를 기반으로 제공되는 자바스크립트 객체
  • window 객체 : 브라우저를 객체로 표현하여 프로퍼티와 메소드 제공
  • window.alert() : 메시지창 제공해 메시지 출력하는 메소드 window 생략 가능
  • window.prompt() : 입력창 제공하여 사용자에게 값을 입력 받아 문자
  • window.confirm() : 확인창 제공하여 선택값 (취소: false, 확인 : true)
  • open() : 새로운 브라우저(창)을 생성하여 요청 문서(프로그램)의 응답결과를 제공받아 출력하는 메소드
  • close() : 브라우저(창) 을 종료하는 메소드

BOM(Browser Object Model) - screen 객체

  • screen 객체 : 브라우저 출력장치를 객체로 표현하여 프로퍼티와 메소드 제공
  • width(), height(), moveTo(), resizeTo(), moveBy()

BOM(Browser Object Model) - navigator 객체

  • navigator 객체 : 브라우저 엔진을 객체로 표현하여 프로퍼티와 메소드 제공
  • navigator.appName : 브라우저 엔진명 저장 프로퍼티
  • navigator.appVersion : 브라우저 엔진버전을 저장한 프로퍼티
  • navigator.userAgent : 브라우저 엔진을 저장한 프로퍼티

BOM(Browser Object Model) - location객체 (요게 제일 중요하다)

  • location 객체 : 브라우저의 URL 주소를 입력하는 영역을 객체로 표현하여 프로퍼티와 메소드 제공
  • location.href : location 객체의 URL 주소를 저장한 프로퍼티 ⇒ 프로퍼티 저장 값을 변경하면 브라우저 주소 입력 영역의 URL 주소 변경 ⇒ 변경된 URL 주소의 웹문서(웹프로그램)를 요청하여 결과를 응답받아 출력 - 페이지 이동 ⇒ 요게 제일 중요하다. HTML 에서 a태그 form 태그다
  • location.reload() : 현재 요청 웹문서(웹프로그램)를 재요청하여 결과를 응답받아 출력 - 새로고침(F5)

BOM(Browser Object Model) - document객체 (가장 중요)

  • document 객체 : 요청 웹문서(웹 프로그램)의 응답 결과를 출력하는 영역을 객체로 표현하여
  • 응답 결과를 출력하는 영역에서는 박스모델(태그)을 document 객체의 하위 객체(Element 객체)로 표현하여 처리 - DOM(document object model) (굉장히 중요) ⇒ 이벤트가 발생될 경우 Element 객체를 조작하여 동적인 페이지 제공 - DHTML(Dynamic HTML)
  • document.write(html) : HTML 태그를 전달받아 응답 영역에 출력하는 메소드

DOM(Document Object Model) - onload 이벤트

  • 이벤트(Event) : 태그(박스모델 - Element 객체)에 관련된 사건
  • 태그에서 이벤트가 발생될 경우 실행될 명령을 자바스크립트로 작성하여 이벤트 처리
  • 이벤트 처리 명령 중 동적인 페이지를 구현하기 위해 DOM Tree가 완성된 후 DOM Tree 조작하여 실행
  • DOM Tree : document 객체를 기반으로 태그를 Element 객체로 표현하여 트리(Tree) 형식의 계층적 구조로 표현하는 방법
  • DOM Tree는 웹문서의 태그를 모두 읽은 후 완성 - onload 이벤트
  • 태그의 onload 이벤트 속성 : 태그(자식 태그 포함)가 DOM Tree에 포함된 경우 발생되는 이벤트 ⇒ 속성 값으로 이벤트 처리 명령을 자바스크립트로 작성 - 함수(이벤트 처리 함수) 호출
  • 브라우저의 메모리에 올려진 DOM 후 HTML 출력
  • 자바스크립트 객체의 이벤트 관련 요소에 이벤트 처리 함수를 저장 - 이벤트 처리 함수 등록 → window.onload=function() { } (로드가 다 되었다면~ 함수를 실행해) window보다 document를 완성시키는게 더 중요
  • ⇒ 객체에서 이벤트가 발생될 경우 이벤트 처리 함수가 자동 호출되어 이벤트 처리
  • script 태그는 body 태그의 마지막 자식 태그로 사용 가능. ⇒ onload 관련 이벤트를 사용하지 않아도 DOM Tree 조작 가능 (이미 body 위까지 다 로드 되었기 때문이다. / 가독성도 더 좋음) 좀 더 빠름

DOM(Document Object Model) - Element 객체

  • Node : 태그(Tag Node)와 태그 내용(Text Node)을 포현하는 객체 ((Dom tree)를 통해 구성된 모든 것)
  • Element : 태그(Tag Node) 만을 표현하는 객체
  • Node가 상위 개념 (상속?)
  • document.getElementById(id) : 태그의 id 속성값으로 태그를 검색하여 Element 객체로 반환하는 메소드 (개중요) - 태그 하나만 검색하여 Element 객체로 반환 ⇒ Document 객체 대신 Element 객체를 이용하여 태그 검색이 가능. (프로퍼티와 메소드를 상속 받을 수 있음 어거지로 노드도 상속 가능)
  • Node.nodeName : Node(Element) 객체의 노드명(태그명)을 저장한 프로퍼티
  • Node.nodeValue : Node(Element) 객체의 노드값 (태그 내용)을 저장한 프로퍼티 (엘리먼트이니까 텍스트노드는 없다 내용이 없다)
  • Node.firstChild : Node(Element) 객체의 첫번째 자식 객체(Node 객체)를 저장한 프로퍼티 (텍스트노드(#text)도 포함 그래서 자식임 )

[세미팀플]

 

-> 각자 내준 JDBC 프로그램 토요일까지

 

계획 (모임) 디스코드 화상 완료

 > 팀 이름 정하기
 > 사이트 확실히 정하기
 > 역할 분담

   - 상대적으로 쉬운 것 : 회원가입 / 로그인 

   - 상대적으로 어려움 : 장바구니 / 주문하기(강사님이 안 알려줄 예정) / 관리자 페이지
 > 한번에 적어놓은 기능들 보면서 뭘 넣을지 딱 정해놓기

 

> erd 그리는 툴 : http://aquerytool.com/
> BootStrap : https://themewagon.com/theme-price/free/page/2/?swoof=1&really_curr_tax=40-pa_price

> 하이라이트 / 향수 컬렉션 / 여성 / 남성 / 바스 & 바디

> DB설계 고민 좀 해보자. 참조 관계 ERD 공부 필수

> DAO만 잘 이해시키자. 

 

초기 역할 ver.1

SH : 5개니까 1파트 같이 하자.

장바구니, 결제(페이지), 개인페이지

DH : 빡세지는건 쩔수. 4개 파트로 나누는게 낫다.

페이지(제품, 메인), 회원가입, 로그인

NY : SJ : 이하동문

관리자 게시판 (공지사항, 리뷰(상품마다), 고객문의) / 공용 게시판 (공지사항, 리뷰(상품마다), 고객문의) (같으니까)

 

사이트 ver.1

SJ : 크롤링 됫는데 약간에러가 뜸 기본 천줄. 사이트는 깔끔하고 괜찮음

http://www.cleanisland.co.kr/

SH : 크롤링 됫는데 약간에러가 뜸 기본 천줄 . 사이트는 깔끔 괜찮.

https://www.worldperfume.co.kr/

DH  : 괜찮네. 크롤링 했는데

https://html5up.net/ → 디자인 참조

NY : 크롤링 대신 템플릿 카르마 콜로

다운받아서 코드 볼게요

 

기능 ver.1

<넣고싶은 기능>

  • 쿠폰 발급기능(신규회원) 일정 가격 이상 구매 시 적용
  • 장바구니주문번호 자동생성 이미지 클릭시 상품정보 페이지로 이동 쿠폰적용시 가격
  • 오시는길매장 위치 표시(홈페이지 하단에는 글씨로만 표시)
  • 상품화면재고 표시
  • 이벤트출석이벤트
  • 마이페이지마일리지 적립액 표시
  • 고객문의관리자만 볼 수있도록 비공개 설정
  • 상품화면커서 갖다대면 사진 확대
  • 메인 화면에 영상이 나오게 하는 기능

팀명 ver.1

  • DH : 향기나조~
  • SH : 향수좋죠
  •  

- 스터디 계획 및 결과 - 

>  js 클래스 함수 코드 리뷰. onLoad를 잘 이해하기 / 노드와 엘리먼트의 큰 차이/ 노트 트리 그려보기

반응형

'레거시' 카테고리의 다른 글

2021.12.31의 기록  (0) 2021.12.31
2021.12.30의 기록  (0) 2021.12.30
2021.12.29의 기록  (0) 2021.12.29
2021.12.27의 기록  (0) 2021.12.27
2021.12.26의 기록  (4) 2021.12.26

관련글

티스토리툴바