[React] westagram 메인화면 기능 구현 1

최종구현목표

• 리액트로 인스타그램 클론코딩

 

 

• 깃으로 공유한 Nav.js, variables.scss, reset.scss, common.scss

 

 

• state와 함수

 

• 댓글이 입력된 댓글리스트를 컴포넌트화

ㅇ

• 컴포넌트화 된 리스트 map 메서드 사용

 

• form tag 내부 input, button 리스트와 이벤트

 

 

ㅇ 구현 사항 설명

• 로그인, 피드 레이아웃
• 팀원들간 nav 컴포넌트 공용사용
• 팀원들간 variables.scss 변수 지정하여 공동사용
• useState 활용하여 로그인, 피드 댓글 기능 추가
• 작성할때마다 나타나는 Review 컴포넌트화하여 map함수로 구현하였습니다.
• 로그인 유효성 검사, 댓글 input 유효성 검사 (조건문을 활용하여 로그인버튼, 댓글게시버튼 비/활성화)
• calssName camelCase로 컨벤션 통일
• 로그인 검사시 includes메서드 boolean state를 이용하여 구현

ㅇ 성장한점

   Github   

• 팀원들끼리 공통으로 사용할 컴포넌트나 SASS를 위해 전체의 컨벤션을 일치, 확장성에 대한 중요성을 느꼈습니다.(camelCase로 통일)
• 깃허브를 처음 사용하면서 Github로 협력해서 업무를 진행하는 법을 배웠습니다.
• 기술적인 측면보다 팀원간 협의를 통해 컨벤션을 일치시키는 과정, 서로 어려운 부분을 공유하고 협의를 통해서 해결해내는 과정이 정말 흥미로웠고 실무에서 코딩스킬은 기본이고 커뮤니케이션 능력이 정말 중요하다고 느꼈습니다.

    React    

• state 관리법을 익혔습니다.
• boolean을 이용하여 기능을 구현하여 state와 boolean 삼항연산자에 연결성이 익숙해졋습니다.
• 컴포넌트 분리와 props 데이터전달에 대한 이해도가 높아졌습니다.

ㅇ 리뷰

• 삭제기능을 추가해볼 예정입니다.
• 키보드이벤트에 대해서 좀 더 정리가 필요하다고 느꼈습니다. (블로그로 추가 정리할예정)
• 이벤트의 동작을 막아주는 event.preventDefault()에 대한 이해가 필요하다고 느꼈습니다. (블로그로 추가 정리할예정)
• 댓글기능시 띄어쓰기를 해도 입력되고 게시버튼이 활성화 되는 이슈가 있어 기능 구현할 예정입니다.(수정반영)

ㅇ 추가 수정사항

1. input값을 초기화는 진행해줬는데 발행 후 공백임에도 게시 버튼 불이 켜지는 에러가 있었다. false로 초기값을 주어 입력발생시 게시글 불도 꺼주었다.