Prettier 사용법
터미널 명령어로 설치하기
- npm install prettier -D
- .prettierrc.js 파일 만들어서 속성 추가
- 권장 속성
module.exports = {
trailingComma: "es5", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
tabWidth: 2, // 탭 너비
semi: true,
singleQuote: true, // single 쿼테이션 사용 여부
arrowParens: "always",
};- package.json 파일 script 속성에 코드 추가
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"prettify": "prettier --write *.js **/*.js" // 이 부분 추가- npm run prettify 실행
vsc 플러그인 추가
- prettier 플러그인 검색해서 추가
- 파일 본문에 마우스 우클릭 > Format document with 클릭 > prettier로 설정
- 파일 변경사항 있을 때 마우스 우클릭 > Format document > prettier 실행
파일 저장할 때마다 자동으로 prettier 실행하기
- 설정 > Format On Save 체크하기
socket.io 사용하기
- npm install socket.io -S 설치
- html 파일에 클라이언트 소켓 작성
<!-- socket.i 라이브러리 사용 -->
<script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
<title>Hello Socket.io!</title>
</head>
<body>
<script>
// 웹소켓 접속하고 접속했을 때 어떻게 동작하고
const socket = io("ws://localhost:3000");
socket.on("connect", () => {
socket.send("Hello!");
});
// 메시지는 어떻게 받는지
socket.on("message", (data) => {
console.log(data);
});
</script>
</body>- app.js 파일에 서버 소켓 작성
// socket.io 라이브러리 불러오고 3000 포트를 사용
// origin: 어떤 사용자만 우리 서버에 접근 가능하게 하겠다는 제한 ('*': 모든 사람들)
// methods: GET, POST 메소듣만 열어주겠다
const io = require("socket.io")(3000, {
cors: {
origin: "*",
methods: ["GET", "POST"],
},
});
// 특정 사용자가 우리 서버로 연결됐을 경우 처리방법
io.on("connection", (socket) => {
console.log("새로운 소켓이 연결됐어요!");
// 'message'라는 소켓에 데이터가 들어왔을 때 처리방법
socket.on("message", (data) => {
console.log(data);
});
});
- 터미널에서 node app.js 실행
>> 실행 결과
새로운 소켓이 연결됐어요 !
Hello!- 서버에서 소켓이 연결되고 난 후(새로운 소켓이 연결됐어요 !)
클라이언트에서 소켓이 연결되어 서버로 메시지를 보내고,
서버는 그 메시지를 출력(Hello!)한다.
- 커스텀 이벤트로 데이터를 발행하고 싶다면 메서드를 추가한다.
- 클라이언트 소켓
socket.on("customEventName", (data) => {
// "customEventName"이라는 소켓으로 데이터가 들어왔을 때 처리방법
console.log(data);
});- 서버 소켓
socket.emit("이벤트이름", "데이터")해당 "이벤트이름"으로 소켓이 연결됐을 때 "데이터"를 발행한다.
Back-End Wep Developer. 꾸준함이 능력이다. Node.js, React.js를 주로 다룹니다.