Last active
September 30, 2025 08:46
-
-
Save hyunbinseo/8e85acee7c30e8456c1a3d894dd37007 to your computer and use it in GitHub Desktop.
Learning Material
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <canvas></canvas> | |
| <script> | |
| // 서버에서 돌아갈 수 없음, 서버에는 document/window가 없음 | |
| const ctx = document.querySelector('canvas').getContext('2d'); | |
| window.alert('Hello..'); // 서버에는 window 없음 | |
| // 서버에서 돌아가도 상관 없음. 그냥 함수 정의하는 거임. 실행되지 않음 | |
| const a = () => window.alert('Can you see me?'); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script lang="ts"> | |
| import { onMount } from 'svelte'; | |
| let canvas: HTMLCanvasElement; | |
| onMount(() => { | |
| // 이거 대신 attach 쓰는 거 | |
| canvas.getContext('2d')!.fillRect(0, 0, 100, 100); | |
| }); | |
| </script> | |
| <button | |
| type="button" | |
| onclick={(e) => { | |
| // 타입이 지정됨 | |
| console.log(e.currentTarget.disabled); | |
| window.alert('Hello, World!'); | |
| canvas.getContext('2d')!.fillRect(0, 0, 100, 100); | |
| }} | |
| > | |
| Label | |
| </button> | |
| <canvas | |
| bind:this={canvas} | |
| {@attach (canvas) => { | |
| // 브라우저에서만 실행됐으면 좋겠어요. | |
| // 처음 element mount 됐을 때만 실행 | |
| // 이 경우에는 canvas setup 용도로 | |
| canvas.getContext('2d')!.fillRect(0, 0, 100, 100); | |
| }} | |
| ></canvas> | |
| <!-- 태초에 JS가 없었다. --> | |
| <!-- 이렇게만 적으면 양식이 제출됨 --> | |
| <form method="POST"> | |
| <input type="text" name="name" required /> | |
| <!-- 우리 둘은 같은 역할을 해요 --> | |
| <button>나를 제출해줘</button> | |
| <button type="submit">나를 제출해줘</button> | |
| </form> | |
| <style></style> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| hello(); | |
| // 호이스팅 당함 | |
| function hello() { | |
| console.log(a); | |
| } | |
| let a = 3; | |
| // 호이스팅 안 함 | |
| const b = () => {}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
js코드는 서버에서도 돌아가고 클라이언트에서도 돌아감
: SSR - js코드를 가지고 서버에서 html을 만들어서 보내준다
CSR - js 코드를 돌려서 bind, onclickhandler등을 넣어주는