코딩묻은 디자이너

React에서 CSS 값을 바꾸기 위해 인라인으로 style을 변경하려고 했는데 오류가 생겼다

              <div
                className={cx('progress-bar')}
                role='progressbar'
                aria-valuemin={0}
                aria-valuemax={100}
                style='width:80px'
              />

오류

이런 오류가 뜨면서 inline에서 css가 적용되지 않았다

찾아보니 Typescript를 사용할 때는 inline이 잘 적용되지 않는다고 한다

해결방법

  const styles: { [key: string]: React.CSSProperties } = {
    container: {
      width: 255,
    },
  };

상위에 다음과 같이 style을 선언해두고 아래 코드와 같이

style = {styles.container}

이런식으로 불러서 사용하면 코드에서 에러가 발생하지 않는다.

  <div
    className={cx('progress-bar')}
    role='progressbar'
    aria-valuemin={0}
    aria-valuemax={100}
    style={styles.container}
  />

  const styles: { [key: string]: React.CSSProperties } = {
    container: {
      width: 255,
      height: 100,
      backgroundColor: 'red',
    },
  };

이런식으로 값을 여러개 넣어서 사용할 수도 있다!

최근 진행중인 사이드 프로젝트의 컨셉은 손글씨 같은 느낌으로 진행중이다.

위와 같은 지글지글한 선을 웹으로 구현하기 위해 선택한 방법은 -> path를 svg화 하여 저장하여 사용하기로 했다(더 좋은 방법이 있다면 댓글 부탁드려요)

문제사항

svg 파일을 background img 로 화면에 구현하면서 문제가 생겼는데

반응형으로 제작하다보니 svg path 선이 화면의 넓이에 영향을 받는 것이다

로그인을 감싸고 있는 path와 비밀번호 아래path는 둘 다 피그마에서는 2px로 export 되었지만 화면 넓이를 늘리면 width의 경향을 받아 다음과 같이 path가 굵어진다.

해결방법

해결방법은 매우 간단

해당 svg 파일에 직접 접근해서 path태그에

를 직접 넣어주면 path값이 고정이 된다

이 태그 안에 직접 넣어준다

나의 svg 파일에는 다음과 같은 속성들이 들어있다 

stroke : path 컬러

stroke-width : path의 굵기 (기본적으로 px값인 것 같다. 다른 단위를 넣어줘도 작동한다. 생략하면 px값)

stroke-linecap : path의 끝 부분을 둥글게 해준다

vector-effect = "none-scaling-stroke" : path의 굵기가 고정된다.

해결✨

react 실행하기

// 리액트 새로운 프로젝트 생성
create-react-app .

// 부트스트랩 설치
npm i bootstrap

React 에 WebCam 띄우기

import React, { useEffect, useRef } from 'react'

import 'bootstrap/dist/css/bootstrap.min.css'

function App(){

  let videoRef = useRef(null)

  //사용자 웹캠에 접근

  const getUserCamera = () =>{
    navigator.mediaDevices.getUserMedia({
      video:true
    })
    .then((stream) => {
      //비디오 tag에 stream 추가
      let video = videoRef.current

      video.srcObject = stream

      video.play()
    })
    .catch((error) => {
      console.log(error)
    })
  }

  useEffect(() => {
    getUserCamera()
  },[videoRef])

  return(
    <div className='container'>
      <h1>selfie App in React.js</h1>
      hello world
      <video className='container' ref={videoRef}></video>
    </div>
  )
}

export default App​

useEffect

class 없이도 state나 다른 리액트 기능을 사용할 수 있는 것??

useRef

가변값을 가지는 '상자' 같은 역할

참고 유튜브

리액트에 대한 이해가 부족한 상태에서 코드를 짜려고 하니깐 문제가 많이 발생하는 것 같다.

우선 리액트에서의 Hook이라는 개념을 정확히 이해하는게 중요한 것 같다