[5주차] 전시원 미션 제출합니다. #18
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 26 commits
May 4, 2022 20:42
socket connection setting both front and back
without TS and commit message
in user boxm, there are information below user name, nickname, profile image, profile music ...
chaaerim
reviewed
May 15, 2022
|
|
||
| const Btn = styled.button``; | ||
|
|
||
| export default ChatModal; |
There was a problem hiding this comment.
컴포넌트가 많아지다 보니 보기가 좀 어렵네요...ㅜㅜ 기능에 맞게 폴더 분리해보시면 좋을 것 같아요!!!
Comment on lines
+1
to
+14
| import { atom } from 'recoil'; | ||
| import messageData from '../static/msg.json'; | ||
| import userData from '../static/user.json'; | ||
| import { IMessage, IUser } from '../../interfaces/data'; | ||
|
|
||
| export const Message = atom<IMessage[]>({ | ||
| key: 'message', | ||
| default: messageData.rooms, | ||
| }); | ||
|
|
||
| export const userInfo = atom<IUser[]>({ | ||
| key: 'userInfo', | ||
| default: userData.users, | ||
| }); |
There was a problem hiding this comment.
리코일 적용하셨군요... 저는 적용하다가 중간에 실패했는데 나중에 시원님 코드 참고해서 해봐야겠어요 ,,,!!
Comment on lines
+79
to
+81
| String(new Date().getHours()).padStart(2, '0') + | ||
| ':' + | ||
| String(new Date().getMinutes()).padStart(2, '0'); |
There was a problem hiding this comment.
저도 이렇게 작성했었는데 프짱님이 코드리뷰 남겨주셔서 시원님 코드에도 코멘트 남겨드립니다!
함수는 한 가지 일만 해야 한다는 클린코드 원칙에 따라 이 부분은 따로 함수로 빼는 게 좋다고 해요 .
| `} | ||
| `; | ||
|
|
||
| export default MessageBox; |
There was a problem hiding this comment.
채팅 입력시 내부의 MessageBox가 모두 렌더링 되는 것 같습니다! 최적화 해주시면 좋을 것 같아요
| } else { | ||
| const userNameArray = user.map((u) => u.userName).slice(1); | ||
| const result = userNameArray.filter((name) => name.includes(text)); | ||
| console.log(result); |
Comment on lines
+44
to
+55
| switch (name) { | ||
| case '침착맨bde': | ||
| return 0; | ||
| case '주호민qwt': | ||
| return 1; | ||
| case '김풍zxcv': | ||
| return 2; | ||
| case '태완씨liup': | ||
| return 3; | ||
| case '슈말코qwejrl': | ||
| return 4; | ||
| default: |
There was a problem hiding this comment.
user.json에 useId를 숫자로 세팅해주셨던데 userId를 활용해보면 어떨까요,,?
jdaeheon
reviewed
May 15, 2022
| <div>일반채팅</div> | ||
| <div>오픈채팅</div> | ||
| </div> | ||
| <Btn onClick={onToggleChatModal}>❌</Btn> |
There was a problem hiding this comment.
Suggested change
| <Btn onClick={onToggleChatModal}>❌</Btn> | |
| <Btn onClick={()=>{setChatModalToggle(!chatModalToggle)}}>❌</Btn> |
식으로도 할 수 있을까요? Recoil 문법과 맞는지는 모르겠지만...
Comment on lines
+10
to
+25
| const [text, setText] = useState(''); | ||
| const [prevUser, setPrevUser] = useState<string| null>(''); | ||
| const [roomId, setRoomId] = useState<number>(0); | ||
| const scrollRef = useRef<HTMLInputElement>(null); | ||
| const onChangeTextArea = | ||
| (e: React.ChangeEvent<HTMLTextAreaElement>):void => { | ||
| setText(e.target.value); | ||
| } | ||
|
|
||
| const [chatRoomToggle, setChatRoomToggle] = | ||
| useRecoilState(chatRoomToggleState); | ||
| const [currentUser, setCurrentUser] = useRecoilState(userClicked); | ||
| const [chat, setChat] = useRecoilState(Message); | ||
| const ToggleChatRoom = useCallback(() => { | ||
| setChatRoomToggle((prev) => !prev); | ||
| }, []); |
There was a problem hiding this comment.
혹 여유를 가지고 코드를 작성한다면
코드를 읽는 측면에서는 각 state에 대한 주석과 구분이 있다면 훨씬 편할 것 같아요!
아마 바빠서 어쩔 수 없었겠지만요
Comment on lines
+72
to
+73
| // when press 'enter', then submit form | ||
| // when press 'shift+enter', then change line |
There was a problem hiding this comment.
키보드 커맨드 좋은 아이디어 인 것 같아요! keyCode attribute를 통해 간단하게 구현하셨군요.
Comment on lines
+20
to
+24
| const location = useLocation(); | ||
|
|
||
| useEffect(() => { | ||
| setUrlPath(location.pathname.slice(1)); | ||
| }, [location]); |
There was a problem hiding this comment.
React Router의 location 함수를 사용하셨군요. 혹시 path를 별도의 state로 관리하시는 이유가 있을까요?
Comment on lines
+8
to
+10
| const Main:FC<Props> = ({ children }) => { | ||
| return <Container>{children}</Container>; | ||
| } |
Comment on lines
+15
to
+21
| const findUrl = () => { | ||
| const [a] = user.filter((u) => u.userName === currentUser); | ||
| const [b] = user.filter((u) => u.userName === '전시원'); | ||
| const source = [b.profileImg, a.profileImg]; | ||
| // @ts-ignore | ||
| setSource([...source]); | ||
| }; |
Comment on lines
+24
to
+48
| <Container | ||
| key={i} | ||
| onClick={() => { | ||
| setChatRoomToggle((prev) => !prev); | ||
| setCurrentUser(d.userName); | ||
| }} | ||
| > | ||
| <ImgDiv> | ||
| <Img src={d.profileImg} /> | ||
| </ImgDiv> | ||
| {urlPath === '' && ( | ||
| <NickDiv> | ||
| <Name>{d.userName}</Name> | ||
| <Intro>{d.introduce}</Intro> | ||
| </NickDiv> | ||
| )} | ||
| {urlPath === 'rooms' && ( | ||
| <NickDiv> | ||
| <Name>{d.userName}</Name> | ||
| <Intro>{d.last}</Intro> | ||
| </NickDiv> | ||
| )} | ||
| {urlPath === '' && <div>{d.profileMusic}</div>} | ||
| {urlPath === 'rooms' && <div></div>} | ||
| </Container> |
Comment on lines
+25
to
+50
| <MenuContainer> | ||
| {urlPath === '' && ( | ||
| <> | ||
| <Img src="home_black.png" onClick={() => navigate('/')} /> | ||
| <Img src="chat.png" onClick={() => navigate('/rooms')} /> | ||
| <Img src="settings.png" onClick={() => navigate('/general')} /> | ||
| </> | ||
| )} | ||
| {urlPath === 'rooms' && ( | ||
| <> | ||
| <Img src="home.png" onClick={() => navigate('/')} /> | ||
| <Img src="chat_black.png" onClick={() => navigate('/rooms')} /> | ||
| <Img src="settings.png" onClick={() => navigate('/general')} /> | ||
| </> | ||
| )} | ||
| {urlPath === 'general' && ( | ||
| <> | ||
| <Img src="home.png" onClick={() => navigate('/')} /> | ||
| <Img src="chat.png" onClick={() => navigate('/rooms')} /> | ||
| <Img | ||
| src="settings_black.png" | ||
| onClick={() => navigate('/general')} | ||
| /> | ||
| </> | ||
| )} | ||
| </MenuContainer> |
There was a problem hiding this comment.
styled component에 인자를 전달하는 방식으로 개선할 수 있을 것 같습니다.
가장 좋은 건 이미지 대신 외부 의존성을 이용하는 방법이나(font awesome이나 react icon등)
혹은 css filter를 이용해서 수정할 수 있을 것 같습니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
#제출
안녕하세요. 세오스 15 프론트 전시원입니다. 과제 제출드립니다. 감사합니다.
[필수 구현 기능]
배포 링크
chat-siwonblue.vercel.app
자정에 회의라 갔다와서 새벽에 다 할 예정
Key Question
1.라우팅
네트워크에서 경로를 설정하는 것
프로트엔드에서 라우팅
브라우저에서 get 요청을 받게 되면 페이지를 전송해주는 역할을 함
리액트에서 npm react-router-dom 을 사용
각 요청에 대해서 어떤 데이터를 전송해줄지 결정짓는 것이 라우팅
2. SPA & CSR & SSR
SPA (Single Page Application)
하나의 페이지 내부에서 여러 데이터를 보여줄 수 있음.
CSR ( Client Side Rendering)
SPA 를 사용하게 되면서 CSR 이 주목받기 시작
처음 로딩하게 되면 정적파일(HTML) 을 먼저 제공
그 후에 데이터를 받아와서 다시 채워넣는 과정을 거침
처음에 데이터가 없기 때문에 SEO(검색엔진 최적화)에 불리함
하지만 사용자에게 빠르게 화면을 보여줄 필요가 있는 경우 사용
SSR (Server Side Rendering)
한번에 모든 데이터를 받아온 후에 화면으로 보내줌
CSR 에 비해 로딩 속도가 느림
검색엔진 최적화가 되어 있음
prerender, SSR 두 가지 방식이 있음.
pre render 는 검색엔진이 아닌 경우 CSR 처럼 동작하여 빠르게 페이지 전달
SSR 은 첫 방문만 모든 데이터 전송, 그 후에는 CSR 처럼 동작