[Node.js] socket.io 로 채팅방 만들기
·
개발/node.js
1. node 초기 설정 터미널에서 package.json만들기 npm init -y express, nodemon, socket.io 설치 npm i * package.json 에서 script부분 빼고 날린다음 스크립트에 "start" : "nodemon 경로"추가 package.json에서 start말고 다른걸 실행시킬때에는 npm run dev 2. socket.io 웹소켓과 클라이언트가 양방향 통신할수 있게 도와주는 소켓io socket.io란? 실시간 웹을 위한 자바스크립트 라이브러리 웹 클라이언트와 서버간의 실시간 양방향 통신을 가능하게 해주는 node.js 모듈 가상화폐 거래소 같은 데이터 전송이 많은 경우 빠르고 비용이 싸게 표준 웹소켓을 사용하는게 좋다. 실제 업비트나 바이낸스 소켓 A..
[30일 챌린지 Day-6] 검색, json 활용
·
개발/html, css, js
1. 기본값 Filter for a city or a state 2-1. 결과값 Filter for a city or a state 2-2 Filter for a city or a state 3. 리뷰 2-1 : fetch로 data 받아올때 ... 을 썼다. ... : 배열안에 요소가 있다면 요소만 추출하고 없다면 삭제한다. cities 에 정규표현식을 이용하여 정규표현식에 만족한다면 그 단어를 filter로 뽑아냄 numberWithCommas 안에 있는 정규식 : 3번째 숫자마다 , 를 입력함. 구글링 해보면 바로 나온다. displayMatches function에서 city와 state에 만족한다면 그 값에 클래스를 넣어주는 span을 HTML로 작성하여 넣어주고 그 값들을 li를 만들어 넣어준..
[Node.js] 삭제, 수정버튼 만들기
·
개발/node.js
1. delete 버튼 만들기 url 요청에서 파라미터를 뽑을수 있는데 req요청의 값을 이용할 수 있다. /:id 이런식으로 작성 params : 매개변수 http://localhost:4000/delete/1 이런 방식이면 /delete/:id 이 주소에서 id가 params 키값이고 실제로 요청한 url의 /:id 이자리에 있는 값이 value이다. {params:{id:1}} 그래서 이렇게 값을 받을수 있다. /delete/:id/:pw/:con 이런식으로 여러개의 값을 받을수도 있다. AUTO_INCREMENT 는 컬럼을 추가할때마다 값이 자동으로 증가한다. UPDATE와 ALTER 차이점 UPDATE의 데이터 명령어는 데이터 베이스의 관계에 저장된 데이터를 수정하는것 ALTER는 데이터베이스의..
[30일 챌린지 Day-5] flex, classname 추가 활용
·
개발/html, css, js
1. 기본값 Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion 2. 결과 Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion 3. 리뷰 flex 를 통해 크기를 조절할수 있다. 5개의 panel에 flex 1을 준상태에서 클릭시 flex5로 바꿔준다면 상대적으로 커지게 된다. display : flex를 통해 가로로 배치했다. toggle을 통해 open 클래스가 있다면 클래스제거 없으면 클래스추가를 했다.
[30일 챌린지 Day-4] 배열,객체 알고리즘
·
개발/html, css, js
콘솔을 비교해보며 해보세요 1. 기본값 Psst: have a look at the JavaScript Console 💁 2. 결과 Psst: have a look at the JavaScript Console 💁 3. 리뷰 pre = pre.passed - pre.year || pre 부분 || 는 if문과 비슷하게 해석하면 된다. ||의 앞에있는 부분이 undefined, null 등 오류가 아니라면 앞의 값을 출력하고 뒤에 있는 부분이 오류가 아니라면 뒷부분을 출력한다. 둘다 오류가 아니라면 앞의 값을 출력한다. sort함수 내에서 [aLast, aFirst] = a.split(", ") 부분 해당 부분은 구조분해 할당을 이용했다. split으로 ", "를 기준으로 이름을 2개의 값을 가진 배열로 ..