짧은코딩

-App.js import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; const dummyList = [ { id: 1, author: "이정환", content: "하이 1", emotion: 5, created_date: new Date().getTime(), }, { id: 2, author: "홍길동", content: "하이 1", emotion: 5, created_date: new Date().getTime(), }, { id: 3, author: "아무개", content: "하이 1", emotion: 5, created_date: new Date().getTime(),..

import { useRef, useState } from "react"; const DiaryEditor = () => { const authorInput = useRef(); const contentInput = useRef(); const [state, setState] = useState({ author: "", content: "", emotion: 1, }); const handleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, }); }; const handleSubmit = () => { if (state.author.length < 1) { authorInput.current.focus(); retu..

State state: 계속해서 변화하는 특정 상태에 따라 각각 다른 동작을 함 ex) 어두운 테마로 바꾸는 모드처럼 상태가 계속 동적으로 바뀔 수 있는 것을 의미한다. -버튼 누르면 증가 감소하는 코드 //상태를 사용하겠다라는 메소드를 import import React, { useState } from "react"; const Counter = () => { // h2태그의 0은 1씩 증가 감소하는 // count 상태라고 생각할 수 있다. const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); }; const onDecrease = () => { setCount(count - 1); }; retur..

환경 설정 npx를 사용해서 파일들을 만들었다. npx를 사용한 이유는 한번만 사용해서이다. 그리고 npm start를 하고 localhost:3000에 접속하면 내 서버와 연결된다. localhost 그리고 src에 있는 App.js의 파일을 수정하면 localhost:3000 페이지가 바뀐다. 그치만 html이 아니고 js에서 어떻게 화면을 띄우는지 궁금하다. => App 함수에서 리턴하는 값이 html body의 자식으로 들어가서 그렇다. 자세히 살펴보면 index.js에서 App.js를 import로 받아온다. 그리고 index.js 안에 있는 reader 함수는 화면에 그려주라는 함수이다. readner로 root에 넣어주라는 것이다. index.html에 있는 id가 root인 div에 App..

첫번째 이유 웹 페이지에서 각 사람마다 이름이 출력되는 페이지가 있다. 그러기 위해서는 일일이 다 수정을 해야한다. 하지만 페이지의 수가 많아지면 다 출력하기 어렵다. 그래서 html 박스 별로 컴포넌트로 나눠서 사용하면 수정하기 쉬워진다. 컴포넌트 방식을 사용하면 페이지를 하나하나 수정하는 것이 아니라 컴포넌트가 정의된 파일 하나만 수정하면 간편하게 수정이 가능하다. =>따라서 React를 사용한다. React는 Component 기반의 UI 라이브러리다. React로 개발을 하면 레고처럼 조립하는 것 같이 개발할 수 있다. 두번째 이유 -명령형 프로그래밍 명령형 프로그래밍의 대표적인 것은 jQuery가 있다. 명령형 프로그래밍은 절차를 하나하나 다 나열 해야한다. -선언형 프로그래밍 선언형 프로그래밍..

Node.js Node.js는 웹 브라우저의 자바스크립트 엔진을 따로 만든 것이다. 그렇기에 자바스크립트를 브라우저가 아닌 곳에서도 실행할 수 있다. 이로 인해 자바스크립트로 웹 서버를 만들 수 있게 되었다. -설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org VSC에서 Node.js 사용법 터미널에서 node 다음에 파일명을 입력하면 Node.js에서 실행이 가능하다. 노드js에서는 calc.js에 있는 모듈을 index.js에서 내장 함수를 통해 불러와서 사용할 수 있다. 패키지 npm: Node Package Manager, 다른 사람이 만..

if문 function isKoreanFood(food) { if (["불고기", "떡볶이", "비빔밥"]).includes(food)) { return true; } } includes를 사용하면 그 배열 안에 들어있는 것인지 아닌지 확인이 가능하다. 비 구조화 할당 -배열 let [one, two, three, four = "four"] = ["one", "two", "three"]; 이 코드는 one에 "one"이 들어가고 two에 "two" 이렇게 순서대로 들어간다. 그리고 왼쪽에서 마지막에 ="four"의 의미는 오른쪽 값이 부족하여 할당이 안되면 기본값으로 할당하라는 의미이다. let a = 10; let b = 20; [a, b] = [b, a] 두 값의 변수를 서로 바꿔야하면 이렇게 간단하..