꿈꾸는 개발자의 블로그

동영상을 프로젝트 메인에 자동으로 재생하고 싶었는데, 마침 쉽고 간단하게 구현할 수 있는 방법이 있어서 공유한다! 만약 동영상으로 화면 전체를 채우고 싶다면! 참고! 2022.06.25 - [Programming/CSS] - [CSS] Styled-components + 동영상으로 화면 전체 채우기 [CSS] Styled-components + 동영상으로 화면 전체 채우기 인트로 페이지를 구현하는 도중, 화면을 확대하거나 축소해도 동영상이나 이미지가 화면에 꽉차게 하고 싶었다! 방법은 아주 간단하다. 하지만 매번 헷갈리기 때문에.. 정리해보았다. 아래는 동 aldrn29.tistory.com React 동영상 재생하기 public 폴더 하위에 동영상 파일 추가 (.mp4가 아닌 파일은 적용되지 않는걸까...

프로젝트를 진행하며 전체적으로 styled-components를 이용하여 스타일을 지정하고 있었는데, Mui로 불러온 같은 방식으로 구현하다가 오류가 나는 상황이 생겼다..!! 알아보니 그 이유는 Mui는 emotion이 기본 엔진인데, styled-components로 엔진을 교체하기 위한 작업이 동반되지 않았기 때문이였다. 공식 문서에도 친절히 설명이 되어있었는데 ㅠㅠ 에휴... 앞으로! 진짜 공식 문서부터 잘 챙겨보는 것을 습관화해야겠다! Mui styled-components 설치 yarn add @mui/material @mui/styled-engine-sc styled-components Mui styled-components를 이용한 구현 import 부분에서 모듈 이름을 materialSt..

분리수거 서비스 웹 페이지를 만들면서 퀴즈와 답을 화면에 그려야했다. 퀴즈 문제와 답에 관련된 데이터를 받아와서 화면에 표시해주어야 했기 때문에, 이 때 사용한 객체를 순회하는 방법을 소개한다. Object.values().map() 으로 객체 순회하기 1. 객체의 type을 설정한다. 2. 객체의 값(value)을 map() 함수를 통해 순회한다. * 객체의 값 뿐만 아니라 키도 필요하다면 다음의 함수를 사용할 수 있다. Object.keys(obj) 객체의 키만 담은 배열을 반환합니다. Object.values(obj) 객체의 값만 담은 배열을 반환합니다. Object.entries(obj) [키, 값] 쌍을 담은 배열을 반환합니다. 그리고 이 때! 주의할 점은 map() 함수 내에서 리턴할 때, {..

아래 예시는 간단한 버튼 배경 색상을 바꾸는 코드이지만, 이를 잘 활용하면 다양한 곳에 편리하게 사용할 수 있을 것 같다! styled-components props 값 넘겨 받기 import styled from "styled-components"; export const Test = () => { return ( 버튼// theme를 props로 전달 ); } const Button = styled.button` background-color: ${(props) => props.theme}; `;

그동안 각각의 CSS 파일을 밖에 두고 스타일링 했었는데, 하나의 컴포넌트 내에서 이용가능한 styld-components를 사용해보았다. 불필요한 CSS가 import 되지 않도록 만들어주기 때문에 좋다! styled-components 설치 yarn add styled-components styled-components를 이용한 구현 import styled from 'styled-components'; export const Test = () => { render ( 버튼 ); } const Wrapper = styled.div` width: 100%; height: 100vh; `; const Button = styled.button` background-color: gray; border-rad..