This is it. it's IT.

https://theubermensch.tistory.com/191 [React/Three] 처음 만나는 three.js (2) 목표 점검하기 처음 만나는 three.js (1)에서 three.js 에 대한 아주 기초적인 이해를 마쳤다. 이번에는 react-three-fiber 에 대해 아주 간단하게 알아보고( three.js 를 react 에서 어떻게 JSX로 작성하는지 알. theubermensch.tistory.com 대단한 걸 찾았다... 요즘 CodeSandbox라는 곳에서 온라인으로 작업환경을 설정할 수 있다는 걸 알고 신나하던 참이다. 여기서 다른 사람들이 만든 리액트 코드들을 구경할 수 있는데 .. . . 디자인적으로 디게 독창적인 코드를 봐서 어떻게 하는 것인지 궁금했다. https://..

npm i styled-components 터미널에 입력한다. 그러면 스타일 컴포넌트와 관련된 것들을 다운로드 받을 수 있다. .. . import styled from "styled-components"; App.js 상단에 import해서 가져와준다. import styled from "styled-components"; const Father = styled.div` display: flex; `; const BoxOne = styled.div` background-color: teal; height: 100px; width: 100px; `; const BoxTwo = styled.div` background-color: tomato; height: 100px; width: 100px; `; fu..

동적인 값 = 상태(State) 사이트에서 값이 동적으로 바뀌는 경우, 상태를 관리해야 한다. useState()는 16.8버전부터 도입된 Hooks라는 기능의 일부분이며 함수형 컴포넌트에서도 상태를 관리할 수 있게 한다. 원래 코드는 이렇다 const numberState = useState(0); const number = numberState[0]; const setNumber = numberState[1]; 이 코드를 간략화시켜 아래와 같이 만들 수 있다. const [number, setNumber] = useState(0); 첫번째 원소 number = 현재 상태 값 변수 두번째 원소 setNumber = 상태 값을 갱신해주는 Setter함수 useState 괄호 안의 값 = 상태의 초기 값 ..

index.html html파일 script 부분 이전에는 html요소를 먼저 만들고 js에서 그것을 조작했다면, react에서는 js를 통해 html요소를 만들게 된다. 이로써 얻을 수 있는 이점은 사용자들에게 보여질 내용을 컨트롤 할 수 있다는 것이당 ^.^ 라우팅 라우팅이란? React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 라고 볼 수 있다. - 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종유의 라우터 컴포넌트를 제공한다. https://goddaehee.tistory.com/305 [React] 6. React Router (리액트 라우터) 사용하기 6. [Rea..

다른 프레임워크에서 mvc구조를 사용하는데에 비해 리액트는 flux 구조를 사용한다. ? Action -> Dispatcher -> Store 단방향 데이터 흐름이다. 리액트가 담당하는 부분은 mvc 중 view 뿐이다. 이것이 장점인 이유는 상황에 따라 다른 라이브러릴를 섞어서 쓸 수있기 때문이다? (ex. Redux) 또한 가상 돔(Virtual DOM)을 활용하여 렌더링 시간을 줄여줄 수 있다. 정보가 바뀔때마다 전체를 다시 로드해오면 시간이 많이 걸리고 비효율적이지만리액트는 필요한 페이지만 그때그때 다시 가져오는 것이다... (SSR : server side rendering, CSR(Client Side Rendering))어떻게 이렇게 하느냐!??!?각각의 UI를 Component로 묶어 캡슐..