1차 프로젝트 Day 5🔥

(meeting log와 구현한 이벤트/ onChange/actionTab event 세션 정리)

Daily standing meeting log (1 차 프로젝트 Day 5)

Back-end

Done

• 모델링 로직 구성 논의
• Django 초기 설정
• 모델링 로직 In progress
• 로그인/회원가입 엔드포인트 구현
• 크롤링
• CSV 데이터 뽑기 (due this week)
• git merge 받은 후 충돌사항 1차 끝 확인

Today's to-dos

• git merge 2차 파일 확인 받고, 제품 모델링
• product merge 되면 DB 테스트

blocker

• 머지 산ㅎㅎㅎㅎㅎ🌲🏔🏕🏞🚩 (귀엽게봐주세요~)

Front-end

아래 굵은 글씨 부분이 내가 구현한 /구현할 부분

Done

• 프로젝트 초기 셋팅
• 로그인/회원가입 component 구성
• Nav bar 레이아웃 html 구성
• Man page 레이아웃 html 구성
• 로그인/회원가입 layout
• Main page layout
• Product page layout
• 로그인,회원가입 엔드포인트 백엔드와 확인 완료
• Nav 바 dropdown 이벤트
• 버튼 에니메이션, 컬러에니메이션 호버 이벤트
• sort by 코딩으로만
• 로그인,회원가입기타 추가기능 구현
• 스크롤 Nav bar이벤트
• Nav bar layout 디테일

Today's to-dos

• Newsletter, search 페이지 만들기
• 메인 페이지 슬라이더 이벤트
• 틈 해결하기,
• 제품 상세 페이지 레이아웃 구현 완료
• data 형식 백엔드 공유

blocker x

• x

---

onChange event 🔐

• 인스타그램 클론 할 때, 로그인, 회원가입 input event를 각각 따로 걸어주었는데,input의 이름을 지정 해주면 값 에 접근할 수 있다.

class index extends Component {
  state = {
    email: '',
    password: '',
  };

  changeHandler = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };
  //계산된 속성명 대괄호 속성을 사용해서 키값을 변경할 수잇다.

  render() {

    return (
      <div className='onchange-wrapper'>
        <div className='top'>
          email: <input name='email' 
                   onChange={this.changeHandler} />
          password: <input name='password' 
                      onChange={this.changeHandler} />       

actionTab event 🤩

• 여러 메뉴 탭이 있을때 클릭 했을때마다 해당하는 페이지를 보여주기 위한 기능이다.

1. 먼저 보여주고자 하는 component를 import 한다.

import First from './components/First';
import Second from './components/Second';
import Third from './components/Third';

2. 변수에 객체를 만들어 주고 key와 value형태로 만들어 주고, 클릭할 때 넘겨주는 인자(숫자)와 key 값을 매칭 시켜 원하는 화면을 출력하면 된다.

const obj = {
  0: <First />,
  1: <Second />,
  2: <Third />,
};

3. state에 시작하는 activeTab 값을 0으로 지정해 준다.

export default class App extends Component {
  state = {
    activeTab: 0,
  };

4. 아래 리스트에서 클릭 이벤트가 일어날때마다, 각 매칭에 맞는 숫자를 인자로 전달 해 주고, 인자를 id로 받아, 클릭될 때 마다 해당 숫자로 id 값을 업데이트 해준다.

  handleClick = (id) => {
    this.setState({ activeTab: id });
  };

5. 클릭 할 때 보여줘야 하는 Component 값을 객체에 접근하는 식으로 표현해 놓아서 {obj[this.state.activeTab]} id 값으로 넘겨주는 숫자를 가진 key 값의 value인 각각의 component를 출력하도록 설정 해놓으면 된다!

  render() {
    return (
      <div className='wrapper'>
        <ul className='tabs'>
          <li className = {this.state.activeTab===0? "active" : "" } onClick={() => this.handleClick(0)}>First</li>
          <li className = {this.state.activeTab===1? "active" : "" } onClick={() => this.handleClick(1)}>Second</li>
          <li className = {this.state.activeTab===2? "active" : "" } onClick={() => this.handleClick(2)}>Third</li>
        </ul>
        <div className='contents'>{obj[this.state.activeTab]}</div>
      </div>
    );
  }
}