React

Styled component로 React Component 디자인

styled-component는 대표적인 CSS in JS 라이브러리다. CSS in JS: 스타일 정의를 CSS 파일이 아니라 JS로 작성된 컴포넌트에 바로 삽입하는 기법 기본 문법 div, span, button 등 기본적인 HTML 엘리먼트를 스타일링 할 때는 아래와 같이 작성한다. const MyDiv = styled.div` // 어쩌고 `; 리액트 컴포넌트를 스타일링 할 때는 아래와 같이 괄호 안에 컴포넌트를 작성한다. const StyledLink = styled(Link)` // 어쩌고 `; 가상 선택자 아래와 같이 &:로 작성한다. const MySpan = styled.span` ... &:hover { ... } &::after { ... } `; 다른 컴포넌트와 연결 템플릿 리터럴 ..

useState로 인스턴스 접근

아래 코드에서 wavesurfer 엘리먼트는 useRef로 컨테이너를 지정해서 그 안에 만들어졌다. const wavesurferRef = useRef(null); useEffect(() => { let wavesurfer = null; const initWaveSurfer = () => { wavesurfer = WaveSurfer.create({ container: wavesurferRef.current, ...optins }); ... }, []); return ( ... ... ); 이제 useEffect 바깥의 코드에서 파형에 접근해야 하는데 wavesurferRef.current에서 메서드를 호출했다가 막혔다. wavesurferRef.current.method() is not a functi..

wavesurfer.js React에서 사용하기

소마 프로젝트에서 스피치 교정 솔루션을 개발 중인데, 사용자에게 시각적인 정보를 주기 위해 음성 데이터를 파형으로 보여주기로 했다. 관련 라이브러리를 찾아보다가 가장 정보가 많고 커스텀이 자유로운 오픈소스 라이브러리 wavesurfer를 선택했다. https://wavesurfer-js.org/ wavesurfer.js | audio waveform player JavaScript library 📖 API Documentation Discover how to use wavesurfer.js with our comprehensive TypeScript API documentation. Explore the API Docs 🙏 Contributors We'd like to thank all our contr..

프로젝트 마무리: 각종 콘솔 워닝 해결

공모전용 플젝 하나를 마치며 여러 콘솔 워닝들을 해결했다. 사실 warning은 말 그대로 경고기 때문에 프로그램 실행에는 문제가 없지만, 해결을 안해주면 매우 거슬리기 때문에 최종 제출 전 한 번에 해결해 줬다(물론 고치는게 프로그램 안정성에도 좋다). 1. Warning: Invalid DOM property 'class'. Did you mean 'className'? 리액트, 즉 JSX는 JavaScript를 확장한 문법이다. JS의 모든 기능이 포함되어 있으며 class의 다른 의미가 있기 때문에 className을 사용해야 한다. 해결 방법: 엘리먼트에서 class대신 className을 사용한다. // 수정 전 // 수정 후 2. Warning: [antd: Menu] 'inlineColla..

404 Not Found & 403 Forbidden 페이지 작업

404 Not Found와 403 Forbidden은 웹 페이지 접속 시 꽤 흔하게 볼 수 있는 오류다. 404는 HTTP에서 파일을 찾지 못했을 때 나오는 오류 코드다. 404 오류는 서버를 찾지 못함을 의미하는 것이 아니라 서버는 찾았으나 해당 서버 내에서 파일을 찾지 못했을 때 리턴한다. HTTP 오류 코드 중에서 가장 자주 보이는 코드이기 때문에 404 Not Found 페이지의 디자인에 공을 들이는 경우가 많다. 디자인 대회까지 열었을 정도라고 한다. 당장 구글에 '404 Not Found Design'이라고 검색하면 수천가지의 세련되고 독특한 디자인이 나온다. 403은 작동중인 서버에 클라이언트의 요청이 도달했으나, 서버가 클라이언트의 접근을 거부할 때 반환하는 HTTP 응답 코드이자 오류 코..

Warning: Each child in a list should have a unique "key" prop 콘솔 워닝 해결

데이터를 담은 객체 여러 개의 리스트를 모달에서 탭으로 보여주는 코드를 짜다가 다음과 같은 경고를 확인했다. 리스트의 child들은 각각 고유한 key값을 가져야 한다는 내용인데, 찾아보니 리액트에서 map 메서드를 사용하기 위해서는 각 아이템마다 독립적인 key를 설정해 줘야 한다고 한다. 리액트는 key prop을 사용하여 컴포넌트와 DOM 요소 간의 관계를 생성한다. 리액트 라이브러리는 이 관계를 이용해 컴포넌트 리렌더링 여부를 결정한다. 불필요한 리렌더링을 방지하기 위해서는 각 자식 컴포넌트마다 독립적인 key값을 넣어줘야 하는 것이다. 처음에는 해당 탭의 인덱스를 키 값으로 넣었는데 이렇게 할 경우 child들의 key가 모두 겹치게 되어 또다른 경고(key값을 겹치지 않게 하라는)가 나타났다...

React Hooks useEffect

프로젝트 진행 중 모달 창에서 선택된 탭의 ID에 따라 부모 페이지로 다른 데이터를 전달해야 했다. useEffect에 대한 정확한 이해 없이 사용했더니 항상 고정된 값이 전달되거나(dependency를 설정하지 않았기 때문) 다른 모달을 선택해도 이전의 값이 전달(useEffect를 이용한 초기화를 하지 않음)되는 등의 문제가 생겼다. 이 기회에 정확하게 정리하고 넘어가려고 한다. React Hooks에서 useState와 더불어 가장 많이 사용하는 useEffect다. useEffect는 렌더링이나 특정 값이 달라지는 이벤트가 발생하면 그것을 인지하고 업데이트 해주는 함수다. 앞서 설명했듯이 useEffect는 크게 다음과 같은 조건에 의해 작동한다. 페이지가 처음 렌더링 됐을 때 (렌더링 시 무조건..

React 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달

리액트를 사용하다 보면 컴포넌트 간에 데이터를 전달할 일이 많이 생긴다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 다음과 같이 props를 이용해 간단하게 전달할 수 있다. // 부모 -> 자식 예시 그러나 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 때는 useState로 setter를 설정해 setter를 전달해주는 일련의 과정이 필요하다. 과정은 다음과 같다. 부모 컴포넌트에서 useState를 통해 전달받을 데이터를 저장할 변수와 setter를 선언한다. 자식 컴포넌트에 props로 setter를 전달한다. 자식 컴포넌트에서는 props.setter를 이용해 데이터를 저장한다. // 부모 컴포넌트 // 자식 컴포넌트 ... onChange={(i) => props.setId(d..