개발자 연쨘

변수에 잠깐 데이터 저장하고 html에 {데이터바인딩} ! 중요하고 자주 바뀌는 데이터는 state에 저장하는게 좋습니다 ! 🐰 state 만드는법 🐰 import { useState } from 'react'; /*위에 이거 작성*/ let [a,b] = useState('코트 추천'); /*let [데이터, 데이터변경 도와줌] = useState('보관할 자료')*/ 맨 윗줄에 import {useState} from 'react' 하고 원하는 곳에서 useState('보관할 자료') 쓰면 state에 자료를 잠깐 저장할 수 있습니다. 그리고 저장한 자료를 나중에 쓰고 싶으면 let [a,b] = useState('코트 추천'); a 자리에 state 이름을 자유롭게 작명한 다음 나중에 자유롭게 사용..

리액트에서는 html이 아니라 JSX라는 문법을 사용합니다! 리액트에서는 하나 만들기 위해서는 자바스크립트로 React.createElement('div', null) 이렇게 사용해야하는데 그러면 복잡하고 어려우므로 JSX를 사용하는겁니다!! 오늘은 이 JSX문법을 실제로 어떻게 적용하는지 알아보았습니다. 🐰 class 넣을땐 className 🐰 스타일을 주기 위한 class명을 넣을땐 className을 사용합니다. class를 쓰면 안되는 이유는 자바스크립트에서 사용하는 예약어인 class라는 키워드를 사용하면 안되기 때문입니다. function App() { return ( 블로그 ); } export default App; 🐰 변수를 html에 넣을땐 {} 중괄호 사용 🐰 function App..

- RAM(주기억장치 ) RAM에는 현재 사용중인 프로그램이나 데이터가 저장되어 있다. 전원이 꺼지면 기억된 내용이 모두 사라지는 휘발성 메모리이다. - HDD, 드라이브, SSD(HDD보다 더 우수함) 보조기억장치는 주기억장치의 단점을 보완하기 위한 기억장치. 주기억장치에 비해속도는 느리지만 전원이 꺼져도 내용이 그대로 유지되고, 저장용량이 크다는 장점이 있다. - 저장된 정보로 결과를 만들어 내는 작업 → CPU(Central Processing Unit) CPU는 연산과 제어를함 - CPU와 GPU는 연산을 통해 결론을 도출하는 기능을 수행하는 처리장치 - GPU는 그래픽 연산을 빠르게 하여 결과값을 모니터에 출력하는 작업에 특화 -하드웨어와 소프트웨어는 처리하는 과정을 할 수 있게 해주는 컴퓨터 ..

function에 사용가능한 피라미터 문법 함수내에 구멍을 뚫어준다고 생각해보자! function alertOpen(구멍){ document.getElementById('alert').style.display = 구멍; } 지금 함수 내에 구멍을 뚫었습니다. 구멍을 뚫는 법은(파리미터 생성법) () 소괄호 내에 아무 글자나 적고 {} 중괄호 내에도 같은 글자 아무데나 적으면 됌. 구멍을 뚫는이유(파라미터 생성하는 이유) → 구멍을 뚫으면 함수를 업그레이드해서 사용할 수 있기때문! 구멍이 뚫려있으면 이제 함수를 쓸 때 그냥 쓰는게 아니라 소괄호 내에 뭔가 문자나 숫자등을 입력해서 사용가능 function alertOpen(구멍){ document.getElementById('alert').style.dis..

자바스크립트 function 문법 function (일명 함수) 라는 문법이 있는데 이 문법 쓰는 이유부터 알아보자! 함수는 긴코드를 한 단어로 축약하고 싶을 때 쓰는 문법! 개발자의 말로 표현하자면 특정 기능을 다음에도 쓰기 위해 모듈화해놓는 문법 간단하게 말하면 긴 코드 짧은 단어로 축약하고 싶을 때 쓰는 문법이라고 암기 function 작명(){ 축약하고 싶은 코드 } function 키워드 쓰고 소괄호, 중괄호 소괄호 왼쪽에 작명 긴 코드를 중괄호 안에 담으면 코드 축약 끝 그럼 이제 작명() 이거 쓸 때 마다 그 자리에 긴 코드가 실행 Alert 여는 코드 function으로 축약해보기 버튼의 onclick 안에 길고 더러운 자바스크립트 코드가 있었는데 그걸 함수 문법을 이용하면 짧게 축약해서 ..

css에서 UI를 숨기고싶으면 display:none; 주면 되고, 다시 보여주고 싶으면 display:block; 넣으면 보임 이게 싫으면 visibility:hidden; 거의 모든 html태그 내에 onclick이라는 속성을 넣을 수 있는데 이걸 넣게되면 해당 html을 클릭시 onclick안의 자바스크립트를 실행 버튼 예시로 Alert UI 디자인해서 안보이게 만들어보자! step 1. Alert UI 디자인부터 하기 html파일부터 들여다보면 알림창 css에서는 이것을 먼저 가려야하고 자바스크립트로 버튼누르면 보이게 할것임 그러기 위해서는 css로 먼저 저창을 가려놓아야함 .alert-box { background-color: pink; padding: 10px; color: white; bor..

자바스크립트의 기본 단어들을 해석해보자 ! 반갑습니다 부분에 단어들을 해석해보면 document → 문서를 의미함. 여기서는 html 웹문서 의미 마침표 (.) → ~의 getElementById('hi') → 아이디가 ‘hi’인 html 요소 일면(element) 를 찾아라 innerHTML → 내부 HTML이라는 뜻 = → 등호는 프로그래밍에서 오른쪽에 있는걸 왼쪽에 대입하라는 뜻 ‘안녕’ →안녕이라는 문자(큰따옴표, 작은따옴표안에 담겨있으면 항상 문) html 바꾸는법 document.getElementById('???').??? = '???'; 여기 물음표만 맘대로 바꿔주면 html의 모든걸 변경하고 조작가능 src 바꾸는법 document.getElementById('???').src = 'pr..