JAVASCRIPT 22

Next.js 13.2 시작하기 (Approuter)

Next.js 13.2 페이지와 레이아웃 페이지 생성하기(Pages) nextjs13.2부터는 파일이 아닌 경로가 페이지 경로의 기준이 된다. 페이지의 경로는 app폴더 내의 디렉토리의 경로와 같다. 예를 들어 사이트(site.com/)에 접속 하면 최상위 페이지 app/page.js를 불러온다. URL 상대 경로 페이지 경로 site.com/ / app/page.js site.com/dashboard/ /dashboard app/dashboard/page.js site.com/dashboard/settings/ /dashboard/settings/ app/dashboard/settings/page.js export default function HomePage() { return ( Home ); } ..

JAVASCRIPT 2023.03.07

firebase web version 8에서 회원가입, 인증 구현하기.

※ 버전8과 버전9는 사용법이 다를 수 있으므로 npm firebase --version 명령어로 확인 필요 0. Firebase 웹 SDK 버전 8에서 버전 9으로 올리는 방법 버전 8에서 모듈식 웹 SDK로 업그레이드 | Firebase Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기 이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 버전 8에서 모듈 firebase.google.com 1. 파이어 베이스 시작하기 (app.initializeApp) JavaScript 프로젝트에 Firebase 추가 Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. ..

JAVASCRIPT 2023.01.03

Error: [@RNC/AsyncStorage]: NativeModule: AsyncStorage is null. 해결법

1. 오류 상황 @react-native-community/async-storage 설치 후 실행 시 오류 발생 오류 ERROR Error: [@RNC/AsyncStorage]: NativeModule: AsyncStorage is null. To fix this issue try these steps: • Run `react-native link @react-native-community/async-storage` in the project root. • Rebuild and restart the app. • Run the packager with `--reset-cache` flag. • If you are using CocoaPods on iOS, run `pod install` in the `io..

JAVASCRIPT 2022.12.24

styled-components 설치 시 unable to resolve dependency tree 오류 해결

1. 오류 상황 react-native 사용 중 styled-components 설치 시 오류 발생 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: react-native-todo@1.0.0 npm ERR! Found: react@18.1.0 npm ERR! node_modules/react npm ERR! react@"18.1.0" from the root project npm ERR! peer react@">= 16.8.0" from styled-components@5.3.6 npm ERR! node_modules/styled-components npm ..

JAVASCRIPT 2022.12.23

스크롤

Window.scroll() - Web APIs | MDN The Window.scroll() method scrolls the window to a particular place in the document. developer.mozilla.org GlobalEventHandlers.onscroll - Web API | MDN functionRef 은(는) 함수 표현식 또는 함수 이름 이며, 이 객체는 오직 UIEvent (en-US) 객체만 인수로 받습니다. developer.mozilla.org Window.scrollY - Web API | MDN Window 인터페이스의 scrollY 읽기 전용 속성은 문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환합니다. 최신 브라우저에서는 값의 정밀도가..

JAVASCRIPT 2022.09.13

javascript) Canvas에 애니메이션을 위한 requestAnimationFrame

requestAnimationFrame requestAnimationFrame(callback) 는 Canvas에서 애니메이션을 위한 함수로 일반적으로 초당 60회의 콜백 함수를 실행하지만 현재의 대다수의 브라우저에서는 디스플레이의 주사율을 파악해 그만큼 콜백을 반복 실행한다. 애니메이션이 지속적으로 이루어지기 위해서는 callback 함수 내에서 다시 requestAnimationFrame(callback) 호출해야 한다. cancelAnimationFrame 이러한 애니메이션을 중지하기 위해서는 window.cancelAnimationFrame(requestID) 를 호출하여 중지시킬 수 있다. let raf; let start; let count = 0; function draw() { consol..

JAVASCRIPT 2022.09.07

jfif와 jpeg(jpg)의 차이

과거 1990년대부터 JPEG(Joint Photographic Experts Group)에서 만든 이미지를 위한 파일 확장자는 jpg jpeg jpe jif jfi jfif 등이 있지만 현대에 와서든 크게 구분이 있어 보이진 않는다. 일단 jpg는 확장자명 제한 때문에 jpeg를 줄여쓴 것이고, jfif도 jpg와 단순히 확장자 변경을 해도 에러는 발생하지 않는 것 같다. 확장자 JPEG(JPG) JFIF 풀네임 Joint Photographic Experts Group JPEG File Interchange Format 목적 웹상에서 이미지 저장 및 전송 인터넷을 통한 JPEG파일 저장 및 전송 설명 데이터를 손실 압축 하는 방법(알고리즘) JPEG 인코딩을 이용한 파일 교환 방식 하지만 근본적으로 ..

JAVASCRIPT 2022.08.17

javascript) 기상청 Open API를 이용한 날씨 위젯 만들기 4

전체 소스 코드) GitHub - qaws7791/html_practice Contribute to qaws7791/html_practice development by creating an account on GitHub. github.com 완성 이미지) 참고 사이트) https://www.data.go.kr/data/15084084/openapi.do 기상청_단기예보 ((구)_동네예보) 조회서비스 초단기실황, 초단기예보, 단기((구)동네)예보, 예보버전 정보를 조회하는 서비스입니다. 초단기실황정보는 예보 구역에 대한 대표 AWS 관측값을, 초단기예보는 예보시점부터 6시간까지의 예보를, www.data.go.kr https://gist.github.com/fronteer-kr/14d7f779d52a21..

JAVASCRIPT 2022.08.13

javascript) 기상청 Open API를 이용한 날씨 위젯 만들기 3

목표: html, css로 날씨 위젯 만들기 디자인은 아래의 영상을 참고하여 만들었음 1. HTML과 css로 디자인하기 완성이미지) index.html) 20℃ Temperate 30% Probability 2.2m/s Wind speed Date : 2022년08월11일01:21 style.css) @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Lato', sans-serif; } body { display: flex; justify-content: center; align-i..

JAVASCRIPT 2022.08.13