Front-End12 [React] public 폴더의 이미지 사용하기 사진들을 모두 api 로 만들어서 교체하는 도중에 힘들게 찾아서 적용시킨 방법을 잊을까봐 기록한다 별거 아니지만 이런 코드 하나하나가 모여 큰 지식이 되니 까먹지 말자는 생각.. ㅎprocess.env.PUBLIC_URL + ' 경로이름 ' 2024. 5. 15. [Tailwindcss] grid-row-숫자 분석 메인 페이지를 만들긴 했는데 생각해보니 레이아웃 구분이 안되어있었다.. 그래서 부랴부랴 검색해서 레이아웃 구분하려고 하는데 엄청 애를 먹었다.. 완벽히 완성한건 아니지만.. 대충 이렇다gird-col-12 는 완벽히 이해했다 하지만 grid-rows-3 는 대체 어떻게 써먹는지 모르겠다.. [grid-rows-숫자]에 관한 나의 생각 01 02 03 col이 1개의 열을 뜻한다면 row는 1개의 행을 뜻하는 것이겠지 당연히?그렇다면 grid-rows-3은 1개의 row의 크기가 3으로 정의한다는 뜻 같다. row-span-2 에 해당하는 03 부분이 옆의 01부분에 비해서 약간 작게 한 행을 먹은 것을 보고 그렇게 생각하게 됐다맞겠지..? (아니면.. 2024. 5. 4. 사용했던 유용한 JS 함수 정리 onresizewindow.onresize = function(event) { console.log("창의 너비: " + window.innerWidth); console.log("창의 높이: " + window.innerHeight);};윈도우 창의 크기가 바뀔 때 발생하는 이벤트를 처리하는 함수 2024. 5. 1. 윈도우 창의 크기가 변할 때 마다 출력하는 그림 수 바꾸기 쇼핑몰 클론 코딩 중 윈도우 사이즈가 md 사이즈가 되면 보이는 상품의 수가 바뀌는 것을 똑같이 구현하고 싶었다 여기서 slidesPerView 의 값을 수정해줘야한다slidesPerView={window.innerWidth 이렇게 하면 768px 이하일때 출력되는 사진 수가 2장으로 변경된다! ... 이렇게 바꿨지만 새로고침을 해줘야 출력되는 그림도 바뀐다그럼 사이즈가 바뀔때마다 인식하게해서 출력하는 값도 바꿔주고 거기에 다시 재렌더링도 해줘야 하나보다그래서 useEffect를 사용했다! useEffect(() => { const handleResize = () => { if (window.innerWidth { window.removeEventListene.. 2024. 5. 1. 이전 1 2 3 다음
