난 사실 회고가 어렵다.
뭔가 다 쥐어짜내고 나면 뇌에 남아있던 연료가 다 연소되어서 그런가 재밖에 안남아 있는 상태여서 기억이 잘 안난다..
졸업전시회 때도 다들 쇼의 여운을 즐기고 있을때 혼자 쇼 끝나자마자 짐챙겨서 도망가던 습성이 어딜 가진 않는다😂
그래도 이렇게 작성하지 않으면 더 기억 속으로 잊혀질 테니까..그리고 힘들때 내가 이렇게까지 많이 성장했던, 도전했던 때가 있었구나 라고 생각하고, 힘을 얻을 수 있도록 기록해봐야지..

Project Overview

기존에 javascript로 제작했던 Westagram을 React로 refactoring하였다.
(일부 추가기능 구현..!)

제작 기간
21.08.23 ~ 21.08.29

구현 사항
(굵게 칠한 것들은 react로 제작하면서 추가 구현한 사항들이다)

• 로그인 페이지 레이아웃
• 로그인 유효성 검사 로직
• 메인 페이지 레이아웃
• feed 내용 더보기 기능 추가
• 댓글 내용 입력 후 Enter press, 혹은 게시 버튼 클릭 시 댓글 추가 기능
• 댓글 좋아요 기능
• 댓글 삭제 기능 (본인이 작성한 댓글만 삭제되도록 유효성 검증 추가)
• 댓글 작성 시 @이 포함된 댓글은 styling 변경되도록 구현
• 검색어 자동완성 기능✨ (이번엔 혼자 진행!)
• 프로필 사진 클릭 시 메뉴 박스 생성
• 반응형 구현 (흉내내기 정도..)
• 모든 내용 component화 완료
  
  
  
  

구현 결과

추가된 기능들만 가져와봤다.

feed 내용 더보기 기능

SCSS

.writterCommentContainer {
  display: flex;
  align-items: center;
  margin-bottom: 4px;

  .writterCommentWrapper {
    max-width: 440px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    &.open {
      max-width: 100%;
      text-overflow: "";
      overflow: visible;
      white-space: normal;
    }
  }
 }

React

<div className="writterCommentContainer">
 <span className={`writterCommentWrapper ${isOpened ? "open" : ""}`}>
   <strong>
     <a href="#" className="userID">koung_bear</a>
   </strong>
   <span className="writterComment">
     동메달보다 금메달보다 어떤 메달과 상보다 더 값진
     감동을선물해줘서 너무너무 고마워요 덕분에 전국민이 국뽕 한 사발
     들이키고 목 터져라 김연경 울부짖었던 행복했던 올림픽이었어요
     절대절대 자책하지말고 푸욱 쉬어요💙
   </span>
 </span>
 <button
   className={`moreLink ${isOpened ? "open" : ""}`}
   onClick={this.handleOpen}
  >
   more
  </button>
</div>

text-overflow를 사용하면 일정 width를 초과하면 글자를 ...의 형태로 줄일 수 있다. (...을 사용하려면 ellipsis로 설정해줘야한다)
이를 활용하여 작업을 진행했다.
기본적으로 일정 길이 (여기서는 width: 440px)를 초과하면 ...으로 내용이 생략되게 한 뒤, more버튼을 클릭하면 open이라는 class가 활성화되어 전체 내용이 보여지도록 하였다.

본인이 작성한 댓글만 삭제 가능

React

  handleDelete = reply => {
    const isYou = reply.isUser;
    const comments = this.state.comments.filter(item => item.id !== reply.id);
    isYou === true
      ? this.setState({ ...this.state, comments })
      : alert("본인 작성 외의 댓글은 삭제하실 수 없습니다!");
  };

state에 isYou라는 키를 추가하여 사용자가 작성한 댓글인지, 타인이 작성한 댓글인지 구분하도록 하였다.
삭제하려고 클릭한 댓글의 isYou항목이 true인 경우에만 댓글이 삭제되도록 하였다.
역의 경우, alert가 발생하도록 처리했다.

댓글 작성 시 @이 포함된 댓글만 styling 변경

React

<span
  className={`writterComment ${
    reply.comment.includes("@") ? "hashtag" : ""
  }`}
>
 {reply.comment}
</span>

급하게 구현해낸 것이여서 사실 아직 엉성한 상태이다.
간단히 "@"가 포함되었는지, 포함되지 않았는지에 따라 hashtag라는 스타일 클래스를 추가, 제거하여 구현하였다.
가져오는 데이터에 "@", "#"가 포함되어 있고, 그 뒤에 /n으로 나눠져있는지에 따라 @, #가 붙은 단어에만 스타일 처리를 해줘아하지만..주말까지 이걸 잡고있기엔 체력적 한계로@_@..그만 멈춰버렸다.

기억에 남는 코드

검색결과 반환이 이렇게 간단하게 가능하다니..

export default class SearchBox extends Component {
  state = {
    accounts: [],
    userInput: "",
  };
...생략...

  handleSearchInput = e => {
    const input = e.target.value;
    this.setState({ ...this.state, userInput: input });
  };

  render() {
    const { accounts, userInput } = this.state;
    // user가 입력한 값으로만 새로 만든 obj
    const matchedValue = accounts.filter(user =>
      user.id.toLowerCase().includes(userInput)
    );
    return (
      <div className="searchBox">
        ...생략...
          <SerachResults matchedValue={matchedValue} userInput={userInput} />
      </div>
    );
  }
}

지난번, javascript로 클론코딩을 할 때 어떤 분께서 filter를 활용하여 손쉽게 검색기능을 구현했다는 이야기를 들었다. 그 힌트(?)를 참고하여 구글링을 해본 결과, 데이터가 array형태로 들어오기에 filter와 includes를 활용하면 보다 편하게(?) 검색결과를 반환할 수 있었다.
게다가, state를 활용한 이상..실시간으로 변경되는 값을 render할 수 있기에 매우 심플하게 검색 기능을 구현할 수 있었다.

DB는 array, object형태로 구성되기에 array method를 십분 활용하면 보다 편하게 코딩할 수 있다는 것을 십분 체감한 순간이었다.

blocker

state..이럴땐 비동기인 너가..참..싫다..⭐️

보이지 않겠지만 지금 클릭을 여러번 누르고 있는 상태다...

Code

state = {
  users: [],
  clicked: false,
}

handleClick = () => {
  this.setState({ ...this.state, clicked: true }, () => {
    this.handleReset()
  });
};

handleReset = () => {
  const { clicked } = this.state;
  const sign = false;
  if (clicked === true) {
    this.setState(prev => ({ ...prev, clicked: sign }));
  }
};

의도한 것은 한번 버튼을 클릭하면 clicked를 true로 바꾸고 -> 그 true값을 이용해서 transition용 class를 활성화 시키고 -> clicked를 다시 false로 바꿔서 초기화를 시키고 -> 다시 click하면 true가 되니까..다시 transition이 반복해서 일어나도록 하는 것이었다.

나름 비동기로 만든다고 handleClick이 일어난 다음에 handleReset 이 일어나도록 callback도 걸었는데..아..절대 움직이지 않는다. console.log를 찍어보아도 clicked는 true에서 변함이 없다. 설마 이것도 비동기 업데이트 하는 것인가..!

대충 검색해보니까 React에서 animation을 사용하는 것은 까다로운 것 같다. 그래서인지 다들styled-component나 기타 라이브러리를 사용해서 animation을 구현하는 것 같다..
미결인 이슈로 이건은 차주에 프로젝트 하면서 순수 react, css로 해결할 수 없을지 틈틈이 찾아봐야겠다..! (아니면 styled-component공부를 해보던지 해야겠..다..)

한달 간 회고

한달 내내 컴퓨터만 보고 산 것 같은데 상당히 많은 일이 있었다.

1. React가 이해되기 시작했다.

처음에 React를 배울때만 해도..당췌 왜 state, props를 사용하는 건지 이해가 되지 않았다. 오히려 이로 인해 로직이 매우 꼬인다고 생각했었다.
그.러.나..React의 진가는 component화를 하면서 시작되었다.
UI단위 별로 javascript로직을 끊을 수 있는것이 아니~한눈에 싹 다 로직과 UI구성이 보이니 너무나 편한 것이다!! 또한 state를 가장 부모 요소에서 지정해주니, 이곳 저곳 가져다 쓰기도 너무 편했다.
역시..직접 써보기 전까진 제대로 알 수 없구나 라는 생각이 들었다.
아무래도..나..React에게 반해버린 것 같다💕

2. 협업을 맛보았다..짜릿해..!

Github을 여럿이서 처음 사용해보았다.
정말 주변에서 "드림팀" 소리를 들을 정도로, 태수님과 영현님께서 엄청나게 빠른 속도로 척척 공동 component 및 디렉토리 구성을 도와주셔서..초기 환경 셋팅이 정말 빛의 속도로 끝나있었다..!✨✨ (정말 최고..!)

PR review도 처음 해보았다.
태수님, 영현님의 code review도 좋았지만, 뭣보다 좋았던 것은 내가 다른 분들의 코드를 엿볼 수 있는 기회가 주어진 것..!👀
태수님의 깔끔한 component사용, 구조분해할당에 감탄했다.
사실 태수님의 완벽히 component화 된 코드를 보면서, 이래서 React React하는구나라는 것을 정말 100% 체감하게 되었다.
역시, 백문이 불여일견이라고 다른 사람들의 코드를 볼 수록 insight도 많이 커지는 것 같다.

FE-BE 연결 경혐
BE분과 함께 login, 회원가입 페이지를 구현해보았다.
처음에 비밀번호 유효성 검증에 문제가 있어서 400 Request를 만나게 되었는데 참 마음이 아팠다..🥲
뭔가 400으로 시작되는 response를 보면 그냥 프론트가 다 잘못한 것 같고..위축되고 그랬는데, 막상 펼쳐보니 BE 정규표현식에 뭔가 이슈가 있는 것 같았다.
BE분이랑 400 Error니까..그냥 프론트 화면만 계속 보고 있었는데 BE쪽에도 문제가 있을 수 있다는 것을 처음 알았다...!(BE는 그냥 다 완벽할거 같은데..인간미 좋아..👍)

여차저차 잘 성공해서 200OK를 받았는데 뭔가 소름이 돋았다. 뭔가..컴퓨터들끼리 대화하는 것을 엿본 느낌이었다. 그리고, 그들이 대화하는 것에 내가 낄 수 있다는 생각이 들어 기분이 뭔가 붕 떴었다..기분좋은 느낌이었다🤗

3. 함께해줘서 고마워요

다른 분들 회고에도 언급되어 있지만, 항상 동기들이 있기에 외롭지 않게 공부를 이어올 수 있었던 것 같다.
혼자 하면 충분히 지칠만한 스케줄임에도, 아침마다 같이 일찍 나와 공부하고, 저녁에는 다같이 머리를 맡대고 한가지 이슈에 대해 고민했던 이 한달이 참 지나고 보니까 소중하고 그리울 것 같다.

물론 그렇기 때문에 다가오는 프로젝트도 기대된다✨