인스타그램 클론 코딩 프로젝트 후기 feat westagram

오늘에서야 마무리 된 인스타그램 클론코딩 프로젝트,,

약 3주간 다른 버전의 미션이 계속 주어졌는데 그 간의 프로젝트 과정들, 배운 점들을 잘 기록해보고자 한다-!

약 3주간 다른 버전으로 진행된 프로젝트 🧑‍🏫

1. 1차 클론 : HTML, CSS, JavaScript를 활용한 인스타그램 클론코딩 (개인, 3월 7일 ~ 3월 13일)
2. 2차 클론 :React, SCSS, Fetch API를 활용한 인스타그램 클론코딩 (개인, 3월 14일 ~ 3월 24일)
3. 4명씩 팀을 구성하여 공통 component인 nav를 만들고 파일을 merge하고 git conflict 해결하기 + git 공동작업에 익숙해지기 (4명 공동 작업, 3월 14일 ~ 3월 24일)
4. Peer Review + Live Code Review (4명 작업, 3월 23일, 24일)

🧚‍♀️구현 기능 - HTML, Vanilla JS

[Mission1] 로그인 페이지 레이아웃
[Mission2] id, pw 입력 시 로그인 버튼 활성화 기능
[Mission3] 메인 페이지 레이아웃
[Mission4] 댓글 내용 입력 후 Enter press, 혹은 게시 버튼 클릭 시 댓글 추가 기능
[Mission5] ID, PW validation
[Mission6] 댓글 좋아요 / 삭제 기능
[Mission7] 아이디 검색 기능
[Mission8] nav 프로필 사진 클릭 시 메뉴 박스 생성
[Mission9] 반응형 구현
[추가 기능] user 정보 local storage에 저장 및 로그아웃 기능

🧚‍♀️구현 기능 - ReactJS

[Mission 1] Login | 사용자 입력 데이터 저장 기능 구현
[Mission 2] Login | 로그인 버튼 활성화 기능 구현
[Mission 3] Main | 댓글 기능 구현
[Mission 4] Main | 댓글 컴포넌트화, props로 데이터 전달 구현
[Mission 5] Main | Mock data를 map을 활용하여 댓글 화면에 렌더링 기능 구현
[Mission 6] Main | Mock data를 map을 활용하여 피드 렌더링 기능 구현
[추가 기능] Main | 댓글 삭제, 좋아요 기능 구현
[추가 기능] Nav | nav 검색창 유저 검색 기능 구현
[추가 기능] Nav | 프로필 아이콘 클릭 시 프로필 메뉴 보이기 기능 구현

프로젝트 후기

🦋 HTML, Vanilla JS => React

✔️ 프로젝트 과정 중 가장 긴장했던 순간,,,! React를 처음으로 배워보고 바로 실전으로 응용을 해본다는 것 자체가 굉장히 두려우면서도 동시에 설렜다. React를 사용하면서 가장 좋았던 점은 Component로 관리가 가능하다는 점이었다. Javascript를 이용할 때는 코드 한 페이지 전체에 모든 기능 구현을 적었었는데, React에서는 page별로, 기능별로 component를 나눔으로써 가독성도 더 좋아짐을 느꼈고, 훨씬 깔끔하게 관리할 수 있었다.

✔️ React를 처음 배울 때는 이것저것 새로운 개념들을 한꺼번에 많이 듣느라고 당황하고 헤맸었지만 기본 개념을 계속 반복하면서 바로 배운 것들을 실전에 응용해보면서 금방 익숙해질 수 있었다.

✔️ React를 사용하며 또 편리하다고 느꼈던 점이 state를 저장할 수 있다는 것이었다. 상태 값이 변화할 때마다 화면 ui가 자동으로 리렌더링이 되서 따로 ui를 담당해줄 함수를 만들어주지 않아도 된다는 점이 굉장히 편했다.

✔️ 다만 주의해야할 점이 최적화 부분이었다. state를 남용할 경우 불필요하게 리렌더링이 되고 함수를 계속 실행시키게 되기 때문에 불필요한 작동이 많이 일어난다.

✔️ 아! 그리고 또 인상깊었던 점 중 하나가 input값을 사용자가 입력하고 나서 input을 clear해줄 때,
setCount('') 이런 식으로 지정해주어야 한다는 것이었다.

🦋 CSS => SCSS

늘상 css만 사용하다 처음으로 scss를 이용해보았다. css에서 scss로 바꾸는 작업은 생각보다 큰 틀을 벗어나지는 않았다. 네스팅과 변수할당방식이 조금 다르다는 점을 제외하고는 비슷했다.

구조별로 네스팅해주는 방식.

네스팅 해주는 방식을 통해 HTML구조를 쉽게 파악할 수 있어 scss를 보는 게 더 편했다.

위는 변수들만 모아서 만든 파일이다.

기존의 css에서는 변수를 만들때 --border--color 이런식으로 네이밍을 했는데 scss에서는 $와 함께 변수표현을 하여 훨씬 간편하다는 느낌을 받았다.

@mixin은 다음 프로젝트 때 꼭 자주 써보고 싶다!

git 협업 및 git conflict 해결 과정

✔️ 공통 컴포넌트(nav)를 팀원들과 공유해서 쓰고 각자의 branch에서 위스타그램 프로젝트 계속해서 git을 통해 작업해주었다.

✔️ 수정된 master 땡겨받고 내 branch에서 다시 파일 merge 할 때 뜬 화면인데 순간 이게뭐야 놀라서 캡쳐했던 화면 ^^
알고 보니 내가 merge하기 전 기존의 Nav.js를 삭제했었어서 새로 추가되었다고 말해주는 내용이었는데 나는 무슨 오류난건가 하고 식은땀 엄청 흘렸다,, ㅋㅋㅋㅋ git conflict가 떠도 차분히 할 수 있을 줄 알았는데 이상하게 빨간 색 글자같은게 화면에 조금만 떠도 순간 겁을 먹게 된다. 하지만 그럴 때일수록 침!착!하게 차분히 해결해나갈 것!!

✔️ 혼자서만 쭉 위스타그램 프로젝트를 해보다가 처음으로 협업 프로젝트를 진행해보니 설레면서도 긴장되었다. 협업 시 git에서 어떤 순서대로 흐름이 흘러가는지, 흐름에 맞는 적절한 명령어는 무엇인지 감이 잡혔고, 조금 더 git 명령어, git을 사용하는 법에 익숙해졌다. (!) 너무 뿌듯해

✔️ 그리고 이번에 제대로 배운 git commit! 새로운 기능을 하나 추가하거나 수정하거나, 오류를 수정하거나 할 때마다 commit 꼭해주고 제대로 commit한 기록을 남기기 위해 깔끔하게, 작업별로 잘 분리해서 적어줄 것! 이렇게 정리해서 commit을 해주니까 merge한 후 git conflict 났을 때도 정확히 어떤 부분에서 오류가 났는지 파악하기가 쉬웠다. 깔끔한 정리와 기록은 개발 분야에서 정!말! 중요하다는 걸 배웠다. 꼭 commit 잊지말고 해주기!

Peer Review & Live code Review

보니그니님께 Peer Review 남겨드리긔긔

✔️ 모든 위스타그램 프로젝트 진행이 끝난 후 github에서 팀원들 간 코드를 리뷰해주는 시간을 가졌다. 내 코드만 보다가 다른 사람들의 코드를 보면서 '아 이럴 때 이렇게 다르게 코드를 짤 수도 있구나' '아 이럴 때 이렇게 하면 좋겠다' 등의 아이디어 등을 얻을 수 있어 정말 좋았다. 그리고 내가 코드를 '읽는 사람'의 시점에서 코드를 분석해보면서 '가독성이 좋고 깔끔한 코드'를 짜는 것은 정말 중요하다는 것을 느꼈다. 개발자로서 코드를 짤 때면 내 코드를 읽히는 경우가 괴애애앵장히 많기 때문! 최대한 친절하고 깔끔한 코드를 적어내는 개발자가 될테야 ⭐️

✔️ 그리고 멘토님으로부터 Live code Review또한 실시간으로 받을 수 있었다.

기억에 남았던 새로 알게 된 점 몇가지 적어보자면,

👉 관심사에 따라서 관련있는 state들은 하나로 합쳐서 객체의 형태로 만들어주는 것이 좋다! ex) const [state, setState] = useState({id : "", password : ""})

👉 코드를 적을 때 중간중간 문맥에 따라 공백 잘 만들어주기 (너무 다 붙혀쓰면 보기 좋지 않음)

👉 삼항연산자 불필요하게 쓰지 않기. 특히 결과값이 true or false로 나뉘는 경우는 그 조건 자체를 set함수 안에 넣어주면 된다. ex) const isValid = email.includes('@')&& password.length>4 ; setIsActive(isValid)

👉 Data type 으로 끝나는 변수명은 좋지 않다 ex) Array, Object, Data String suffix

👉 바로 return할 경우 {} 생략해주기 ex) const doSometing = () => doSomething

👉 State 관련하여)
▪️ Props로 받은 건 props로 쓰자 state에 넣어주지 말자
▪️ state가 변하는 값일 때만 state로 해주자 (상수 데이터로 해주기) nav- 받아온 값
▪️ 컴포넌트 안의 다른 state나 props를 가지고 계산 가능하면 state 아님 ex) 불리언값
ex) const isActive = email.includes(@)&& password.length > 4 👍 (isActive를 state로 만들기 대신에)

👉 되도록 함수형 state 써주기. 더 안전한 방식 (최신의 값을 보장해준다.)
ex) setState(cur => ({comment, ...cur}))

기억하고 또 기억하자,,,,, 나의 코드만 보는게 아니라 함께하는 팀원들의 코드도 함께 보면서 어떤 코드가 더 좋은 코드일지 어떻게 더 잘 할 수 있을지 이야기해보는 시간이었는데 배워가는게 참 유익했던 시간❤️

뿌듯했던 점 feat 리액트로 검색창 기능 만들기

추가로 진행해봤던 구현기능중 가장 뿌듯했던게 리액트를 활용하여 user검색창 기능을 만들었던 것!

간단한 로직은 다음과 같다.

1. Public - data 폴더 - usersData.json에 검색가능한 user 정보들 기입
   
2. fetch를 이용해서 user 정보 nav component에 전달 받기
3. 전달받은 정보 users state내에 저장 및 검색되는 users, 입력값 또한 state 내에 저장해준다.
4. 전달받은 검색되는 users들을 검색창 내에 map 함수를 이용하여 렌더링 해준다.

코드는 아래와 같다.

const Nav = () => {
  const [state, setState] = useState({
    users: [],
    term: '',
  });
  const { users, term } = state;

  let isSearchValid = term.length > 0;

  useEffect(() => {
    fetch('/data/usersData.json')
      .then(res => res.json())
      .then(data => setState(state => ({ ...state, users: data })));
  }, []);

  const handleState = e => {
    const { value, name } = e.target;
    setState(cur => ({
      ...cur,
      [name]: valuㄷ,
    }));
  };
  
  // filtered : filtered array - search user's id
  const filtered = ()=>{
  return users.filter(user => user.id.includes(term));
  }
      

  return (
    <div className="Nav">
     // 관련없는 코드들 생략함 

      <form className="nav-form">
        <input
          name="term"
          value={term}
          className="nav-input"
          type="text"
          placeholder="검색"
          onChange={handleState}
        />
        <i
          className={isSearchValid ? 'fas fa-search activate' : 'fas fa-search'}
        />
        <ul className="users search-info">
          {filtered().map((user, i) => {
            const { img, id, name } = user;
            return (
              <li key={i} className="user">
                <img className="profile" src={img} alt="profile" />
                <div className="user-info">
                  <strong>{id}</strong>
                  <p>{name}</p>
                </div>
              </li>
            );
          })}
        </ul>
      </form>

     // 관련없는 코드 생략 
    </div>
  );
};

export default Nav;

검색창은 이상없이 잘 작동한다 ㅎ.ㅎ 뿌듯해!

🍯 마무리

작다면 작은, 그렇지만 위코드에서의 처음이었기에 의미있었던 인스타그램 클론 코딩 프로젝트! html 레이아웃에서부터 git 명령어 적어보고 git으로 commit해보는 과정, 리액트 언어써보는 것들 등 개발자로서 얻어간 게 정말 많았던 프로젝트다. 특히 스스로 로직을 짜고 그 로직 순서대로 코드를 짜며 문제를 해결해나가는 과정을 통해 '아 개발자의 길로 정말 가길 잘했다'는 생각을 했다. 문제를 해결해나가는 과정이 너무 재밌고 더 잘하고 싶고 어떻게 하면 더 좋은 코드를 짤 수 있을까 계속 고민해보게 된다. 이 과정에 몰입하는 그 순간들이 소중하고 다음 프로젝트도 너무 기대된다. 하루하루 조금씩 나의 실력이 상승해나가고 있다는 믿음을 갖고 앞으로 하루에 충실하며 열심히 코딩하자 -👊🏻