전체 글

[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

iterm2 테마 변경후 폰트 깨짐 해결/폰트 변경

결론: 깨짐이 없는 폰트를 다운받자 iTerm2를 다운받고 좀 더 예쁘게 쓰고싶어서 테마를 변경하던중, 현재 작업중인 브랜치를 보여준다는 zsh테마를 변경했다. ZSH_THEME="agnoster" 로 변경하면 브랜치가 뜬다고 했는데... 이거먼데..왜 화살표가 안뜨고 깨지는건데... 폰트 문제인것 같아서 폰트를 바꿔주기로 했다. iTerm2 -> Preference -> Profiles -> Text 로 들어가서 폰트를 변경 할 수 있다. 기본으로 Monaco라는 폰트로 설정되어 있었는데 기본으로 뜨는 다른 폰트들을 적용 해 보아도 변함없이 깨졌다. 한글이 지원되는 폰트를 다운받아서 설치해보았다. 그러니까 바로 잘 나타났다. 깃 작업환경에서 브랜치를 나타내는 문자도 깨짐없이 잘 뜬다. 네이버 D2 Co..