Phoenix 및 Liveview에서 후크 사용 시작하기
4036 단어 tailwindcssbeamelixirphoenix
인사
안녕하세요 #devElixir!!! #FullStackElxpro에 오신 것을 환영합니다.
여기에서 Elixir 학습 여정을 위한 전략과 팁에 대해 논의합니다. 이것은 처음부터 엘릭서 개발자로서의 첫 번째 웨이브까지입니다.
저는 Gustavo이고 오늘의 주제는 다음과 같습니다: Phoenix 및 Liveview와 함께 Hooks 사용 시작하기
_ps: VIDEO로 기사를 팔로우할 수 있습니다.
텔레그램 채널에서 엘릭서에 대해 더 알고 싶으세요?
https://elxpro.com/subscribe-elxcrew
실재 보기가 포함된 후크란 무엇입니까?
후크는 서버에 이벤트를 보낼 수 있고 그 반대의 경우도 가능한 "후크"에 지나지 않습니다.
일상 생활에서 Hooks와 Liveview의 차이점은 무엇입니까?
가장 큰 차이점은 후크는 Elixir의 자바스크립트 구문을 사용하여 프런트엔드/백엔드에서 브라우저로 데이터를 보내고 받는 방법이며, LiveView 페이지와 매우 흡사하거나 새로운 것이 없다는 것입니다. 그러나 가장 큰 차이점은 매일 Liveview가 거의 모든 작업을 처리한다는 것입니다. 후크는 LiveView를 사용하는 것이 거의 불가능할 매우 특정한 무언가를 위해 DOM을 조작해야 하는 방법입니다. 가장 일반적인 예는 페이지를 듣고 끝에 도달할 때까지 기다리는 것입니다. 새 요소를 로드하면 Javascript가 이 매우 쉬운 리소스를 제공하고 후크가 서버로 보낼 수 있도록 도와줍니다. 또 다른 예는 지도 조작, 지리 위치 리소스 액세스, Bluetooth, Wi-Fi 등이 브라우저에서만 가능하며 후크가 이러한 프로세스에 도움이 될 것입니다. Liveview는 CRUD, 실시간, 테이블, 알림, 백엔드 및 일반적인 프런트엔드 상호 작용과 같은 일상적인 작업을 담당합니다.
Hooks를 이해하는 것이 왜 중요한가요?
위에서 언급했듯이 일부 이벤트 및 브라우저 리소스에 대한 액세스는 Javascript를 통해 가능하며 Hooks에 대한 이해는 기능 손실 없이 Liveview 및 Elixir와 함께 작업할 수 있는 유연성을 제공합니다.
Hooks를 사용하면 어떤 이점이 있나요?
제 경험상 가장 큰 장점은 지리적 위치, 블루투스, 와이파이 등과 같은 컴퓨터 리소스에 대한 액세스이며 아래 이미지로 확인할 수 있습니다.
지리적 위치
https://www.w3schools.com/html/html5_geolocation.asp
console.log(navigator)
어디서 시작하나요?
첫 번째 단계는 항상 후크가 필요한 때를 이해하는 것입니다. 필요성을 이해하고 LiveView가 제공할 수 없는 경우 후크로 시작합니다see documentation.
Hook의 주요 요소 결정
후크의 주요 요소는 아래 이미지와 같이 id 및 phx-hook="HookName"입니다.
<input type="text" name="mirror[id]" id="mirror-id" phx-hook="MirrorValues" class="border " />
<div id="mirror"></div>
정의 후 다음과 같이 브라우저에 첫 번째 오류가 표시됩니다.
후크에 대한 폴더 구조 생성 및 후크 생성
assets/js/app.js에서 후크에 액세스할 수 있는 가능성을 만듭니다. 이상적인 것은 반죽을 엉망으로 만들 수 있으므로 항상 반죽에 별도의 후크입니다.
후크 파일 호출을 정의하고 이미지에서 볼 수 있듯이 항상 후크를 가리키는 파일을 만든 후 hooks 폴더에서 후크를 만듭니다. 아래 이미지를 참조하십시오.
이제 입력에 MirrorValues로 정의된 후크를 생성하고 이제 Js 클래스를 호출합니다.
생성된 것은 요소가 화면에 추가되었을 때 마운트가 실행된 후크라는 이름의 함수입니다.
그리고 후크가 하는 일은 단순히 입력 데이터를 가져와서 div.mirror 태그에 포함시키는 것입니다.
Hooks가 좋지 않은 예외가 있습니까?
Liveview 교체를 시작할 때 무거운 리프팅이 표시되지 않습니다.
마무리:
나는 당신이 이 기사를 즐겼기를 바라며 후크를 사용하거나 사용하지 말아야 할 때를 아는 데 도움이 되었기를 바랍니다 :D
소셜 네트워크:
후크는 서버에 이벤트를 보낼 수 있고 그 반대의 경우도 가능한 "후크"에 지나지 않습니다.
일상 생활에서 Hooks와 Liveview의 차이점은 무엇입니까?
가장 큰 차이점은 후크는 Elixir의 자바스크립트 구문을 사용하여 프런트엔드/백엔드에서 브라우저로 데이터를 보내고 받는 방법이며, LiveView 페이지와 매우 흡사하거나 새로운 것이 없다는 것입니다. 그러나 가장 큰 차이점은 매일 Liveview가 거의 모든 작업을 처리한다는 것입니다. 후크는 LiveView를 사용하는 것이 거의 불가능할 매우 특정한 무언가를 위해 DOM을 조작해야 하는 방법입니다. 가장 일반적인 예는 페이지를 듣고 끝에 도달할 때까지 기다리는 것입니다. 새 요소를 로드하면 Javascript가 이 매우 쉬운 리소스를 제공하고 후크가 서버로 보낼 수 있도록 도와줍니다. 또 다른 예는 지도 조작, 지리 위치 리소스 액세스, Bluetooth, Wi-Fi 등이 브라우저에서만 가능하며 후크가 이러한 프로세스에 도움이 될 것입니다. Liveview는 CRUD, 실시간, 테이블, 알림, 백엔드 및 일반적인 프런트엔드 상호 작용과 같은 일상적인 작업을 담당합니다.
Hooks를 이해하는 것이 왜 중요한가요?
위에서 언급했듯이 일부 이벤트 및 브라우저 리소스에 대한 액세스는 Javascript를 통해 가능하며 Hooks에 대한 이해는 기능 손실 없이 Liveview 및 Elixir와 함께 작업할 수 있는 유연성을 제공합니다.
Hooks를 사용하면 어떤 이점이 있나요?
제 경험상 가장 큰 장점은 지리적 위치, 블루투스, 와이파이 등과 같은 컴퓨터 리소스에 대한 액세스이며 아래 이미지로 확인할 수 있습니다.
지리적 위치
https://www.w3schools.com/html/html5_geolocation.asp
console.log(navigator)
어디서 시작하나요?
첫 번째 단계는 항상 후크가 필요한 때를 이해하는 것입니다. 필요성을 이해하고 LiveView가 제공할 수 없는 경우 후크로 시작합니다see documentation.
Hook의 주요 요소 결정
후크의 주요 요소는 아래 이미지와 같이 id 및 phx-hook="HookName"입니다.
<input type="text" name="mirror[id]" id="mirror-id" phx-hook="MirrorValues" class="border " />
<div id="mirror"></div>
정의 후 다음과 같이 브라우저에 첫 번째 오류가 표시됩니다.
후크에 대한 폴더 구조 생성 및 후크 생성
assets/js/app.js에서 후크에 액세스할 수 있는 가능성을 만듭니다. 이상적인 것은 반죽을 엉망으로 만들 수 있으므로 항상 반죽에 별도의 후크입니다.
후크 파일 호출을 정의하고 이미지에서 볼 수 있듯이 항상 후크를 가리키는 파일을 만든 후 hooks 폴더에서 후크를 만듭니다. 아래 이미지를 참조하십시오.
이제 입력에 MirrorValues로 정의된 후크를 생성하고 이제 Js 클래스를 호출합니다.
생성된 것은 요소가 화면에 추가되었을 때 마운트가 실행된 후크라는 이름의 함수입니다.
그리고 후크가 하는 일은 단순히 입력 데이터를 가져와서 div.mirror 태그에 포함시키는 것입니다.
Hooks가 좋지 않은 예외가 있습니까?
Liveview 교체를 시작할 때 무거운 리프팅이 표시되지 않습니다.
마무리:
나는 당신이 이 기사를 즐겼기를 바라며 후크를 사용하거나 사용하지 말아야 할 때를 아는 데 도움이 되었기를 바랍니다 :D
소셜 네트워크:
위에서 언급했듯이 일부 이벤트 및 브라우저 리소스에 대한 액세스는 Javascript를 통해 가능하며 Hooks에 대한 이해는 기능 손실 없이 Liveview 및 Elixir와 함께 작업할 수 있는 유연성을 제공합니다.
Hooks를 사용하면 어떤 이점이 있나요?
제 경험상 가장 큰 장점은 지리적 위치, 블루투스, 와이파이 등과 같은 컴퓨터 리소스에 대한 액세스이며 아래 이미지로 확인할 수 있습니다.
지리적 위치
https://www.w3schools.com/html/html5_geolocation.asp
console.log(navigator)
어디서 시작하나요?
첫 번째 단계는 항상 후크가 필요한 때를 이해하는 것입니다. 필요성을 이해하고 LiveView가 제공할 수 없는 경우 후크로 시작합니다see documentation.
Hook의 주요 요소 결정
후크의 주요 요소는 아래 이미지와 같이 id 및 phx-hook="HookName"입니다.
<input type="text" name="mirror[id]" id="mirror-id" phx-hook="MirrorValues" class="border " />
<div id="mirror"></div>
정의 후 다음과 같이 브라우저에 첫 번째 오류가 표시됩니다.
후크에 대한 폴더 구조 생성 및 후크 생성
assets/js/app.js에서 후크에 액세스할 수 있는 가능성을 만듭니다. 이상적인 것은 반죽을 엉망으로 만들 수 있으므로 항상 반죽에 별도의 후크입니다.
후크 파일 호출을 정의하고 이미지에서 볼 수 있듯이 항상 후크를 가리키는 파일을 만든 후 hooks 폴더에서 후크를 만듭니다. 아래 이미지를 참조하십시오.
이제 입력에 MirrorValues로 정의된 후크를 생성하고 이제 Js 클래스를 호출합니다.
생성된 것은 요소가 화면에 추가되었을 때 마운트가 실행된 후크라는 이름의 함수입니다.
그리고 후크가 하는 일은 단순히 입력 데이터를 가져와서 div.mirror 태그에 포함시키는 것입니다.
Hooks가 좋지 않은 예외가 있습니까?
Liveview 교체를 시작할 때 무거운 리프팅이 표시되지 않습니다.
마무리:
나는 당신이 이 기사를 즐겼기를 바라며 후크를 사용하거나 사용하지 말아야 할 때를 아는 데 도움이 되었기를 바랍니다 :D
소셜 네트워크:
console.log(navigator)
첫 번째 단계는 항상 후크가 필요한 때를 이해하는 것입니다. 필요성을 이해하고 LiveView가 제공할 수 없는 경우 후크로 시작합니다see documentation.
Hook의 주요 요소 결정
후크의 주요 요소는 아래 이미지와 같이 id 및 phx-hook="HookName"입니다.
<input type="text" name="mirror[id]" id="mirror-id" phx-hook="MirrorValues" class="border " />
<div id="mirror"></div>
정의 후 다음과 같이 브라우저에 첫 번째 오류가 표시됩니다.
후크에 대한 폴더 구조 생성 및 후크 생성
assets/js/app.js에서 후크에 액세스할 수 있는 가능성을 만듭니다. 이상적인 것은 반죽을 엉망으로 만들 수 있으므로 항상 반죽에 별도의 후크입니다.
후크 파일 호출을 정의하고 이미지에서 볼 수 있듯이 항상 후크를 가리키는 파일을 만든 후 hooks 폴더에서 후크를 만듭니다. 아래 이미지를 참조하십시오.
이제 입력에 MirrorValues로 정의된 후크를 생성하고 이제 Js 클래스를 호출합니다.
생성된 것은 요소가 화면에 추가되었을 때 마운트가 실행된 후크라는 이름의 함수입니다.
그리고 후크가 하는 일은 단순히 입력 데이터를 가져와서 div.mirror 태그에 포함시키는 것입니다.
Hooks가 좋지 않은 예외가 있습니까?
Liveview 교체를 시작할 때 무거운 리프팅이 표시되지 않습니다.
마무리:
나는 당신이 이 기사를 즐겼기를 바라며 후크를 사용하거나 사용하지 말아야 할 때를 아는 데 도움이 되었기를 바랍니다 :D
소셜 네트워크:
나는 당신이 이 기사를 즐겼기를 바라며 후크를 사용하거나 사용하지 말아야 할 때를 아는 데 도움이 되었기를 바랍니다 :D
소셜 네트워크:
Reference
이 문제에 관하여(Phoenix 및 Liveview에서 후크 사용 시작하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/postelxpro/getting-started-using-hooks-with-phoenix-and-liveview-f18텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
