
개인 프로젝트로 실시간 통신 기술인 웹소켓을 구현해 보고 싶어서 socket.io를 사용한 간단한 예시를 기록해봅니다.

다음과 같은 방법으로 서버측 소켓을 열어줍니다.

```js
const express = require("express");
const http = require("http");

const app = express();
const httpServer = http.createServer(app);
const wsServer = require("socket.io")(httpServer);

httpServer.listen(process.env.PORT || 4000, () => console.log("Listening on port", process.env.PORT || 4000));
```

다음으로 아래와 같은 방법으로 소켓 이벤트를 처리하며 실시간 양방향 통신을 이룰 수 있습니다.

```js
wsServer.on("connection", (socket) => {

  // "event-name1"이라는 이벤트이름에 반응하는 코드
  socket.on("event-name1", (프론트에서보낸 인자) => {

    // 해당 socket을 방에 조인시킵니다.
    socket.join("방이름");

    // 기초적인 통신법. event-name은 임의로 지정가능합니다.
    socket.to("방이름").emit("event-name", "보내고싶은 내용");
  });
})

```

다음은 프론트측 사용예시입니다.

```js
const socket = io(`서버주소`, { transports: ["websocket"] });

// 최초 접속시 방에 참가하는 코드
// "enter-room"은 emit 의 목적에 따라 임의로 지정가능한 event-name입니다.
// 인자로 몇개든 보낼수 있지만, 3개이상부터는 첫번째는 이벤트이름, 두번째부터 마지막 전까지는 인자, 마지막은 함수로 고정입니다.
// 서버측에서 인자를 담아서 함수 실행여부를 결정할 수 있습니다.
socket.emit("enter-room", roomName, () => {});

// 서버에서 보낸 이벤트에 반응하는 코드
socket.on("hello", (msg) => {
  console.log(msg)
})

```



Basic usage of socket io


Zustand 사용해보고 정리한 기록입니다.

이전까지는 redux-toolkit을 사용하여 전역상태를 관리해왔습니다.
redux-toolkit을 사용함에 불편한점은 없었지만, 다른 라이브러리도 사용해보고 싶어 찾아보다
zustand에 대해 알게되었고, 비교적으로 직관적이고, 가벼우며 사용하기 쉬워 참 좋았습니다..ㅎ

특히 개인적으로 redux-toolkit의 불변성을 좋아했는데 zustand에도 immer가 있어 만약 원한다면 가능합니다.

다음은 사용예시입니다.

```js
import { create } from "zustand";

const useStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}));

const Counter = () => {
  const { count, inc } = useStore();

  return (
    <div>
      <span>{count}</span>
      <button onClick={inc}>one up</button>
    </div>
  );
};
```

너무 간단합니다.

만약 immer를 사용하고싶다면 다음과 같이사용하여 불변성을 신경쓰지 않을수 있슴다.

```js
const useBoardList = create(
  immer((set) => ({
    board: [],
    setBoard: (boardSetting) =>
      set((state) => {
        state.board = boardSetting;
      }),
  }))
);
```


Zustand usage


Axios를 사용해보고 정리한 기록입니다.

axios는 JSON으로 변환해주는 과정이 필요없고 기존 fetch에는 없는 기능인 HTTP요청 가로채기, 요청 취소 타임아웃 등과 같은 기능을 갖추고있어 활용하기에 좋습니다.

다음과 같이 axios 인스턴트를 만들어 코드 활용성을 높일 수 있습니다.

```js
import axios from "axios";

export const axiosIns = axios.create({
  baseURL: "요청을 원하는 baseUrl", // ex) https://naver.com
});
```

각 요청에 토큰이 필요할 경우 다음과 같이 자동적으로 토큰을 헤더에담아 요청할 수 있습니다.

```js
axiosIns.interceptors.request.use((config) => {
  const accessToken = localStorage.getItem("access_token");
  if (accessToken) {
    config.headers["Access_Token"] = accessToken;
  }
  return config;
});
```

정의한 axiosIns는 다음과 같이 사용할 수 있습니다.

```js
export const postLogin = async (userData) => {
  const data = await axiosIns.post("/signin", userData);
  return data;
};
```


Axios usage


react-router-dom v6.4의 최신 라우팅에 대해 포스트를 해보겠습니당.

일단 사용법에서 기존의 라우팅 방법은 다음과 같습니다.

```js
import { Route, Routes } from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
};

export default App;
```

v6.4에선 아래와 같습니다.

```js
// index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import router from './Router';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(<RouterProvider router={router}/>);
```

```js
// Router.tsx

import { createBrowserRouter } from "react-router-dom";
import App from "./App";
import Home from "./page/Home";
import About from "./page/About";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "",
        element: <Home />,
      },
      {
        path: "about",
        element: <About />,
      },
    ],
  },
]);

export default router;
```

```js
// App.tsx

import React from "react";
import { Outlet } from "react-router-dom";

const App = () => {
  return <Outlet />;
};

export default App;
```

Router.tsx에서 라우팅을 설정하고, App.tsx에서 <Outlet /> 에 라우팅된 요소들이 들어가게 됩니다.

추가로 Router.tsx에서 잘못된 라우트 이동, 혹은 에러 발생시의 페이지도 깔끔하게 만들수있습니다.

```js
import { createBrowserRouter } from "react-router-dom";
import App from "./App";
import Home from "./page/Home";
import About from "./page/About";
import Redirect from "./page/Redirect";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "",
        element: <Home />,
      },
      {
        path: "about",
        element: <About />,
        errorElement: <Redirect />,
      },
    ],
    errorElement: <Redirect />,
  },
]);

export default router;
```

이것들은 기본 사용법이고, 이전버전에 비해 좋은 기능도 생겼으니 문서를 살펴보자.

이분의 글에서 정리가 잘 되어있다.
[참고링크](https://lucky516.tistory.com/217)


React-Router V6.4


styled-components 사용해보고 정리한 기록입니다.

styled-components는 js파일에서 css를 사용할 수 있게 해주는 css-in-js 라이브러리입니다.

기본적인 사용법은 다음과 같습니다.

```js
import styled from "styled-components";

const Hello = () => {
  return (
    <Wrap>
      <Hello>안녕하세요!</Hello>
    </Wrap>
  );
};

export default Hello;

const Wrap = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
`;
const Hello = styled.h1`
  color: tomato;
`;
```

뽀너스로 createGlobalStyle를 사용하여 전체적인 css를 적용할 수 있습니다.
보통 App.js에 사용하며 당므과 같습니다.

```js
const App = () => {
  return (
    <>
      <GlobalStyle />
      <Hello />
    </>
  );
};

export default App;

const GlobalStyle = createGlobalStyle`
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, menu, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  main, menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    font: inherit;
  }

  article, aside, details, figcaption, figure,
  footer, header, hgroup, main, menu, nav, section {
      display: block;
  }

  *[hidden] {
      display: none;
  }
  body {
      line-height: 1;
  }
  menu, ol, ul {
      list-style: none;
  }
  blockquote, q {
      quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
  content: '';
  content: none;
  }
  table {
      border-collapse: collapse;
      border-spacing: 0;
  }
  * {
      box-sizing: border-box;
  }
  body {
      font-family: 'Shantell Sans', cursive;
      margin: 0px;
  }
  a {
      text-decoration:none;
      color: inherit;
  }
`;
```


Styled-Components usage

Next Js를 이용하여 만든 개인 블로그입니다. 
프로젝트 포트폴리오 및 포스팅을 싣고있습니다. 
현재 진행중입니다.

Personal project / 2023.04 ~

My-blog

지인과 체스를 즐길 수 있는 체스 게임입니다. 
방이름을 입력하여 생성하거나, 이미 만들어진 방에 입장이 가능합니다. 
알람기능을 적용하여 상대방이 입장하거나, 게임 시작, 체스말이 잡힐때, 게임이 끝날때 등 알람을 띄우고 자동으로 사라집니다. 
게임중 누구의 차례인지 시각적으로 확인할 수 있습니다. 
게임이 종료되면 재매치 혹은 방을 나갈수 있습니다.

socket.io를 이용한 체스게임, 체스 알고리즘, 채팅 기능, 알림 기능

Personal project / 2023.02 ~ 3weeks

Chess-Game

비교를 원하는 데이터를 입력하여 그래프를 통해 시각적으로 결과를 확인할 수 있는 프로그램입니다. 
그룹을 이뤄 전체 값을 확인할 수 있고, CSV로 추출이 가능합니다. 
PWA를 사용하여 웹앱으로 사용이 가능합니다.

수를 입력하고 분석, 그래프를 통한 시각적 확인, 그룹별로 비교, CSV추출 가능, PWA적용

Personal project / 2023.01 ~ 2weeks

Num-Comparator

개인의 일정 관리 및 지인과 실시간으로 채팅을 치며 계획을 작성할 수 있는 일정관리 서비스입니다. 
실제로 광고를 하며 배포하여 유저 피드백까지 받아 정정한 팀 프로젝트입니다. 
팀 리더를 맡아 FE, BE의 원할한 의사소통을 주재 하였으며, 팀의 전체적인 일정관리 및 기술 적용을 주도하였습니다.

생동적인 모션을 통해 일정확인 가능, 일정에 지도를 통해 장소 저장가능, 그룹일정시 실시간으로 채팅치며 생성가능

Team project / 2022.11 ~ 7weeks

Instargram 클론코딩입니다. 
FE리더로서 뼈대, 주요기능, 일정 등을 리드했습니다.

Instargram의 대부분의 기능 클론코딩

Team project / 2022.10 ~ 1weeks

InstarGram-Clone

갤러거 게임입니다. 
Canvas, 생성자 함수, this등을 공부하며 숙련하기 위해 만든 미니게임입니다.

키보드 조작을 통해 갤러거 게임 가능, 적군이 바닥에 닿으면 게임 종료

PJW. FrontEnd

About Me

Skills

Frontend

Deploy

Database

Ver Control

My Projects