하얀 코딩

DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작 할 수 있는 Model입니다. JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다. HTML을 조작할 수 있다는 게 무슨 뜻일까요? HTML을 분석하여 HTML의 아주 작은 부분까지 접근할 수 있는 구조를 만들었습니다. (DOM) DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있습니다. 앞서 학습한 조건문과 반복문, 배열, 객체를 활용하면 소셜 미디어에서 새롭게 생성되는 게시물을 저장하고 분류하는 작업을 구현할 수 있습니다. HTML에 JavaScript를 적용하기 위해서는 웹 브라우저가 작성된 코드를 해석하는 과정에..

input 태그 말고도 입력에 대한 태그들도 있습니다. 자주 쓰이는 태그에 대해서 알아볼까 합니다! 1. select (선택 입력) 2. textarea (문장 입력) 3. button (button) 4. submit (전송 입력) 5. fieldset (필드셋) select (선택 입력) select 요소는 여러 개의 옵션이 드롭다운 리스트(drop-down list)로 되어 있으며, 그중에서 옵션만을 입력받을 수 있습니다. option 요소는 드롭다운 리스트에서 선택할 수 있는 각각의 옵션을 명시합니다. 사과 귤 딸기 복숭아 selected 속성을 이용하여 드롭다운 리스트 중에서 처음에 미리 선택되는 옵션을 지정할 수 있습니다. textarea (문장 입력) textarea 요소는 사용자로부터 여러..

구문 const 변수 = useRef(초기값) 특징 1. useRef로 관리되는 변수는 값이 바뀌어도 컴포넌트가 리렌더링 되지 않는다. 2. useRef는 렌더링이 되어도 값을 유지한다. (저장 기능이 용이하다!) 3. useRef는 DOM요소에 접근 하는것도 가능하다. focus text selection media playback 애니메이션 적용 d3.js, greensock 등 DOM 기반 라이브러리 활용 4. 원하는 태그 속성에 ref={} 의 형태로 작성하여 useRef() 주소와 연동이 된다. 5. useRef를 console.log를 찍으면 {current: 현재값}이 나온다. 그리고 이 값을 수정이나 조회 할 때는 current를 쓰면 된다. useRef 활용 1 (DOM) function..

State 컴포넌트 내부에서 변할 수 있는 값 사용법 예시 useState 를 이용하기 위해서는 React로부터 useState 를 불러와야 합니다. import 키워드로 useState 를 불러옵시다. import { useState } from "react"; 다음은 useState를 수도 코드로 작성한 것이다. const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값); 변수의 이름은 아무 이름으로 지어도 됩니다. 일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않습니다. function CheckboxExample() { // 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked 라 부르겠습..

조건부 렌더링 조건부 렌더링이란, 특정 조건에 따라 결과물을 렌더링 하는 것을 의미합니다. 리엑트에서는 삼항연산자나 단축 평가 논리 계산법을 자주 사용합니다. JSX 에서 null, false, undefined를 렌더링하게 된다면 아무것도 나타나지 않게 됩니다. 삼항 연산자 let result = 조건식 ? 참값 : 거짓값; 조건식에 따라 true면 참값을 리턴, false면 거짓값을 리턴 한다. 단축 평가 논리 계산법 false && false // 앞 true && false // 뒤 false && true // 앞 true && true // 뒤 false || false // 뒤 true || false // 앞 false || true // 뒤 true || true // 앞 논리 연산자를 ..

속성 input 요소는 다양한 속성을 가질 수 있습니다. HTML에서 자주 사용되는 input 요소의 대표적인 속성은 다음과 같습니다. 1. value 2. readonly 3. disabled 4. maxlength 5. size value value 속성은 input 요소의 입력 필드(input field)에 나타나는 초깃값을 설정합니다. 이름 : 학번 : 학과 : readonly readonly 속성은 사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정합니다. disabled 속성과 다른 점은 전송 버튼(submit)을 누르면 초깃값이 서버로 전송된다는 점입니다. 이름 : 학번 : 학과 : disabled disabled 속성은 사용자가 입력 필드를 아예 사용할 수 없도록 설정합니다. ..

input HTML에서는 input의 다양한 타입을 사용하여 사용자로부터 입력을 받을 수 있습니다. HTML에서 사용할 수 있는 대표적인 input 요소의 type 속성은 다음과 같습니다. 1. 텍스트 입력(text) 2. 비밀번호 입력(password) 3. 라디오 버튼(radio) 4. 체크박스(checkbox) 5. 파일 선택(file) type = "text" 태그의 type 속성값을 "text"로 설정하면, 사용자로부터 한 줄의 텍스트를 입력받을 수 있습니다. type = "password" 태그의 type 속성값을 "password"로 설정하면, 사용자로부터 비밀번호를 입력받을 수 있습니다. 비밀번호를 입력받기 때문에 화면에는 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시됩니다. ty..

form 웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있습니다. 또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용합니다. action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시합니다. 이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 합니다. method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시합니다. 따라서 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달됩니다. method 속성 method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET 방식과 POST 방식으로 나눠집니다. GET 방식은 주..