1. 프로젝트 소개
- 주제 : Behance 홈페이지 클론
- 인원 : 4명(FrontEnd 2명 / BackEnd 2명)
- 프로젝트 기간 : 06.08 - 06.19
- 기술 스택(FrontEnd 기준) : React, CRA, Style-component
지난 1차 프로젝트(서브웨이 홈페이지 클론) 이후, 바로 다음주에 2차 프로젝트가 시작.
지난 프로젝트보다 FrontEnd 인원이 1명 적어 기간 내에 할 수 없는 부분은 포기.
(라이브 스트리밍, 스토리, 이미지 편집 기능 등)
지난 프로젝트와는 가장 큰 차이점은 컴포넌트를 class형이 아닌 함수형 컴포넌트를 사용한 점.
또한 소셜 로그인을 사용해보기로 결정.
2. 내가 맡은 역할/부분
- 로그인 페이지 : 소셜 로그인 기능 구현
- 상세 페이지 : 데이터로 받아오는 1천줄이 넘는 HTML tag를 Render하기
- 마이 페이지 : 소셜 로그인을 통해 얻은 데이터(이름, 사진)를 마이페이지에 노출, 이미지 업로드
프로젝트는 2주 동안 진행되면 1주씩 2번, sprint 기간을 나누어 진행한다.
Sprint 1회차(1주차)
팀 회의 끝에, 같은 팀의 FrontEnd 분께서 필터 기능을 제대로 배우고 싶다고 하여 메인 페이지를 맡음.
나는 지난 1차 프로젝트 때 다른 곳에서 api를 받아와 작업하는 것(kakao 지도 api)을 실패하여 다시 시도해보고 싶어서 로그인 페이지 제작을 맡았다.
로그인 페이지의 레이아웃 제작 작업은 빨리 끝났지만 문제는 카카오 api를 다루는 방법이었다.
꾸역꾸역 조사하고 주변 다른팀에 질문하여 해결.
Sprint 2회차(2주차)
1회차와 2회차 사이에 있는 주말에 로그인 페이지 - 카카오 api - 백앤드 연결에 성공하였다.
2회차에선 상세 페이지 제작을 맡았다. 무엇보다 가장 큰 문제는 1천줄이 넘는 html tag를 리액트에서
보여주는 방법을 찾아야 했다.
리액트 공식문서에서 방법을 발견하여 해결.
이후 수요일부터 마이페이지 제작에 들어갔고 시간이 부족하여 업로드 이미지의 편집 기능과 이미지를 위한 상세 페이지 구현은 하지 못했다.
3. 잘한 점 + 아쉬운 점 + 해결/개선 방법
- 잘한 점 : 공식문서를 통해 문제를 해결, React hooks를 활용
- 못한 점 : css늪, 체력과 멘탈 관리,
- 해결/개선 방법 : 연습
이번 2주 프로젝트는 정말 육체적으로, 정신적으로 힘들었다. 그래도 끝냈다.
React Hooks
1차 프로젝트 이후 어느 정도 감이 온 상황에서 함수형 컴포넌트(React Hooks)와 스타일 컴포넌트를 사용하라는 과제를 받았다. class형 컴포넌트를 쓰다 함수형 컴포넌트를 쓰려니 처음엔 좀 어려웠지만 어느 정도 익숙해진 이후엔 class형 컴포넌트보다 더 편하다는 느낌을 받았다. 이전 프로젝트에선 class형 컴포넌트를 사용하며 컴포넌트의 라이프사이클 부분에서 무한 루프에 빠지는 등의 문제가 있었는데 함수형 컴포넌트에선 이 부분을 다루는 것이 더 편리하였다.
공식문서
외부 API 사용, html 형태의 데이터를 React에서 구현하는 등 이번 프로젝트에선 문제해결을 위해 공식문서를 보는 일이 좀 많았다. 개발이 막히면 주로 기술 블로그나 스택오버플로우의 도움을 받았는데 이번엔 공식문서로 해결해보려고 노력하였다. 카카오 API의 경우, 오랜만에 보는 자바스크립트에 당황했고 기능은 사용했으나 완벽하게 이해는 못 하였다.
그러나 React의 문제는 공식문서를 통해 해결하였다. 공식문서를 읽는 것에 더 익숙해져야 한다.
CSS늪
사이트를 클론하다 보니, 웹의 디자인과 기획 부분은 그대로 클론하면 된다고 생각했다.
그러나 behance 사이트는 끝없는 div의 연속이었다. 여기에 빠졌다. 최대한 비슷하게 만들어보고 싶어 계속 따라갔다. 그리고 코드를 보니 엉망이었다. 내가 무엇을 썼고, 이것이 왜 필요한지 전혀 알 수가 없었다. 어느 정도의 디자인 클론 이후, 기능에 더 집중해야 했지만 이미 css만 따라하다 이틀, 삼일이 지났다. 약 2주라는 짧은 시간에서 어마어마하게 시간을 낭비했다.
힘든 와중에 이런 생각이 드니 정신을 못 차리겠더라.
체력과 멘탈 관리
개발에는 체력이 필요하다.
체력이 떨어지면 정신이 힘들고 정신이 힘들면 하기 싫어진다.
그러면 아무것도 못 한다.
혼자했으면 못 했을 것이다. 심지어 이 클론 사이트는 내가 낸 주제였다.
다른 팀원들이 나 때문에 엄청 고생한다고 생각했다. 그래서 꾸역꾸역했다. 그리고 끝냈다.
팀원들한테도 미안하고 돈도 아깝고 시간도 아깝고 후회하기 싫었다.
아무튼 힘든게 여러가지 있었던 것처럼 끝내야 할 이유도 여러가지가 있었다. 그래서 끝냈다.
연습
연습이다. 결국엔 연습이다. 극복한다.
4. 기록하고 싶은 함수/코드/로직
4-1. 소셜로그인(카카오)
//index.html
<head>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<script>
window.Kakao.init("카카오에서 제공하는 키");
console.log(Kakao.isInitialized());
</script>
</head>
//Login.js
const Login = ({ history }) => {
const [token, setToken] = useState("");
const loginWithKakao = () => { //이는 나중에 onClick 으로
window.Kakao.Auth.login({
success: (authObj) => {
console.log(authObj);
//setToken(authObj.access_token) 비동기로, 이를 사용하면 바로 이동하지 못함.
fetch("http://10.58.3.78:8000/user/social_login", {
method: "POST",
headers: {
Authorization: authObj.access_token,
},
})
.then((res) => res.json())
.then((res) => {
if (res.token) {
localStorage.setItem("Login-token", res.token);
alert("로그인 되었습니다.");
history.push("/");
} else {
alert("다시 확인해주세요.");
}
});
},
fail: function (err) {
console.log("에러", err);
},
});
};이 코드를 기록하는 이유는, 아직도 이해가 되지 않아서이다. 분하다.
이건가 저건가 이게 맞나 저게 맞나 써보고 지우고 지우고 또 쓰고 하다가 옆에서 고민하던
다른 동기가 이거네! 한 코드를 주워왔다. 갈 길이 멀다.
미래의 내가 그 분함을 풀었다.
4-2 dangerouslySetInnerHTML
const Work = ({ data }) => {
const [HTML, setHTML] = useState();
useEffect(() => {
if (data !== undefined) {
setHTML(data.content);
}
});
const createMarkup = () => {
if (HTML) {
return {
__html: HTML.split("\\n").join("").split("\\xc2\\xa8").join(""),
};
}
};
return (
<WorkWrap>
<div dangerouslySetInnerHTML={createMarkup()} />
</WorkWrap>
);
};
export default Work;
처음 백앤드 팀원에게 이 데이터는 html 코드로 이루어져 있는데 1천줄이 넘는다는 얘기를 듣고 머리가 띵했다. 그게 가능한가 싶었다. 나는 못 해도 컴퓨터는 가능하겠다고 생각했다.
그래서 검색했다. React 공식 페이지가 구원해주었다.
4-3 if(data !== undefined)
useEffect(() => {
if (data !== undefined) {
setHTML(data.content);
}
});
함수형 컴포넌트를 쓰다보니 더이상 componentDidMount를 쓰지 못 한다.
대신 useEffect를 써야한다. 근데 이를 쓰면 가끔 데이터를 못 받아오는 경우가 있었다.
아직 이유는 모른다. 더 공부해야한다. 아무튼 if로 조건을 걸면, fetch를 통해 들어오는
데이터를 놓치지 않는다.
2차가 끝났다. 정말 힘든 시간이었다.
이번 프로젝트를 통해 알게 된 건 공식페이지를 항상 믿고 읽어야 한다는 것이다.
개발이 막힐 때, 기술 블로그 또는 스택오버플로우 등에서 힌트를 얻을 수 있지만 가장 좋은 방법은 공식 페이지에서 답을 얻는 것이다.
