FrontEnd Setup
🖥 Setup
Create-React-App
npx create-react-app instagram-clone-frontendGit Repository
https://github.com/JHSeo-git/instagram-clone-frontend
Install Modules
- styled-components : style css component
- styled-reset : styled-components 사용할 때 reset.css 과 동일하게 사용할 수 있게끔
- react-router-dom : router
- graphql : graphql
- react-apollo-hooks : apollo 사용을 위한 react hooks
- apollo-boost : the fastest, easiest way to get started with Apollo Client
- react-helmet :
<head>영역 사용 - react-toastify : notification 관련 사용
📦 Project Design
Folder Structure
src
├── Apollo
│ ├── Client.js
│ └── LocalState.js
├── Components
│ ├── App.js
│ └── Router.js
├── Routes
│ ├── Auth.js
│ ├── EditProfile.js
│ ├── Explore.js
│ ├── Feed.js
│ ├── Post.js
│ └── Profile.js
├── Styles
│ ├── GlobalStyles.js
│ └── Theme.js
└── index.js- Styles: style 관련 파일
- Routes: Routers
- Apollo: Apollo graphql client
- Components: react components
-App.js: App Component
-Router.js: Router Component - index.js: render
<App />
🖌 Styles
GlobalStyles 사용
styled-components를 이용하여 GlobalStyles를 적용시킬 때 이렇게 사용하도록 하자.
reset.css를 적용시키기 위해 styled-reset도 import 하여 아래와 같이 코딩해주자.
ThemeProvider component를 통해 Theme을 props로 넘겨받아 사용할 수 있다.
// 📄 GlobalStyles.jsx
import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";
export default createGlobalStyle`
${reset};
* {
box-sizing: border-box;
}
body {
background-color:${(props) => props.theme.bgColor};
color:${(props) => props.theme.blackColor}
}
a {
color:${(props) => props.theme.blueColor};
text-decoration: none;
}
`;
...
// ✅ Use
import { ThemeProvider } from "styled-components";
import GlobalStyles from "Styles/GlobalStyles";
import Theme from "../Styles/Theme";
function App() {
return (
<ThemeProvider theme={Theme}>
<>
<GlobalStyles />
Hello
</>
</ThemeProvider>
);
};
(reset.css 적용된 것을 볼 수 있다.)
Theme.js
색상 정의를 하고 이러한 constants를 저장해두고 쓰기 위함
(instagram app에서 사용되는 style을 따와서 사용한다.)
export default {
bgColor: "#FAFAFA",
blackColor: "#262626",
darkGrayColor: "#999",
lightGrayColor: "#c7c7c7",
...
}📍 Router
hashRouter 사용하며 switch로 한 번에 하나의 route만 render되도록 설정한다.
☄️ Apollo
fullstack server 구성도를 아주 간단히 그리면 아래 그림과 같다.
Preview with chrome extension app
정상적으로 setup이 되면 아래와 같이 확장 프로그램 통해서 확인할 수 있다.
Client
apollo boost를 이용하여 client server를 구성한다.
import ApolloClient from "apollo-boost";
import { defaults, resolvers } from "./LocalState";
export default new ApolloClient({
uri: "http://localhost:4000", // backend server
clientState: {
defaults,
resolvers,
},
});
LocalState
frontend에서 사용될 거지만 값은 backend에서 받아와서 관리해야할 state??
여기서는 login, logout에 대한 isLoggedIn만 관리하도록 한다.
defaults
localstate type 정의
export const defaults = {
isLoggedIn: localStorage.getItem("token") !== null ? true : false,
}resolver
localstate resolver(crud) 정의
export const resolvers = {
Mutation: {
logUSerIn: (_, { token }, { cache }) => {
localStorage.setItem("token", token);
cache.writeData({
data: {
isLoggedIn: true,
},
});
return null;
},
logUserOut: (_, __, {cache}) => {
localStorage.removeItem("token");
window.location.reload();
}
},
};window.location.reload() 하는 이유는 전체페이지를 reload하는게 좋고, 모든 cache를 없애도록 하기 위함이다.
isLoggedIn Query
const QUERY = gql`
{
isLoggedIn @client
}
`;@client : react apollo가 API로 보내지 않고 client(cache)에 있다라고 표시하는 것
remind
- apollo boost를 이용한 client server 구성
- globalstyles 적용방법
- gql 사용
reference
https://velog.io/@cadenzah/graphql-node-08-subscription
https://velog.io/@taewo/%EB%A6%AC%EC%95%A1%ED%8A%B8-Styled-Componets-2%ED%8E%B8
