안녕하세요 14기 프론트엔드 운영진 안건희입니다.🤗
3주차 미션은 이전 주차 미션 때 사용하셨던 react hooks의 연장선입니다.
이번 미션을 통해 useState, useEffect, 그리고 useRef의 사용법을 더 잘 익히실 수 있을거예요.
기능을 구현하는 것도 좋지만, css로도 여러분의 창의성을 펼쳐주세요 !! 💸💸
마감 일자는 이번주 금요일, 10월 8일 자정입니다. (마감 시간 꼭 지켜주세요!)
진행 중 어려운 상황이 있다면 프론트 전체 톡방, 혹은 슬랙 채널이나 운영진을 통해 편하게 질문하셔도 좋습니다.
그러라고 운영진이 있는거겠죠?
이번주도 기대하겠습니다.
14기 프론트 짱짱^.^
-useState로 컴포넌트의 상태를 관리할 수 있게된다.
-useEffect의 사용법을 이해한다.
-Styled-Components를 통한 CSS-in-JS 및 CSS Preprocessor의 사용법을 익힙니다.
- 2021년 10월 8일(금)까지 (마감 기한 꼭 지켜주세요)
-함수형 컴포넌트를 사용한다.
-styled-component를 이용하여 스타일링 한다. 스타일링은 자유롭게! 기존에 있는 메신저를 가져오셔도 되고 완전히 독창적인걸 만드셔도 됩니다. 다만 기본 구성요소들은 지켜주세요! 그리고 색도 다양하게 넣어보시구요
-상단바에 메시지를 보내는 사람의 프로필을 띄운다. + 상단바의 프로필로 메시지 발신자를 바꿀 수 있게 한다.
-공백메시지는 입력되지 않도록 핸들링 한다. + alert 메세지 띄우기
-메시지 전송후 입력칸을 비워준다.
-메시지 전송후 스크롤을 밑으로 내려준다. (Hint : useEffect + scrollBy 이용)
-컴포넌트 이름을 역할이 잘 드러나게 짓는다.
-개발자도구에서 Style을 복사하지말고, 직접 styled-components를 사용하여 만드는 연습을 한다ㅠㅠ.
-결과 화면을 구현한다.
npm start : 로컬에서 react application을 자동으로 리로드하여 실행시켜줍니다.