DEVELOPMENT RECORD

출처 https://doishalf.tistory.com/22 반응형 웹 단계별 해상도(나누는 크기 기준) 1. 모바일: 320~767px 2. 타블렛/랩탑: 768~1199px 3. PC: 1024px~ 또는 1200px~ 각 기기별로 화면 볼 수 있는 사이트 http://responsive.pixeltuner.de/ 모바일 디바이스별 개발 해상도 및 Pixel Ratio 정리글 (2.. doishalf.tistory.com

Global에서 사용될 style 생성 및 적용 const size = { mobile: '600px', tablet: '900px', laptop: '1200px', desktop: '1800px', } const theme = { mainColor: '#0a4297', mobile: `(max-width: ${size.mobile})`, tablet: `(max-width: ${size.tablet})`, laptop: `(max-width: ${size.laptop})`, desktop: `(min-width: ${size.desktop})`, } export default theme 출처 https://jsramblings.com/how-to-use-media-queries-with-styled-..

react에서는 setInterval()을 쓸 때 원하는 대로 동작하지 않는다. setInterval : 리엑트에서는 렌더링 문제로 인해서 사이드 이펙트를 분리하는 구조를 중요시해야한다. - 입력을 받아서 출력을 받는 직접적인 일이 아니면 사이드 이펙트를 분리 - 따라서 useEffect 안에서 실행한다. 따라서 useInterval hooks을 사용한다. 즉, custom hook을 만들어서 사용한다. function useInterval(callback, delay) { const savedCallback = useRef(); useEffect(() => { savedCallback.current = callback; }, [callback]); useEffect(() => { function tic..

리엑트에 swiper 붙이는 걸 해보자! 설치 npm i swiper 사용법 // Import Swiper React components import { Swiper, SwiperSlide } from 'swiper/react'; // Import Swiper styles import 'swiper/css'; export default () => { return ( console.log('slide change')} onSwiper={(swiper) => console.log(swiper)} > Slide 1 Slide 2 Slide 3 Slide 4 ... ); }; 출처 https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper..

스타일 조정 : position: absolute;과width: 100%;라고 볼 수 있다. - ObjectFit를 동시에 사용하는 것을 권장 출처 https://intrepidgeeks.com/tutorial/next-for-those-who-have-difficulty-using-js-images # Next.js의 Image를 사용하기 어려운 사람에게 css 이력서의 반격 이력서를 쓴 이유가 있어서 예전에 좌절한 css팀판의 나는 다시 한 번 섬세한 이력서 작성에 도전하고 싶다. 같은 일을 할 사람을 찾았으니 필요 없을 것 같아. 이후 제작은 이 intrepidgeeks.com

출처 https://velog.io/@xedni/Lab-React%EC%97%90%EC%84%9C-%EB%A0%8C%EB%8D%94%EC%8B%9C-Text%EC%9D%98-%EA%B0%9C%ED%96%89%EC%9D%B4-%EA%B0%80%EB%8A%A5%ED%95%A0%EA%B9%8C Lab | React, 장문의 Text의 개행이 가능할까? 리액트에서 렌더를 하면 br 태그는 속성이 먹히지 않는다. 어떻게 줄바꿈을 해야할까?? 연구해보자 velog.io https://p-iknow.netlify.app/react/how-to-handle-newline-text-from-api React에서 api 로 전달되는 텍스트의 개행 처리하기 react-logo 이슈 리엑트로 서비스를 운영할 때 api 에서 ..

display: none을 활용한 element의 숨김/표시는 가장 기본적인 방식의 show/hide 처리방법. 다만 CSS transition이 적용되지 않기 때문에 애니메이션을 구현하기 위해서는 약간의 추가적인 작업을 필요 렌더링 경로 Critical Rendering Path DOM, CSSOM 트리 생성 : 파싱 한 HTML과 CSS를 이용해 document object model과 css object model을 각각 생성한다. 렌더링 트리 생성 : 앞 단계에서 생성한 트리 정보를 바탕으로, '화면에 표시'할 요소들의 정보를 정리해 렌더링 트리를 만든다 레이아웃(혹은 리플로우) : 요소가 실제 화면(뷰포트) 상에 너비, 높이, 위치가 어떻게 될 것인지 계산(만)한다. (아직 화면에는 보이지 않음..

트랜지션과 애니메이션 : 요소의 속성값이 변화하면 보통 즉각 그 효과가 나타나는데, 트랜지션과 애니메이션을 사용하면 변화가 일정 시간(duration)에 걸쳐 나타나게 할 수 있다. 트랜지션과 애니메이션의 사용법과 각각의 특징을 정리한다. 트랜지션 요소의 변화를 일정 기간(duration)동안 일어나게 함 자동으로 발동되지 않음 (hover나 onclick 같은 이벤트 트리거에 의해 동작함) 애니메이션 트랜지션보다 할 수 있는 것이 많음 트랜지션은 시작하기 위해 이벤트가 필요하지만 애니메이션은 시작, 정지, 반복까지 제어할 수 있음 하나 또는 복수의 @keyframes으로 이루어짐 출처 https://ahribori.com/article/5a0c49926c9eef13d882e3ea [CSS] 트랜지션(T..

애니메이션, Css로 제어 useEffect에서 setInterval 작업 const boxAnimation = keyframes` 0% { left: 20px; background: red; } 16.6666667% { left: 420px; background: orange; } 33.3333333% { left: 20px; background: yellow; } 50% { left: 420px; background: green; } 66.6666667% { left: 20px; background: blue; } 83.3333333% { left: 420px; background: navy; } 100% { left: 20px; background: purple; } `; const Box = st..

출처 https://codepen.io/CrisleyAlves/pen/PowbKdK React - Tabs With Hooks Just making some testing using React Hooks... codepen.io https://jindev-t.tistory.com/85 [TIL] 1차 프로젝트 기억하고 싶은 코드 1. Tab 버튼 구현하기 ◎1차 프로젝트 정육각에서 내가 맡은 상품 디테일 페이지에 탭 버튼 기능이 있었다. 탭 버튼 자체는 처음이라 어떻게 하는지 감이 안 와서 구글링을 해보고 그에 맞게 코드를 적용시켰다. 1. Deta jindev-t.tistory.com https://dev.to/ziratsu/create-lovely-react-tabs-4g41 Create (lovel..