15일차: 사이트 기본 사항 완료
시험 합격🗒
FreeCodeCamp 프로젝트에는 일반적으로 웹 사이트를 테스트하는 데 사용할 수 있는 JS 스크립트가 포함되어 있습니다.
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
이렇게 하면 사이트 자체 위에 테스트를 위한 특수 UI가 렌더링됩니다.
내가 좋아하는 첫 번째 일은 특정 태그가 있는 HTML 요소를 찾는 모든 테스트를 완료하는 것입니다. VSCode에서 확장
Five Server을 시작하고 작업을 시작했습니다.
이를 통해 웹사이트의 최종 구조가 무엇인지 알 수 있습니다.
그런 다음 필요한 라이브러리인 React, React DOM 및 jQuery를 포함했습니다. 그런 다음 시계 옵션으로
dart-sass 및 babel를 시작했습니다.이제 React 코드를 사용할 시간입니다!
최소한의
다음으로 할 일은
div 로 id="wrapper" 를 쓰는 것이었습니다. 이것이 우리 React의 뿌리가 될 것입니다. 한 시간 후에 나는 이것을 가지고 있습니다 :
"뭐야?! 이거 하는데 한시간 걸렸어?"슬프게도 그렇습니다. 나는 'ReactDOM/client' 대신
ReactDOM의 사용에 대해 불평하는 오류를 발견했습니다. 에너지와 시간의 블랙홀 😵💫입니다.React는 서버 측 렌더링 스크립트를 클라이언트 측과 분리할 계획인 것으로 나타났습니다. 이것은 클라이언트 측에 대한 CDN 링크가 없기 때문에 이상하게 느껴졌습니다. 일반
ReactDOM CDN 링크만. 아직 이 문제를 어떻게 처리해야 할지 모르겠지만 코드는 여전히 작동합니다 🧐.그런 다음 나머지 구성 요소를 작성하고 부모 구성 요소 안에 넣었습니다.
FreeCodeCamp의 테스트는 올바른 HTML 구조를 가지고 있음을 확인했습니다. 논리의 시간입니다!
API로 놀기
프로젝트 이름에서 알 수 있듯이 사용자가 버튼을 누를 때마다 임의의 따옴표를 표시해야 합니다.
신뢰할 수 있는 수백 개의 인용문을 만들 만큼 현명하지 못하기 때문에 이를 지원하는 API를 찾아야 했습니다. 나중에 Google에서 몇 번 검색하여 필요한 것을 찾았습니다.
루크 피비 / 할당 가능
임의 인용 API
인용 가능
Quotable은 무료 오픈 소스 견적 API입니다. 그것은 원래 FreeCodeCamp 프로젝트의 일부로 지어졌습니다. 기여에 관심이 있으시면 Contributors Guide 을 확인하십시오.
서버
이름
URL
설명
생산
api.quotable.io
공개 API 서버
각색
staging.quotable.io
스테이징 서버는 테스트 전용입니다. 마스터 분기는 모든 커밋 후 스테이징 서버에 자동으로 배포됩니다. 변경 사항이 테스트되면 프로덕션 서버로 푸시됩니다.
API 참조
예
임의 견적 받기
GET /random
Returns a single random quote from the database
Query parameters
| param | type | Description |
|---|---|---|
| maxLength | Int |
The maximum Length in characters ( can |
The code for fetching the API is very simple:
Now, let's work on the UI!
멋진 효과 💫
FreeCodeCamp gave an example for each project. This is the example for this one:
I want to try and replicate what has been done here. So after two hours, I finally got a simple result!
Notice that I didn't randomize the colors yet.
Here's the code if you're curious:
handleNewQuote() {
const this_func = this;
document.documentElement.style.setProperty("--color", "white");
async function getApi() {
return fetch("https://api.quotable.io/random?tags=famous-quotes")
.then(Response => Response.json())
.then(data => ({
quote: data.content,
author: data.author
}));
};
async function updateQuote() {
let responseData = await getApi();
setTimeout(() => {
this_func.setState(() => ({
quote: responseData.quote,
author: responseData.author,
}));
document.documentElement.style.setProperty("--color", "red");
}, 1000);
};
updateQuote();
}
이 함수는 버튼을 누를 때마다 호출됩니다. 또한 텍스트 색상으로 사용되는 CSS 변수
--color가 필요합니다. <HTML> 태그에 변수를 배치합니다.후기
개인적으로 이것은 React 분야에서 큰 도약입니다. 저는 Redux를 사용하지 않았습니다. 이는 상태가 충분히 단순하여 더 많은 불필요한 라이브러리에 부담을 주고 싶지 않기 때문입니다. 기능으로 부풀어 오른 것보다 내 웹 사이트가 가벼운 것을 좋아한다고 느꼈습니다.
암튼 다들 챌린지 잘 하시길 바래요 😁
Github에서 저를 팔로우하세요!
또한 !
Reference
이 문제에 관하여(15일차: 사이트 기본 사항 완료), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kemystra/day-15-completing-the-site-basics-4jam텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
