프로젝트 Here

코드 8-10일의 100일

이것은 개인적인 반성문입니다. 제가 이틀 반 프로젝트를 만드는 과정을 상세하게 소개했습니다. 이것은 Pokeapi를 사용하는 Pokemonberry 통계 페이지입니다!주의하십시오. 저는 초급 프로그래머입니다. 만약 당신이 내가 이상한 일을 했다고 생각한다면 저에게 알려주십시오.이 반성문은 나로 하여금 나의 사고 과정을 확장하고 내가 배운 것을 공고히 하기 위해서이다.

목표

API를 사용하여 데이터를 시각적으로 수집 및 표시

한 API에서 데이터를 사용하여 다른 항목을 찾아 데이터 가져오기

타자 스크립트 배우기/React

계획 기능

풍미 수준

상대 치수 각도

시간의 증가 주기를 나타냅니까?

오류와 유감

미터, 낮의 성장시간, 크롬에 표시되지 않음

set Interval 타이머 이상??해커처럼 느껴지는 것과 함께 일하게 하라

미촬영 과정 캡처

CSS 변환 없음/상호 작용 없음

타자 스크립트

튜토리얼에 따라 개념이나 언어를 직접 소개하지 않은 것은 이번이 처음이다.나는 이미 C#의 기본 지식을 알고 있기 때문에, 방금 React 설정에 사용되는 TypeScript 예시를 찾았고, 내가 겪은 오류를 검색했다.나의 이해에 따르면, 이것은 그것이 어떻게 일을 하는지 하는 것이다.
TypeScript에서 모든 변수를 입력해야 합니다.간단해.너는 어떤 유형이 나타날지 알아야 한다.응, 이게 항상 쉬운 건 아니야.내가 주에 대량으로 전달된 데이터를 처리하여 berry 검색을 하고 그 중 모든 부분의 내용을 정의해야 할 때, 이것은 매우 번거로워졌다.어쩌면 내가 잘못했을지도 모르지만, 내가 본 것을 보면, 나는 반드시 두 번 사물을 정의해야 한다.한 번에 인터페이스에 있는 다음 구조 함수에 초기 값을 다시 줍니다.솔직히 말하면 나는 인터페이스의 깊은 의미를 모른다. 단지 너의 상태와 도구를 질서정연하게 정의할 필요가 있을 뿐이다.
성장 주기 구성:

import React, { Component } from 'react';

interface IProps {
  id: number,
  growth_time: number
}

interface IState {
  timer: any,
  stage: string,
  x: number
}


class Growth extends Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      stage: '/growth/AllTreeSeed.png',
      timer: setInterval(this.setTimer, 0),
      x: 1
    }
  }

  render() {
    const { stage } = this.state;
    return (
      <img src={stage} />
    )
  }

  setTimer = () => {
    if (this.props.growth_time != 0) {
      clearInterval(this.state.timer);
      this.setState({ timer: setInterval(this.changeDisplay, 1000 * this.props.growth_time) });
    }
  }

  changeDisplay = () => {
    if (this.state.x >= 5) {
      this.setState({ x: 0 });
    }
    switch (this.state.x) {
      case 0: this.setState({ stage: `${process.env.PUBLIC_URL}/growth/AllTreeSeed.png` }); break;
      case 1: this.setState({ stage: `${process.env.PUBLIC_URL}/growth/AllTreeSprout.png` }); break;
      case 2: this.setState({ stage: `${process.env.PUBLIC_URL}/growth/${this.props.id}Taller.png` }); break;
      case 3: this.setState({ stage: `${process.env.PUBLIC_URL}/growth/${this.props.id}Bloom.png` }); break;
      case 4: this.setState({ stage: `${process.env.PUBLIC_URL}/growth/${this.props.id}Berry.png` }); break;
    }
    this.setState({ x: this.state.x + 1 })
  }

  componentWillUnmount() {
    clearInterval(this.state.timer);
  }
}

export default Growth;

간격 설정(&H)

이렇게 하는 목적은 성장에 필요한 시간에 따라 성장 주기 도형의 갱신이 비교적 느리다는 것이다.시간당 1초.
방금 내가 전에 겪은 문제를 복구했는데, 내가 이 글을 쓸 때, 나는 가만히 있을 수 없었다.처음에 나는 상태의 타이머를 5000*this로 설정했다.도구.growth\u time, 문제는 내 포함 구성 요소에서 내 값을 초기화할 때growth time를 0으로 설정하는 것입니다.따라서 구성 요소가 시작될 때, 간격은 0밀리초마다 업데이트되며, 우리가 이 타이머를 지우고 새 타이머를 시작할 때까지 미친 듯이 업데이트됩니다.이 문제는 이전에 존재해 왔습니다. 정확한 도구를 받은 후에 함수를 업데이트해야 하지만,componentDidUpdate () 는 귀속되고 마운트될 수 있기 때문에 상태를 설정할 수 있습니다.마찬가지로, 완전히 틀리지는 않지만, 렌더 함수에서 setTimer를 호출하면 렌더링할 때마다 내용을 업데이트해 보라고 경고합니다.
이 해결 방안은 해커처럼 느껴진다. 바로 set Interval (원래의 타이머가 0으로 설정되어 있기 때문에) 을 계속 호출하는 것이다. 우리가growth\u time props가 0이 아니라는 것을 받을 때까지, 일단 도구가 생기면 (또는 더 정확히 말하면 도구는 내가 원하는 것) 칸막이를 제거하는 것이다. 내가 알고 있는 바와 같이, 내가 타이머의 상태를 바꾸어도 계속 실행하고changeDisplay에 새로운 간격을 설정한다.

수학

어, 수학.나는 내가 너무 멍청해서 수학을 배울 줄 모른다고 말할 수 있지만, 이것이 바로 내가 말한 인코딩에 관한 말이다. 지금 내가 어디에 있는지 봐라!그러나 많은 일에 대해 간단한 일이라도 최선의 해결 방안을 찾으려고 노력하고 있기 때문에 한 걸음 더 나아가겠습니다.

API에 따라 우리는 숫자/40의 효가를 얻었다.각 맛의 과일에 대해 이 숫자는 10이든 5든 상관없기 때문에 우리의 표시에 따르면 우리는 반 개의 별을 얻을 수 있다.우리는 별의 값이 10점일 것이다. 그래서 우리는 효력을 없애고 그것을 10으로 나누어 1의 위치를 얻고, 우리가 얼마나 채우고 반으로 채울 것인지, 비록 풀 스타스라고 명명되었지만.별은 for 순환으로 실행되기 때문에 만약 우리가.5 그 후에도 우리는 또 다른 항성을 창조할 것이다.
우리가 반 개의 별이 있는지 확인하기 위해서, 우리는 모듈러를 사용하여 10을 나눌 때, 우리가 남은 수가 있는지 없는지를 봅시다.만약 나머지가 0 (false) 이라면, 삼원 연산자 (화식소if문장) 를 사용합니다. 우리는 반성이 없다고 합니다.만약 나머지가 0(true)이 아닌 숫자라면, 우리는 우리가 반성이 있다는 것을 안다.
우리는 남은 것으로 공성을 계산한 후에 또 다른 삼원산자로 반성이 있는지 없는지를 보았다.만약 있다면, 우리는 그것으로 그 중의 올스타를 교체하고 싶다.

    let potency = this.props.potency;
    let fullStars: number = potency / 10;
    let halfStars: number = potency % 10 ? 0 : 1;
    let emptyStars: number = 4 - fullStars;
    halfStars ? null : fullStars--;

포켓몬 API

나는 PokéAPI로 대부분의 과일 데이터를 수집했다.성장 주기와 크기 비교를 위해 (200여 장) 그림을 수동으로 저장했지만, 실제로는 get 요청과axios 링크를 통해 berry 아이콘을 받았습니다.펄프 정보는 펄프의 항목 목록에 독립되어 있으며, 프로젝트 이미지를 가리키는 URL을 포함합니다.

  fetchBerry() {
    axios.get(`https://pokeapi.co/api/v2/berry/${this.props.berryID}`)
      .then(res => {
        this.setState({ info: res.data });
        return axios.get(`${this.state.info.item.url}`)
      }).then(res => {
        this.setState({ item: res.data });
      })
  }

설계

나는 CSS를 코드와 연결시켜야 하는지, 아니면 자신의 파일 밖으로 연결시켜야 하는지에 대한 논쟁을 보았다.나는 자신의 파일에서 외부 처리를 하는 것을 더 좋아한다고 생각하지만, 내연에서 동적 스타일을 설명하는 것이 매우 편리하다는 것을 발견했다.모든 과일의 크기에 대해 우리는 숫자를 제시했다. 나는 그것을 이미지의 높이로 직접 변환한 다음에 3을 나누면 가장 큰 것들은 디자인을 파괴하지 않는다.너는 여전히 아주 작은 과일을 얻을 수 있지만, 관계의 크기가 같다면, 나는 이것이 가능하다고 생각한다. 우리가 아이콘 정령이 그 예상 디자인을 표시하기만 하면.

        <img 
          src={`${process.env.PUBLIC_URL}/size/${this.props.id}.png`}
          style={{ height: `${this.props.size / 3}px` }}
        />

다음은 뭐예요?

나는 나의 CSS 애니메이션 기술을 강화해야 하기 때문에 상호작용하는 것이 필요하지만, 나는 아직 무엇인지 확실하지 않다.나는 이곳의 평론에서 찾은 건의에 사용된 기호를 사용했기 때문에 나는 내가 무엇을 배우고 싶은지, 그리고 나나 나의 친구가 어떤 항목에 대한 생각을 가지고 있는지 계속 추적하고 있다.저는 VSCode의 live share를 읽고 좋은 친구/스승님과 함께 사용해 봤습니다. 저는 정말 흥분했습니다!

Localhost는 더 이상 로컬이 아닙니다.

조나슨 카트・ 2019년 3월 26일・ 5분 읽기

#webdev #javascript #beginners #productivity

우리는 이미 한동안 그것과 프로그래밍을 맞추지 못했지만, 나는 정말 그것으로 그녀와 프로젝트를 하고 싶다. 나는 단지 좋은 생각을 생각해 낼 수 있을 뿐이다.