출처 : https://nomadcoders.co/ 노마드 코더 Nomad Coders 코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요! To Do List 핵심 : to-do list를 만들며 배운것들을 복습해본다. // --------- import --------- import { useEffect, useState } from "react"; function App() { // --------- state --------- const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); // --------- function --------- const onChange=..

출처 : https://nomadcoders.co/ 노마드 코더 Nomad Coders 코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요! Introduction 핵심 : React에서 Event는 무엇인지, 왜 배워야 하는지에 대해서 알아본다. // button.js에 있는 Button 컴포넌트를 import한다. import { useState } from "react"; function App() { // state const [counter, setValue] = useState(0); // function const onClick =() => { // btn을 클릭시 counter를 2씩 증가해주고 리렌더링 setValue(prev => pre..

출처 : https://nomadcoders.co/ 노마드 코더 Nomad Coders 코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요! nomadcoders.co 오류를 해결하는데 도움이 된 사이트 : https://www.codegrepper.com/code-examples/javascript/frameworks/react/npm+ERR%21+enoent+ENOENT%3A+no+such+file+or+directory%2C+open Create React App 핵심 : 지금까지 우리는 import 형식을 통해서 리액트 어플리케이션을 만들었지만 이제부터는 create-react-app을 사용하여 ReactJS 어플리케이션을 만든다. . create..

출처 : https://nomadcoders.co/ 노마드 코더 Nomad Coders 코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요! nomadcoders.co 전에 배웠던 것 복습 : 각각의 로직(기능)을 각자 다른 컴포넌트에 적고, 그 자식 컴포넌트들을 Rendering하는 큰 부모 컴포넌트를 가지는 방식을 통해서 분할 & 정복 방법을 사용할 수 있다. Props 핵심 : React JS의 Props에 대해 배워본다. Props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법이다. . 어떻게 리액트 컴포넌트를 재사용할 수 있게 만드는가? . 컴포넌트는 단지 어떤 JSX를 반환하는 함수이다. function Confirm..

출처 : https://nomadcoders.co/ 노마드 코더 Nomad Coders 코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요! nomadcoders.co Understanding State 핵심 : React JS의 state에 대해 배워본다. . state는 기본적으로 데이터가 저장되는 곳이다. function handleClick() { counter = counter + 1; . 위의 counter 변수의 역할을 state로 대신할 수 있음. // 즉 값이 바뀌는 데이터들 1. 예전 방식으로 counter 만들기 const root = document.querySelector("#root"); let counter = 0; functi..

출처 : https://nomadcoders.co/ 오류를 고친 사이트 : https://stackoverflow.com/questions/64097973/uncaught-error-minified-react-error-200 Introduction 핵심 : React JS의 기초를 알아본다. . 뭔가를 배우는데, 이것이 어떤 문제를 해결하는지, 해결하려는 문제를 직접 겪어보며 이해를 해야한다. 그렇지않으면 우리는 어려움을 느끼고, 재미를 느끼지 못할 것이다. . React JS는 우리의 웹사이트에 간단하게 상호작용을 만들어준다. . 강의에서는 앞으로 바닐라 JS와 React JS를 비교하고, 왜 React JS가 더 좋은지를 설명해주실것임!!! Before React 핵심 : React JS의 기초를 ..