일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- DB
- react
- Pipelining
- instruction
- MIPS
- MacOS
- Class
- system
- javascript
- architecture
- control
- html
- web
- DATAPATH
- DoM
- Java
- function
- Linux
- github
- data structure
- CSS
- DS
- for
- computer
- XML
- mysql
- python
- while
- php
- Algorithm
- Today
- Total
목록Web Application Server (WAS) (37)
YYYEJI
Styled-components란? id나 class를 사용하지 않고 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정할 수 있으며, React 프레임워크를 대상으로 하는 CSS-in-JS 라이브러리 중 하나입니다. ① yarn 설치 $ npm install -g yarn styled-components를 설치하기 전에 yarn을 먼저 설치해줍니다. ② styled-components 설치 npm install --save styled-components 다음으로 styled-components를 설치합니다. ③ 파일 import import styledComponents from 'styled-components'; styled-components를 적용하고 싶으면 파일을 import 해줍니다. ◡̈
React(리액트)에서 변수는 return 위에서 생성됩니다. function Question() { return ( Question ); } 아래와 같이 변수를 선언합니다. const str1="Hello" const str2="1" let num = 1 function Question() { const count = 0 return ( Question {count} ); } let 타입은 선언 이후에 값이 변할 수 있음을 의미합니다. (const는 선언 이후에 값이 변할 수 없습니다!) 변수에 목적에 맞게 타입을 지정해서 변수를 정의해주면 됩니다. function Question() { let count = 1 return ( Question {count} ); } 변수를 사용할 땐 {중괄호}에 변수..
React에서 사진을 올리고 싶을 땐 tag로 쉽게 올릴 수 있습니다. alt는 이미지를 보여줄 수 없을 때 대체될 수 있는 텍스트를, src에는 올리고싶은 이미지의 경로를 입력해 주시면 됩니다. ⚠️ 주의해야 할 점 ⚠️ 이미지의 경로를 조심해야 됩니다. ① 이미지의 경로가 React을 생성할 때 생기는 public 폴더 밑에 존재해야 됩니다! ② /images/duck.mp4로 파일의 위치를 설정해줘야 됩니다. images 앞에 경로가 어떻든 신경써주지 않아도 된다는 의미입니다. ↓↓↓ 동영상 업로드 하기 ↓↓↓ https://yyyeji.tistory.com/385 [React] 리액트(React)에서 동영상 삽입하기 리액트(React)에서 영상을 삽입하는데 조금 오래 걸렸던 것 같아서 정리를 해볼..
아래와 같은 코드를 작성했다가 JSX expressions must have one parent element 에러를 받았습니다. function Loading() { return 분석중입니다...; } 이 에러는 JSX 문법을 사용할 때 여러개의 컴포넌트가 사용될 때 parent element로 컴포넌트를 감싸지 않아서 등장하는 에러기에 function Loading() { return ( 분석중입니다... ); } tag를 tag 안으로 넣어줬더니 해결됐습니다. ◡̈
event.target.value가 무엇인지 알아보기 위해 아래 코드를 살펴보겠습니다. tag에 onChange 이벤트를 설정해줍니다. const onChange1 = (event) => { console.log(event); }; input tag도 만들어줍니다. input에 입력 값이 들어오면 onChange1가 실행되면서 event 객체를 반환합니다. event 객체는 아래와 같이 생겼습니다. 콘솔(console)에 event.target을 출력하면 event 객체의 target만 불러와서 출력해 줍니다. const onChange1 = (event) => { console.log(event.target); }; 콘솔(console)에 event.target.value를 출력하면 event 객체의 ..
useState() 란? 컴포넌트(component)에서 바뀌는 변수의 값을 관리하는 함수입니다. useState()를 사용할 때는 아래와 같은 형태로 사용합니다. const [data, modifier] = React.useState(initial_value); 예제를 살펴보겠습니다. const data = React.useState(); console.log(data); data를 React.useState()의 변수로 만들어준 후 콘솔(console)에 출력해보면 이렇게 콘솔(console)에 출력됩니다. [undefined, f] undefined는 초기 값(initial value)이고, f는 값을 수정하기 위한 함수입니다. React.useState() 함수에 초기값을 넣어주면 넣어준 초기값이..
리액트(React)에서 함수를 만드는 방법은 두 가지가 있습니다. 화살표 함수(Arrow function) const FunctionName = () => (Action); const Title = () => ( console.log("mouse enter")}> Hello world ); 함수의 타입(type), 함수의 이름, = () => 그리고 함수의 액션(action) 파트로 나뉩니다. 함수의 액션 파트에는 HTML의 유효한 tag를 사용할 수 있습니다. 기본 함수(Normal function) function Button() { return ( console.log("im clicked")}> Click me! ); } function, 함수의 이름, () {Action_part}로 이루어 집니..
리액트(React)에서 영상을 삽입하는데 조금 오래 걸렸던 것 같아서 정리를 해볼까 합니다. 구글에 나오는 코드를 아무리 작성해도 영상이 올라가지 않았었습니다. 우선 코드 설명을 해보자면, src - 동영상의 위치, type="video/mp4" width - 가로 크기 loop - 영상 무한 반복, autoplay - 영상 반복 재생, muted - 음소거 입니다. 여기서 주의해야 할 점이 있습니다. ① 동영상이 존재해야 하는 파일의 위치입니다. React을 생성할 때 생기는 public 폴더 밑에 동영상이 존재해야 됩니다! ② /videos/duck.mp4로 파일의 위치를 설정해줘야 됩니다. vidoes 앞에 경로가 어떻든 신경써주지 않아도 된다는 의미입니다. ◡̈