- 일정 : 8월17일 ~ 8월27일 (주말 제외 8일)
- 스택 : React, Javscript, StyledComponent, CSS, Git, Trello, Slack
- 인원 : 프론트엔드 3명 / 백엔드 2명
1주차 : 함수형 컴포넌트, 그리고 파일 S3서버에 업로드하기...
감사(?)하게도 팀원의 추천으로 다시 한번 PM을 맡게 되었다. 내가 제출했던 웹 사이트가 되니 책임감이 들고 팀원들과 함께 1차보다 잘 만들어 보고 싶다는 마음이 들었다. 하지만 이러한 생각은 첫 세션에서 깨지게 되는데...
1차 프로젝트를 하면서 클래스형 컴포넌트, 그리고 state와 친해질 수 있었다. 또한 REST api와 fetch함수로 데이터를 주고받았다. 2주동안 사귄 친구를 뒤로하고 첫 세션에서 다른 친구들을 소개받았다. 함수형 컴포넌트, useState, useEffect, 그리고 axios 라이브러리를 알게되었다. 또한 서버도 백엔드의 로컬서버가 아닌 클라우드 서버, AWS를 사용해보기로 햇으며, styled.componenet, 카카오 소셜 로그인, git rebase, custom Hook에 대해서도 배우고 적용하기로 했다.
다시 쇼핑몰? 이번엔 셀러를 위한 웹사이트!
화요일, 첫 스프린트 미팅을 가질 때, 우리는 1차 프로젝트처럼 유저의 입장에서 웹 페이지를 클론하고 싶었다. 유려한 CSS, 그리고 전에는 해보지 않은 기능을 제작해보고 싶었다. 하지만 멘토님들의 의견 중, '웹 개발자는 구매자 뿐만 아니라 판매자를 위한 웹 사이트를 제작해야 한다'라는 말이 크게 와닿았다. 팀원. 모두 이 말에 크게 공감하여 '판매자 입장의 웹 페이지를 제작해보는 것으로 방향을 바꾸게 되었다.
새로운 기술을 배워야 했기에, 1주차는 정신없이 지나갔다. 하루에 세션 두세개를 듣고 나면 막상 코드를 작성하는 시간은 얼마 되지 않았다. 또한 기획에 있어서 서로 원하는 바가 다르단 걸 알 수 있었다. 하지만 토론과 투표를 통해 '과일을 판매하는 이커머스 사이트'로 결정되었다. 초기세팅과 프로젝트 진행(scrum)에 있어서는 다들 한 차례 경험을 했기 때문에, 트렐로를 통해 문제없이 소통할 수 있었다.
그렇게 수요일 오후부터 코드를 작성하기 시작했다. 내가 맡은 업로드 페이지에는 다양한 데이터를 작성하고 받아오고 수정할 수 있어야 했다.
CRUD(Create, Receive, Update, Delete)
당시에는 몰랐지만 이러한 기능을 가진 페이지를 CRUD 페이지라고 부른다. 생성하고 받아오고 수정하고 삭제할 수 있는 페이지이다. 업로드 페이지는 셀러가 판매하는 상품을 등록할 수 있는 페이지다. 그렇기에 서버와의 통신이 필수적이었다.
페이지 레이아웃을 제작하면서 수요일을 보냈다. 그리고 목요일부터 파일 업로드를 시작했다. Html을 공부할 때, 서버와 통신하기 위해 input과 form태그를 이용해 데이터를 송수신할 수 있다는 것을 알고 있었다. 하지만 이러한 쉬운 생각은 제일 첫 업로드에서 부터 난관에 마주치게 되면서 부서지게 되엇다.
<input type="file">
마플샵에서 상품 업로드 페이지를 볼 수 없었기에, 나는 번개장터를 참고하기로 했다. 번개장터의 첫 업로드 기능은 이미지였다. 이미지를 클릭하면 업로드 창이 뜬다. 그리고 이미지를 업로드하면 우측에 미리보기가 뜨고, 미리보기의 삭제버튼을 누르면 업로드한 이미지가 삭제되었다.
흥미롭고 해보고 싶다는 생각과 이걸 빨리 끝내서 프로젝트에 폐를 끼치지 않을 수 있을까? 라는 생각이 들었다. 하지만 고민이 무슨 소용인가? 당장 구글링을 시작했다.
filelist와 formdata, 그리고 useEffect
코드에 대해서는 다음 편에서 소개할테니, 과정만 간단히 소개하겠다. 구글링을 통해 스택오버플로우를 뒤져보면서 file을 서버와 통신하기 위한 방법들을 찾을 수 있었다. 정확히 나에게 필요한 코드는 없었지만 어떻게 파일을 저장하고, 전달하는 개념을 이해할 수 있었다. 이를 통해 input type file 의 속성 중 하나인 filelist에 도달하여 저장된 파일에 접근할 수 있었다. 저장된 파일들은 유사배열의 형태로 저장되어있었다. 그래서 Array.from 메서드를 통해 배열로 변환하여 파일을 부모 컴포넌트로 전달할 수 있었다. 그리고 이를 formdata라는 객체에 담아서 서버로 전달하게 되었다. 이외에도 많은 과정이 있었지만 이는 다음 편에서~
useState, useEffect 스터디 진행하다
이렇게 파일을 찾아 서버로 전달하는 과정을 통해 useState, useEffect에 대한 이유를 이해할 수 있었다. 하지만 완벽하게 이햏자 못한체 사용하는 느낌을 지울 수 없었다. 이때, 1차에서 느낀 점 중 하나인, ''다른 사람의 코드를 이해하려면 같은 것을 공부해야 한다'' 라는 점이 생각났다. 그래서 프론트엔드 팀원들을 모아서 함께 useState와 useEffect를 공부하는 스터디를 진행하기로 했다.
스터디를 진행하게 되니 자연스럽게 서로의 코드도 공유할 수 있었다. 수시로 다른 사람의 코드를 보고 이해하고 하는 과정을 겪으니 내 코드에도 발전이 생겼다. 아무 이유없이 사용되었던 useState를 반드시 필요할 때만 사용할 수 있엇고, useEffect로 인한 무한 렌더링을 겪지 않아도 되었으며, 원하는 생명주기에 상태를 변화시킬 수 있었다.
2주차 : 들뜬 마음을 붙잡으며 코딩하다
2주차에는 위코드의 모든 사람들의 마음이 뜬 것처럼 행동했다. 3차 프로젝트로 협업을 가게될 회사들이 발표되는 주였다. 그래서인지 전체적인 분위기가 프로젝트보다는 기업협업을 준비하는 분위기였다. 그럼에도 나의 프로젝트에 책임감을 가지고 임해야 된다는 마인드때문에 끝까지 마무리하려고 노력했다.
특히 프로젝트를 하면서, 나의 부족함을 더욱 많이 느끼고, 내가 어떤 것을 더 좋아하는 지 파악할 수 있었다. 단순히 문제를 해결하기 위한 코드보다, 문제를 해결하기 위한 모든 방법을 적용하고 싶었다. 2차 프로젝트에서 어려움이 있었으나 프로젝트를 잘 완성할 수 있었다.
프로젝트 링크 : https://github.com/joshhhso/23-2nd-GWAPANG-frontend
