Web

[JS] 1. Form Validator

Udemy에 올라와있는 20 Web Projects With Vanilla JavaScript 코스를 구매하였습니다. 리액트를 공부하고 개인 프로젝트를 해 보며 면서 JS 기초를 보강할 필요성을 느꼈기 때문입니다. 총 20개의 미니 프로젝트를 진행하는 강좌입니다. 하루 1~3개 정도의 프로젝트를 해 볼 예정이고 이 카테고리는 강의를 들으며 공부한내용을 정리하는 포스팅입니다. 프로젝트 설명 첫 프로젝트는 폼 벨리데이터입니다. HTML form으로 인풋을 받아와 js로 적절성 검사를 진행합니다. 인트로 프로젝트이니만큼 간단한 html,css,js를 소개합니다. 폼을 작성하고 Submit버튼을 누르면 검증 결과가 보여집니다. 조건에 맞게 올바르게 입력되면 input 영역 테두리 색이 초록색, 그렇지 않으면 빨..

[Github] ssh 인증 방식으로 변경하기

8월 13일부터 기존의 패스워드 인증방식 지원을 중단한다고 이전부터 알림 메일이 왔다. 하지만 그동안 읽지 않았음 그러다 대체공휴일인 16일까지 푹 쉬고 다시 공부한걸 저장하는데 안된다는 메세지가 뜸. 이제부턴 개인 토큰을 사용해야 한다고 한다. 메세지에 뜨는 링크를 따라가면 토큰을 발급하는 과정을 쉽게 따라할 수 있다. 그런데 기존에 커밋만해두고 푸쉬해두지 않은 리파지토리가 있는데 어쨌거나 이 커밋부분을 다 푸쉬해야 하는 상황. 기존 https방식으로 클론된 리파지토리를 ssh인증으로 변경해야 했다. 1. remote 브랜치 연결 $ git remote -v https 주소로 연결되어있는 원격 저장소를 ssh로 바꿔주어야함. 해당 저장소의 ssh주소는 깃허브의 해당 리파지토리로 들어가면 확인 가능 이후..

[socket.io] room에 join한 socket이 몇개인지 확인하기

socket으로 구현한 채팅방에 총 참가자 수를 구현하려고 한다. 추후에는 따로 배열이나 디비를 생성해서 관리를 할 것이지만 socket.io에서 제공하는 api가 있을것 같아 찾아보았다. socket.io의 room은 adapter로 구현이 된다. Adapter는 서버사이드 컴포넌트로 소켓과 room들의 관계를 저장하고 모든 클라이언트에게 이벤트를 브로딩캐스팅 하는 역할을 한다. 어댑터는 sids, rooms라는 두개의 Map객체가 있는데 이중 rooms 활용하여 특정 room에 참여한 소켓들을 확인 해 볼것이다. Map과 Set은 자바스크립트의 오브젝트 유형인데 오브젝트라고 생각하고 봐도 아래 내용 이해에 문제는 없을듯하다. Map,Set에 관한 MDN설명 : https://developer.mozi..

리액트, socket.io 채팅 구현하기

리액트와 socket.io, node.js를 활용하여 간단하게 채팅기능을 구현 해 보았습니다. 클라이언트 구현하기 리액트 컴포넌트 구조 각각의 메세지는 message컴포넌트, message들과 입력창을 담은 messages컴포넌트, messages를 담은 chatBox컴포넌트로 제작하였습니다. 소켓 설치방법 npm i socket.io-client npm으로 설치한 후 소켓을 설정합니다. 클라이언트 소스코드 //index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './app.jsx'; import { io } from 'socket.io-client'; const ..

[리액트 훅] useState()를 이용하여 state변경하기

리액트 훅의 useState()로 상태 변경 하기 간단하게 form을 이용하여 유저 정보를 입력 받고 등록된 유저들을 리스트로 출력한다. //app.jsx import './app.css'; import React, { useRef, useState } from 'react'; const App = () => { const [users, setUsers] = useState([ //users의 초기값 = 기존 유저들 정보의 배열 { name: 'Mina', number: '1234' }, { name: 'bob', number: '5678' }, { name: 'Minsoo', number: '9012' }, ]); const name = useRef(); //form의 input을 받을 변수 const..

node js 실습 - 사진 분류하기

nodejs-photoscript 확장자 혹은 수정 여부에 따라 사진, 동영상을 분리합니다. 실행방법 node photo 폴더명 node photo 폴더명 스크린샷 확장자 .png 혹은 .aae -> captured 수정된 사진의 원본 사진 -> duplicated 동영상 확장자 .mov 혹은 .mp4 -> video