몽땅뚝딱 개발자

스토리북 도입기 버전 1. Ant Design에 도입하기 버전 2. Emotion에 도입하기 참고 https://github.com/Jacky-Summer/nextjs-ts-antd-redux-storybook-starter

스타일링 도구 1) emotion Next.js에서 이모션을 사용하면서 @emotion/react와 @emotion/style 2가지를 알게됐다. styled component 방식으로 사용이 가능한 @emotion/style과 태그를 직관적으로 알 수 있는 @emotion/react 2가지가 있다. @emotion/react 1. 직관적으로 어떤 태그인지 알 수 있다. 2. 주석을 달아야한다. (주석을 사용하지 않아도 되도록 업데이트는 됐다고 함) /** @jsxImportSource @emotion/react */ import { css, jsx } from '@emotion/react' const divStyle = css` background-color: hotpink; font-size: 24p..

📄 Next.js 명령어 $ npx create-next-app@latest --ts $ npm i @emotion/react $ npm i -D @emotion/babel-plugin 📄 Next.js 디렉토리 구조 layout.tsx page.tsx loading.tsx error.tsx not-found.tsx route.tsx default.tsx 1. 라우팅하는 방법 - route를 따로 설정하지않고 이런 식으로 디렉토리를 생성하면 라우팅된다. (신기방기) - Next.js 12까지는 pages 폴더에 파일을 만들면 자동으로 라우팅을 지원했지만 Next.js 13부터는 Nested Layout을 위해 app 폴더 구조로 변경되었다. - Next.js 13 버전부터는 기본적으로 컴포넌트는 서버사이..

https://velog.io/@kandy1002/React-Query-%ED%91%B9-%EC%B0%8D%EC%96%B4%EB%A8%B9%EA%B8%B0

새롭게 프로젝트를 세팅하다가 발견한 파일들,, 기존에 세팅할 땐 지우기만했는데 이번엔 궁금해져서 찾아보았다. public manifest.json: PWA에 필수적으로 포함되어야하는 파일이다. { "short_name": "React App", // 사용자 홈 화면에서 아이콘 이름으로 사용 "name": "Create React App Sample", // 웹앱 설치 배너에 사용 "icons": [ // 홈 화면에 추가할 때 사용 { "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" }, { "src": "logo192.png", "type": "image/png", "sizes": "192x192" }, { ..

React + Typescript 환경에서 Swiper 적용하기! 오늘도 안됐ㄷㅏ 이젠 개의치않아 맨날 안되니깐 말이야 ! 내가 구현할 환경에서는 React, TypeScript, SCSS를 사용하고 있다. 1. Swiper를 설치해준다. 가장 최신버전으로 했다. $ npm i swiper 2. 이렇게 선언해준다. 이렇게 선언하면 이미지 슬라이드까지는 구현이 된다. { displayImageList.map((url, index) => { return ( ) }) } ✍🏻 여기서 내가 원하는 바를 정리해보자면 1) 현재 슬라이드의 인덱스를 받아와서 화면에 노출해야한다. 2) 2개의 탭을 왔다갔다 하는 것이기 때문에 다른 탭을 누르면 activeIndex(현재 활성화 된 슬라이드의 인덱스)도 함께 초기화되어..

글 하나로 적긴 애매하지만 모아두면 소소한 깨달음의 정리... 계속 추가 될 예정....🚂 1. 함수를 넣으면 렌더링 시점에서 함수가 호출되므로 함수형태로 넣어준다. // 이렇게 함수형태로 작성해준다. // 이렇게 적으면 렌더링 시점에 실행된다. 2. 값은 이렇게도 담긴다. import SwiperCore, {Navigation} from "swiper"; const [swiper, setSwiper] = useState(); 3. 기본값을 지정하는 방법은 2가지 - 첫번째 방법: defaultProps를 사용한다. UserInfo.defaultProps = { name: 'empty', age: 0, }; - 두번째 방법: 매개변수에서 지정해준다. function UserInfo({ name = 'em..

◽ useMemo의 형태 useMemo( param1 callbackFn, param2 [의존성 배열] ) const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 react hook이다. useMemo는 처음에 계산된 결과값을 메모리에 저장해서 컴포넌트가 반복적으로 렌더링 되더라도 계속 같은 함수를 호출하지 않고 이전에 이미 계산된 결과 값을 메모리에서 꺼내와서 재사용한다. 렌더링 중에 실행되기 때문에 통상적으로 렌더링 중에는 하지 않는 것을 이 함수 내에서 하면 안된다. 예를 들어, 사이드 이펙트(Side Effect)에서 하는 일을 useMemo에 적지 않도록 한다. 첫번째 인자..

📄 커스텀 마커 const container = document.getElementById('map') const mainPosition = new window.kakao.maps.LatLng(33.453502, 126.569894) const options = { center: mainPosition, // 지도의 중심 좌표 level: 5, // 지도의 레벨(확대, 축소 정도) } const content = '🌈' const mainOverlay = new window.kakao.maps.CustomOverlay({ position: mainPosition, // 위치 content: content, // 태그 }) const map = new window.kakao.maps.Map(containe..

마커를 넣어보자! 1. 마커 1개 넣어보자 import React, { useEffect } from 'react' import styled from 'styled-components' declare global { interface Window { kakao: any } } const Map = styled.div` width: 100%; height: 300px; ` function MapContainer() { const addMarker = () => { const markerPosition = new window.kakao.maps.LatLng(33.450701, 126.570667) return new window.kakao.maps.Marker({ position: markerPosition..