WeCode 인스타그램 클론코딩 프로젝트 (Front-End)
프로젝트 소개🙌
- 전 세계 최다 사용자를 보유하고 있는 SNS인 인스타그램 클론 코딩
개발 기간📆
- 2020년 7월 6일 ~ 2020년 7월 16일(2주)
팀원🐙
개발 목적📑📈
- Vanilia JS로만 구현한 인스타그램 클로닝 페이지가 구조가 복잡해짐에 따라 React로 재구성할 필요성을 느낌
기술 스택 및 구현 기능🛠
기술 스택
- React.js
- React Router
- RESTful API
- Sass
구현 기능
- 로그인 및 유효성 검사(토큰 저장 및 자동 로그인)
- 댓글 추가/삭제
- React Router를 이용한 페이지 이동 기능
fetch API를 통한 백엔드와 통신- Lazy loading
(반쪽짜리)
기록하고 싶은 코드 1
import React from "react";
import Nav from "../../yeongjaeshin/Main/Components/Nav/Nav";
import Story from "../Main/Components/Storys/Story";
import Feeds from "../Main/Components/Feeds/Feeds";
import Right from "./Components/Right/Right";
import "./Main.scss";
class Main extends React.Component {
constructor() {
super();
this.state = {
datas: [],
feedImgs: [],
isLoading: true,
};
}
componentDidMount() {
this.getDatas();
this.getFeedImgs();
}
getDatas = () => {
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((result) => {
this.setState({
datas: result,
});
});
};
getFeedImgs = () => {
fetch("https://yts.mx/api/v2/list_movies.json?sort_by=like_count")
.then((response) => response.json())
.then((result) => {
this.setState({
feedImgs: result.data.movies,
isLoading: false,
});
});
};
render() {
const { datas, feedImgs, isLoading } = this.state;
return (
<>
<Nav />
<div className="Main_YJ">
<main className="main-container">
<Story storyData={datas} />
<Feeds feedData={datas} feedImg={feedImgs} isLoading={isLoading} />
</main>
<Right recommendData={datas} />
</div>
</>
);
}
}
export default Main;개인적으로 남기고 싶은 코드이다. Westagram 메인 페이지를 구성하는 모든 컴포넌트들이 렌더되는 파일이다. props가 어색한 나에게 종택님이 똑같은 fetch 함수들이 다른 파일에서 중복해서 보인다고 모든 컴포넌트들을 렌더하는 Main에서 fetch 함수들을 선언하고 props로 내려보내는건 어떻겠냐고 제안을 하셔서 props 공부도 할 겸 적용을 했다. 전보다 훨씬 코드가 짧아졌고 코드가 의미하는 바도 명확해진것 같아서 개인적으로 남기고 싶은 코드로 써봤다.
기억하고 싶은 코드 2
import React from "react";
import Comment from "./Comment";
import FeedImg from "./FeedImg";
import LoaderImg from "./Loader";
import "./Feeds.scss";
class Feeds extends React.Component {
render() {
const { feedData, feedImg, isLoading } = this.props;
return (
<article className="Feeds_YJ">
{feedData.map((item, i) => {
return (
<div className="feeds" key={item.id}>
<header>
<div className="feed-profile-img">
<img
alt={item.username}
className={item.username}
src={`https://robohash.org/${item.id}?set=set2&size=180x180`}
/>
</div>
<div className="feeds-profile-box">
<div className="feeds-profile-id">{item.name}</div>
<div className="dots-box">
<img
alt="dots"
className="dots"
src="http://bitly.kr/CalOachfOq6"
/>
</div>
</div>
</header>
{isLoading ? (
<LoaderImg />
) : (
feedImg.length > 0 && (
<FeedImg imgSrc={feedImg[i].large_cover_image} />
)
)}
...import React from "react";
import Loader from "react-loader-spinner";
import "./Loader.scss";
class LoaderImg extends React.Component {
render() {
return (
<Loader
className="loader"
type="Oval"
color="#262626"
height={40}
width={40}
/>
);
}
}
export default LoaderImg;개인적으로 기록하고 싶은 코드 2번째 이다. 스크롤이 될 때 각각 로딩이 시작되는 이미지 레이지 로딩을 구현하고 싶었는데 시간이 부족해서 스크롤 이벤트는 추가하지 못했다. 그래서 state에 isLoading이라는 값을 주고 로딩 여부를 판단하게 했다. 그래서 이미지들이 로딩이 되기전에 스피너가 나타났다가 로딩이 완료되면 나타나는 형식으로 구성했다. 아직 미해결된 코드이기도 하고 흐뭇한 코드이기도 하다. 이것도 나중에 시간이 되면 완벽하게 구현해볼 생각이다.
정리
2주라는 짧은 시간 동안 생소한 JSX문법, React 라이브러리, Lifecycle 등을 적용해보며 클래스형 컴포넌트를 사용하여 최대한 React가 어떤식으로 작동하는지 익히기 위해 노력했다. Westagram을 만들면서 특히 객체와 배열의 메소드에 대해서 익히는 것이 중요하다고 느껴졌다. 모르면 무조건 하드코딩을 해야하는 수고스러움을 감수해야했으니 말이다. 지난 한달 간 열심히 공부한게 빛을 발한 것 같다. 불필요한 Mock data는 제거하고 API 주소에서 데이터들을 받아와서 render 해보는 연습을 했다. 개인적으로 무한 스크롤과 이미지 레이지 로딩을 구현해보고 싶었는데 시간이 부족하여 반쪽짜리 기능만 완성을 시켰다. 그리고 스토리 모달창도 만들어 보고 싶었지만 마찬가지로 시간 부족으로 미완성인체로 남겼다. 나중에 시간이 생기면 혼자서 다시 완성시켜볼 생각이다. 그리고 가장 중요한 백엔드와의 통신을 처음 해봤다. 처음 로그인 기능을 구현했을땐 Mock data를 넣고 로그인 기능을 구현했는데 Django 서버에 저장된 아이디와 비밀번호와 이용자가 입력한 아이디 비밀번호를 확인하여 일치하면 토큰을 받아 웹 스토리지에 저장 후 main 페이지로 넘어가고 일치하지 않으면 잘못된 비밀번호라는 문구가 뜨게 만들었다. 그리고 다음 로그인 시도에는 토큰을 확인하여 일치하면 자동으로 로그인이 되게 만들었다. 이것도 나름 기억에 남는 코드이긴 하다. 그리고 팀장 아닌 팀장의 역할을 맡았는데 git에 업로드 하기 위해 고군분투했던 기억이 있다. 팀원들의 코드를 다 확인하고 잘못된 부분은 없는지 불필요한 주석이 남아있는지 라우트 설정은 제대로 했는지 확인하고 push하는것 까지 했는데 첫 세팅 때 폴더 구조를 잘못 짜서 repository를 삭제하고 다시 만들어서 작업했던 기억이 있다. conflict 해결한다고 엄청 고생한 것 같다. git은 아직까지 어려운 존재이다..
