개발자로 전향중

import React, { useState, useEffect, useRef } from "react"; import styled from "styled-components"; import { useForm, SubmitHandler } from "react-hook-form"; import PreReservationBtn from "../../public/images/web/Main/Button_booking.svg"; import PreReservationBtnhover from "../../public/images/web/Main/Button_booking_mouseover.svg"; import MLogo from "../../public/images/web/Main/Logo_Fatalbomb...

import { useEffect, useState } from 'react' function easeOutExpo(t: number): number { return t === 1 ? 1 : 1 - Math.pow(2, -10 * t) } export default function useCountNum(end: number, start = 0, duration = 2000) { const [count, setCount] = useState(start) const frameRate = 1000 / 60 const totalFrame = Math.round(duration / frameRate) useEffect(() => { let currentNumber = start const counter = set..

import React, { ReactElement, useState, useEffect, useRef } from "react" import styled, { keyframes } from "styled-components"; import { images } from '../../constants/images'; import { FiArrowLeft, FiArrowRight } from "react-icons/fi"; // Import Swiper React components 건드리면 ㄴㄴ import SwiperCore, { Navigation, Pagination, Scrollbar, A11y, EffectCoverflow } from 'swiper'; import { Swiper, SwiperS..

자식 요소를 감싸는 래퍼 컴포넌트를 작성할 때 자식 요소인 children 속성의 타입을 명시해야 하는 경우가 자주 있습니다. 그런데, ReactChild, ReactElement, ReactNode 등 비슷한 이름을 갖는 타입이 너무 많은 모습이네요! 오늘은 자주 사용되는 타입 설명과 함께 어떤 상황에서 각 타입을 사용할 수 있을지 간단히 알아보도록 하겠습니다. const App = () => { return ( {/* 과연 children 요소의 타입은 무엇일까요? */} Hello, world! ); }; type WrapperProp = { // children: React.ReactChild; // children: React.ReactElement; // children: JSX.Element..

SEO (Search Engin Optimiztion) 검색 엔진 최적화. 네이버나 구글같은 검색 엔진에 뭔가를 검색했을 때, 내가 만든 사이트가 검색 결과에 더 잘 보이게 하기 위한 과정. 검색을 하면, 검색 엔진이 내 사이트 내용물(meta tag나 html 등)을 훑어가고 내용물에 특정한 인덱스 같은 것을 만들어 검색 결과에 보여준다. 검색 엔진 최적화는 검색엔진이 내 사이트를 크롤링할 때 정보를 더 잘 가져갈 수 있도록 도와주는 과정이기도 하다. react에서 SEO? React는 HTML 파일이 딱 1개 뿐이고, 렌더링이 되기 전까지(javascript를 실행하기 전까지)는 껍데기 html만 있어, 기본적으로는 검색 엔진에 올라가기 어렵다. 그래서 react에서도 검색 엔진이 긁어갈 수 있도록 ..

기능구현 완료! App.js import { Route, Routes } from "react-router-dom"; import React from "react"; import Page from "./Page"; import AddPage from "./addPage"; import DetailPage from "./detailPage"; function App() { return ( ); } export default App; Page.js import React from "react"; import styled from "styled-components"; import { useNavigate } from "react-router-dom"; import { useSelector } from "rea..

프로젝트 설치 : yarn create react-app "프로젝트 명" styled-components 설치 : yarn add styled-components react-router-dom 패키지 설치 : yarn add react-router-dom 리덕스 패키지 설치 : yarn add redux react-redux firebase 패키지 설치 : yarn add firebase redux-thunk 설치 : yarn add redux-thunk material - ui 설치 : yarn add @material-ui/core @material-ui/icons js에서 날짜를 쉽게 다루는 패키지 moment: yarn add moment lodash 배열을 편리하게 다룰 수 있다: yarn ad..

db에 연결! My bucketlist! 설치 프로그램 App.js import { Route, Routes } from "react-router-dom"; import React from "react"; // BucketList 컴포넌트를 import 해옵니다. // import [컴포넌트 명] from [컴포넌트가 있는 파일경로]; import BucketList from "./BucketList"; import styled from "styled-components"; import Detail from "./detail"; import {useDispatch} from "react-redux"; import {createBucket, loadBucketFB, addBucketFB} from "./r..