ZungTa Blog

퍼블리싱 작업 중 배경 이미지를 넣어야 할 경우 반응형으로 맞춰야 하기 때문에 곤란한 경우가 있다. 어느 해상도에서나 특정 모양을 맞춰줘야 한다. 예를들어 아래 이미지를 해상도가 바뀌어도 일정하게 꽃모양을 비춰줘야 한다던지 하는 문제가 있다. 일단 repeat은 no-repeat으로 설정해주는게 당연하고, 화면에 다 보여줘야 하니까 background-size는 contain을 해준다. 그렇게 되면 여백이 생기거나 이미지가 잘리는 문제가 있다. 그래서 한가지 노하우를 공유하고자 한다. 위의 사진의 경우 꽃모양을 일정하게 보여주고 싶을 경우 사진의 하단쪽을 계속 보여줘야한다. 그럼 background-size: cover; 를 주고 중요한 것은 background-position을 주는 것이다.

예전에 React로 만들었던 토이프로젝트를 이번에 Hooks 스타일로 변경하는 작업을 시작했다. 순조롭게 변경 중이었는데 문제점이 생겼다. Class형에서 사용하던 componentDidUpdate를 Hooks에서는 useEffect를 사용한다고 공식문서에 나와있어서 진행을 하였는데 내가 예상했던 것과는 useEffect가 호출되는 부분이 달랐다. componentDidUpdate - Mount될 때에는 호출되지 않고 props나 state가 변경되어 컴포넌트가 업데이트 될 때에 호출됨. useEffect에서 useEffect(() => { // 작업 }, [value]); 이렇게 사용하면 Mount될 때에도 호출, 컴포넌트 업데이트될 때에도 호출됨. 내가 원하는 방식은 말 그대로 컴포넌트가 업데이트 되..

한 개의 Vue 프로젝트 안에서 어드민페이지도 같이 넣어주기 위해서 vue.config.js에서 pages: { index: { entry: 'src/main.js', template: 'public/index.html', filename: 'index.html' }, mngr: { entry: 'src/admin/admin.js', template: 'public/admin.html', filename: 'admin.html', } } 이런식으로 분리를 해주고 일반 페이지에서는 tailwindcss를 사용하고 admin 페이지쪽에서는 vuetify를 사용하였다. dev-server로 운영중일 때는 잘 되었었는데 build를 하니까 문제가 발생했다. 양쪽의 css가 다 틀어지는 것이었다. 원인 분석을 해..