react(3)
-
[React] System limit for number of file watchers reached
리액트 서버 돌리다 보면 가끔 서버가 켜지지 않으면서 System limit for number of file watchers reached 이와 같은 메시지를 볼 수 있습니다. 원인은 서버 환경에 비해 일의 양이 많아 file watcher가 한계에 다달았을 때 발생하는 에러라고 하는데요. 아래의 명령어는 file watcher 제한을 늘려주는 코드로 에러 발생 시 명령어 한 줄로 문제를 해결할 수 있습니다. echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
2021.07.23 -
[React] JSX 문법
JSX란? JavaScript 에 XML 을 추가한 확장형 문법으로 하나의 파일에 JavaScript 와 HTML 을 동시에 작성할 수 있어 편리하다는 장점이 있습니다. 감싸진 요소 컴포넌트에 여러 요소가 있을 때 부모 요소를 사용해 하나로 감싸야 합니다. 아래와 같이 부모 요소 없이 h1, h5 태그로만 이루어져 있다면 실행되지 않고 오류가 발생합니다. import React from 'react'; function App() { return ( 부모 요소가 없을 때 ); } export default App; h1, h5 태그에 부모 요소를 추가하면 출력되는 걸 확인할 수 있습니다. import React from 'react'; function App() { return ( 부모 요소가 있을 때 )..
2021.04.26 -
[React] 컴포넌트 스타일 방식 (CSS, SASS, CSS Module)
CSS(Cascading Style Sheets) 기본 스타일 시트 언어입니다. SASS(Syntactically Awesome StyleSheets) 보다 쉽게 CSS문법을 사용할 수 있게 해 주는 전처리기로 재활용성, 가독성을 높여 유지 보수를 쉽게 해줍니다. SASS에서는 .scss와 .sass 두 가지 확장자를 지원합니다. .sass 확장자에서는 CSS에서 사용하던 중괄호 {} 와 세미콜론 ; 을 사용하지 않습니다. // .sass $black: #000000; body color: $black .scss 확장자는 기존 CSS 작성 방식과 크게 다르지 않습니다. // .scss $black: #000000; body { color: $black; } .scss의 사용하기 위해서 먼저 디렉토리에서 ..
2021.04.25