이전에 express와 js를 이용하여 간단한 chat app을 만들어 본적이 있는데, 이번에는 nextjs를 이용해서 chat app을 만들어보려고 한다. https://wonillism.tistory.com/246 socket.io 기본 채팅 서비스 만들기 (1) https://socket.io/get-started/chat Get started | Socket.IO Get started In this guide we’ll create a basic chat application. It requires almost no basic prior knowledge of Node.JS or Socket.IO, so it’s ideal for users of all knowledge levels. Introd..

yarn v3가 좋다는 말을 주변에서 듣고 업그레이드 할까 말까 고민을하다가 새로운 프로젝트에 한번 적용해보려고한다. 토스 기술 블로그에서 기존 npm의 문제점과 yarn berry를 도입한 이야기에 대해서 잘 정리 해놓았으니 읽어보자. https://toss.tech/article/node-modules-and-yarn-berry node_modules로부터 우리를 구원해 줄 Yarn Berry 토스 프론트엔드 레포지토리 대부분에서 사용하고 있는 패키지 매니저 Yarn Berry. 채택하게 된 배경과 사용하면서 좋았던 점을 공유합니다. toss.tech yarn berry는 npm과 100% 호환되는 yarn classic과는 다르게 Plug’n’Play (PnP)방식을 지원한다. yarn berry는..

https://meetup.toast.com/posts/92 REST API 제대로 알고 사용하기 : NHN Cloud Meetup REST API 제대로 알고 사용하기 meetup.toast.com REST, Representational State Transfer의 약자로서 2000년도에 Roy Fielding의 박사학위 논문에서 최초로 소개되었다. Roy Fieilding은 HTTP의 주요 저자 중 한 사람으로 당시 웹(HTTP) 설계의 우수성에 비해 제대로 사용되어지지 못하는 모습에 안타까워하며 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표했다. REST 구성 Resource(자원) : URI Verb(행위) : HTTP METHOD Representations(표현) REST ..

API란? Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스는 응용 프로그램에서 사용할 수 있도록 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. API는 레스토랑의 '점원'이다. 레스토랑에서 손님에게 주문 가능한 메뉴를 보여주고 손님이 고른 음식을 주방에 전달 후, 음식이 나오면 고객에게 전달하는 '점원'이 API이다. 쉽게 말해, API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체로 볼 수 있다. API의 역할 API는 서버와 데이터베이스에 대한 출입구 역할을 한다. 데이터베이스에는 소중한 정보들이 저장되므로 모든 사람들이 데이터베이스에 접근할 수 있으면 안 된다. API는 이를 방지하기 위해 여러분이 ..

Heroku란? Heroku는 Java, Node.js, Python등 여러 언어를 지원하는 클라우드 Paas(Platform as a Service)이다. 나는 m1맥북을 쓰고 있으므로 m1에 맞추어 환경 설정을 해야한다. rosetta를 사용하여 iterm 실행 rosetta 버전 brew 설치 이미 brew가 일반 터미널에 있더라도 설치한다. (which brew)로 확인하면 /opt/homebrew/bin/brew 로 표시된다면 설치한 적이 있는 것이다. rosetta터미널에서 brew를 설치한다 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"​ rosetta 버전 brew를..

이벤트 발생 Socket.IO의 기본 아이디어는 원하는 데이터와 함께 원하는 이벤트를 보내고 받을 수 있다는 것이다. JSON으로 인코딩할 수 있는 모든 개체가 수행되며 이진 데이터도 지원된다. index.html - script섹션 index.js - chat message 출력 io.on('connection', (socket) => { socket.on('chat message', (msg) => { console.log('message: ' + msg); }); // console.log('a user connected'); }); Broadcasting 서버에서 나머지 사용자에게 이벤트를 내보내는 것이다. 모든 사람에게 이벤트를 내보내기 위해 Socket.IO는 io.emit() 메서드를 제공한..

https://socket.io/get-started/chat Get started | Socket.IO Get started In this guide we’ll create a basic chat application. It requires almost no basic prior knowledge of Node.JS or Socket.IO, so it’s ideal for users of all knowledge levels. Introduction# Writing a chat application with popular web application socket.io socket.io란 실시간으로 상호작용하는 웹 서비스를 만드는 기술인 웹소켓을 쉽게 사용할 수 있게 해주는 모듈이다. 웹소켓은 HTML5..

CORS, Cross-Origin Resource Sharing 교차 출처 리소스 공유 이다. CORS는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 이다. https://www.youtube.com/watch?v=bW31xiNB8Nc CORS의 예시 https://domain-a.com의 프론트 엔드 Javascript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우 출처(Origin)란? 출처란 URL 구조에서 Protocol, Host, Port를 합친 것을 말한다. SOP, Same-Origin Policy란 보안 상..