개발조각

useRef로 변수관리 (개념 설명) const ref = useRef(value); 함수형 컴포넌트에서 useRef를 부르면 ref오브젝트를 반화해 준다. ref오브젝트는 아래와 같이 생겼다. {current: value} 인자로 넣어준 초기값은 Ref안에 있는 current에 저장이 된다. {current: "hi"} => const ref = useRef("hi"); {current: "hello"} => const ref = useRef("hello"); {current: "nice"} => const ref = useRef("nice"); ref오브젝트는 수정이 가능하기 때문에 언제든지 원하는 값으로 바꿀 수 있으며, 반환된 ref는 컴포넌트의 전 생애주기를 통해 유지가 된다. => 컴포넌트가..

벌써 회사를 다닌 지 2개월이 지나 3개월을 향해 달려가고 있다. 그동안 두번의 프로젝트를 진행했는데 첫 번째는 랜딩페이지, 두 번째는 반응형 서비스를 작업했다. 두 번의 프로젝트를 진행하면서 느낀 점에 대해 적어보려 한다. 1. 라이브러리를 적극적으로 사용하자 그동안 "내가 직접 만들 수 있는데 왜 굳이 라이브러리를 써야 돼?"라는 생각으로 라이브러리를 사용하지 않았는데 아주 바보같은 생각이었다!!! 그동안 npm 사이트에서 라이브러리 찾는 습관을 멀리하면서 살았던 게 첫 번째 프로젝트 랜딩페이지를 만들면서 아주 강하게 타격받았다. https://www.npmjs.com/ npm Bring the best of open source to you, your team, and your company Rel..

리액트 훅 중에서 가장 중요한 게 무엇인지 물어본다면 useEffect라고 대답할 것이다. useEffect란? (개념설명) 어떠한 컴포넌트가 Mount (화면에 첫 렌더링) Update (다시 렌더링) Unmount (화면에서 사라질 때) 특정 작업을 처리할 코드를 실행시키고 싶을 때 useEffect를 사용한다. useEffect는 콜백함수를 받는데 (콜백함수란 다른 함수의 인자로 전달된 함수를 의미한다.) 콜백함수 내부에 원하는 작업을 전달해 줄 코드를 작성하면 된다. useEffect(()=>{작업...}) useEffect는 두 가지 형태를 알고 있으면 된다. 1. 하나의 인자만 사용(콜백함수) useEffect(()=>{ // 작업... }); 컴포넌트가 렌더링 될 때마다 실행 2. 두 개의 ..

리액트 훅 중에 기본 중에 기본인 useState에 대해 알아보자. React에서 State란? 컴포넌트가 가질 수 있는 상태를 의미한다. 만약 시계라는 컴포넌트가 있으면 State는 time을 가질 수 있다. useState는 컴포넌트의 상태를 가져오고 생성하고 업데이트를 해줄 수 있는 도구를 제공해 준다. useState의 기본형태 const [state, setState] = useState(초기값); state : 현재의 상태값 setState : state를 변경시켜주고 싶을 때 사용 useState활용 const [time, setTime] = useState(5); 초기값으로 5를 가지게 되고 이때는 time = 5이다. 시간을 변경하려면 setTime(6)으로 넣어주면 time이 6이 된..

만들고 싶은 슬라이드 슬라이드를 만들다 보면 각각의 다른 슬라이드를 제어를 하고 싶은 경우가 생기게 됩니다. 1번 슬라이드를 기준으로 1번 슬라이드가 움직이면 2번 슬라이드도 같이 움직이는 슬라이드를 만드는 방법입니다. 문제점 처음에는 아래의 예제를 참고해서 만들었으나 pagination, autoplay, loop를 적용하면 이상하게 동작하는 현상이 발생 https://codesandbox.io/s/k3cyyc?file=/src/App.jsx swiper-react-thumbs-gallery - CodeSandbox swiper-react-thumbs-gallery using react, react-dom, swiper codesandbox.io 해결방안 Thumbs를 사용하면 안 되고 Controll..

만들고 싶은 슬라이드 문제점 앞서 작성한 pagination과 같이 swiper의 hidden 때문에 swiper옵션으로 navigation을 적용하고 navigation을 밖으로 빼서 사용하면 navigation이 안 보이는 현상이 발생한다. Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 해결방안 import React, { useRef, useState } from 'react'; // Import Swiper React components import { Swiper, SwiperSlide } from 'swiper/react'; // Import Swiper styles import 'swiper/css'; impo..

만들고 싶은 슬라이드 문제점 React로 위와 같은 슬라이드를 만들려면 안에 아래와 같이 적용을 해야 되는데 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 이렇게 할 경우 Swiper가 hidden처리가 되어 있어 pagination을 따로 만들고 커스텀해주어야 된다. 해결방법 https://codesandbox.io/s/m54gfx?file=/src/App.jsx swiper-react-pagination-custom - CodeSandbox swiper-react-pagination-custom using react, react-dom, swiper codesandbox.io swiper demo예제 중에서 pagina..

~ : HTML 제목 정의 태그 은 가장 중요한 제목을 정의 하며, 은 가장 덜 중요한 제목을 정의합니다. -> -> -> -> -> 예제 Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 h1태그의 기본 css h1 { display: block; font-size: 2em; margin-block-start: 0.67em; margin-block-end: 0.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; } 여기서 알아야 하는 점은 h태그는 block이다. 사용시 주의할 점 글씨 크기를 위해 h..