환경: Visual Studio Code - 과정과 함께 휴대전화 키패드 구현을 진행해보자 [조건] - 0-9,*,#을 누르면 누른 대로 기록이 되어야 함 - 전화 버튼을 누르면 기록되어 보여지던 숫자들이 지워져야 함 [ 풀이 과정 ] - (1) 버튼이 작동되도록 구현하기 휴대전화 키패드 1 2 3 4 5 6 7 8 9 * 0 # C (+) 각각의 숫자들 마다 함수를 부여하여 기록하도록 설정하는 방식이다. (+) 단점 : 같은 식을 가지고 있는 함수가 많아짐. - (2) 함수의 재사용성을 높이기 (+) 함수에 매개변수를 받아 그 값을 적어주는 형태로 구현하였다. (+) 텍스트를 지우는 경우, 자바스크립트는 온따옴표(""), 외따옴표('') 둘 다 가능하다. [ 전체 코드 ] 휴대전화 키패드 1 2 3 4..

[1] demo02 프로젝트 생성npx create-react-app demo01깃허브 설정 제거 후 프로젝트 생성npx create-react-app demo01 --skip-git [2] demo02 프로젝트 실행cd demo02npm start  [3] 각자 작업할 환경에서 App.js 파일 수정import logo from './logo.svg';import './App.css';function App() { return ( React 실습 구글로 이동 네이버로 이동 카카오로 이동 );}export default App;   (+) 리액트는 전체를 감싸는 태그 하나만 허용한다.   [4] 결과 확인 프로젝트 종료는 cmd에서 Ctrl+C하면 ..

환경 : Visual Studio Code  [ 태그 제어 ]자바스크립트에서 태그를 "선택"해야 제어가 가능하다선택의 개념은 CSS와 동일하다  └ 단, 자바스크립트에서는 `document.querySelector("선택자")`로 선택해야 한다.  [ 주요 코드 ] 안녕하세요!      (+) 클래스 명을 활용하여 변화를 줄 타겟을 지정해준다. (q1)     (+) onclick() 속성을 활용하여 클릭시 hello() 함수가 출력되도록 해준다.             └ 호출된 hello() 함수의 결과가 q1 클래스가 있는 곳에서 출력된다.  [ 전체 코드 ] 자바스크립트..

[ display 속성 이해 ] `display` 속성은 요소를 화면에 어떻게 표시할지 결정하는 데 사용 요소의 레이아웃 박스 유형을 결정하는 중요 속성 요소로는 `block`, `inline`, `inline-block`, `flex`, `grid`, `none` 값이 있다   1. display: none;화면에 보이지 않도록 해주는 기능visibility: hidden과 다르게 요소가 차지하는 공간조차 없애버리는 특징을 가짐 2. display: flex;유연한 박스 모델로, flex 컨테이너 내의 아이템들의 가로, 세로 축을 기준으로 유연하게 배치할 수 있다.                                                                              ..

환경 : Visual Studio Code  [ 함수(Function) ]혼자서 특정 기능을 처리하도록 구성된 코드 덩어리로, 원할 때 실행 가능화면에서 어떤 변화가 발생하면 함수가 실행되도록 구성하는 것이 중요 [ Event Binding/Handling ]미리 작성해둔 JavaScript 함수를 태그의 특정 상황에 연결 지음예) onclick : 클릭했을 때, oninput : 입력했을 때                 (+) 콘솔 내에서도 hello(); 함수를 호출할 수 있다!  [ 주요 코드 ] 자바스크립트 함수 안녕 안녕 ..

환경 : Visual Studio Code  [ 스크립트에서 조건문, 반복문 써보기 ][ 집중적으로 볼 코드 ]       (+) 자료형을 선언하는 것이 아닌 var를 사용한다.      (+) 전부 자바 코드와 동일!       (+) 콘솔로 출력[ 전체 코드 ] 자바스크립트 조건과 반복    개인 공부 기록용입니다:)