playground_avec coding

event.target( ) event 인터페이스의 target 속성은 event 가 전달한 객체에 대한 참조이다. 이는 이벤트의 버블링 또는 캡처 단계에서 이벤트 핸들러를 호출하는 event.currentTarget 과는 다르다. event.target은 이벤트버블링의 가장 마지막에 위치한 최하위의 요소를 반환한다. 즉 클릭된 요소를 기준으로 사용하는 경우 event.target을 사용한다. 이벤트 리스너 호출 이벤트 리스너가 등록되고 해당 객체나 요소에 지정된 타입의 이벤트가 발생하면, 브라우저는 자동으로 등록된 이벤트 리스너를 호출한다. 이때 이벤트 리스너는 인수로 이벤트 객체(event object)를 전달받으며, 식별자를 통해 전달받은 이벤트 객체를 참조한다. 이벤트 객체(event object..

Javascript 공식적인 용어는 아니지만, 느슨한 모드(sloppy mode) 라고 부르기도 한다.엄격 모드는 단지 부분적인 것이 아니며, 이것은 고의적으로 일반 코드와  다른 시멘틱을 가지고 있다. 엄격모드는 평범한 Javascript 시멘틱스에 몇가지 변경이 일어나게 한다.1. 기존에는 조용히 무시되던 에러들을 throwing 한다.2. Javascript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로 잡는다. 가끔씩 엄격모드의코드는 비-엄격 모드의 동일한 코드보다 더 빨리 작동하도록 만들어진다.3. 엄격모드는 ECMAScript 의 차기 버전들에서 정의 될 문법을 금지함.스크립트 엄격 모드 엄격모드를 전체 스크립트에 적용하기 위해,정확한 구문 "use strict";(또는 'use stric..

보호되어 있는 글입니다.

우리가 웹사이트의 틀을 그럴싸하게 꾸밀 때, Html로 마크업하고, 그 태그 요소들에 패딩,마진, 배경색, 애니메이션 등의 효과를 주는 CSS 요소들로 치장을 한다. 더 나아가,, 웹페이지에 사용하는 마우스 클릭시 뜨는 alert창, id, pw를 입력하는 회원가입 시 뜨는 오류 창, 이미지의 노출 방식( 이미지 슬라이드, 스크롤 다운시 이미지가 나타나는 방식..등) 그게 다 자바스크립트에서 발생한 이벤트에 반응해 특정 동작을 수행할 수 있다.. 자바스크립트는 스크립트 언어로 소스 코드를 컴파일하지 않고도 실행할 수 있는 프로그래밍 언어이다. 자바스크립트의 특징 객체 기반의 스크립트 프로그래밍 언어. 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능이 존재. 자..

useEffect 를 이용해 dummy data(더미 데이터) 사용 없이 API 호출한다. 우선, fetch('API경로값 ') 을 불러 들이기 위해서는 >>> 1). import { useEffect, useState } from 'react'; 임포트 시켜준다. 2).커맨드 창에서 json-server --watch ./src/db/data.json --port 3001 로 port 지정을 해준다. 3). const [days, setDays] = useState([]); 을 설정해준다. * useState의 개념 const [state, setState] = useState(initialState); 상태 유지 값과 그 값을 갱신하는 함수를 반환합니다. 다음 리렌더링 시에 useState를 통해 반..

우선, 나는 메인페이지에 몇 몇의 컴포넌트를 이용하여, 내가 참고한 무료강의에서 알려준 것과 같이 '일자(day)' 들에 해당하는 '영단어(word)' 가 나오도록 해보려고 했다. 1. 메인 페이지의 구성 Header + DayList + Day(일자에 해당하는 단어들) + EmptyPage (경로 오류 시에 띄어줄 페이지) ✨ 꼭 필요한 것! -컴포넌트 안에 Header.js / DayList.js/Day.js/EmptyPage.js 임포트(Import) 시켜주기 - import {BrowserRouter, Route, Switch } from 'react-router-dom'; - json을 이용한 dummy (더미) 데이터 만들어주기 *Router 설치 명령어는 npm install react-ro..