도영스 공간

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 스벨트로 라우터하기 ..