hidden을 활용하여 다중 필터 기능을 구현해볼 것이다.배열에 사용할 수 있는 함수함수기능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 속성에 있는 데이터에서 a 를 지우고(replace) ..

힘들고 험난했지만, 정말 다시는 겪지 못할 만큼 재밌었던 팀원들 과의 프로젝트가 끝이났다. 거의 한 달 가량을 매일 붙어서 프로젝트를 진행하다 보니까팀원들과 상상 이상으로 친해져서 끝난 후에 같이 피크닉도 다녀왔다. 처음 팀이 만들어졌을때는 이렇게 자주 만나서 놀고 할 정도로 친해질 줄은 몰랐는데...  이때가 딱 봄이라서 벚꽃 구경도 할 겸 같이 만나서 피크닉도 즐겨줬다.  놀러가기 전 단백질 보충도 충분히 해주었다. ㅎㅎ  내가 팀에서 막내라 그런지 매번 챙김을 받기만 한 것 같아서조금 미안하고 고마웠다... 처음 시작할때는 아직 사이도 어색하고, 우리가 정한 주제이지만 잘 해낼 수 있을까?라는 생각이었다. 하지만 프로젝트를 진행하면서 팀원들이 전부 의욕 넘치게 다 도와주고, 의견을 주고받으니힘든게 ..

내가 맡은 역할 중 실시간 1:1 채팅 기능이 있다.이미 STOMP 프로토콜을 활용한 채팅 구현을 해본 경험이 있기 때문에,처음엔 별로 대수롭지 않게 생각했었다. 하지만 그건 나의 엄청난 오만이었다. 실시간으로 채팅을 하는 시스템은 비슷하지만 저번에 했던 채팅은 단순한 단체 채팅방 이고,이번 프로젝트에 필요한 기능은 관리자와 고객들의 1:n 관계 채팅 시스템이다. channel 생성 부터 구독 하는 것까지 엄청 골머리를 썩혔지만 결국 해결해냈다. 그럼 내가 이 난관을 어떻게 극복했는지 한 번 적어보겠다.유저 채팅 채널 생성 일단 관리자가 아닌 일반 사용자의 입장에서 채팅 icon을 클릭하면 해당 유저의 고유키인 "userid"를 이용해 독단적인 채널을 생성하게 했다. "사용자 마다 각각 다르게 개별적으로..

이번에 spring 팀 프로젝트를 시작하게 되었다. 오늘은 팀 프로젝트에서 사용할 DB인 Oracle의 계정을 새로 만들어 보자.Oracle 계정 생성하기사전에 VMware에 linux 환경이 구축되어 있고, Oracle도 당연히 설치가 되어 있어야한다. VMware에 접속한 후 터미널을 열고 명령어를 작성해 준다.명령어명령어에 대한 결과. oraenvThe Oracle base has been set to /기본 설치 디렉토리create user 계정명 identified by 비밀번호;User created.grant connect, resource, dba to 계정명;Grant succeeded 유저 생성 및 권한 부여가 완료되었으면, SQL Developer를 실행한다.> 방금 생성한 계정으로 ..

저번 메모장 기능 구현에 이어 이번에는 실시간 채팅을 한 번 만들어 볼 것이다.실전에 들어가기 앞서, 이번 채팅 구현에 있어서는 stomp에 대해서 알고 이 녀석을 사용해 줄거다. STOMPSTOMP란, Simple Text Oriented Messaging Protocol의 약자이다.간단한 메세지를 전송하기 위한 프로토콜로 메세지 브로커를 publisher - subscriber 방식을 사용한다.메세지의 발행자와 구독자가 존재하고 메세지를 보내는 사람과 받는 사람이 구분되어 있다.메세지 브로커는 발행자가 보낸 메세지를 구독자에게 전달해주는 역할을 한다.STOMP는 HTTP와 비슷하게frame 기반 프로토콜 command, header, body로 이루어져 있다. 사전 설정servlet-context.x..

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