참고자료: 컴포넌트 라이프 사이클, DOM DOM은 정확히 무엇일까? | WIT블로그최근 잘못 이해하고 있었던 DOM에 대해 정확한 개념을 정리해 보고자 What, exactly, is the DOM? 문서를 번역해 보았습니다.wit.nts-corp.com [React] 컴포넌트 라이프 사이클과 주요 메서드 호출 순서컴포넌트 라이프사이클 이란 컴포넌트 라이프사이클은 컴포넌트의 생성부터 소멸에 이르는 일련의 이벤트로 생각할 수 있습니다. 모든 리액트 컴포넌트에는 LifeCycle을 갖습니다. LifeCycle은 세가koras02.tistory.com ⭐️ 컴포넌트 라이프사이클- 컴포넌트의 생성부터 소멸에 이르는 일련의 이벤트 - 리액트 컴포넌트는 라이프사이클을 갖는다 - 크게 세가지 카테고리로 나뉘며 개괄..

참고자료: 인프런 -따라하며 배우는 노드, 리액트 시리즈- 유튜브사이트 만들기 [무료] 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기 - 인프런 | 강의 이 강의를 통해 리액트와 노드의 개념을 익히는 것뿐만이 아닌 실질적으로 어떻게 웹사이트를 만들 수 있는지를 배울 수 있습니다., | 강의소개 [임베딩 영상] 안녕하세요. 이 강의를 만들게 된 www.inflearn.com ※ 그냥 내가 참고할라고 만든거임 ※ 1. 구독기능 1) VideoDetailPage/VideoDetailPage.js 코드가 길어지기 때문에 따로 js파일을 만들 것 2) VideoDetailPage/Sections/Subscribe.js 구독하기/취소기능 추가하기 3) routes/subscribe.js 2) Vid..

참고자료: 인프런 -따라하며 배우는 노드, 리액트 시리즈- 유튜브사이트 만들기 [무료] 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기 - 인프런 | 강의 이 강의를 통해 리액트와 노드의 개념을 익히는 것뿐만이 아닌 실질적으로 어떻게 웹사이트를 만들 수 있는지를 배울 수 있습니다., | 강의소개 [임베딩 영상] 안녕하세요. 이 강의를 만들게 된 www.inflearn.com 1. 비디오 디테일 페이지 만들기 1)Landing/LandingPage.js 간략히 코드만 보고 넘어가자 - 이게 중요한게 아니니 - 2) VideoDetailPage/VideoDetailPage.js 에서 2) video.js -서버에 저장하는 js 파일 * req.body.postId가 아니라 req.body.vi..

참고자료: 인프런 -따라하며 배우는 노드, 리액트 시리즈- 유튜브사이트 만들기 [무료] 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기 - 인프런 | 강의 이 강의를 통해 리액트와 노드의 개념을 익히는 것뿐만이 아닌 실질적으로 어떻게 웹사이트를 만들 수 있는지를 배울 수 있습니다., | 강의소개 [임베딩 영상] 안녕하세요. 이 강의를 만들게 된 www.inflearn.com 전편: 동영상 업로드, 썸네일 만들기 리액트 - 동영상 업로드, 영상 썸네일 업로드 참고자료: 인프런 -따라하며 배우는 노드, 리액트 시리즈- 유튜브사이트 만들기 [무료] 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기 - 인프런 | 강의 이 강의를 통해 리액트와 노 heedymy.tistory.com 목..

참고자료: 인프런 -따라하며 배우는 노드, 리액트 시리즈- 유튜브사이트 만들기 [무료] 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기 - 인프런 | 강의 이 강의를 통해 리액트와 노드의 개념을 익히는 것뿐만이 아닌 실질적으로 어떻게 웹사이트를 만들 수 있는지를 배울 수 있습니다., | 강의소개 [임베딩 영상] 안녕하세요. 이 강의를 만들게 된 www.inflearn.com 섹션0. 4, 5) 비디오 업로드 FORM 만들기 title text를 사용자가 적은 문자로 바꿔주는 함수 e는 이벤트 e.currentTarget은 내가 직접 실시간으로 친 문자들 확인하는 방법) console.log(e.currentTarget) CategoryOptions는 목록 상자 만드는 코드 6) 서버에 비디..

참고자료: 인프런-리액트강의 [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. 👨‍🏫 리액트의 세계로초대합니다 💫 www.inflearn.com component - 레고 블록을 조립하듯 컴포넌트들을 모아서 개발 마치 자바스크립트의 함수와도 비슷해! 하지만, 다른 점은 속성(props) 을 넣으면, 화면에 나타날 엘리먼트들을 보여주는 것 마치 컴포넌트는 붕어빵 틀과도 같다. 컴포넌트라는 틀로 엘리먼트들이 다 똑같은 모양으로 만들어지는 것 1-1. component 만들기 컴포넌트는 이렇게 둘로 나뉜다. 1) 함수 컴포넌트 이런 식으로 작성되는것 다..

참고자료: 인프런-리액트강의 [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. 👨‍🏫 리액트의 세계로초대합니다 💫 www.inflearn.com element: 리액트 앱을 구성하는 가장 작은 블록들 DOM element라는 것도 있다! 그거는 흔히 보는 , 태그 같은 html에서 주로 사용하는 것들 리액트 element는 dom element의 가상 표현 같은 느낌 리액트 element 다음 DOM element로 이어짐(렌더링) => 가장 중요한 느낌! element는 실제 화면에 보이는 것들을 기술한 것 이 간단한 코드가 바로 엘리먼트! 이 ..

참고자료: 인프런-리액트강의 [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. 👨‍🏫 리액트의 세계로초대합니다 💫 www.inflearn.com 1.JSX - 자바스크립트의 문법을 확장시킨 것 -javascript + xml/html 1)jsx 역할 - 내부적으로 html 코드를 자바스크립트 코드로 변환하는 과정을 거침 그래서, 최종적으로 jsx 코드를 작성해도 자바스크립트코드가 작성되는 것 그리고 여기서, jsx코드를 자바스크립트 코드로 변환해주는 것이 'React.creatElement'라는 함수이다. 이 코드의 해석은 첫번째 코드 문단) He..

참고자료: 인프런-리액트강의 [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. 👨‍🏫 리액트의 세계로초대합니다 💫 www.inflearn.com form이란? 양식, 사용자로부터 입력을 받기 위해 사용되는 것 여기사 html의 폼과 리액트의 폼은 좀 차이가 있다. html 폼은 사용자의 입력을 제어할 수 없음 1. form 이 예시 코드만 봐도, 단순히 type, name만 적용되지 이것이 사용자의 입력값을 제어할 수는 없다 하지만, 리액트에서는 사용자의 입력 값을 제어할 수 있다. -> controlled component 즉, component..

참고 자료: 인프런 강의 -처음 만난 리액트 [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. 👨‍🏫 리액트의 세계로초대합니다 💫 www.inflearn.com List란? - array로 구성되어 있음 - array란? js 함수로 변수나 객체들을 하나의 변수로 묶어 놓은 것 - Key: 각 객체나 아이템을 구분할 수 있는 고유한 값. 즉, 아이템을 구분하기 위한 고유한 문자열 1. 여러 개의 component를 렌더링하기 이때 map()이라는 함수를 사용하는데, map 함수는 배열에 어떤 처리를 한 뒤 그것들을 매핑하여 리턴해주는 함수이다. 코..

참고자료: 인프런-리액트강의 [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. 👨‍🏫 리액트의 세계로초대합니다 💫 www.inflearn.com Conditional Rendering: 조건부 렌더링 true면 버튼 보여주고, false 버튼 가리기 true면 UserGreeting, false면 GuestGreeting -> 이게 바로 조건부렌더링 참고로, Truthy: true는 아니지만 true로 여겨지고, falsy: false는 아니지만 false로 여겨짐 -엘리먼트 변수 컴포넌트로 생성된 리액트 엘리먼트 컴포넌트로 생성된 리액트 엘리먼트..

참고자료: 인프런-리액트강의 [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. 👨‍🏫 리액트의 세계로초대합니다 💫 www.inflearn.com Hook component는 function component와 class component로 나뉜다. class component는 생성자에서 state를 정의하고, setState() 함수를 통해 state를 업데이트를 할 수 있으며, LifeCycle methods를 제공해준다. 하지만! function component에서는 이것들이 불가능! 불가능한 걸 가능하게 해주는 함수가 바로 Hook이다. ..