DEVELOP (140) 썸네일형 리스트형 [javascript] 리스트 더보기 기능 구현 리스트 18개가 있는데 처음에 6개 보여주고 더보기 버튼 클릭시 6개씩 더 보여주고 싶다. 그리고 마지막에 리스트가 다 보여지면 더보기 버튼이 사라지게 구현해보자. => active를 붙여 처음 보여주고 싶은 갯수 만큼 보이고, => 더보기 버튼을 누를때마다 해당 active의 item 클래스를 보여준다. HTML ss ddd fff dd : tt d: ddd dS dfsdf fd gfdfdf fdf P Sl Ry s t yy ss U ss yy SCSS $mediaPSD-function: remove-unit($mediaPSD); @function vw($val, $std: $mediaPSD-function) { @return ($val / ($std / 100)) * 1vw; } #lineup { ... [javascript] 팝업 안 swiper 설정 바둑판 계열의 리스트 형식에서 해당 리스트를 클릭했을 때, 모달 팝업 형태로 각자의 내용의 슬라이드가 생성 되어야 한다. 따라서 각자의 팝업을 생성해두고 include를 할껀데 문제는 해당 리스트를 클릭시, 해당 슬라이드만 동작을 원하고, 해당 모달 팝업을 닫았을 땐 해당 슬라이드를 해제 시키려한다. 미리 슬라이더를 그려놓으면 과부하가 생기니 주의해야한다. 그린 슬라이더를 저장할 변수 popupSlide를 전역 변수로 빼놓고 팝업 오픈 요소 클릭시 생성, 닫기 버튼 클릭시 해제를 할 수 있도록 하는 것이 중요하다. index.html title title title title title title popup-lineup.html PC Mobile console 샘플 설명입니다. 샘플 설명입니다. 샘플 설.. [javascript] 상단 fixed menu anchor 구현 HTML Javascript $('nav a[href*="#"]').click(function () { console.log('click'); var elmHash = $(this).attr('href'); var navH = $('nav').outerHeight(true); var pos = Math.round($(elmHash).offset().top - navH); $('body,html').animate({ scrollTop: pos }, 500); return false; }); [CSS] 로고와 이미지 비율 반응형에서 이미지로 된 작업물을 잡기 => 만약 PC에서 해당 이미지 높이를 정의했다면 높이 초기화 시키고 vw 사용할 것 * // 미디어 쿼리 사이즈 $mediaResponsiveSize: 1024px; // 시안 사이즈 $mediaPSD: 1000px; $mediaPSD-function: remove-unit($mediaPSD); @function vw($val, $std: $mediaPSD-function) { @return ($val / ($std / 100)) * 1vw; } width: vw(543); aspect-ratio: (543/405); // height: vw(405); [CSS] 반응형 공간 작업 (with SASS) 만약 반응형 시안이 1000px 이라 가정하자 1000px 기준으로 모바일 미리보기를 잡아놓고 만약 위의 간격을 30px로 줘야한다 가정하면, vw 함수를 사용하여 padding-top: vw(30); 을 주면 된다. _vw.scss // 미디어 쿼리 사이즈 $mediaResponsiveSize: 1024px; // 시안 사이즈 $mediaPSD: 1000px; $mediaPSD-function: remove-unit($mediaPSD); @function vw($val, $std: $mediaPSD-function) { @return ($val / ($std / 100)) * 1vw; } [React.js] github pages로 배포했을 경우 새로고침 OR 직접 입력시 에러 해결 이번 포트폴리오를 리액트로 완성하여 깃허브 페이지로 배포를 했는데 문제는 깃허브 페이지는 SPA 를 지원하지 않는다. 즉 history API 기능을 제공하지 않아서 렌더링 없이 URL만 이동하는 것은 불가능하다. 그래서 포트폴리오 메인에서 다른 페이지로 이동후 다시 그상태에서 새로고침을 할경우 github pages의 404 페이지 화면이 나오는 문제가 발생했다. 또한 직접 메인아닌 서브페이지의 URL를 입력하고 접근 시도시에도 동일한 현상이 생겼다. 다음과 같이 해당 문제를 해결하였다. [spa-github-pages 오픈소스] 이를 해결해주는 오픈 소스가 있다. https://github.com/rafgraph/spa-github-pages GitHub - rafgraph/spa-github-pag.. [React.js] props와 state에 대하여 props & state 둘다 데이터를 다루는데 사용된다. props 부모로 부터 상속받은 데이터를 뜻한다. 데이터 기원이 자신이 아닌 부모에 있다. 물려준대로 사용. 그 데이터의 원천을 변경할수는 없다. state 현재 자신 컴포넌트에서 생성 또는 수정할 수 있다. 그래서 state, setState를 사용하여 데이터를 담고, 각자의 페이지에 맞는 용도로 가공하여 사용한다. 입장에 따라 달라지기도 한다. App 컴포넌트가 Sample 컴포넌트에게 count라는 데이터를 주었다고 가정하면, App 컴포넌트 입장 : count를 준 입장이니, App 컴포넌트에겐 count 데이터가 state. Sample 컴포넌트 입장 : count를 받은 입장이니, Sample 컴포넌트에겐 count 데이터가 props. [React.js] 메모리 누수에 관하여 리액트를 사용하다 보면 간혹 콘솔창에 빨갛게 memory leak.... 어쩌고 경고문이 나올때가 있다. 몇번 마주칠때마다 구글링을 해봐도 와닿지 않았는데 결론은 데이터를 담아 사용 useState()를 다시 비워주지 않아서 발생한다. React는 DOM를 직접 건드리지 않고 선언적(원하는 바를 간접적으로 명시?)으로 돌아가는데 (이부분은 좀더 공부가 필요) 그럴때 사용하는 것이 react의 useState이다. (참고: javascript나 jquery에서는 DOM에 접근하기 위해 아이디 값이나 클래스값을 직접 호출하는데 React에서 요소를 변경하려면 react의 useRef()를 사용한다. 이부분 공부 필요...) 즉, 이해한 바로는 메모리 누수는 말그대로 메모리가 계속 새고 있다는 것인데, 한번 .. 이전 1 2 3 4 ··· 18 다음