코드리뷰6 [카카오톡 클론코딩]2022.08.07 어제까지 container 들을 쭉 훑어 보았다. 이제 남은 것이 components 부분, store 부분, api 부분이다. (그런데 api 는 앞서 좀 해 놓아서.. 사실상 components 랑 store 보고 나면 전체적인 흐름은 다 잡는 것 같다. ) 그럼 가장 먼저 components > chatting 을 살펴 보자. components > chatting > Content.tsx 를 보면 export default Content 를 해주고 있다. 앞선 과정에 의해서 Component 는 주로 Container 에서 쓰인다는 것을 알고 있다. 그렇다면 Content 는 어디서 쓰이고 있을까? 검색 결과, containers > chatting > ChattingContainer.tsx 에서.. 2022. 8. 8. [카카오톡 클론코딩]2022.08.06 3. MenuContainer import React, { Component } from 'react'; import styled from 'styled-components'; import { Redirect } from 'react-router-dom'; import { connect } from 'react-redux'; import { Dispatch, bindActionCreators } from 'redux'; import { Socket } from 'socket.io-client'; import { MenuRoute } from '~/routes'; import { MenuSideBar } from '~/components/menu'; import { AuthActions } from '~/.. 2022. 8. 7. [카카오톡 클론코딩]2022.08.05 src 의 index.tsx 가 root 파일인 것 같음. 여기서 App 을 import 하되 그 App 을 Provider 로 감싸고, Provider 의 prop 으로 store 를 주고 있음. import React from "react"; import ReactDOM from "react-dom"; import {Provider} from 'react-redux'; import App from "./App"; import GlobalStyle from '~/styles/GlobalStyle'; import store from '~/store'; ReactDOM.render( ,document.querySelector("#root")); src 의 constant.ts export enum PAGE.. 2022. 8. 6. [카카오톡 클론코딩]2022.08.04 >components >chattignRoom>Content.tsx // 마지막 채팅인 경우 if (idx === chattingList.length - 1) { // 내가 보낸 채팅인 경우 if (senderId === myId) { return ( ); } // 이전에 보낸 채팅과 사람, 날짜가 동일한 경우 if (isPrevSender && isSameDate) { return ( ); } return ( showProfile(sender)} key={chat.id} /> ); } //보충 필요 >components >chattignRoom>Footer.tsx 카톡 채팅방에서 전송 버튼이 있는 최하단 부분을 구현함. Footer 컴포넌트 하나와 Props 인터페이스 하나의 심플한 구성. Footer.. 2022. 8. 4. [카카오톡 클론코딩]2022.08.03 components > chatting > Content.tsx import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; import { MainContent } from '~/styles/BaseStyle'; import { CreateRoomRequest, RoomListDto } from '~/types/chatting'; import { UserData, UserResponseDto } from '~/types/user'; import { BASE_IMG_URL } from '~/constants'; import { findUserUsingId } from '~/apis/user'; impo.. 2022. 8. 3. 코드리뷰 - 카카오톡 public 폴더 KakaoTalk/client/public/asset/ asset 폴더에는 1. 사람 모양의 기본 프로필 이미지 2. 카카오톡 로고 이미지가 들어있었다. KakaoTalk/client/public/index.html 태그 // html 파일의 인코딩을 알려주는 코드. 넣지 않으면 한글, 특수문자 등이 깨져서 나올 수 있음. // IE 버전 중 가장 최신 모드로 표시하라는 뜻. // meta viewport 태그로 애플이 아이폰, 아이패드 등 자사의 모바일 브라우저의 뷰포트 크기 조절을 위해 만든 것. // 웹에서 필요한 아이콘을 font awesome 라이브러리에서 썼기 때문에 이 라이브러리를 사용하는 코드. // 외부 스타일 시트를 연결하기 위해서 head 안에 링크 태그를 쓴다. 태.. 2022. 7. 30. 이전 1 다음
