Tecpit의 교재를 시험해 봤습니다.'실시간으로 악곡 검색하세요! [React]'/TechCommit 기획

기술 승낙 씨의 세뱃돈 계획 Tecpit 씨의'실시간으로 악곡 검색하세요! 제가 [React]를 해 보겠기 때문에 귀결 정보를 보았습니다!

교재 개요

검색된 키워드에 따라 itunsAPI에서 실시간으로 정보를 인용합니다
키워드가 히트된 사진첩과 곡 정보가 50건으로 화면에 표시됩니다.
실제 개요[https://www.techpit.jp/courses/530899/lectures/9701851]
progate의 js ES6를 먼저 해보는 것이 좋습니다.
React를 사용하여 Hanson 형식(텍스트 기본)으로 제작된 교재입니다.
일반적으로 공개된 API 데이터를 끌어오기 때문에 데이터베이스를 사용하지 않습니다.
프론트 데스크의 기술만이 제작할 수 있는 내용.

자신의 전제 지식

JavaScript의 FW는 Vue입니다.js,react,redux,backbone도 인터넷 학교/인터넷 정보에서 기초 동작을 대충 배웠다/
하지만 Vue 외에 터치하는 시간도 짧아서 거의 잊어버렸어요.

이 교재에서 배울 수 있는 지식

・yarn을 사용하여react 관련 데이터를 설치하는 방법
・React의 기본 쓰기 (render, 메서드, 라이프 사이클 등)
• 구성 요소 생성 및 데이터 전달
・ Parcel 번들 사용
・axios를 통해 비동기적으로 데이터를 인용하는 방법
・ RsJS의 개요
프로게이트에서만 js를 배웠다면 모두 새로운 지식의 문턱이 될 것이다.
그러나 각 항목에 기본적인 개념 등을 잘 썼기 때문에'이것은 이런 것'이라는 개요를 이해하기 전까지는 문제가 없다.
yarn은 몇 번 썼지만 묶음은 지금까지도 vue입니다.js와react를 사용할 때 웹팩 등으로 구축했기 때문에parcel과 같은 간단한 것이 있다는 것을 알게 되어 정말 좋았습니다.
이후 검색 버튼이 아닌 RsJS를 사용하여 텍스트 입력으로 비동기적으로 검색하는 시간차 처리를 수행합니다.
이것도 처음 알았어요.은근히 기억하고 싶어!

약간 맞춤형/실제 동작

아이튠즈 검색 결과 50건만 얻을 수 있습니다.
드문 기회이기 때문에 11건 이상의 검색 결과가 나오면'다음''이전'을 보내는 페이지 연결 동작을 했습니다.API의 히트 수에 따라 페이지 연결 구성 요소가 나올지 여부를 판단하는 것 같습니다.
참조: http://bashalog.c-brains.jp/19/10/04-164802.php

프론트 데스크톱의 디스플레이는 배경 이미지와 2열 배열, 페이지화된 맞춤형이다.

전체적인 감상

환경 구조에 관해서 나는parcel 같은 묶는 방법을 본 적이 없다
간단하지만 대량의 캐시 파일을 만드는 습관이 있다는 인상도 있다
처음 하는 사람이라도 참고 정보가 많은 웹팩에서 구축할 수 있다.
장점으로 위에서 말한 바와 같이 각 설명은 개요를 이해할 수 있고 설명도 이해하기 쉽다.
특히 구성 요소 간의 관련성 설명은 이해하기 쉽고 이해가 깊어진다.
하지만 개요는 물론 자신의 마음속에 잘 녹아들려면 문서 등 정보를 읽어야 하고 자신도 몇 번 해야 한다.
또한 기술 오류, 공개 후 처리가 순조롭지 못한 점 등도 많이 던졌지만 진지하게 답변해 주셔서 감사합니다!
읽어주셔서 감사합니다!