Project #2 :Class 404

이지은·2021년 3월 14일
0

🙃 Class 101 clone project

Final Result GIF

2차 프로젝트가 끝났다.

Class101 이라는 다양한 크리에이터들의 강의를 제공하는
온라인 클래스 플랫폼을 clone coding 했다.

page not found라는 404를 따서 찾기 어려운 완전한 팀이다라는 의미로 class404로 이름을 지었다.

Date

2021.03.02 ~ 2021.03.12

Team

class404 = FE3 + BE4

Communication tools

주로 노션을 이용해서 아래와 같이 회의록, 구현 범위 및 역할을 정리하고
Data List, 프론트와 백엔드 공유사항 등을 꼭 필요한 정보들을 공유하고 소통했다.

1차에 비해서 노션을 사용하는 범위가 더 넓어졌는데 노션이 소통에 참 유용한 수단이라는 것을 느꼈고
보다 익숙해 질 수 있도록 사용법을 익혀야 겠다는 생각을 하게 됬다.

Slack, Trello 도 사용하고 매일 stand-up meeting 을 매일 11시에 진행했다!

Tech Stack

  • React
  • React Router
  • SASS
  • styled components
  • Restful API
  • Git. Github

Creator Apply

이번 프로젝트에서 나는 creatorApply 라는 페이지를 맡았다.
크리에이터들의 기본정보, 제목 및 커버 그리고 클래스의 정보들을 폼데이터에 넣어서 전송해주는 기능이 있는 페이지였다.


미리보기.. 더 이쁘게 만들 수 있었는데 css 나중에 수정하는걸로..

formData Code

formData를 전송하는 코드를 처음 써봤는데 난관이 많았다.
1차 프로젝트때는 거의 바로 통신이 되었는데 이번에는 통신부터 쉽지 않은 과정이었다.

formData.append로 모든 key와 value을 담고 폼 데이터를 보내는데 계속 빈 객체가 전송되는게 당황스러웠다. 왜 그런지 이유조차 몰라서 계속 헤매고 백엔드분께 미안했다.

일단 가장 큰 문제는 처음에 handleFileInput 이라는 함수를 사용하지 않은 것이다.
이 함수를 생성해놨는데도 쓰는게 맞는건지 헷갈려서 쓰지 않았었다 😭

문제 파악후 수술 집도..? 코드 수정에 들어갔다.

handleValue로 setState한 후에 onChange= {handleValue}를 모든 요소들에 걸어주었는데 파일첨부기능을 가진 input [type=file] 들은 별개의 event-handler가 필요하다는 것을 몰랐다.
file upload 기능을 가진 input을 처음 사용해봐서 뭐가 잘못된건지 파악하는데도 시간이 걸렸다.

그래서 handleFileInput 이라는 함수를 만들어주고

handleFileInput = (evt) => {
    let reader = new FileReader();
    let previewUrl = reader.readAsDataURL(evt.target.files[0]);

    reader.onloadend = function (e) {
      this.setState({
        selectedFile: evt.target.files[0],
        imagePreview: reader.result,      //미리보기
      });
    }.bind(this);
  };


file input (thumbnail, image1, image2, image3) 에
onChange = {handleFileInput} 을 걸어주었다.
그리고 나머지 코드들은

① 다른 input들은 handleValue로 setState
② Submit btn 클릭시 state 값을 전체 formData로 변경하는 함수 실행
(새로운 함수)
③ Formdata 함수 안에서 마지막에 fetch 함수 실행
-> (fetch 함수로 분리해서 새로 생성)
④ fetch 함수 분리 후 fetch 함수 인자로 formdata를 받아서 실행

gotoMain = (formData) => {
    for (const keyValue of formData) console.log(keyValue);
    fetch("http://10.58.2.116:8003/product", {
      method: "POST",
      headers: {
        Authorization:
          "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxMX0.SgWQ9rtvOr66TswqrCkKSi1SLepMZ-eHmiyuy05Si64",
        // localStorage.getItem("access_token"),
      },
      body: formData,
    })
      .then((response) => response.json())
      .then((result) => {
        if (result.message === "SUCCESS") {
          alert("크리에이터 어플라이 완료.");
          this.props.history.push("/");
        } else {
          alert("다시 확인해주세요");
        }
      });
  };

clickSubmit에
const formData = new FormData();
그리고 formData를 append해준다.

clickSubmit 마지막에 formData를 인자로 받은
fetch 함수, gotoMain 이 실행된다.

막상 하고 나서 보면 그렇게까지 어려운 내용은 아닌거 같은데 처음이어서 우여곡절이 많았던 것 같다.

Multipart form data 란?

Multipart form data upload 
multipart form-data is one of the value of enctype attribute, 
which is used in form element that have a file upload. 
** multi-part means form data divides into multiple parts and sent to server. **

multipart form-data는 파일 업로드 요소에 사용되는 속성값이다. 
multi-part는 폼데이터가 multiple part로 나뉘어 서버로 전송되는 것이다. 

Regrets

처음에 초기세팅 했을 때 약간 문제가 있었는지 merge되었을 때
Components file이 두개가 생기는.. 일이 있었다.

또 git clone을 받았을 때 webpack (version) error?
때문에 npm start가 안되서 .env 이라는 file를 임의로 추가했다.

이렇게 한줄만 추가된 file인데 이 file을 추가하니까
신기하게 npm start가 잘 실행됐다. 왜 때문일까..

너무 궁금했다. 그래서 그때는 몰랐지만 다시 찾아봤다.

이런 비슷한 에러 메세지가 계속 떴었는데 1차 때도 이 똑같은 error message를 본 적이 있다. 4번까지 따라했는데 해결이 안됐다. package-lock.json 이랑 node_modules 를 지웠다 설치했다 다시 지웠다
또 npm install.. 하는 삽질을 했다..

#### To fix the dependency tree, try following the steps below in the
exact order:

1. Delete package-lock.json (not package.json!) and/or yarn.lock 
in your project folder.
2. Delete node_modules in your project folder.
3. Remove "webpack" from dependencies and/or devDependencies in the 
package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem. If this has not 
helped, there are a few other things you can try:

If you used npm, install yarn and repeat the above steps with it
instead. This may help because npm has known issues with package 
hoisting which may get resolved in future versions.

Try running npm ls webpack in your project folder.
This will tell you which other package (apart from the expected react-
scripts) installed webpack.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file
in your project. That would permanently disable this preflight check 
in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-)

CRA에 bug가 있는게 아니라 dependency tree 에 문제가 있으니 고치라는 것 같다.
webpack 버전의 문제인가..

마지막 단계까지 다 따라하니까 문제가 해결됐다. 전혀 중요하지 않은 문제일수도 있지만 너무 자주 본 에러여서 짚고 넘어가고 싶었다. 전에는 error가 보이면 무서웠는데 그래도 이젠 error와 친해지고 있는 것 같아서 기쁘다..

근데 이.env file 때문에 rebase중에 계속 파일을 옮기라는 error message가 떠서 또 file을 옮겨줬다.

Rebase도 프로젝트 중에 배운 새로운 개념이었는데 완벽히 이해되지 않은 상태에서 적용하려고 하니 헷갈려서 git을 잘아는 분들의 도움을 많이 받았다. Rebase는 따로 다시 정리하고 복습해야 할 것 같다.

이번에는 팀원들과 찍은 사진이 없어서 아쉽다.

대신 이력서 쓰다가 아무 이유 없이 불특정 다수와 찍은 사진을 투척하겠다.

Thoughts

2차 프로젝트를 하면서 여러가지 느낀 점이 많다. 스스로 돌아보고 생각해보는 계기가 되었다. 이십대 중반에 코딩을 배우기 시작한것도 위코드라는 곳에 들어간 것도 신선한 경험이었다. 개발자들이 어떤식으로 일하는지 어떤 사람들인지 궁금했는데 궁금증이 좀 풀린 것 같다. 열심히 긍정적으로 사는 멋진 사람들이 많았다. 이제 기업협업이 끝나면 위코드도 끝난다.

2차 프로젝트를 하면서 혼자 공부하는 시간이 더 필요하다고 느꼈다. 한가지를 해도 제대로 공부하고 넘어가고 싶었는데 팀 프로젝트이다 보니 마음이 급했고 과정보다 결과에 치중하게 된 것 같아 아쉽다.

이제 다 끝났으니까 개인적으로 공부를 많이 해야 될 것 같다. 벨로그도 다 비공개로 메모만 해놓고 제대로 마무리를 못한게 아쉽고 세션도 놓친 부분이 많아서 차근차근 보고 싶다. 지금부터 해도 잘 할 수 있을 것 같다.

또 웹도 좋지만 앱 개발을 배워보고 싶다는 생각을 했다. 머리속으로만 생각해본 앱이 있는데 실제로 구현할 수 있으면 멋질 것 같다. 맥을 사기 전에 swift를 조금 공부했는데 맥이 없으니까 프로그램 설치가 잘 안됬다. 제대로 하지 못하고 금방 잊어버렸다. 이제 맥이 있으니까 swift나 react native를 공부하고 싶다. 내가 상상하는 가치를 구현할 수 있는 능력을 기르고 싶다.

이번 프로젝트를 통해 내가 인간적으로도 부족한 점이 많은 사람이라는 것을 느꼈다. 몸과 마음이 지칠때는 그만두고 싶다는 생각이 들어서 스스로가 마음에 들지 않았다. 근데 노력해서 점차 채워나가면 될 것 같다.

"왜 살아야 하는지를 아는 사람은 그 '어떤' 상황도 견뎌낼 수 있다." 는 말을 좋아한다.
항상 내가 어떤 목적을 가지고 이 일을 하기 시작했는지 되새김질 하자.

그럼 뭐든 견딜 수 있다. 일단 하는데까지 해본다.
무엇보다 몸과 마음이 건강한, 겸손한 인간이 되자.

화이팅!

profile
Front-end 🐕🦶

1개의 댓글

comment-user-thumbnail
2021년 3월 14일

소라게 지은님! 불특정 다수중 1명입니다 ㅎㅎ
우리 빨리 레벨업해서 만나요💕
응원할게요🥳🥳🥳

답글 달기