Wecode에서 첫 프로젝트 Westargram이 마무리 되었다.
클론 코딩하려고 인스타그램도 가입하고 2주 동안 여러 가지 배우면서 재밌던 시간이었다.

React 첫 프로젝트

• CRA를 사용하여 팀원들과 같이 초기 세팅 진행
• git 활용

로그인 페이지

구현 기능

• ID에 '@' 포함 및 비밀번호 6자 이상시 로그인 버튼 활성화
• 로그인 API fetch, access token 브라우저 저장

메인 페이지

• 상단바, 스토리, 피드, 댓글, 사이드 컴포넌트화
• mock data 생성후 fetch 해오기

  <div className="feeds">
    {feed.map(feed => {
     return(
      	<Feed key={feed.id}
         user={feed.user}
         userImg={feed.userImg}
         feedImg={feed.feedImg}
         isLike={feed.isLike}
         like={feed.like}
         storyName={feed.storyName}
         story={feed.story}
         />   
        );
      })}
  </div>

React Component, map() 메소드 리얼 코딩 치트키

피드 좋아요 기능

• 하트를 누르거나 이미지를 더블 클릭하면 좋아요
• 좋아요 갯수 증감 반영
• @keyframes 활용하여 하트 애니메이션 보여주기

리액트 에러 피바다 화면 나올때마다 스파이더맨 모습 === 내모습

  handleLike = () => {
    this.setState({
      isLike: !this.state.isLike
    }, () => this.handleLikenumUp())
  }

  handleLikenumUp = () => {
    if(this.state.isLike){
        this.setState({
          like: this.state.like + 1
        })
    } else {
        this.setState({
          like: this.state.like - 1
        })   
    }
  }

 
 // JSX
 <div className="feedImage">
    <img alt="사진" src={feedImg} onDoubleClick={this.handleLike}/>
       { isLike && 
          <div className="heart">
            <i className="fas fa-heart"></i>
          </div>
       }
</div>

// SCSS
  .heart {
    position: absolute;
    top: 100px;
    left: 250px;
    color: white;
    font-size: 100px;
    animation: imageHeart 1s;
    animation-iteration-count: 1;
    opacity: 0;
  }
  @keyframes imageHeart {
    0%  { transform: scale(0); opacity: 1}
    50% { transform: scale(1); opacity: 1}
    100% { transform: scale(1)}
  }
}

댓글 추가 / 좋아요 / 삭제 기능

• 댓글 Input창에 내용이 있을 경우에만 게시 버튼 활성화
• 댓글 추가시 Spread 연산자 활용 및 객체 형태로 댓글 데이터에 추가해서 보여주기

  handleInputChange = (e) => {
    this.setState({
        text: e.target.value,
    }, () => this.commentBtnOnOff()
  )}

  commentBtnOnOff = () => {
    if(this.state.text){
      this.setState({
        disabled: false
      })
    } else {
      this.setState({
        disabled: true
      })
    }
  }

  handleKeyPress = (e) => {
    if(e.key === 'Enter') {
        this.handleAddComment();
        this.setState({
          disabled: true
        })
    }
  }

  handleAddComment = () => {
    const { commentList , user, text } = this.state
    if(text){
      this.setState({
        commentList: [
          ...commentList,
          {
            id: commentList.length + 1,
            userName: user,
            content: text
          }
        ],
        text: ''
    });
    }
  }

• filter, map 메소드를 활용한 댓글 좋아요/삭제 기능

  handleRemoveComment = (id) => {
    const nextCommnets = this.state.commentList.filter(
      (commnet) => {return commnet.id !== id})
      
      this.setState({
      commentList: nextCommnets
    })
  }

  handleLikeComment = (id) => {
    const nextLikedCommnets = this.state.commentList.map((comment) => {
      if( comment.id === id) {
        comment.isLiked = !comment.isLiked
      }
      return comment
    })
    this.setState({
      commentList: nextLikedCommnets
    })
  }

아이디 검색 기능

어떻게 구현하면 좋을지 고민을 많이 했던 기능이다.
정규표현식을 조금 활용해보기로 했다.

검색 Input창 text가 입력되고 컴포넌트가 리렌더링 될때 입력 text가 포함된 데이터만 filter 되어 나타나도록 했다.
text 입력시에만 결과값이 렌더링되도록 조건부 렌더링을 적용했다.

  render() {
    const { feedList, text } = this.state
    const filterData = feedList.filter( user => {
      const regexp = new RegExp( text, 'ig')
      return user.userName.match( regexp )
    })
    
    ...
  
  <input onChange={this.handleInputChange} value={text} type="text" placeholder="검색"/>
   { text.length > 0 &&
      <ul className="searchList"> 
        {
          filterData.map(user => {
           return(
            <div className="filteredUser">
              <img alt="사진" src={user.img}/>
              <li>{user.userName}</li>
            </div>
           );
        })}  
      </ul>
   }

반응형 웹, 드롭다운 메뉴 구현

• Media Query를 활용한 반응형 페이지 구현

느낀점

2주간 SNS 중독마냥 인스타그램 클론에 빠져 지낸거 같다.
HTML/CSS/JS를 React로 다시 만들어보면서 처음에 페이지들을 컴포넌트화 할때는 거의 화면이 뒤틀린 웹페이지 마냥 보이고 뭔가 된거 같다 싶으면 React가 바로 에러로 마중을 나와줘서 힘들었다.

그래도 하나씩 점차 구현해가면서 성취감도 들구 꽤 재밌었다.
동기들과 같이 하면서 의지만큼은 상한가를 찍은 거 같다.
계속 에러뜨구 반응없는.. 거의 숨이 멎어가는 코드를 동기들에게 보여 주면 같이 고민해주고 심폐소생술 해주는 제세동기 같은 동기들에게 너무 고마움이 크다.
에러가 300줄이 와도 동기들이랑 같이 부셔버릴수만 있다면..!

React랑도 아주 조금 친해진거 같지만 정말 좋은 녀석인거 같다.
이번에는 상당히 서툴게 구조를 짜고 코딩했지만 다음 프로젝트에서는 더 깊게 고민해보고 조금은 더 좋은 코드로 React를 활용해보도록 하겠다!