Daily Pogle

npm - styled component Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 React 환경에서 Component 에 스타일을 적용하는데 있어 inline style 을 적용하거나, css 를 import 하여 스타일을 적용하는 방식에는 많은 어려움이 있었다. 이러한 어려움을 최소화하기 위해서 Styled Component 가 등장하였다. 기존 방식의 불편함 inline 방식 const General_App = () => { return ( Hello, I'm TEXT ) } inline 방식은 html 태그 안에 작성되므로 html ta..

react-media-recorder A React component based on MediaRecorder() API to record audio/video streams. Latest version: 1.6.6, last published: a year ago. Start using react-media-recorder in your project by running `npm i react-media-recorder`. There are 17 other projects in the np www.npmjs.com 웹페이지에서 recorder 를 사용하고 싶을 때 사용할 수 있는 API npm 설치 npm install react-media-recorder 실제사용 status | 현재 recorder..

2023.03.28 기준으로 React 업데이트에 따라 달라질 수 있다. 먼저 npm 으로 react-router-dom 을 설치한다 npm install react-router-dom 1) Router 설정 Router > Routes > Route 순으로 진행된다. 대신 을 사용해도 된다. Route 안에는 path 와 element 가 있는데 path 는 접속하고자하는 URL 이며, element 는 path 에 해당하는 URL에 접속하면 보여주고자하는 component 를 의미한다. [예시코드] import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Home from "./routes/Home"; impor..

useEffect React 공식문서 useEffect(setup, dependencies?) useState 처럼 Component 의 최상위레벨에서 선언한다. 💬 Parameter 1. setup 해당 부분에는 개발자가 작성한 function 이 들어간다. 이를 setup function 이라고 하자 setup function 은 return 을 통해 cleanup function 을 반환할 수 있다. cleanup function 은 해당 Component 가 사라질 때 작동하는 function 이다. function App() { useEffect(()=>{ /* logic */ return () => { // setup function 의 return 을 cleanup function 을 반환할..

useState React 공식문서 const [state, setState] = useState(initialState);useState 는 React Component 에 state 변수를 추가하기 위해 사용되는 React Hook 이다. Component 의 가장 높은 레벨에서 선언되는 state 변수이다. Component 의 가장 높은 레벨에서 선언되는 의미는 Component 작성시 어떤 코드보다 먼저 선언해야한다는 것을 의미한다. import { useState } from 'react'; function MyComponent() { const [age, setAge] = useState(28); // NUMBER const [name, setName] = useState(&#..

파비콘 웹사이트 또는 웹페이지를 대표하기 위해 웹브라우져에서 사용되는 16x16 pixel 의 작은 이미지이다. 브라우저 창뿐만 아니라 브라우저의 북마크바나 방문기록, 검색결과 등등 URL 정보와 함께 같이 표시되기도 한다. 파비콘은 하나의 웹사이트의 아이콘으로 여겨져 시각적인 식별자로 사용된다. 그래서 많은 대다수의 웹페이지들은 하나의 파비콘을 사용하고 있다. 웹사이트에 사용하는 이미지는 규격에 맞도록 해야한다. head 부분에 작성하면 된다. 예제 : 애플로고 출처 및 파비콘에 대한 자세한 설명 파비콘이란? 웹사이트를 위한 나만의 파비콘 만들기 파비콘이란 웹사이트를 대표하기 위해 웹 브라우저에서 사용되는 16x16 픽셀의 작은 이미지입니다. 쉽고 간단하게 파비콘 만드는 방법을 알아보세요. ko.wix..

React 프로젝트 시에는 일반적인 Javascript 코드보다 JSX가 선호되어 사용된다. JSX 란 무엇인가?? JSX 는 JavaScript and XML 를 줄인단어이다. JSX의 의미는 A syntax extension to Javascript, 즉 Javascript 의 확장 문법이다. Javascript 의 확장 문법으로써 Javascript 와 XML/HTML 을 합친 것으로 보면 된다. 간단한 JSX const element = Hello, world!; h1 이라는 HTML 태그을 Javascript 변수에 저장하고 있다. Javascript 코드와 JSX 코드 비교하기 다음 아래의 코드들은 같은 기능을 하고 있다. 1. Javascript 문법 const element = React...

개요 Javascript library for building user interface 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 SPA(Single Page Application)을 쉽고 빠르게 만들어주는 도구 React 장점 빠른 업데이트와 렌더링 속도 컴포넌트 기반 구조로 재사용성이 높음(모듈간 의존성 낮아짐) 재사용성이 높아지므로 개발기간이 짧아지고, 모듈간 의존성이 낮아 유지보수가 쉬워짐 세계최대IT 기업인 META 가 스폰하기에 꾸준히 발전하고 업데이트 되고있음 개발생태계와 커뮤니티가 매우 크게 형성되어있어 원활한 지식공유가 가능 이후 React Native 로 웹뿐만이 아니라 모바일 앱 개발이 가능해짐. React 단점 다른 UI 라이브러리 보다 방대한 학습량 상태관리 복잡도가..