구현하는 기능과 배우는 컨셉

✅ ID, PW 입력 시 로그인 버튼 활성화 기능
✅ 로그인 validation
✅ 댓글 좋아요 / 삭제 기능 구현
✅ 아이디 & 코멘트 검색 기능 구현
✅ nav 프로필 사진 클릭시 메뉴 박스생성
✅ 반응형 구현
✅ 사진좋아요 버튼 구현
✅ 뎃글 무한 스크롤 구현
✅ 피드 모달창 구현
✅ 팔로우 구현

Project Overview

• PM이 되어 팀원들한테 Git Clone을 위한 초기셋팅 진행
• 공통으로 public images & Component & scss 관리
• zoom과 vsc live share를 이용해 서로 협업진행
• git push시 conflict시 상황대처관리
• 완료 후, 팀원들간의 코드리뷰진행 후, 리팩토링진행
• git을 사용한 첫번째 협업 프로젝트

작업기간

2020.12.03 ~ 2020.12.10

기술 스택

• HTML/CSS
• JavaScript(ES6+)
• React
• SASS
• Git

필수 구현 사항

• 로그인, 메인 페이지 레이아웃
• ID, Password 입력시 로그인 버튼 활성화기능
• 로그인 간단한 validation
• 댓글 내용 입력후 enter / 버튼 클릭시 댓글 추가

추가 구현 사항

• 검색필터링 기능 (id /코멘트 입력시)
• menu dropdown
• 팔로우 구현 (click시 팔로우요청)

결과 화면

👉 Login

👉 댓글 좋아요 / 삭제 기능 구현 / 무한스크롤 /피드하트

👉 아이디 & 코멘트 검색 기능 구현

👉 nav 프로필 사진 클릭시 메뉴 박스생성

👉 피드 모달창 구현

👉 반응형 구현

리액트!! 고마워 💟

SPA(Single Page Application)인 리액트는 컴포넌트를 통해 모듈화하기때문에, 위 코드처럼 화면의 전체적인 레이아웃을 한 눈에 볼 수있다는 것이 큰 장점이라고 생각한다.
때문에, 해당 컴포넌트에 맞는 것만 작성해서 보여주기 때문에 관리하는 측면에서 수월해졌다.

반복은 이제 안녕 Map이 있거든 🙏

컴포넌트는 흔히 HTML에서 자주쓰이는 ul,li tag등 반복적으로 작성하는 수고스러움을 덜어준다.
위 코드에서 보면, ul tag안에 li가 map을 통해 inputValueList의 length만큼 반복적으로 돌면서, 해당 속성에 값을 할당해준다. 우리는 이로써 Comment라는 컴포넌트에서도 편하게 값을 받아와 사용할 수있게되어 모듈화 할수 있는것이다.

기억에 남는 코딩 시리즈 🏆

[1] 좋아요 버튼을 각각 할당하기!

처음에 li안에서 삼항식인 mode === true ? 'fa-heart fas' : fa-heart far'을 사용했다.
하지만 문제가 생겼다. 바로 댓글입력시 생기는 li의 모든 Heart가 동작되는것이다. 내가원하는것은 지금 누르고있는 Heart만 동작하길원하는 것이다. 여기서 큰 실수를 했던것이 바로 mode도 mapping을 해줘야한다는 점이다.
InputValueList 를 mapping하면서, 객체를 도는데 mode는 각각해당하는 것이 아니라 영향을 받지않아 전체를 공유하게 된것이다. 따라서, mode또한 mapping을 하면된다.

그럼 mode를 어떻게하면 mapping할 수 있을까요?
Comment 컴포넌트에서 props로 mode를 받아서 사용하면됩니다. 그리고 heartChange 함수의 인자로 mode, index를 전달해서 changedList[index].mode = !mode를 inputValueList에 setState로 추가해줍니다. 이렇게하면 changeList[0]~[index.length].mode가 true가 되어 추가됩니다. 즉, 각각의 mode가 true로 변하고 그것을 setState로 추가하면, className ={mode === true ? 'fa-heart fas' : 'fa-heart fat'}의 삼항식연산자가 실행이 되어 좋아요버튼이 구현됩니다.

이와 비슷한 원리가 무엇이있을까? 🎁

결국 이 원리는 초기 설정한 setState안에서 mapping이 돌때 각각의 state에게 값을 줄 수있다는 것이다.
예를들어, 팔로우 신청중 -> 신청후 같이 여러개가 동일할경우 각각 원하는 곳에만 이벤트가 작동하게 만들고싶을때, 사용하면 좋을거같다.

[2] 댓글 생성 및 삭제 (Enter & Click & focus)!

setState에 input에 입력할때마다 value값을 지정하기위해 onChange event를 통해서 inputValue state에 넣었습니다.
그리고, inputCreate 함수를 만들어서 배열안에 객체를 만들어, props로 사용할 key들을 inputValueList에 concat을 사용해서 추가했습니다. 이렇게되면 inputValueList를 mapping하면 안에있는 key값들을 불러와 사용할 수있습니다. 나머지 enter 및 click 부분들은 위에서 이미 코딩을 짠 함수를 호출만하면 됩니다.

즉, inputValueList 안에 어떤 것들을 state로 만들어야하는지 생각해보고 그중에 comment라는 값에 input.value를 추가한것입니다.

여기서 해맸던 부분은 inputValue : ''를 했음에도 불구하고 입력했을때 입력한 값들이 사라지지않았습니다.
그 이유는 input 속성 value의 값을 가져오지않았기 때문입니다. value의 값도 inputValue에 추가해줍니다.
저는 num을통해 각각의 id를 1씩증가시켜 id를 할당시켜줬습니다. 그리고 key값으로 주었지만 이는 좋지않은 방법이다. key값은 고유한 값을가져야하는데 추가 삭제되는 과정에서 id값이 변하기때문이다. 그래서 string으로 변환시키거나 고유한 값을 주는게 좋다

항상 전체적인 흐름을 파악하고, state에 들어갈 값이 무엇일지 정하자! 💡

[3] 검색어 구현!

검색구현은 filter로 구현했다.

내가 가져온 Data정보들 중 어떤 값을 입력했을때 입력한 값만 가져와야한다. 그게 검색의 기본적인 원리이다.

우선 입력하는 값을 가져오자!

내가 입력한 값을 가져오려면 input을 사용하자.
input에 onChange로 e.target.value를 가져오자

입력값이 있는지 확인해야하는 이유

굳이 inputValue 변수에 할당했는데 왜 조건문을 사용했을까? 그이유는 LifeCycle에 있다. 우리가 입력할 시점은 render가 그려지고 난이후이다. 그때 setState가 발생하므로 처음엔 아무것도 출력되지않음을 console로 알 수있다. 그래서 조건문을 걸어주는게 좋다.

입력값과 SerachData를 필터해보자!

const filterIDList = SearchData.filter((data)=> { return data.id(includes(inputValue) })

여기서 검색Data를 filter해주어 객체안에 있는 id값들만 가져와 그중에 내가 입력한 값이 있는것만 return 하여 반환해준다.

필터했으면 ? 추가안하고 뭐해??

필터 했다면, 더이상 망설이지말고 필터로 새롭게 탄생한 배열을 setState 해주자!!
그리고 만약 입력하지않았다면 빈배열로 만들어주는 것도 잊지말자. 안그러면 전에 추가된것들이 저장되어 그대로 목록이 나타난다.

[3] 모달 파헤치기!

모달 === menu Dropdown

이 둘의 원리는 비슷하다

클릭하면 생기고 없어지는 역할을 하는 부모에게 다가가자

여기서 ul은 menu 클릭시 나타나는 dropdown이다. 여기서의 역할은 평상시엔 hidden으로 보이지 않다가 클릭 하면 보이게 해주는 역할밖에없다.
( on / off 스위치 역할이다)

토글시켜주는 함수를 만들자.

toogleMenuActive = () => {
this.setState({
MenuMode : !this.state.MenuMode,
})
};

클릭했을때 토글되는 함수를 만들어야 mode가 변경되서 작성했던 삼항연산자가 실행된다.
원리는 쉽다. 초기값을 false로 설정하면 함수가 실행될때, true가 되어 스위치가 on이되고, 다시 클릭하면 false가 되어 스위치가 off가 된다.

toggleMenuActive 함수는 어디에 실행시켜야할까?

우리는 img를 클릭했을때 동작을원한다.
그러므로, img에 onClick 이벤트를 발생시켜도 되지만, 난 img의 부모인 li에 걸었다.
이리하여 완성이 된다.

마지막 남은거 하나! menu 의외에도 클릭하면 없애고싶다!

흔히 모달창의 오버레이같은 역할을 하는 것을 만들어주어야한다.

 <div
 className={
  this.state.MenuMode ? 'menu__bar' : 'menu__bar Navhidden'
 }>
             
 </div>

원리는 동일하다. MenuMode를 동일하게 주어 스위치를 병렬처럼 주는것이다. 그럼동시에 작동하게된다. 여기서 scss로 전체를 가리키게 하면된다.

첫 개발 팀 프로젝트 📕

운 좋게 PM으로 팀 프로젝트에 참여하게 되어 초기세팅을 직접 진행했습니다. 많이 부족한 제가 처음 맡아본만큼 팀원들에게 일에 지장주지않게 하나하나 꼼꼼하게 살폈습니다. 뜻하지않은 오류가 있었음에도 불구하고 아침에 제일먼저와서 수습하려고 노력한결과 다행히 잘 마무리 할 수있었습니다.

git에 대한 즐거움

처음 git에 관련된 section을 들었을 때, 막막하기만 했다. 내용은 이해가 되지만 막상 익숙하지않는 터미널에서 작성하려니 잘되지않았다.
하지만, 최대한 이해한 것을 바탕으로 순차적으로 작성했고, 오류가 나면 git status git log을 통하여 어떤부분에서 오류가 났는지 확인한 후 수정해나갔다.

git PM

[1] vsc 초기셋팅

- 설치: CRA, NPM, SASS, Prettier, Eslint
- 공통: 공통 Sass, Component README.md, images etc..
- 개인 : 각각의 폴더 생성 (충돌방지)
- git : git push 후, branch 생성
- 맴버 : git clone 후, branch 생성

[2] zoom을 통한 중간점검

- 맴버들간의 진도점검 및 QA 진행
- 공통 Component 설정점검
- 팀들간의 의기 투합

[3] 마지막 최종리뷰

- VSC Live Share & Zoom을 통해 서로 코드 리뷰
- 실제 push한 git에 PR에서 코드 리뷰작성
- 한번더 코딩점검 후 리팩토링 시간 실시

첫 협업, 느낀점 🙆‍♂️

누군가의 동료, 그리고 소속감

독학으로 4개월정도 공부했던 나였기에 협업은 더욱더 크게 다가왔다. 처음으로 같은 뜻을 가진사람들끼리 협업을하여 서로 부족한 부분을 채워나가면서 진행되는게 신기하면서도 재밌고 또한 PM으로서, 팀원으로서의 책임감 또한 가지게 되었다.
나도 모르게 더 잘하고싶은 마음이생겨, 아침일찍와서 셋팅을 준비했고 그것을 보답이라도 하듯 맴버들의 태도 또한 좋았다.
서로가 서로를 이끌었고, 그로인해 우린 성장해나간거 같다.
어쩌면, 협업이라는 것은 서로가 서로를 이끌어나는 것이 아닐까 싶다. 나 혼자라면 불가능했던 일들을 가능케 하는 것.
앞으로 누군가의 동료가 되는 영광의 순간이온다면 주저하지않고, 그를 이끌어줄것이고, 그에게 이끌려 당할 것이다.