도영스 공간

위처럼 스크롤을 하단으로 내리면, 헤더의 색이 흰색으로 변하고 다시 상단에 닿았을 땐 투명으로 변하는 것을 훅으로 구현해보았다! Scroll Event는 전체적인 스크롤에 반응한다. 이는 성능적으로 비효율적이다. 스크롤 이벤트에 쓰이는 documentElement.scrollTop과 documentElement.offsetHeight는 reflow를 일으켜서 성능상 좋지 않다. 스크롤 이벤트는 탈락! 내가 사용한 것은 바로 Intersection Observer API이다. Intersection Observer API 는 루트 요소와 타겟 요소의 교차점을 관찰한다. 그리고 타겟 요소가 루트 요소와 교차하는지 아닌지를 구별하는 기능을 제공하고 있다. scroll 이벤트와 다르게 교차 시 비동기적으로 실행..

next js 를 13버전으로 업그이드 한 이후 이런 에러가 콘솔창에 떴다 ! 해결방법 module.exports = { experimental: { forceSwcTransforms: true, }, compiler: { styledComponents: true, }, }; //next.config.ts 파일에 아래의 값을 넣어주면 에러가 나지 않는다 !! compiler: { styledComponents: true, },

오랜만에 TIL .. 🧗‍♀️ 다시 초심으로 돌아가서 열심히 기록해야지 ! ☃️ 더보기와 접기 기능은 의외로 간단했다! import styled from 'styled-components'; //styled 컴포넌트 임포트 // 1. text wrap을 하나 생성해줍니다. const textRef = useRef(null); //실제 text의 높이를 계산하기 위한 ref const [isMoreView, setIsMoreView] = useState(false); // 더보기 버튼의 여부 const [isShowText, setIsShowText] = useState(false); // 내용이 더 보여지고, 접기 버튼의 여부 //만약 높이가 100px이상이라면, 더보기 버튼 보여주기 useEffect(..

오랜만에 적어보는 TIL ...🧘🏻‍♀️ 구글 api key 설정하는 글들은 많으니 생략하겠습니다. 맨처음에는 리액트 환경에서 구글 map 자바스크립트 api 튜토리얼을 보고, 어떻게 해서든 구현하고 싶었다. 하지만, 내가 구현해야되는 기능은 n초마다 나의 위치 정보를 서버에 갱신해주고 내 주위 3km 반경에 있는 사람들의 좌표를 구글 맵에서 마커로 찍어주는 것이었다. 라이브러리를 깔지 않고 ,, 시도한 결과 n초마다 내 위치를 갱신할때마다 나의 위치를 찍어주는 마커가 계속 생성되는 것이었다..ㅠㅠ ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ일요일 하루종일 고민하며 코드를 써내려갔지만, ㅠㅠ 나의 위치 정보를 제대로 반영하면, 지도가 깜빡거리는 문제가 발생했다 ㅎ.. 결국 자바스크립트 튜토리얼로는 해결할 수 없겠다..

우선 스벨트 프로젝트를 생성했으면 라우터도 깔아줍니다.! 터미널에 아래의 명령어를 입력하여 깔기 !! npm install --save svelte-spa-router app.svelte에 routing임포트해주기!! 그리고 src에 routes라는 폴더를 생성합니다 ~! src > routes > Home.svelte 홈 src > routes > Write.svelte 글쓰기 src > routes > index.ts import Home from "./Home.svelte"; import Write from "./Write.svelte"; export default { "/": Home, "/write": Write, }; src > Header.svelte Home Write 스벨트로 라우터하기 ..

npx degit sveltejs/template [프로젝트명] cd [프로젝트명] npm install 프젝에 타입스크립트 사용하기! node scripts/setupTypeScript.js npm install --dev @tsconfig/svelte npm run dev 로 프로젝트 시작

굉장히 못난이었던..데이트피커 달력을 커스텀하여 바꿔봤다.ㅠㅠ 정말 하루 종일... 검색하고 찾아본 결과 완성했다.. 비록 디자인과 약간 다르지만,,ㅠㅠ 똑같이 하고 싶었는데 라이브러리를 커스텀하기엔..쉽지 않았다.. import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; import DatePicker, { registerLocale } from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import ko from 'date-fns/locale/ko'; import getYear from 'date-fns/g..

웹 , 크롬에서는 괜찮은데 ... 날짜가 나오지 않고 ...NaN이 나오는 에러를 보았다.. 맨처음엔 ㅋㅋㅋㅋㅋㅋ이유를 알지 못한채 ..뻘짓만 하다가..검색을 통해 알아냈다. new Date()