1차프로젝트 'Grafolio' 클론 후기

1차 프로젝트 후기를 작성해보자.

그라폴리오 클론프로젝트를 끝마치며

금세 2주라는 시간이 흘렀다. 언제나 느끼는거지만 시간 참 빠르다.
좋은 팀원들을 만나서 나의 부족한 실력에 대해서 질책을 받기보다는 격려와 응원을 많이 받았다. 위코드를 다니면서 항상 받기만 하는 것 같다.(세상엔 좋은 사람들이 많은 것 같다.ㅎㅎ)
그리폴리오에서 내가 맡은 부분은 로그인, 회원가입, 네브바.
내가 맡은 부분이 화려하거나 비중이 큰 부분은 아니였지만, 처음에는 어떻게 구현해야할지 막막한 부분이 많았다.
프로젝트가 끝나고 찬찬히 내 코드를 리뷰해보니 state에 대한 개념이 전보다 훨씬 많이 잡힌 것 같다. 이 부분만으로도 나는 나의 속도에서 성장했다고 생각한다.(✌️정신승리)
이번 프로젝트에서 props, page natio,동적라우팅 부분을 다뤄보지 않았는데, 그래서 다음 프로젝트에서는 이 부분들을 사용해보고 익숙해졌으면 하는 바람이 생겼다.
단 1cm라고 할지라도 매번 성장하는 사람이 되었으면 좋겠다.💕

기억에 남는 부분

• config.js

  url이나 ip주소처럼 길거나 수정해야하는 부분은 config 파일을 따로 만들어서 사용하면 유지,보수가 쉽다는 점을 알았다.

• css Child Selector > (자손 선택자)

.container > ul {
  color: 1px solid black;
}

<div class="container">
   <ul>
      <li> List Item
        <ul>
           <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

처음에는 인자가 feedIsActivated이면 feedIsActivated만 true고 나머지 4개는 false로 진행되는 로직이라고 생각했다.
name이 feedIsActivated이면 feedIsActivated true
인자name이 artIsActivated가 아니니까 false, 다른 것도 마찬가지로 false
feedIsActivated: name === "feedIsActivated" ,
artIsActivated: name === "artIsActivated" ,
artProductIsActivated: name === "artProductIsActivated" ,
wallpaperIsActivated: name === "wallpaperIsActivated" ,
storyIsActivated: name === "storyIsActivated" ,
});
};

• falsy

location && this.props.history.push(location);

location 값을 지정하면 않으면, false는 아니지만 falsy하기때문에 false로 받아들인다. this.props.history.push(location)로 넘어가지 않는다.

• 조건부 렌더딩(&&)

  이해하는데 오래걸렸던 부분이다... isLogin 기본값은 false로 로그아웃되면 로그인 버튼이 나타나야한다.isLogin이 로그인해서 setState: true인 상태라면 !isLogin은 false가 되고, &&은 false를 찾았기때문에 다음으로 가지않는다.
  반대의 경우, 사용자가 로그아웃해서, setState: false인 상태라면 !isLogin은 true가 되고 && 다음 내용을 보여준다.

  {!isLogin && (
              <button>
                <Link to="/Login">로그인</Link>
              </button>
            )}
            {isLogin && (
              <div className={isLogin ? "upload" : "hideUpload"}>
                <img src="/Images/upload.png" alt="upload_icon" />
                업로드
              </div>
            )}
  

*개념정리

&&는 falsy 한 값을 찾고,||는 truthy 한 값을 찾는 것을 목표로 한다. 만약 찾는 목표가 없다면, 마지막에 위치한 값을 보여준다.
ex)
true && false
// false
true && ""
// ""
false && ""
//false
console.log("hello" && null)
//null
false || ""
//""
"" || null
//null