today_is

주제 :    편의점 웹 사이트 만들기 (spring MVC 프로젝트)   [ 기획단계  -  UI프로토타이핑 담당 ]  : draw.io 이용  대학교 과제에서도 PPT , 문서작성 등을 담당했었기 때문에, 디자인에 대한 부담감이 덜했다. 팀원들을 위해서 요소 배치까지 고려해서 기획했다. 여러 웹 사이트를 참고하면서 약 20페이지 정도 만들었다.      [ 데이터 수집 담당  -  데이터 크롤링 ]   GS25 웹 사이트를 구현하기 위해서는상품 데이터와 매장 데이터, 총 2개가 필요했다.     1) 상품 데이터 추출 :  파이썬 크롤링   [ 웹 페이지 로드 ]1 ) 목록 페이지(url)를 열기2 ) 전체 상품을 먼저 펼쳐 놓기목록 페이지에 "더보기" 버튼이 없어질때까지 더보기 버튼 클릭(총 5개있..

프로젝트시에만 사용할 오라클 계정을 새로 생성해보자  오라클 계정 생성하는 방법  VMware 접속하여, 터미널을 열어서 명령어 작성-> 작성해야할 명령어에 대해서만 나열하겠습니다 !!  명령어명령어에 대한 결과. oraenvThe Oracle base has been set to /기본 설치 디렉토리create user 계정명 identified by 비밀번호;User created.grant connect, resource, dba to 계정명;Grant succeeded        유저 생성과 권한까지 부여가 완료되었다면, SQL Developer 실행-> 생성한 계정으로 접속을 해본다 !  vmware에서 작성한 계정명과 비밀번호를 각각 사용자 이름, 비밀번호에 기입하고세부정보까지 작성해준다음에..

오늘의 목표 웹소켓으로 다른 사람과 채팅을 해보자.  STOMP STOMP는 Simple Text Oriented Messaging Protocol의 약자이다. 간단한 메시지를 전송하기 위한 프로토콜로 메시지 브로커를  publisher - subscriber 방식을 사용한다. 메시지의 발행자와 구독자가 존재하고 메시지를 보내는 사람과 받는 사람이 구분되어 있다. 메시지 브로커는 발행자가 보낸 메시지를 구독자에게 전달해주는 역할을 한다. STOMP는 HTTP와 비슷하게 frame 기반 프로토콜 command, header, body로 이루어져 있다.   설정 파일 servlet-context.xml: prefix 지정하기 ( web socket message broker prefix / web socke..

오늘의 목표 웹소켓으로 간단한 메모장을 만들어보자 Ajax 와 Web socket 의 차이 : 연결의 지속성에 따라 둘을 구분한다 클라이언트와 서버가 통신할 때 HTTP 통신을 주로 사용한다. HTTP 통신은 다음과 같은 특징이 있다. 비연결성 (connectionless) : 연결을 맺고 요청을 하고 응답을 받으면 연결을 끊어버린다. 무상태성 (stateless) : 서버가 클라이언트의 상태를 가지고 있지 않는다. 단방향 통신이다. 이러한 HTTP 통신의 경우 채팅과 같은 실시간 통신에 적합하지 않다. 물론 HTTP 통신으로 실시간 통신을 흉내낼 수는 있으나 완벽하지는 않다. 실시간 통신이 필요할 때 사용하는 통신을 소켓 통신이라고 한다. HTTP 통신과 다르게 연결을 맺고 바로 끊어버리는 게 아니라 ..

오늘의 목표  같은 형식의 테이블 구조를 가지고 있는두개 이상의 컴퓨터 DB의 내용을 공유해보자      home.jsp  미리 const urls 에 DB데이터를 전달받고 싶은 ip주소를 기입해둔다 !! 지금은 나와 같은 실습 중인 컴퓨터들의 DB데이터를 보는 경우이기 때문에 프로젝트명까지 똑같이 기입해주자 !! ( /day13/schedules )      유의할 점 : 콜백함수가 계속 중첩되면 관리하기 힘들다 ! 콜백함수란, 다른 함수에 전달되는 함수day13 일정 추가하기 일정 추가 localhost 나 7번 자리 24번 자리    function.js  // HTML 문서를 불러오지 않아도 설정할 수 있는 전역변수 및 함수 정의..

오늘의 목표다중 필터를 이용하여, 여러개의 조건에 대한 결과를 출력하자 (OR 조건) 배열에 사용할 수 있는 함수함수기능arr.forEach단순 반복arr.filter조건 필터arr.toSorted정렬arr.map재구성arr.slice잘라내기arr.includes포함여부 확인    코드 해석  [ 다중필터 ]boxList 는 check box의 내용을 모두 불러온것 (querySelect 로 불러온건 모두 nodeList)->   const boxList = document.querySelectorAll('div.left > label >  input[type="checkbox"]') 배열에서 원하는 속성만 가져오거나,  별도의 속성을 추가해서 가져올때 Array.map 사용map 을 이용하여 name ..

오늘의 목표다른 웹서버에 있는 데이터를 이용하여 원하는 형식대로 데이터를 출력해보기 script 코드는 vscode 로 작성해보자  이미지 출력해보기  AJAX 화면 구현      전체 목록 출력하기 + (페이징)  posts 번호 제목       개별 보여주기  전체 목록 중에서 하나를 선택하면 (a 태그를 이용하여 페이지 이동) 이때, id 를 받아와서 개별 출력  post.html ..

오늘의 목표 json 파일을 이용하여, 화면 구현해보자     01   관련 기초 문법 익히기   element div 를 이용하여 데이터를 미리 구성해둔 다음,그 데이터를 출력하는 방법에 대해 배워보기 element.html 이지은 31 홍진호 42 나단비 5    appendChild appendChild() : 새로운 요소를 추가하는 방법 6_appendChild.html     02    데이터를 직접 넣고 화면에 출력해보기   7_ JS 화면 구현 ..