기록하는 개발자

useInput - input 내용과 그에 따른 이벤트를 useState hooks를 통해 관리할 수 있다. import React, { useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const useInput = (initialValue, validator) => { const [value, setValue] = useState(initialValue); const onChange = (event) => { const { target: { value } } = event; // 위와 동일 : const { value } = event.target; let ..

react 사용에 필요한 것 - nodeJS, npm, npx, git, code editor - nodeJS 설치 시 npm이 함께 설치된다. (yarn과 npm은 동일한 역할을 수행한다.) - 원하는 code editor 사용 ex) VSCode, Sublime Text, Brackets, Atom, Vim etc.. react를 배우기 전 기본적으로 알아야 할 것 - html, css, vanillaJS 1. npx install > npm install npx -g 2. create app > npx create-react-app ex) npx create-react-app myapp 3. app 실행 > cd myapp > npm start import React from "..

div.fruit h1[id=first] : class=fruit인 div중 h1의 id가 first인 쿼리 const h1=document.querySelector("div.fruit h1[id=first]"); handleTitleClick1, 2는 아래와 같은 역할을 동일하게 수행하는 코드이다. h1의 classList에 clicked class가 이미 있는지 확인 → 만약 있다면 clicked를 제거 → 없다면 clicked를 추가 toggle 함수는 handleTitleClick2 함수 내부의 코드 4줄과 동일한 역할을 한다. function handleTitleClick1(){ const clickedClass = "active"; if(h1.classList.contains(clickedCl..

Peach🍑 GreenApple🍏 WaterMelon🍉 ☁ 🌞 ☃ ☔ body{ background-color: lightblue; text-align: center; }​ // document : 현재 js 파일과 연결된 html 파일 // document에 first 라는 id를 가진 element를 가져온다. let firstElement=document.getElementById("first"); console.log(firstElement); // document에 second 라는 id를 가진 element의 innerText를 가져온다. let SecondElement=document.getElementById("second").innerText; console.log(SecondElemen..

우리 학교 멋사에서도 올해부터는 웹으로 프로젝트를 진행하기로 했고 오늘 첫 실습 강의가 진행됐다:D [ 실습 1 ] 김어진의 자기소개 프로필 사진 내 정보 상명대학교 컴퓨터과학과 201810911 김어진 자기소개 안녕하세요 저는 멋쟁이 사자처럼 8기 김어진 입니다. .MyProfile{ background-color:lightblue; } .introduce{ background: white; margin : 60px; }​ - background-color를 통해 배경색 변경 - introduce class에 포함된 단락(div)의 배경만 white로 지정 - margin을 통해 좌우에 60px만큼 공간 확보(외부 공간) 자신을 표현하는 키워드 5가지 끈기 노력 행복 계획 성실 자신의 가치 순위 행복 ..

HTML (Hyper Text Mark up Language) 문서의 구조를 나타냄 →웹페이지의 뼈대를 구성하는 언어 CSS(Cascading Style Sheet) 문서 각 요소들의 스타일을 나타냄 3EX)글씨 크기, 색상, 폰트 등 -Cascading 의 'C' 를 사용하는 이유는 상위 요소의 스타일 속성을 자손 요소들에게 상속 시켜주는 모습이 DOM 트리구조에서 마치 폭포수처럼 내려가는 모습을 닮았기 때문이라고 한다.(cascade : 종속, 작은 폭포) -CSS는 HTML과 달리 문법에 엄격하다. 구두점 하나만 빼먹는 실수를 해도 전체 CSS파일의 로딩에 실패한다. 따라서 CSS를 편집할 때는 코드의 무결성을 검증해줄 수 있는 IDE나 코드 에디터를 사용하는 게 좋다. JAVA SCRIPT 정적인..