FE (31) 썸네일형 리스트형 (React.js + Next.js) Skeleton 적용 프로덕트에서 UX 개선 항목으로 SkeletonUI 와 ProgressBar 요청사항이 들어왔다. 처음 진행해보는 작업이라 많은 검색을 해봤고, 절대 다수의 기술 블로그에서는 다음과 같이 설명하고 있었다. 1. 페이지 이동 시에 state 를 통해서 content 영역에 skeletonUI 를 렌더링한다. 2. fetch 이후 state 를 통해서 content 영역에 정상 데이터를 렌더링한다. 대충 코드로 나타내면 이렇게 되겠다. const [content, setContent] = useState(); request('url', (resData) => { setContent(~~~~); }); 유명한 스타트업의 기술블로그도 위와 같은 방식을 사용하고 있었다. 하지만 몇 가지 이유로 사뭇 다른 방식으로.. webstorm 전체검색이 되지 않는 현상 왼쪽에 보이다시피 파일 디렉토리 배경색이 노랗게 되고 전체검색 기능, esLint, highLighting 이 고장나는 이슈가 있었다 나도 고장났다 개빡치낟 .idea 파일 삭제 webStorm 재설치 로컬 삭제 후 remote 재설치 원인은 .idea 내의 파일을 푸시한 것 . . 아무튼 해결방법은 어이없었다 전에 thymeleaf 를 사용하던 프로젝트가 있었어서 intelij 로 실행했다가 웹스톰을 다시 켜니까 원래대로 돌아왔다 ? styled-components keyframes import styled, { keyframes } from 'styled-components'; const indeterminateAnimation = keyframes` from { transform: translateX(0) scaleX(0.5); } to { transform: translateX(400%) scaleX(0.5); } `; const Progressor = styled.div` position: absolute; top: 0; height: 4px; width: 30%; background-color: yellow animation: ${indeterminateAnimation} 1s infinite linear; transform-origin: 0 50%; `; withconfi.. Router 사용시 socket 연결이 되지 않는 현상 window.location.href 쓸 때는 잘 되는데, Router.push 쓰니까 웹소켓이 연결되지 않는다. // socket.js const socket = io.connet({}); export default socket // somePage.jsx import socket useEffect(() => { if (asPath.indexOf('url') !== -1) { if (socket) { socket.on{ socket.emit{ socket.on{ // ajax function, rerender function here } } } } } }, [asPath]) // asPath = useRouter().asPath window.location.href 로 이 코드를 동작시키면 페이지 이동.. 프론트엔드 개발자 성장 레벨 https://www.notion.so/ZET-dbb9b6c1cb5d4c2da039a85b6b1dab20 ZET팀의 프런트엔드 개발자 성장 레벨 조 은, Eun Cho Front-End Lead at ZET Team - Dable euncho@dable.io www.notion.so 차례대로 주니어 미들시니어 시니어 리드 급이라고 한다 addEventListener scroll 에서 변화량 확인하기 스크롤을 조금만 내렸을 때 특정 위치로 스크롤 되는 코드를 구현해야 해서 다음과 같이 만들었다. window.addEventlistener('scroll', () => { if (window.scrollY > 100 && window.scrollY { ... useEffect(() => { smo.. Vue Router url 변경 감지 App.vue vue bootstrap sass error https://bootstrap-vue.org/docs#using-module-bundlers BootstrapVue Quickly integrate Bootstrap v4 components with Vue.js bootstrap-vue.org import Vue from 'vue' import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' // Import Bootstrap an BootstrapVue CSS files (order is important) import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' // Make BootstrapVue avai.. 이전 1 2 3 4 다음
