첫 번째 React 애플리케이션 여행

처음부터 응용 프로그램을 구축하는 것은 그것의 외관에 그치지 않는다.
그리 어렵지 않다.하지만 내게는 신출내기로서 어려운 일이다.
우리들은 나의 여정을 세 부분으로 나누자.

이 프로젝트에 관하여

내가 직면한 문제와 디버깅

종료

이 항목에 관하여

우리는 모두 앉아서 음악을 감상할 수 있는 곳을 찾고 있다.하루를 바쁘게 보낸 후에도 우리는 여전히 이곳에서 평온을 누릴 수 있다.우리들 중 몇몇에게는 집이고, 몇몇에게는 그들이 사랑하는 사람이다.
지레야 선생님의 말씀을 인용하여 누군가가 당신을 생각하는 곳을 집이라고 할 수 있습니다.
우리는 이번 대유행에서 많은 것을 겪었다.그래서 우리는 왜 긴장을 풀지 않고 심호흡을 하고 긴장을 풀지 않는지...

내가 직면한 문제와 디버깅

처음에 나는 배경을 하나의 구성 요소로 사용하고 싶었다.그러나 다른 어셈블리가 포함된 후에는 중첩되지 않습니다.그래서 구글에서 이 문제를 검색해 봤는데 두 가지 기본적인 해결 방안이 있었어요.

커버 레이어 사용

z지수 변경

그러나 나는 이 두 가지 해결 방안을 동시에 응용할 수 없다.그래서 저는 CSS에 이미지를 적용하는 까다로운 해결 방안을 제시했습니다.그리고 나는 CSS에서 사용했다background-image : url(/xyz.jpg); .현재, 이 구성 요소들은 내가 원하는 대로 중첩된다.그것은 일을 아주 잘했지만 동시에 새로운 문제가 생겼다.배경 이미지는 최대 높이와 너비로 배율이 조정됩니다.이 점을 극복하기 위해 background-size : cover;라고 썼는데 이것이 나에게 가장 효과적이라고 생각한다.
그리고 나는 Navbar 조립품을 하나 만들었다.효과가 좋다😊.
그리고 더 많은 코드를 만든 후에 나는 아이디어를 하나 생각해냈다💡. 그것이 바로, 왜 나는 화면에 나오는 단어를 더 진실하게 만들지 않는가. 왜냐하면 누군가가 이 문장을 입력하고 있기 때문이다.그리고 구글에서 검색했는데 제가 사용하는 도서관은React Typist입니다.너도 npm 사이트에 가서 시험해 볼 수 있다.
나는 내 Type 구성 요소에서 그것을 사용했다.그들의 문서를 읽는 것을 통해 나는 그것을 응용 프로그램에 쉽게 적용할 수 있다.
그리고 나는 내 프로그램에 sound 구성 요소를 추가했다.내가 사용하는 소프트웨어 패키지는 react-audio-player 출처npm입니다.코드를 수정함으로써 현재 나는 내 프로그램에서 오디오 테이프를 볼 수 있다.
현재 발생한 문제는 플레이어에 URL을 추가할 수 없다는 것입니다.컴퓨터에서 음악 파일을 다운로드했습니다. 이것은 제 구성 요소와 같은 폴더에 있지만, 플레이어가 정상적으로 작동하도록 파일 위치를 URL로 전달하기에는 부족합니다.

Programmers ability is - whenever they face any problem in their code. They Google.

나도 이렇게 했는데 그중 일부는'음악의 위치를 변수로 사용하고 코드에서 변수를 사용한다'고 말했다.사실 그것은 작용하지 않는다.😵
이 문제에 있어서 몇 시간이 걸리는 것은 나로 하여금 갈수록 낙담하게 한다.그리고 나는 다른 소프트웨어 패키지로 같은 일을 하고 싶다.그러나 나는 기본적인 규칙을 깨닫기 전까지 같은 문제에 갇혀 있었다.

During the time of coding if you ever stuck in a problem for a long time. Just think from the start again and ask yourself the 5 W's and H. Then you will definitely find your way.

그래서 나는 기본적으로 내가 필요로 하는 URL을 다시 한 번 했다. 무엇에 쓰는지, 내 프로그램에서 그것을 사용하는지.그래서 해결책을 생각해냈어요.이것은 합법적일 수도 있고 불법일 수도 있다.몰라요.하지만 아주 간단한 해결 방안은

구글이'xyz mp3 다운로드'를 하거나 다운로드할 수 있는 곳이라면 다운로드 링크를 클릭하면 된다.😤

다운로드 링크를 확인합니다.

이것은 당신의 URL입니다.

그리고 모든 것이 다 좋은 것 같았다.하지만 중요한 문제는 아직 나를 기다리고 있다.몰라요. 그런데 기다리고 있어요...⏳
내 이야기로 돌아가면,
지금까지 모든 것이 정상적이었기 때문에, 나는 나의 응용 프로그램 응답 속도를 더욱 빨리 하려고 한다.그리고 나는 연구를 시작했다@media queries.나는 아주 잘 썼다@media queries.@media queries를 다 쓴 후에 나는 이 응용 프로그램이 초상화 휴대전화를 위해 디자인된 것이 아니라고 확신했다.그리고 나는 왜 내가 사용자에게 그의 휴대전화를 돌리도록 힌트를 주지 말아야 하는지 생각했다.그 후 내 뇌세포는 이 문제를 처리하기 시작했다.다시 한 번, 첫 번째 문제가 생겼다. 바로 나의 구성 요소가 중첩되지 않았다는 것이다.그리고 나는 구글에서 사용자가 휴대전화를 돌릴 수 있는 가장 좋은 방법을 검색했다.하지만 답은 긍정적이다.나는 단지 React를 하고 있을 뿐이다.그래서 구글에서 검색한 후에 사용자로부터 방향 정보를 얻을 수 있는 소프트웨어 패키지를 발견했다.use-window-orientation . Goto
너희들 중 일부는 "아이고, 왜 직접 screen.height와screen.width로 픽셀 정보를 얻지 않고 이러는 거야?"라고 생각할 수도 있다.

if (screen.width > screen.height ) {
    return landscape;
} else {
    return portrait;
}

네, 저도 이 해결 방안을 제시했지만, 그것은 문제를 해결한 후에입니다.
그래서
문서에서, 그들은 다른 방식으로 이 용법을 설명했지만, 나는 다른 기술을 더욱 좋아한다.조건을 사용하여 렌더링

const { portrait } = useWindowOrientation();
    if (portrait) {
        return <Rotate />
    }
    else {
        return (
            <div className = "Home">
                <Navbar />
                <Type />
                <Music />
            </div>
        )
    }

이것이 바로 해결 방안이다.

종점

나는 내 친구에게 이 문제를 알려주어서 매우 기뻤다. 나는 그것을 해결했다.이것은 단지 이 프로젝트의 기본적인 시작일 뿐, 이 프로젝트에서 나는 아직 해야 할 일이 매우 많다.일부 전문 개발자들에게 이런 문제들은 그들의 문제 목록에 없을 수도 있다.그러나 내가 이 글을 쓴 것은 나 같은 신출내기들을 위해서이다. 그들은 여전히 문제를 해결할 방법을 찾으려고 노력하고 있다.
너는 나의 github 환매 협의를 볼 수 있다.

The beginning is the end and the end is the beginning.

본문을 읽어 주셔서 감사합니다.
👇🌝
GitHub-repo