webkit 브라우저(파이어폭스 외)에 대해서만 먼저 살펴보자

wibkit 브라우저 스크롤바 속성

1. ::webkit-scrollbar: 스크롤바 전체
2. ::webkit-scrollbar-thumb: 페이지의 위치를 알려주는 막대
3. ::webkit-scrollbar-track: 스크롤이 움직이는 영역
4. ::webkit-scrollbar-button: 스크롤 방향 버튼
5. ::webkit-scrollbar-track-piece: track에서 thumb을 제외한 부분
6. ::webkit-scrollbar-corner: 수직, 수평 스크롤이 만나는 부분
7. ::webkit-scrollbar-resizer: 크기 조정 핸들

firefox와 IE이용자가 매우 드물기에 이 속성만 이용해서 스크롤 설정해도 충분하다.

크게 문제가 되지 않지만 socket과 같이 맨처음에만 실행하고 그 뒤에 데이터를 받는다면 참조하는 데이터가 실행했을 때 값을 가지고 있다는 것이다. ㅋㅋㅋ......

내 3시간

다음과 같이 써야 한다.

useEffect(()=>{
    async function data() {
    ...
    }
    data()
})

"scripts": {
    ...
    "build": "GENERATE_SOURCEMAP=false react-scripts build"
    ...
}

로 pachage.json을 수정하면 된다.

useRef로 구현가능하다.

LiveChat.js

import { useEffect, useState, useRef } from "react"

export function LiveChat() {
    const [chatList, setChatList] = useState([]);
    const messageEndRef = useRef(null);

    useEffect(() => {
        messageEndRef.current.scrollIntoView({ behavior: 'smooth' });
    }, [chatList]);

    return (
        <div className = "chatList">
            {chatList...}
            <div ref={messageEndRef}></div>
        </div>

    )

}

이런식으로 ref를 마지막에 줌으로써 해결가능하다

1. 설치

   npm install socket.io-client

2. 통신환경 설정

   socket.js
   

import io from 'socket.io-client';

export const sio = io('https://localhost', {path: '/api/socket.io/', cors: { origin: "*", methods: ["GET", "POST"], transports: ['websocket', 'polling'], credentials: true }, allowEIO3:true });

3. 사용법
사용할 때 connect, 연결이 끝났을 때 disconnect로 socket을 제어해야한다. 안그러면 쓸일없는 데이터가 계속해서 전송되는 참사가..

useEffect(()=>{ setIsConnect(true); sio.connect(); console.log('socket connected')

return () => {
  if(isConnect) {
    setIsConnect(false);
    sio.disconnect();
    console.log('socket disconnected')
  }

}; }, [])

emit를 이용하면 backend에 데이터를 전달해줄 수 있다.

useEffect(()=>{ if(isConnect) { sio.emit('start') console.log('socket start') } else { sio.emit('stop') } }, [])

on을 이용해서 이벤트를 받아온다.

useEffect(() => { sio.on('comment', (data) => { setChatList([...chatList, {user: data[0], message:data[1]}]) })

    console.log(chatList)

    return () => {
        sio.off('comment')
    }

  })

``` 이벤트가 끝나면 꼭 off해줘야 한다.

만약 통신이 안된다면 backend에서 CORS에러가 발생하지 않았는지 확인해보자.

여러 기능들이 있지만 많이 쓰는 요소만 정리한다.

1. react-router-dom 설치

   npm install react-router-dom

2. 요소들을 web link에 따라 다르게 작동시키고 싶을 때

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
      <App />
  </BrowserRouter>
);

App.js

import { Route, Routes } from "react-router-dom";
import FirstPage from "./firstPage";
import { PrivacyPolicy, TermsOfService } from "./footerMenu";
import { Login } from "./login";
import Dashboard from "./dashboard";

function App() {
  return (
    <div>
        <Routes>
            <Route path="/" element={<FirstPage/>}></Route>
            <Route path="/login" element={<Login/>}></Route>
            <Route path="/dashboard" element={<Dashboard/>}></Route>
            <Route path="/terms-of-service" element={<TermsOfService/>}></Route>
            <Route path="/privacy-policy" element={<PrivacyPolicy/>}></Route>
        </Routes>
    </div>
  );
}

export default App;

이런식으로 Routes가 Route를 감싸는 형식으로 존재해야 한다.

3. Link활용하기 단순히 a태그를 사용하면 웹 사이트 전체가 리로딩되면서 로딩시간이 길어진다. 이를 줄이기 위해 Link태그를 이용해서 부분만 리로딩한다.

import { Link } from 'react-router-dom'

.
.
.

<Link to="/privacy-policy">Privacy Policy</Link>

이런식으로 a태그 자리에 Link를 쓰면 된다.

4. useNavigate 조건에 따라 로그인이 안되어있으면 login페이지로 redirect하고 싶을 때가 있다. 이때 다음과 같이 써주면 자연스레 쓸 수 있다.

import { useNavigate } from 'react-router-dom';

.
.
.

const navigate = useNavigate();

  useEffect(() => {
    axios.get('/api/auth/test')
      .then(response => {
        console.log(response)
      })
      .catch(error => {
        console.error('Authentication error:', error);
        navigate('/login');
      });
  }, [navigate]);

여러 검색을 통해 알아낸 결과 단순히 useEffect에 return을 넣어주면 해결된다...

const [time, setTime] = useState(0)
let retry;
useEffect(()=>{
    setTime(time++)
    return(()=>{
        setTime(0)
    })
},[retry])

검색을 일상화하자. chatGPT는 신이다.

먼저 backend가 있는 디렉토리에서 아래와 같이 작성하여 react를 구성한다.

npx create-react-app frontend

Docker를 사용하고 있기에 frontend를 위한 Dockerfile을 만들어준다.

# frontend/Dockerfile
FROM node

WORKDIR /workspace
RUN npm install axios

CMD ["npm", "start"]

이후 backend,nginx와 도커를 합치기 위해 docker-compose.yml에 다음과 같이 작성한 코드를 추가한다.

frontend:
    build:
      context: frontend/.
      dockerfile: Dockerfile
    container_name: my-web-frontend
    tty: true
    ports:
      - 3000:3000
    volumes:
      - ./frontend:/workspace
      - ./assets:/assets
    command: npm start

이후 docker가 생성되길 기다린 뒤 실행시키면 react가 돌아가는 것을 확인할 수 있다.

docker-compose up

하지만 기록의 필요성을 느끼게 되었다.

1. 기억은 휘발성이다. 점차 배워가는 게 많아지고 여러 언어를 접하게 되니 내가 모든 걸 기억할 수 없었다.
2. 나의 개발 경력을 누가 알아줄까. 대회, 해커톤을 도전할때마다 팀원들은 나에게 물어봤다. "지금까지 뭐하셨어요?". 이 말에 구구절절 설명하는 내 모습이 보였다. '저들이 과연 내 말을 믿어줄까?'라는 생각이 드는 순간 나의 커리어는 허상이 되어버렸다.

사실 두번째 이유가 거의 전부이다. 운동을 하면 몸이 변화하고 공부를 하면 성적이 변하는데 개발을 하면 단시간 내에 내가 보여줄 수 있는게 무엇인가. 이 생각을 통해 나온 결론은 '개발일지와 포트폴리오를 쓰자.'였다. 개발일지는 월 4회, 포트폴리오는 분기당 1개씩 쌓아가는 걸로 목표를 세웠다.

성공해야지.