전체 글

웹소켓 과 SSE(Server-Sent-Event) 차이점 알아보고 사용해보기

최근에 어떤 이벤트가 생겼을 때 client side에 ui를 업데이트해야 되는 기능을 구현해야 됐었습니다. 처음에는 이런 경우에 사용할 수 있는 것이 socket 밖에 몰라서 socket.io를 사용해서 socket으로 만들다가 웹소켓을 공부하다가 보니 SSE(Server-Sent-Event)라는 것을 알게 되었습니다. 제가 평소에 공부를 해두었다면 웹소켓으로 안 만들고 SSE를 사용해서 만들었을 텐데 시간 낭비를 해버렸습니다. 이래서 평소에 공부를 해야 되는 것 같습니다. Socket과 SSE에 가장 큰 차이점을 하나 말해보라고 한다면 Socket은 양방향으로 데이터를 주고받을 수 있지만 SSE(Server-Sent-Event)를 사용하게 되면 클라이언트는 데이터를 받을 수만 있게 됩니다. 그러니까 ..

GIT 여러 브랜치(branch) 한번에 삭제하기

Git branch 관리를 조금 안 해주다 보면 브랜치가 정말 수도 없이 많아질 수가 있는데요. 그것을 하나씩 지우려고 하면 많이 힘듭니다. git branch를 입력하면 현재 있는 브랜치를 다 보여 줍니다 하나씩 삭제하는 방법을 일단 알아보자면 아래 처럼 터미널에 치면 같은 브랜치 이름을 가진 브랜치가 삭제됩니다 // -D 는 force delete에 줄임말. -d는 그냥 delete git branch -D git branch를 여러 개 한 번에 삭제하는 데는 grep을 사용합니다. 아래와 같이 입력하면 일단 어떤 브랜치가 삭제될 것인지 확인할 수 있습니다. // ex) git branch | grep feature git branch | grep 이제 마지막으로 실제로 한번 삭제해 봅시다. git ..

react-query 라이브러리 알아보기

회사에서도 그렇고 사이드 프로젝트를 할 때도 그렇고 저는 오랬동안 redux, redux-saga를 사용해 오면서 리엑트에서 APIs들을 관리 해왔습니다. 사용하면서 느꼈던 것이 작은 API를 하나 사용하려고 해도 적어야 되는 코드에 량이 생각보다 많다라는 것 이 였습니다. 예를들어 todo list를 가져올 때 redux 와 redux-saga를 사용하면 보통 코드는 아래와 비슷할 것 입니다. dispatch(fetchTodoList()) function* handleFetchTodoList(action) { await put(fetchTodoListApi.request()) try { const response = await fetch(url, action.data) await put(fetchTod..

CSS강의 3 - color(색상) 기초

안녕하세요! 오늘도 css를 배워볼 준비 되셨나요? 오늘은 폰트, 색상, 사이즈 등에 대해서 알아보려고 합니다. 앞에서 배운 selector나 css 박스 모델을 사용해보면서 공부해보도록 하겠습니다. 사실 css을 맨 처음 배울때 가장 먼저 해보는 것이 배경색이나 폰트 색상 바꾸는 것이라고 생각합니다. div 만들어서 색상 이것저것 바꿔보고 해 보면 재미있거든요 먼저 online으로 html과 css를 쓸 수 있는 웹사이트를 열어 줍니다. 저는 개인적으로 jsfiddle을 사용하고 있습니다. css 색상 css에서 색상을 바꿀 때 우리는 여러가지 타입에 값을 줄 수 있습니다. 색상 이름 hex rgb(a) hsl 색상 이름 css에서 많은 색에 이름이 붙여져 있습니다. 우리가 알고 있는 red, blac..