[Wecode] 위코드 한 달 후기(부제:Vanilla Javascript, React를 이용한 Instagram clone)

홍예찬·2020년 9월 11일

WeCode clone instagram

🥇첫 번째 미니 팀 프로젝트: Instagram clone

🗓 작업 기간

2020.08.24 - 2020.08.28: Vanilla JS를 통한 Instagram clone
2020.08.31 - 2020.09.10: React를 통한 Instagram clone

🔧 기술 스택

HTML/CSS
JavaScript(ES6+)
React
SASS
Git

🌟 필수 구현 사항

로그인, 메인 페이지 레이아웃
id, pw 입력 시 로그인 버튼 활성화 기능
댓글 내용 입력 후 Enter press, 혹은 게시 버튼 클릭 시 댓글 추가 기능
API를 통한 백엔드 서버와의 통신 및 토큰 저장(브라우저 내)

결과물

💻 Main Page

1.Prologue

처음 위코드에 입성한지 얼마 되지 않은 것 같은데 벌써 한달이라는 시간이 훌쩍 흘렀다.
1차 프로젝트를 본격적으로 시작하기 전, 지난 한 달 동안 나는 위코드에서 무엇을 배웠는지를 기록할 필요가 있다는 생각이 들었다.

😀 Foundation

첫 2주에는 실력있는 프론트엔드 개발자로 성장하기 위한 기초 토대를 다지는 작업(?)을 했다.
html, css를 통해 웹페이지를 구현하는 방법을 배웠고 사용자와 상호작용 하기 위한 동적인 웹페이지를 구현하기 위해 Javascript를 배웠다.
또한 개발자라면 필수적으로 사용해야 하는 git과 github사용법을 배웠다.

🤔 Advanced

3, 4주차에는 바닐라 자바스트립트로 구현한 인스타그램을 React를 통해 구현하는 방법을 배웠다.
기존에는 자바스크립트 DOM을 통해 로그인 기능 활성화를 구현했는데,
이는 코드 가독성이 떨어질뿐만 아니라 재사용되는 UI, 코드 유지보수 등에서 한계점을 드러냈다.
이러한 이유로 React를 통해 보다 사용자 인터페이스(UI)에 가까운 웹페이지를 구현해냈다.
(~~React를 통해 Instargram 페이지를 구현하는 것은 참으로 고통스러운 일이었다.🤐~~)

😋 Summarize

지난 한 달을 한 마디로 표현하자면 발단-전개-위기-절정-결말의 5막 구성이었다.

2.Vanilla JS로 구현한 인스타그램 Clone(발단)

순수 자바스크립트로 Instagram을 클론하는 것은 그리 어렵지 않게 느껴졌다.😁

1.가장 먼저 웹페이지의 틀이 되는 HTML을 사용하여 레이아웃을 잡았고,
(~~사실 Semantic Web을 구현하기 위해 많은 시간동안 고민을 했다~~)

2.그 다음으로 실제 인스타그램과 거의 똑같은 모습을 구현하기 위한 CSS작업을 진행했다.

3.마지막으로 로그인 버튼 활성화 구현을 위해 JS DOM을 활용했다.

const loginButton = document.querySelector(".loginButton");
const customerInfo = document.querySelector(".information");
const userAccount = document.querySelector("#userAccount");
const userPassWord = document.querySelector("#userPassWord");

customerInfo.addEventListener('keyup', function(e){
    if(userAccount.value.length >= 5 && userPassWord.value.length >= 5) {
        loginButton.disabled = false;
        loginButton.style.backgroundColor = "rgba(var(--d69,0,149,246),1";
    }if(userAccount.value.length < 5 || userPassWord.value.length < 5){
        loginButton.disabled = true;
        loginButton.style.backgroundColor = "rgba(var(--d69,0,149,246),.3)";
    }
});

3.React JS로 구현한 인스타그램 Clone(전개)

React로 인스타그램을 다시 구현하면서 우리는 본격적인 팀 프로젝트를 시작하게 되었다.
PM(Project Manager)으로 선정된 나는 가장 먼저 git을 통해 master branch를 생성했고 팀원들은 각자의 branch를 생성했다.
모든 작업 완료 후 우리는 각자의 branch를 Master branch에 merge하는 방식으로 팀 프로젝트를 진행했다.

앞서 설명한 바와 같이 우리는 React를 통해 인스타그램을 clone했는데,
React는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리로,
기존의 순수 자바스크립트로 웹페이지를 구현했을 때 나타나는 단점을 획기적으로 해결할 수 있게 만들었다.

React를 사용하면서 가장 좋았던 점은

첫째, Component 사용을 통해 코드의 가독성이 높아졌고
둘째, 재활용 가능한 UI를 구현할 수 있게 되었으며 (인스타그램의 경우 네비바, 피드, 스토리 등)
셋째, 코드를 유지보수하는데 수월해졌다는 것이다.

↓Vanilla JS를 React의 Component를 통해 바꾼 코드↓

또한 css를 scss로 변환하면서 Nesting작업을 진행했는데 이를 통해 css의 불필요한 충돌을 방지하고 코드 가독성을 높일 수 있게 되었다.

↓Nesting 작업을 진행한 scss↓

4.Event, State (위기)

React를 사용하면서 첫 번째 위기가 찾아왔다.
기존의 Vanilla JavaScript를 사용하면서 DOM을 통한 EVENT 구현에 이미 익숙해져 있었는지
React에서 State를 통해 Event를 구현한다는 것이 처음에는 쉽게 이해되지 않았다.
혼자서 State를 이해하기 위해 끙끙대고 있다가 결국 첫 번째 번아웃이 찾아왔다.😵

그러나 동기 개발자분들과 멘토분들의 위로와 격려, 협업을 통해 State에 대해 다시 차근차근 배워나갔고 결국 첫 위기를 극복할 수 있게 되었다.

5.Props (절정)

겨우 안정을 되찾은지 얼마 되지 않아 Props에서 개발 인생(?) 최대의 위기가 또 찾아왔다.

Props는 컴포넌트의 속성값으로 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체를 의미하는데,
부모 컴포넌트와 자식 컴포넌트를 설정하는 데까지는 큰 무리가 없었으나
자식 컴포넌트에서 props를 통해 어떻게 부모 컴포넌트의 state값을 받는지(더 정확히 말하자면 부모 데이터를 받기 위해 자식 컴포넌트에서 어떤 코드를 쳐야 하는지) 도무지 이해가 가지 않았다.
여기서 '내가 정말 개발자가 될 수 있을까?'라는 의구심과 함께 절망감이 들었고 ~~거의 울기 직전까지 갔던 것 같다.~~

그러나 이미 State에서 극복한 경험을 발판삼아 Props를 확실히 이해하고 적용해보겠다는 오기가 생겼다.😠
멘토님의 세션을 다시 보고, 주변 동기 개발자분들의 도움을 통해 props를 이해하고 구현하는데 성공했다.👨‍💻
(~~새벽 4시에 잔 건 안 비밀🙈🙉~~)
포기하지 않는다면 무엇이든 할 수 있Ability!!!

6. API 호출하기 (결말)

마지막 단계로는 백엔드 개발자분들이 만들어 놓은 서버와의 통신을 진행했다.
그러나 서버 통신 전, 데이터가 들어오는 상황을 미리 대비하고 UI가 기획에 맞게 구현되는지 확인하기 위해 Mock Data를 사용했다.

↓Mock Data를 통해 UI 확인↓

다행히 UI가 잘 구현되었다!!

이후 백엔드 서버로부터 API를 통해 데이터를 전달받고 토큰을 저장하면서 우리는 실제 인스타그램 로그인과 같은 기능을 구현할 수 있게 되었다.(패스워드를 틀리게 적으면 메인페이지로 넘어가지 않는다니! 정말 신기방기!)

↓실제 데이터를 받고 로그인 진행↓

🎆🎇인스타그램 클론을 성공적으로 마무리하고 우리는 각자의 branch에 결과물들을 담아 Master branch에 merge를 완료했다🎆🎇

그러나 앞서 배웠던 State와 Props, fetch 함수를 완벽하게 이해하기 위해 Monsters를 통해 복습하고 또 복습했다.

7. Instagram clone 후기

좋았던 점

프론트엔드 개발자로서 꼭 알아야 할 JS와 HTML,CSS에 대한 기초를 다지는 시간이었다.
React를 이용해서 Component를 구성하고 UI를 구현할 수 있었다.
componentDidMount함수와 fetch함수, API를 통해 백엔드 서버와 어떻게 소통할 수 있는지 배웠다.
이해되지 않는 부분들을 끊임없이 복습하면서 나의 것으로 만들 수 있었다.
동기 분들과의 협업을 통해 개발 도중에 발생한 여러 어려움들을 극복해낼 수 있었고 결국 성공적으로 인스타그램을 클론할 수 있었다.

아쉬웠던 점

시간상의 이유로 더 좋은 코드로 Refactoring하고 Desturcturing하지 못했다는 점이 아쉬웠다.
피드 댓글 기능 이외에도 스토리 컴포넌트, 친구 추천 컴포넌트를 map함수를 통해 구현하지 못했다는 점이 아쉬웠다.

🤸🤸‍♂🤸‍♀다음 프로젝트에서는 지금보다 더 예쁘고 좋은 코드를 구현하자는 마음을 굳게 먹었다🤸🤸‍♂🤸‍♀

8. Epilogue

지난 한 달간 나를 포함한 12기 동기 개발자분들과, 멘토님들은 구슬땀을 흘렸다.
좋은 개발자가 되기 위해, 좋은 개발자로 만들어주기 위해 우리는 각자의 자리에서 최선을 다했다.
그리고 그렇게 한 달이 지난 현재, 우리는 새로운 도전을 앞두고 있다.
지난 시간 얼마나 성장했는지 현재로서는 직접적으로 느껴지진 않지만,
수많은 고통을 버텨내고 서있는 나와 위코드 12기 동기 개발자분들 모두가 너무나도 자랑스럽다.

새로운 프로젝트들을 포함해서 두 달이란 고통의 시간(?)이 아직 남아있지만, 그 때마다
함께해서 위코드!
할 수 있Ability!
를 외치면서 함께 힘든 순간을 극복하고, 모두가 좋은 개발자로 성장할 것임을 믿어 의심치 않는다.

9. Thanks to

칼퇴를 마다하고 매일 밤 늦게까지 함께 고통받는 것을 자처(?)하신 양준식 멘토님(외쳐 갓준식!), 오종택 멘토님, 김관희 멘토님을 비롯한 모든 멘토님들에게 감사의 인사를 드린다.
또한 내 옆에서 함께 성장하기 위해 같이 코드를 잡고 씨름하던 정원태님, 박남준님, 이형우님, 고재원님, 손병진님을 비롯한 모든 동료 개발자분들에게도 감사의 인사를 전한다.