th42500의 TIL

[React.js] Unit Converter (단위 변환) 앱 만들기

해당 내용은 노마드코더의 ReactJS로 영화 웹 서비스 만들기라는 강의를 듣고 작성한 내용임을 미리 알려드립니다. 자세한 내용은 노마드코더 홈페이지의 강의를 참고해주세요. https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co Unit Converter (단위 변환) 앱 만들기 JSX와 HTML의 문법의 차이 JSX는 HTML과 문법이 비슷하다. 그러나 다음 코드의 결과를 살펴보자. 에러의 내용은 다음과 같다. 유효하지 않은 DOM 속성 ' for'. 'htmlFor'을 의미하나요? 이로써 JSX 문법에서는 HTML의 for을 사용할 수 없으..
Frontend/React.js 2022. 4. 29. 23:08
[React.js] State를 Setting 하는 2가지 방법

해당 내용은 노마드코더의 ReactJS로 영화 웹 서비스 만들기라는 강의를 듣고 작성한 내용임을 미리 알려드립니다. 자세한 내용은 노마드코더 홈페이지의 강의를 참고해주세요. https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co State를 Setting하는 방법 (2가지) 1️⃣ 직접 값을 설정하는 방법 해당 방법은 이전에 작성했던 코드를 가져와 확인해보자. 위와 같이 값을 직접 설정할 경우 다른 어떤 곳에서 couter 변수를 업데이트 해주게되면 원하는 값을 얻지 못할 수 있다. 2️⃣ 함수를 전달하기 해당 코드와 같이 함수를 이용하여 값을..
Frontend/React.js 2022. 4. 28. 00:23
[React.js] React.useState()를 이용하여 자동으로 리렌더링 하기

해당 내용은 노마드코더의 ReactJS로 영화 웹 서비스 만들기라는 강의를 듣고 작성한 내용임을 미리 알려드립니다. 자세한 내용은 노마드코더 홈페이지의 강의를 참고해주세요. https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co 지난 시간에는 버튼을 눌렀을 때 컴포넌트를 리렌더링함으로써 React.js에서 가지고 있는 데이터를 업데이트 해주었다. 이번 시간에는 지난 시간의 소스 코드를 이용하여 더 나은 방법의 코드를 이용하여 React.js 내에서 데이터를 보관하고 자동으로 리렌더링을 일으킬 수 있는 방법을 알아보고자 한다. React.useS..
Frontend/React.js 2022. 4. 27. 15:43
[React.js] JSX를 활용한 React.js 프로그래밍

해당 내용은 노마드코더의 ReactJS로 영화 웹 서비스 만들기라는 강의를 듣고 작성한 내용임을 미리 알려드립니다. 자세한 내용은 노마드코더 홈페이지의 강의를 참고해주세요. https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co JSX를 활용한 React.js 프로그래밍 JSX? 👉 Javascript를 확장한 문법 👉 HTML과 유사한 문법을 사용하여 React.js 요소를 생성 JSX를 활용하여 React.js 코드 작성 JSX를 사용하여 코드를 작성했을 때의 다른 점 1️⃣ html과 유사한 형태의 코드를 작성 2️⃣ props에 even..
Frontend/React.js 2022. 4. 20. 12:28
[React.js] vanillaJS VS React.js

해당 내용은 노마드코더의 ReactJS로 영화 웹 서비스 만들기라는 강의를 듣고 작성한 내용임을 미리 알려드립니다. 자세한 내용은 노마드코더 홈페이지의 강의를 참고해주세요. https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co State 데이터가 저장되는 곳 JSX를 이용한 버튼 클릭 횟수 출력 JSX를 이용하여 지난번에 만들었던 버튼 클릭 횟수 출력 코드를 다시 만들어보자. ✔ 전에 vanillaJS로 제작했던 코드를 실행했을 때에는 버튼을 클릭했을 때 크롬의 모든 요소들이 업데이트 되고 있는 것을 바로바로 보여주었다. ✔ 그러나 React..
Frontend/React.js 2022. 4. 20. 06:38
[JavaScript & React.js] 버튼을 클릭한 횟수 출력하기

해당 내용은 노마드코더의 ReactJS로 영화 웹 서비스 만들기라는 강의를 듣고 작성한 내용임을 미리 알려드립니다. 자세한 내용은 노마드코더 홈페이지의 강의를 참고해주세요. https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co 버튼을 클릭한 횟수 출력하기 1️⃣ Javascript Total clicks : 0 Click Me Javascript를 이용한 코드 구현 방법은... 1️⃣ HTML 생성 2️⃣ Javascript에서 각 element 가져오기 3️⃣ event 등록 4️⃣ 데이터 업데이트 5️⃣ event 등록 기존 자바스크립트 ..
Frontend/React.js 2022. 4. 19. 16:23
Prev 1 Next