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

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해보는 과정, 리액트 언어써보는 것들 등 개발자로서 얻어간 게 정말 많았던 프로젝트다. 특히 스스로 로직을 짜고 그 로직 순서대로 코드를 짜며 문제를 해결해나가는 과정을 통해 '아 개발자의 길로 정말 가길 잘했다'는 생각을 했다. 문제를 해결해나가는 과정이 너무 재밌고 더 잘하고 싶고 어떻게 하면 더 좋은 코드를 짤 수 있을까 계속 고민해보게 된다. 이 과정에 몰입하는 그 순간들이 소중하고 다음 프로젝트도 너무 기대된다. 하루하루 조금씩 나의 실력이 상승해나가고 있다는 믿음을 갖고 앞으로 하루에 충실하며 열심히 코딩하자 -👊🏻