짧은코딩

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..

유튜브 페이지 만들기 1일 -참고 영상 https://www.youtube.com/watch?v=67stn7Pu7s4&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=16 -완성해야 할 페이지 우선 작은 화면부터 만들고 큰 화면으로 전환한다. html Youtube #DreamCoding #DreamCiders #Ellie Clne Coding: Youtube Mobile Website 유튜브 모바일 웹사이트 따라 만들기 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript 드림코딩과 함께하는 프론트엔드 실전 입문편 1M views 1 month ago 드림코딩 by 엘리 1M subcribers subscribe Up next 살라 득점왕 가능성은? 리..

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..

To Do List -큰 화면 -작은 화면 사실 처음엔 그냥 원래 있던 코드를 가져다가 썼다. 하지만 내가 원하는 기능을 넣기 위해서는 코드를 이해하고 수정했어야한다. 이러면서 공부가 잘되었다고 생각한다. 그리고 큰 화면과 작은 화면 모두 만들어서 반응형 웹을 만들어봤다. 프로젝트를 하면서 js에 대해 확실하게 이해할 수 있었다. 뿐만아니라 css로 반응형웹도 만들고 flex 박스에 대해 더욱 이해를 해서 좋은 경험이되었다. -사이트 https://5hyun.github.io/Nomadcoders_project/ ToDoList 5hyun.github.io

-깃허브 주소 https://github.com/5hyun/Nomadcoders_project GitHub - 5hyun/Nomadcoders_project Contribute to 5hyun/Nomadcoders_project development by creating an account on GitHub. github.com -결과 아직 To Do List를 만드는 거만 완료했다. 사실 노마드 코더님이 알려준 코드를 거의 복붙했다.. js에 대해 좀 더 이해가 필요할거 같다. todo.js 파일을 이해하고 완료된 일을 적어주는 Finished까지 만들어보는 것이 목표이다.

이진 검색 트리 이진 검색 트리의 각 노드는 키값을 하나씩 갖고 키값은 모두 달라야 한다. 루트 노드가 있고 각 노드는 최대 두 개의 자식을 갖는다. 왼쪽 자식 노드의 키값보다 크고, 오른쪽 자식의 키값보다 작다. -서브 트리 -이진 검색 트리 검색 1. 여기서 25을 찾으면 맨 처음 30보다 작아서 왼쪽, 20보단 커서 오른쪽으로 가면 25가 나온다. 2. 27을 찾으면 맨 처음 30보다 작아서 왼쪽, 20보다 커서 오른쪽 하지만 25보다 큰데 25의 자식이 없어서 27은 저 트리에 없다. 이러면 NIL이라고 한다. -이진 검색 트리 삽입 -이진 탐색 트리 삭제 r이 리프 노드인 경우 r의 자식 노드가 하나인 경우 r의 자식 노드가 두 개인 경우 1. r이 리프 노드인 경우 그냥 삭제한다. 2. r의 ..

첫번째 이유 웹 페이지에서 각 사람마다 이름이 출력되는 페이지가 있다. 그러기 위해서는 일일이 다 수정을 해야한다. 하지만 페이지의 수가 많아지면 다 출력하기 어렵다. 그래서 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, 다른 사람이 만..

const colors = [ "#ef5777", "#575fcf", "#4bcffa", "#34e7e4", "#0be881", "#f53b57", "#3c40c6", "#0fbcf9", "#00d8d6", "#05c46b", "#ffc048", "#ffdd59", "#ff5e57", "#d2dae2", "#485460", "#ffa801", "#ffd32a", "#ff3f34" ]; const Btn = document.querySelector("button"); function BackChange() { const Random1 = colors[Math.floor(Math.random() * colors.length)]; const Random2 = colors[Math.floor(Math.rando..