IT LAB

1. navigation 채팅이 내가 있는 방에 도착하게 될 경우 네비게이션 오른쪽 상단의 messenger icon에 빨간색 원을 그려줌 처음 componenet가 렌더링 될 때, dispatch() 함수를 호출하여 client값을 store에 save함 로그인 성공 이후 localstorage에 저장된 email을 가지고 사용자 정보를 서버에 요청하며 로그아웃 시 email 값이 remove되므로 userdata가 undefined일 경우 login 창으로 redirect 시켜 로그인하도록 함 const Navigation = () => { const email = localStorage.getItem("email"); const { data: userData, error, revalidate, mu..

/messenger path로 오게될 경우, 서버와의 stomp handshake가 이루어진다. navigation 컴포넌트에서 최초의 핸드쉐이크 요청을 하며, 이후 채팅방에서 채팅을 하게 될경우도 핸드쉐이크 후 반환받은 stomp client를 재사용하여 채팅하는데 사용한다. 이를 위해 컴포넌트간 전역적으로 stomp client 객체를 공유하여 사용한다. 컴포넌트간 전역적 공유 방법에는 여러가지 방법이 있다. 현재 사용하고 있는 swr을 비롯하여 redux 등이 대표적이다 프로젝트간 사용하고 있는 모듈로 진행하는 방식이 일관성있고 좋다. 하지만 stomp client는 단순 데이터가 아니여서 localstorage에 보관하는 방식이 적절하지 않고 json 데이터로 다시 불러오는데도 함수속성을 읽는데 ..

1. Cookie universal-cookie 모듈을 사용하여 브라우저의 쿠키 값을 key-value 형식으로 가져오고 지우는 커스텀 함수를 export 하였음 oauth 로그인 성공 시에 로그인 email을 쿠키에 저장한 후 swr 모듈로 사용자 정보를 요청하여 컴포넌트간 전역적인 접근을 위해 사용될 것임 로그아웃 시 removeCookie() 함수로 email 값을 지워 관리할 것 import Cookies from "universal-cookie"; const cookies = new Cookies(); export const getCookie = (name) => { return cookies.get(name); } export const removeCookie = (name) => { retu..

1. db.ts 타입스크립트를 사용하므로 채팅 서비스에서 사용될 타입들을 정의해두는 파일 IChatUser 채팅방에 있는 사용자들의 정보를 받을 타입입니다 채팅방 정보 요청시 채팅방 멤버들의 정보를 리턴받게 되는데, 위의 정보만을 서버에서 내려주므로 이렇게 구성하였습니다. export interface IChatUser { userId: number; nickname: string; email: string; profileImage: string; } IChatMessage 채팅 메시지 타입 export interface IChatMessage { // DM 채팅 chatMessageId: number; authorId: number; // 보낸 사람 아이디 message: string; createdA..

1. useInput useState 의 기능을 활용하여 email, password 등의 입력란에 값이 적혀질 경우 렌더링 되도록 useCallback 함수로 메모이제이션한 handler 함수를 리턴하는 hooks를 정의함 input 태그의 onChange 속성에 대입하여 사용함 type ReturnTypes = [T, (e: ChangeEvent) => void, Dispatch]; const useInput = (initialData: T): ReturnTypes => { const [value, setValue] = useState(initialData); const handler = useCallback((e: ChangeEvent) => { setValue((e.target.value as u..

1. login SWR 원격상태와 (리액트의) 로컬상태를 하나로 통합해주는 모듈 적절한 타이밍에 지속적으로 원격서버에 데이터를 fetch하므로 최신데이터가 갱신됨 또한 컴포넌트간 swr의 키값이 같을경우 캐싱된 값을 전달하므로 데이터의 전역적인 공유가 가능해짐 프로젝트에서는 로그인 성공시 validate() 함수를 호출하여 swr이 서버에 사용자정보를 로그인 과정에서 인증에 성공한 이메일을 가지고 사용자 정보를 요청하게 된다 사용자 정보 요청이 성공하게 될 경우 localStorage 에 성공 이메일을 저장하고 다른 컴포넌트에서 해당 이메일을 가져와 사용자정보를 swr로 요청함 이러한 경우 요청한 사용자 정보의 데이터가 일치하면 캐싱된 데이터만 반환하므로 트래픽 과중에 대한 우려가 사라지게 됨 Login..

1. layouts 트리 구조 ├── App.tsx └── messenger ├── index.tsx └── styles.tsx Client.tsx render( , document.querySelector('#app') ); App.tsx const App = () => { return ( ); }; Client.tsx에서 내부 로직으로 사용될 App.tsx이다 BrowserRouter가 감싸고 있으며 이를 통해 URL과 UI가 동기화되도록 하는 라우터이다 Switch : Route로 생성된 자식컴포넌트중 매칭되는 첫번째 Route를 렌더링해줌 Redirect : 요청 경로를 다른 경로로 리다이렉션함 Route : 컴포넌트에 path 속성을 이용하여 원하는 url을 지정함 Messenger const ..

플랫폼 API 서버에 채팅 기능을 확인해보기 위해 프론트를 구현하였다. 저는 백엔드만 해오다가 토이프로젝트에 프론트가 필요해서 하게 되었는데 처음이라 발등에 불이 떨어져 해보게 되었다. 코딩하는데 생활코딩과 인프런에 올라와있는 조현영님의 slack clone강의를 많이 참고하였다. 프론트에서는 설정할게 많은것 같다. 실제 강의에서도 설정이 힘들다 하셨고 따라하는데 한참걸렸다.. (하지만 되니까 기분은 좋네 ㅎ) 아무튼 짧은 실력이지만 최대한 꼼꼼히 포스팅 해봐야겠다 1. 프론트엔드 초기 세팅하기 설치 모듈 프로젝트에서는 typescript를 사용할 것이다. react, react-dom typescript, @Types/react, @Types/react-dom package-lock.json 모듈들이 ..