분류 전체보기 (122) 썸네일형 리스트형 React - state, react가 render하는 방식 react의 변수같은 것. state를 바꾸면 react가 알아서 화면을 새로 렌더링 해준다. 화면을 조건에 따라 변경해야할 때 활용한다. state를 변경할 때 마다 화면을 새로그린다 // App.js import { useState } from 'react'; import Dice from "./Dice"; import Button from "./Buttom"; function App(){ const [num, setNum] = useState(1); const handleRollClick = () => { setNum(3); } return ( 던지기 처음부터 ); } export default App; import를 해준 후 사용할 수있다. state는 const를 사용해 만든다. 위 코드에서 u.. React - 예제 프로젝트 dicegame 만들기 이미지 가져오기 import diceblue01 from './assets/dice-blue-1.svg'; function Dice() { return ; } export default Dice; 위 코드와 같이 image태그를 import한 후, img태그의 src에 넣어서 사용해야한다. img태그의 src에 바로 경로를 작성하면 화면에 이미지가 그려지지 않는다. React - component and props React Element root.render(안녕 리액트!); 위 코드는 아래와 같이 수정이 가능하다. const element = 안녕 리액트!; root.render(element); 그리고 element변수를 console에 찍어보면 자바스크립트 객체가 출력되는 것을 확인할 수 있다. 이 객체를 'React Element'라고 부른다. React Element를 render메서드에 전달하면, render메서드는 객체를 해석해서 HTML코드로 렌더링 시켜주는 것이다. React Element는 화면을 구성하는데 있어서 기본적이며 핵심적인 요소이다. React Component React Element를 함수형태로 만들면 jsx문법 작성시 커스텀 태그처럼 활용이 가능하다. import ReactDOM.. React - jsx문법 jsx란 import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(안녕 리액트!); 위 코드의 마지막줄을 보면 파라미터로 문자열이 아닌 html태그같이 생긴 값을 넘기고 있다. 이렇게 html태그를 사용하는 것은 jsx문법이라고 부른다. jsx문법은 자바스크립트와 html을 섞어쓸 수 있는 자바스크립트의 확장된 문법이다. 자바스크립트와 일치하는 문법 id 속성 root.render(안녕 리액트!); 위 코드와 같이 jsx문법 안에 id값을 넣을 수 있다. 자바스크립트와 다른 문법 class root.render(안녕 리액트!); class는 사용불가.. React - 개발 환경 세팅(MAC), 프로젝트 생성 및 실행하기 개발환경 세팅 node.js 설치 npm 설치(node.js설치시 같이 설치할 수 있다.) 터미널에 잘 설치되었는지 확인하기 node -v npm -v 개발툴 설치(vsCode, webStorm 등) chrome 브라우저 설치 크롬의 확장프로그램 React Developer Tools 설치 React 프로젝트 생성 npm init react-app . 터미널에서 "npm init react-app " 명령어를 입력하면 된다. 해당 폴더에 위치한 상태로 명령어를 입력할 경우, '.' 을 찍어 현재 폴더라고 알려준 것이다. React 프로젝트 실행 npm run start React 프로젝트 종료 ctrl + c 발생했던 에러 1. 프로젝트 생성시(npm init react-app . 입력시) 발생 해결 :.. JavaScript - ajax Asynchronous Javascript And XML의 줄임말 동적 웹페이지를 구성하는 프로그래밍 방식. 전체 페에지가 다시 로드되지 않고 HTML페이지의 일부 혹은 DOM만 업데이트하므로서 좀 더 복잡한 웹페이지를 만들 수 있으며 부드러운 사용자경험을 줄 수 있다. 웹페이지 일부가 리로드되는 동안에도 코드가 계속 실행되어 화면의 멈춤 없이 비동기식으로 작업할 수 있다. 화면을 새로 고치지 않고도 서버와 통신하고 데이터를 교환하고, 페이지를 업데이트 할 수 있다. HTTP 요청만들기 const httpRequest = new XMLHttpRequest(); HTTP요청에, 서버에서 response를 받은 것을 처리할 JavaScript함수를 지정한다. httpRequest.onreadystatecha.. JavaScript - 비동기실행 순서 예제 // 1번 let num = 1; // 2번 setTimeout(() => { num = 2; }, 0); // 3번 num = 3; // 4번 console.log(num); 위 코드 실행시 콘솔에 출력될 값과 그 이유는? 출력될 값 3 이유 실행 순서는 다음과 같다. 처음 num변수에 1이 담김. setTimeout함수가 0초이지만, 일단 순서를 뒤로 미루고 함수밖의 로직을 먼저 처리한다. (콜스택에 setTimeout 바깥 로직이 먼저 들어가서, 0초후 실행되었어야하는 콜백함수의 순서가 뒤로 밀린다.) 이후 num에 3이 담김. console에 3이 찍힘. num이 2로 바뀜. JavaScript - async/await Promise객체로 인해 callback hell문제를 해결하고, 비동기 실행코드를 보기좋게 작성하는 것이 가능해졌다. 그럼에도 자바스크립트 문법은 계속 발전해서 Promise객체를 더 편하게 다룰 수 있는 문법이 생겨났고 그것이 바로 async/await이다. // fetch의 경우 fetch('https://learn.codeit.kr/api/members/1') .then((response) => response.text()) .then((result) => {console.log(result);}) // async/await의 경우 async function fetchAndPrint(){ const response = await fetch('https://learn.codeit.kr/api/mem.. 이전 1 2 3 4 5 6 ··· 16 다음
