[westargram] 클론코딩 수고록(혜수회고록)

오 나 드디어 인스타 클론 코딩 마쳤다~~! 우여곡절 끝에 마친 내 첫 프로젝트🌝
너무 작고 소중해...🥳
내자신에게 박수를👏👏👏👏👏
오늘은 그런의미에서 (혜)수(회)고록을 써보려고 한다.

우선 결과물부터 !

• 로그인페이지
  

• 메인페이지
  

오잉 로그인부터 메인페이지로 들어가고 기능 구현한거 영상으로 올리려고 했는데 안올려지네.. ㅎ

1. HTML, CSS
2. JavaScript
3. React
4. Github

사용해서 뚜닥뚜닥 열심히 만들었다..!

처음엔, 바닐라자바스크립트로만 만들었었고, 다음 리액트를 배우고 리액트로 적용하며 다시 한 번 만들어봤다.

😝 구현한 기능 😝
1. 로그인페이지 : id, password에 특정 조건을 걸어주고, 조건 충족시 로그인 확인 alert뜨며 메인페이지로 이동
2. 메인페이지
- 좋아요, 북마크 버튼 구현(모달창)
- 댓글 input박스에 텍스트 입력시 버튼색깔 변화
- 댓글 게시 기능 구현
- 댓글 삭제 기능 구현

그 중 댓글 게시와 댓글 삭제 기능을 리액트로 구현할 때가 너무 생소하고 어려웠다...

🤔 React 댓글 입력 기능

<form className='inputComment' onSubmit={this.handleSubmit}>
       <input className='addComment'
              type='text'
              placeholder='댓글 달기'
              value = {this.state.comment}
              onChange={this.getTextValue} />
       <button className={activateBtn ? 'activeBtn' : 'inactiveBtn'} type="submit">게시</button>
</form>

input박스에 onChange를 걸어서 값이 변화할때마다 value값을 가져온다.

getTextValue = (e) => {
  this.setState({comment: e.target.value});
}
// comment는 이벤트 타겟의 value값이 된다.

handleSubmit = (e) => {
  e.preventDefault();
  const {id, comment, addContent} = this.state;
  addContent.push({id, comment, idx: Date.now()});
  // 원래는 id:id, comment:comment라고 써줘야하는데, key와 value가 같은 경우 생략가능하여 id, comment만 써줘도 된다.
  this.setState({comment: ''});
}

addContent라는 배열(위는 생략)에 현재 comment를 push해주고, 그 후 input박스는 비어야하니까 다시 setState ({comment: ' '})로 설정

{this.state.addContent.map((el, idx) => {
   return (
          <div className="aa" key={idx}>
             <span id='feedId'> {el.id}</span>
             <span id='feedComment'> {el.comment}</span>
             <button className = "deleteButton" onClick={() => this.commentDeleteButton(el)}>삭제</button>
             </div>);
 }
 )}

push된 addContent배열을 이제 뿌려줘야겠지? 그 때 map함수를 사용한다.

🤔 React 댓글 삭제

위 코드에 button도 같이 있다. ! onClick했을 때, this.commentDeleteButton이 실행되도록 지정!

• 그럼 commentDeleteButton은 모야?

commentDeleteButton = (e) => {
  const { addContent } = this.state;
  let removeComment = addContent.filter((el) =>  el.idx !== e.idx);
    this.setState({addContent : removeComment});
  }

delete기능은 filter 메서드를 이용할 수 있다.
removeComment는 addContent를 필터하는데, addContent에서 내가 선택한 하나의 요소와, filter하려는 요소가 같지 않은 것을 리턴한다는 뜻...

쉽게 생각하면, filter는

const arr = [1, 2, 3, 4, 5];
array.filter(num => num !== 3); // [1, 2, 4, 5]

el의 인덱스는 e의 인덱스와 같지 않은 것을 리턴한다...
삭제 버튼을 누르는 순간 결국 addContent의 인덱스를 누르는 셈이니까 el의 인덱스와 e의 인덱스는 같을 수밖에 없고,, 그러니까 제외된다 !!

👩‍💻 후기,,,💫

솔직히 계속 제자리걸음하는 느낌이었다... 동기들은 다 잘 따라가고 차근차근 잘 하는 것 같고 성장하는게 눈에 막 보이는데 난 성장하는것 같지도 않고 제자리걸음 혹은 퇴보하는것같고... 그런 생각이 항상 들었었다. 그렇게 한 달의 시간이 지났고 지난 한 달을 회고하는데 나 자신한테 좀 감동이었다...
불과 한 달 전, 정말 아무것도 몰랐었다. 정말 아무것도... 근데 지금은 알고리즘도 풀고, 리액트가 뭔지도 알고, 깃에 대한 이해도도 생기고 프로그래밍 전반에 대한 윤곽이 잡히는 느낌...

항상 불안하고 초조하며 못 한다고 생각했었는데 그래도 잘 하고 있었ㄷㅏ... 나를 구해줄 사람은 나야,,, 그래, 나 잘하고 있어 !! 해수 화이팅 !!