YYYEJI

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 앞에 경로가 어떻든 신경써주지 않아도 된다는 의미입니다. ◡̈

https://yyyeji.tistory.com/383 [React] 리액트(React) 기본 리액트(React)란? JavaScript 라이브러리의 하나로 사용자 인터페이스를 만들기 위해 사용되는 웹 프레임워크입니다. 아래 방식은 리액트를 시작하기 전 리액트를 이해하기 위한 리액트를 사용하는 yyyeji.tistory.com 우리는 위에 봤던 코드를 JSX코드로 변경시켜 줄 예정입니다. JSX(JavaScript XML)는 JavaScript에 XML을 추가한 확장한 문법입니다. 우리는 JSX 문법을 사용하지만 웹 브라우저는 JSX 문법을 이해하지 못합니다. Babel을 사용해서 JSX문법을 웹 브라우저가 알아듣을 수 있는 코드로 변경합니다. 에러없이 웹 브라우저가 잘 작동하는 것을 확인할 수 있습니다..

리액트(React)란? JavaScript 라이브러리의 하나로 사용자 인터페이스를 만들기 위해 사용되는 웹 프레임워크입니다. 아래 방식은 리액트를 시작하기 전 리액트를 이해하기 위한 리액트를 사용하는 어려운 방식입니다. 해보면서 리액트에 대한 이해도를 높이기만 하면 됩니다. 외울 필요가 전혀 없는 코드입니다! 기본적으로 시작하기 위해 기본 html 파일에 첫 번째 링크의 역할은 웹 페이지의 UI와 상호작용(interactive)을 잘할 수 있도록 도와주는 역할을 하고, 두 번째 링크의 역할은 react element를 html 안에서 사용할 수 있도록 도와주는 역할을 하는 library 또는 package입니다. React의 복잡한 문법 React.createElement() React.createEle..

Collaborator란? Repository의 공동 책임자입니다. Colaborator로 초대받은 repo를 확인하고 싶을 때는 아래와 같이 해주시면 됩니다. ① Settings에 들어갑니다. ② repositories를 눌러주면 모든 repo의 history가 보일 것입니다. ◡̈

하나의 vertax로부터 모든 vertex를 한 번씩 방문하는 그래프 탐색이 있습니다. ↓↓↓ 그래프란? ↓↓↓ https://yyyeji.tistory.com/378 [DS] 그래프(Graphs)의 종류와 관련 용어 그래프(Graphs)란? 객체 사이의 연결 관계를 나타낼 수 있는 자료 구조입니다. 그래프(graph)는 vertax의 집합과 edge의 집합으로 이루어집니다. - vertax = {a, b, c, d, e} - edge = {(a, b), (a, e), (b, c), (c, d), (c, e yyyeji.tistory.com 아래에 BFS 방문 예제와 코드가 있습니다. 깊이 우선 탐색(Depth First Search)이란? 그래프 탐색에서 넓이 부분을 먼저 탐색하는 알고리즘이며, 큐(q..

하나의 vertax로부터 모든 vertex를 한 번씩 방문하는 그래프 탐색이 있습니다. ↓↓↓ 그래프란? ↓↓↓ https://yyyeji.tistory.com/378 [DS] 그래프(Graphs)의 종류와 관련 용어 그래프(Graphs)란? 객체 사이의 연결 관계를 나타낼 수 있는 자료 구조입니다. 그래프(graph)는 vertax의 집합과 edge의 집합으로 이루어집니다. - vertax = {a, b, c, d, e} - edge = {(a, b), (a, e), (b, c), (c, d), (c, e yyyeji.tistory.com 아래에 DFS 방문 예제와 코드가 있습니다. 깊이 우선 탐색(Depth First Search)이란? 그래프 탐색에서 깊은 부분을 먼저 탐색하는 알고리즘이며, 재귀함..