본문 바로가기

자바스크립트21

[번역] svelteKit -fetch requests Making fetch requests 출처 : https://kit.svelte.dev/docs/load#making-fetch-requests 외부 API 또는 +server.js 핸들러에서 데이터를 가져오려면 제공되는 'fetch' 기능을 사용할 수 있습니다. 이 기능은 몇 가지 추가 기능이 있는 native fetch web API 와 동일하게 작동합니다. 페이지 요청에 대한 쿠키(cookie) 및 권한 부여(authorization) 헤더를 상속하므로 서버에서 자격 증명 요청을 만드는 데 사용할 수 있습니다. 서버에서 상호적인 요청을 할 수 있습니다(일반적으로 fetch는 서버 컨텍스트에서 사용될 때 출처가 있는 URL이 필요합니다) 내부 요청(예: +server.js 경로)은 HTTP 호출의 .. 2022. 11. 11.
[svelteKit] 상위 레이아웃 무시하기 svelteKit에서는 폴더 내 +layout.svelte 파일을 통해 공통된 레이아웃을 적용하도록 해 줄 수 있는데, 가끔.. 이 레이아웃에서 벗어나 독자적인 형태를 띌 페이지를 제작할 필요가 있습니다. 그럴 땐 파일 명을 +page.svelte 가 아닌 +page@.svelte 라고 지정해주면 됩니다. 다만 이 방법은 routes 폴더 가장 바깥쪽, 즉 사이트 접속 시 가장 먼저 보여지는 페이지에서는 적용이 안 되는 것 같습니다. 메인 페이지만 풀 화면으로 보이게 하는 경우가 많은데, 별로군요 혹은 어떤 폴더(url) 내의 모든 페이지가 상위 레이아웃을 무시할 필요가 있습니다. 이땐 폴더 안의 +layout.svelte를 +layout@.svelte라고 명명해주면 됩니다 2022. 11. 11.
스벨트 공식 튜토리얼 Introduction a. Basics b. Adding data c. Dynamic attributes d. Styling e. Nested components f. HTML tags g. Making an app Reactivity a. Assignments b. Declarations c. Statements d. Updating arrays and objects Props a. Declaring props b. Default values c. Spread props Logic a. If blocks b. Else blocks c. Else-if blocks d. Each blocks e. Keyed each blocks f. Await blocks Events a. DOM events b. In.. 2022. 10. 27.
[한글] SvelteKit - Project Structure SvelteKit 공식 사이트의 튜토리얼을 번역한 내용입니다 :) 원본은 아래 링크를 참고해주세요 https://kit.svelte.dev/docs/project-structure start npm create svelte@latest my-app cd my-app npm install npm run dev Project Structure (프로젝트 구조) my-project/ ├ src/ │ ├ lib/ │ │ ├ server/ │ │ │ └ [서버전용 lib 파일] │ │ └ [작성한 lib 파일] ex.image라는이름의 폴더 생성 후 이미지 요소를 저장할 수 있음 │ ├ params/ │ │ └ [작성한 파라미터 매칭] │ ├ routes/ │ │ └ [앱의 구현, url과 일치하는 폴더 생성] .. 2022. 10. 27.
까탈스런 리액트 오류원인 render하는 함수 이름의 첫글자는 대문자여야 한다. 메서드도 다 카멜케이스!!!! render를 위해 불러온 함수에 return이 없으면 에러가 난다 on과 함께 쓰는 이벤트 리스너는, onClick 처럼 카멜표기법으로 써야한다. html처럼 onclick이라고 써주면 인식을 못한다. if 구문정도는 if 떼고 써도 되나보다 / for i in array 정도도 그냥 array이름만 쓰니까 됐다. return ( 변환기 시간 to 분 km to meter {index==="0" ? :null} {index==="1" ? :null} ); css는 중괄호 두개와 함께 써야 한다. ex) event.target.value가 undefined다. event.target.getAttribute('value'.. 2022. 9. 26.
클립보드에 컨텐츠를 복사하는 바닐라 자바스크립트 버튼을 클릭하면 특정 컨텐츠(텍스트 등..)가 클립보드에 복사되는 바닐라 자바스크립트 함수를 공유합니다! HTML에 자바스크립트 함수를 적용하기 복사 copyToClipboard() 는 아래 function copyToClipBoard(val) { var t = document.createElement("textarea"); document.body.appendChild(t); t.value = val; t.select(); document.execCommand('copy'); document.body.removeChild(t); }; 전체코드 안뇽 이건복사버튼 2022. 9. 15.
마우스의 움직임을 따라가는 요소 만들기 See the Pen set Petals by zenna (@zenna9) on CodePen. 2022. 9. 5.
키보드 입력으로 이벤트 발생하기 [바닐라 자바스크립트] 목표 : 인터넷 화면에서 특정 키보드 입력을 받으면 이벤트를 발생시키도록 코드를 작성합니다 참고 : https://cpro95.tistory.com/249 참고한 블로그에 키 이벤트에 대해 굉장히 설명을 잘 해주셨는데, alt, ctrl, shift 등의 키 코드와 함께 정리해두면 좋을 것 같아 포스팅을 작성합니다. 먼저 키보드입력을 받을 때, 자바스크립트에서는 'a' 나 'ctrl' 로 명명하지 않고 특정한 숫자 값으로 인식합니다. 아래 표에서 각 키보드 버튼 별 숫자를 확인하세요 키보드 버튼 키보드 버튼 키보드 버튼 키보드 버튼 112 F1 9 Tab 65 A 96 0 113 F2 12 Clear 66 B 97 1 114 F3 13 Enter 67 C 98 2 115 F4 16 Shift 68 D 9.. 2022. 9. 1.
슬라이드 이미지 만들기 아래와 같은 이미지 슬라이드를 만들어보겠습니다. css와 자바스크립트를 활용합니다. HTML 삽입 미리보기할 수 없는 소스 html코드 55 css 코드 /* borderzone */ /* 만들면서 어떤 구역의 크기가 틀리고, 어떤 구역이 빗나가있는지 확인하기 위한 용도이므로 배포 시 삭제하시면 됩니다. */ .conta{border: 1px rgb(142, 214, 34) solid;} .toleft{border: 1px rgb(253, 193, 104) solid;} .toright{border: 1px rgb(252, 185, 98) solid;} .content{border: 1px rgb(188, 152, 255) solid;} .slide{border: 2px rgb(99, 224, 255) .. 2022. 6. 15.
728x90

티스토리툴바