✨ Westagram 프로젝트 후기

주히 🌼·2020년 9월 13일

instagram westagram

프로젝트 후기 🎡

목록 보기

1/3

첫 프로젝트였던 ✨ Westagram 클론 프로젝트 ✨ 후기를 써보려고 한다.

🎈 프로젝트 기간 🎈

2020.09.03 - 2020.09.11

🎨 내가 한 작업 🎨

로그인 페이지

로그인 페이지 레이아웃
id (@ 포함), pw (5글자 이상) 입력 시 로그인 버튼 활성화 기능
fetch API를 통한 백엔드와 통신

메인 페이지

메인페이지 Nav 레이아웃 작업
문자 입력 시 게시 버튼 활성화 기능
댓글 내용 입력 후 Enter press, 혹은 게시 버튼 클릭 시 댓글 추가 기능

🌈 기술 스택 🌈

HTML,CSS
JavaScript(ES6+)
React
SCSS

💻 기억하고 싶은 코드 💻

(1) fetch API를 통한 백엔드와 통신

  goToMain = (e) => {
    e.preventDefault();
    fetch("주소", {
      method: "POST",
      body: JSON.stringify({
        email: this.state.idValue,
        password: this.state.pwValue,
      }),
    })
    .then((response) => response.json())
    .then((result) => {
      console.log(result);
      if(result.Authorization) {
        localStorage.setItem("token", result.Authorization);
        alert("로그인 성공");
        this.props.history.push('/Mainjuhee');
        console.log(this.props.history);
      } else if(result.message === "UNAUTHORIZED") {
        alert("아이디 및 비밀번호를 확인해주세요");
      }
    });
  };

백엔드와 처음으로 만나다!

(2) map 함수 활용하기

<ul>
   {commentList.map(comment => {
       return <CommentList key={comment.id} userName={comment.userName} comment={comment.content} />;
   })}
</ul>

나에게 충격과 공포를 줬던 map함수 활용하기..

(3) map 함수 이용시 마지막 요소 스타일주기

네비게이션바를 만들 때, 오른쪽 상단 부분에 아이콘이 모여있는 부분들은 <li> 들로 이루어져있으니, map 함수로 구현하면 간편할 것 같아서 map 함수를 이용하였다.

그런데 무려 ✌두 가지 문제✌가 발생했다.

(1) 아이콘 이미지가 엑박과 동시에 alt 속성만 뜸

첫번째 아이콘 외에는 모든 이미지가 엑박과 동시에 alt 속성만 뜨는 문제가 발생했다.
alt 속성은 잘 뜨는거 보면 로직에 문제가 있는건 아닌거같은데, 이미지 경로가 잘못됐나? 하고 확인해봤는데 아니었다.
그래서 index 번호를 콘솔로그로 찍어봤는데 아주 잘나왔다.
근데 왜 이미지만 엑박으로 뜨는지 진짜 너무 답답했다.
~~(콘솔로그로 주소 찍어봤는데 첫 번째만 나와서 더 답답..)~~
한 시간동안 고민하다, 잠시 쉬고 앉았더니 두둥...
세상에나 마상에나 객체의 key값에 오타가 있었다 ㅎㅎ....

자나깨나 오타조심 ^^................................................................

(2) 마지막 요소만 동그랗게 하기

마지막 프로필 이미지만 동그랗게 하고싶었기 때문에 &:last-child 를 썼지만 모든 아이콘이 동그랗게 나오는 문제가 발생했다.
어떻게 할지 생각하다가, 프로필 이미지가 마지막 인덱스를 가지고 있으니, className을 이용해 스타일을 적용하면 될 것 같아서 해보았더니 ✨생각한 대로 잘 구현됐다!✨

<ul>
   {iconListData.map(icon => {
       if(icon.id != iconListData.length) {
             return(
                  <li>
                    <img alt={icon.iconAlt} src={icon.iconSrc} />
                  </li>
      	     );
        }else {
             return(
                 <li>
                   <img className="RoundIcon" alt={icon.iconAlt} src={icon.iconSrc} />
                 </li>
            );
        }
   })}
</ul>

(추석기간에 구현 못한 부분을 구현하면서 전체적인 코드 리팩토링할 예정인데, 삼항연산자 사용해서 한번 줄여봐야지.. 아직 나에겐 너무 어려운 삼항연산자..)

🎡 이번 프로젝트를 하면서 아쉬웠던 점

(1) 메인 레이아웃을 짜지 못한 점
메인 피드부분도 이쁘게 만들고 싶고, aside 부분도 이쁘게 만들고 싶은데 너무 시간이 부족했다.
프로젝트 후기도 남길겸 이 글을 쓰기 전에 댓글다는 부분은 꾸미긴 했는데, 너무 보여주는거에만 다급했던 것 같아서 나중에 꼭! 꼭! 리팩토링할거다..

(2) 메인 레이아웃을 짜지 못해서 그만큼 활용할 기회가 부족해서 너무 아쉬웠다.
map함수를 배우고, 개인적으로 충격받아서 이번 프로젝트를 하면서 최대한 많이 써보고 싶었는데,
나는 메인 레이아웃을 짜지 못했고.. 우선 댓글 기능 구현 후에 다른 부분을 채워나가려고 했는데, 레이아웃 짜는게 익숙하지 않으니 금방 만들어 지는 것도 아니라, 하나 짜는데도 시간이 너무 오래걸렸다..

다행히 nav 부분은 map 함수를 이용해볼 수 있어서 너무 좋았다. 😆
(쓰다보니 후기 내내 map 함수에 대해서만 말하는 것 같은데, 개인적으로 그만큼 진짜 map함수를 활용하는게 너무 기억에 남는 프로젝트다..)

🎃 혼자 할 때와 팀으로 진행할 때 다른 점

사실 팀프로젝트지만, 각자의 폴더에서 진행하는 것이라 별 다른 점이 없을거라고 생각했다.
~~(conflict 나기 전까지)~~

사실 conflict도 당연히 안날거라고 생각했다.
그 이유는 첫번째로 각자 폴더에서 진행했다는 점이었고,
두번째로는 초기세팅 끝난파일을 clone 받았고, 또 그 과정에서 빠진 부분은 팀원들과 소통을 통해 서로 파일을 수정했기 때문이었다.
만약 공통적으로 관리해야하는 파일을 수정해야할 일이 있으면 또 slack을 통해 팀원이 이러한 이유로 수정해야할 것 같다고 이야기 해주셨고, 수정했기 때문에 정말 남의 일인 줄 알았다.

그런데 merge 하기 전에 conflict이 났다 😭
심지어 conflict 파티라고 하셨다 😱