목록전체 글 (142)
코딩 노트
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/H4S7Z/btsyTs4m1ES/pnLMJeX1vFULWrNZa7cAck/img.png)
http가 없으면 websocket가 있을 수 없다. http 주소와 websocket 둘이 기반이 다르면(주소가 다르면) 안 된다. 지금의 문제점 1. 주소가 꼭 ws로 시작해야되나? 어차피 http 기반이면 주소도 안 겹치게 만들어놨는데 그냥 대충 http로 시작하게 알아서 접속해줬으면... 2. 구버전 브라우저에서 웹소켓이 안 되는데... 그러면 아쉬운대로 Pulling 방식으로라도 흉내낸다면 사용자는 좀 더 좋아하지 않을까? 3. 갑자기 종료되는 사용자 중에 체크가 안 되는 것들이 있다. (Dead connection) 주기적으로 사용자가 접속해있는지 체크하도록 처리하고 싶다. (라이브 핑을 보낸다/대화 목적이 아님 확인 목적) -- 이 세가지를 해결해주는 기술이 SockJS이다. 윈도우에 만드는..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/1wFoq/btsyQLgS7tV/4rAcuVWE1fOnqMdEvlupK0/img.png)
spring2 websocket 패키지 생성 WebSocket 통신의 발전 1. 비동기 통신 2. pullung 방식 3. long-pulling 방식 4. websocket 방식 - 기본 Websocket - SockJS(Spring가 체택한 기술) / Socket IO(NodeJS가 체택한 기술) - STOMP(위 두 개와 아예 다름)(난이도 있음) 2, 3번의 방식은 비동기 통신이다. websocket 패키지 생성 DefaultWebSocketServer 클래스 생성 /* 스프링에서 웹소켓 연결을 처리하는 도구(서버) - 상속을 통해 클래스를 구현 (WebSocketHandler / TextWebSocketHandler / BinaryWebSocketHandler) 텍스트는 글자, 바이너리는 파일이..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bYg0Ky/btsyIJZaLdM/XUykXsl4BkI4l0UwRSPGU0/img.png)
정리 반응형 웹이란 디바이스의 디스플레이의 종류에 반응하여 그에 맞도록 적절하게 UI 요소들이 유기적으로 배치되도록 설계된 웹을 말한다. body 태그 아래에 script를 작성하는 것을 레이지로딩이라고 한다. 로딩 시간을 줄이는 방법이다. 비주얼스튜디오에서 f1을 누르고 format document를 누르면 자동 정렬이 된다. 07.layout.html 생성 //전체적인 테마 색깔 KH정보교육원 //왼쪽 상단에 나오는 로고 //이 버튼을 누르면 메뉴를 아래로 떨어트려라 //margin 왼쪽을 auto로 //실제메뉴 Home //active는 활성화 클래스이다.(어디위치인지 보여주는) (current) Features Pricing About //드롭다운 메뉴 Dropdown Action Another ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/kJZi7/btsyEShOZZH/1eKaqETUBp75KtuIH6OG51/img.png)
responsive.html 파일 생성 DOCTYPE html> 반응형 CSS 디자인 body { height:1000px; background-color: #ffcccc; } h1 { font-size: 32px; } /* 폭을 이용한 조건부 디자인 */ @media screen and (max-width:860px) { body { background-color: #ea8685; } h1 { font-size: 24px; } } @media screen and (max-width:660px) { body { background-color: #f7d794; } h1 { font-size: 24px; } } KH 정보교육원 풀스택 개발자 양성과정 디자인 수업자료 00.template.html 생성 doc..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dVyOPo/btsyET8vg6Z/RzPiDUa1KsKwvFK7ndoUnK/img.png)
HTTP 쿠키(Cookie)란? - 클라이언트에 저장되는 key=value 데이터 저장소 - 보안과 별 상관없는 홈페이지의 정보를 저장하는 목적으로 사용 - 한글은 저장 불가하며, 오직 문자열만 저장 가능 - 크기 제한이 존재(256 byte) spring19cookie 프로젝트 생성 후 properties 설정 # project setting file # key=value #sever setting #server.servlet.context-path=/khacademy ##server.port=9999 #view resolver setting spring.mvc.view.prefix=/WEB-INF/views/ spring.mvc.view.suffix=.jsp # database setting spri..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/kyohh/btsyETMVS3k/xaNCAjPSN4tTaoaDwMp7k1/img.png)
암호화 로그인 SecureMemberDao에 구문 추가 SecureMemberDto selectOne(String memberId); SecureMemberDaoImpl에 구문 추가 //단일조회 @Override public SecureMemberDto selectOne(String memberId) { SecureMemberDto dto = sqlSession.selectOne("secureMember.find",memberId); return dto; } MemberLoginTest 파일 생성 @Slf4j @SpringBootTest public class MemberLoginTest { @Autowired private SecureMemberDao dao; @Test public void test(..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bYNUnv/btsytQEePSF/mw6FrxanDobbYyigKMGMV1/img.png)
spring17member 프로젝트 생성 후 resources 폴더 하위에 properties 파일 수정 # project setting file # key=value #sever setting #server.port=9999 # database setting spring.datasource.driver-class-name=oracle.jdbc.OracleDriver spring.datasource.url=jdbc:oracle:thin:@localhost:1521:xe spring.datasource.username=C##home spring.datasource.password=home spring.datasource.hikari.data-source-properties.oracle.jdbc.timezo..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/lC1Se/btsylZ16mZt/HcwHKcSroKfAiIAKkupVY0/img.png)
Book 테이블 복합검색 구현 도서에 대한 복합 검색 구현 도서에 대한 복합 검색 구현 - 도서 코드(bookId)는 정확하게 일치하는 경우를 검색 - 도서 제목(bookTitle)은 유사한 경우를 검색 - 도서 저자(bookAuthor)는 유사한 경우를 검색 - 출간일은 시작일(bookPublicationBegin)과 종료일(bookPublicationEnd)를 입력하여 구간 검색 - 판매가는 최저가(bookPriceMin)와 최고가(bookPriceMax)를 입력하여 구간 검색 - 출판사(bookPublisher)는 유사한 경우를 검색 - 페이지 수는 최소(bookPageMin)와 최대(bookPageMax)를 입력하여 구간 검색 - 장르는 주어진 리스트(bookGenreList)에 포함되어 있는지 ..