My Boundary As Much As I Experienced

클래스형 컴포넌트 import { Component } from 'react'; export default class MyComponent extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); this.state = { count: 0, }; } handleClick() { this.setState({ count: this.state.count + 1 }); } render() { const { count } = this.state; return ( {count} 클릭해보세요! ); } } react 라이브러리에서 제공하는 Component를 import 받아와서 상속 관계를..

- 클래스형 컴포넌트(Class Component)의 단점을 보안하여, 함수형 컴포넌트(Functional Component)를 사용 할 수 있도록 등장한 것이 React Hook(리액트 훅) 리액트 v16.8에 새로 도입된 기능으로, 함수형 컴포넌트(Functional Component)에서 사용되는 몇가지 기술들을 일컫는다. 리액트 훅은 함수형 컴포넌트(Functional Component)가 클래스형 컴포넌트(Class Component)의기능을 사용 할 수 있도록 해주며 대표적인 예로는 useState, useEffect 등이 존재한다. 내장 Hooks - useState - useEffect - useContext 추가 Hooks useReducer (복잡한 컴포넌트들의 state를 관리 -분리..

리액트의 소스코드 import React, { Component } from 'react'; import PropTypes from 'prop-types'; export default class Basic extends Component { static propTypes = { name: PropTypes.string.isRequired, birth: PropTypes.number.isRequired, lang: PropTypes.string, }; static defaultProps = { lang: 'Javascript', }; static contextTypes = { router: PropTypes.object.isRequired, }; state = { hidden: false, }; compo..

1. 스코프 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 따라 접근 가능한 범위가 결정되는 것을 말함. var, 함수 스코프 var는 함수를 기준으로 유효 범위가 결정된다. 다른 함수 안의 변수는 접근 불가. function displayNum() { var num = 100 console.log(num) // 100 } displayNum() // 100 console.log(num) // num is not defined 그런데 조건문은 함수가 아니라 문(statement)이기 때문에 안으로 접근 가능하다. if (true) { var age = 10 } else { var age = 20 } console.log(age) //20 let, const 직관적으로 중괄..

JavaScript 엔진은 코드를 실행하기전 실행 컨텍스트(Execution Context)라는것이 생성됩니다. 실행 컨텍스트는 생성 단계(Creation Phase)와 실행 단계(Execution Phase)라는 2개의 단계를 거치는데 생성 단계는 코드를 읽기 전, 실행 단계는 실제 코드를 읽는 단계를 말합니다. var의 경우 생성단계에서 변수 선언&초기화가 함께 진행되므로, 변수 객체 등록과 동시에 메모리 공간도 할당 받는다. 그렇기 때문에 메모리를 할당받은 상태이므로 호이스팅시 메모리 참조를 통해 변수 접근이 가능하다. let과 const의 경우 생성 단계에서 변수 선언은 하지만 초기화를 하지 않고 TDZ(Temporary Danger Zone)에 보관한다. 그래서 제대로 할당이 일어나지 않은 상황..

이벤트위임이란? 버블링 캡처링을 통한 이벤트 전파를 통해 상위 요소에서 이벤트 핸들링을 하는 것을 말한다. event.target을 통해 어떤 위치에서 이벤트가 일어났는지 특정할 수 있다. 예시 1 Bagua Chart: Direction, Element, Color, Meaning Northwest Metal Silver Elders ... ... ...2 more lines of this kind... ...2 more lines of this kind... table이 있고 tr, td들이 들어있는 테이블 구조가 있다고 하자. 여기서 원하는 cell(td)을 클릭하면 색상이 바뀌도록 바꾸고 싶다고 하자. 이때 td들에 일일이 다 이벤트 리스너를 부여하는 방식은 매우 코드가 많아지고 반복적인 요소가 ..

과제 목표: 직원들의 프로필과 사진을 관리할 수 있는 사진 관리자 서비스 만들기. “AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현하세요. 프로필 페이지를 개발하세요.스크롤이 가능한 형태의 리스팅 페이지를 개발하세요. 전체 페이지 데스크탑-모바일 반응형 페이지를 개발하세요.사진을 등록, 수정, 삭제가 가능해야 합니다. 유저 플로우를 제작하여 리드미에 추가하세요. CSS애니메이션 구현상대수치 사용(rem, em) JavaScriptDOM event 조작 결과물 주소: https://profilebase-bm0729.firebaseapp.com/ 깃허브 주소에서 기능 설명 자세히 보기 ProfileBase, 직원 사진 관리 백오피스 (KDT0_JeongBeomH..

가상 클래스 선택자 :checked 를 사용하여 체크된 체크박스들만 모두 선택할 수 있다. 선택자로 선택된 node를 찾아 조작할 수 있다. const checked = document.querySelector("input[type='checkbox']:checked") 또한, 프로퍼티 속성을 다루듯이 사용할수도 있다. 아래 예제는 내가 전체 체크박스를 눌렀을 때, 다른 체크박스들을 모두 선택되게 하거나, 모두 해제하게 하는 로직을 구현한 방법이다. input type="checkbox"인 노드는 .checked 식으로 프로퍼티 속성을 다루듯이 사용할 수 있다. const primeCheckbox = document.querySelector("input[type='checkbox']") // 맨 첫번째 ..

some 리턴 값이 하나라도 true라면 true값 반환. (빈 배열에서 사용하면 false값 반환) const array = [1, 2, 3, 4, 5]; // checks whether an element is even const even = (element) => element % 2 === 0; console.log(array.some(even)); // expected output: true every 모든 인자들이 콜백함수 테스트를 통과하면 true를 반환. 콜백함수를 하나라도 통과하지 못할 시 false 반환. every함수와 부정연산자(!)를 사용하여 콜백을 짜면 하나라도 참일 시 false를 반환하는 로직을 짤 수 있다. (빈 배열에서 사용하면 true값 반환) const isBelowT..

버블링Bubbling이란? 특정 요소를 선택했을 때, 그 요소 뿐만이 아니라 상위 요소들의 이벤트 리스너도 작동하는 것을 말한다. 이동하기 //JS const divEl = document.querySelector("div") const pEl = document.querySelector("p") const aEl = document.querySelector("a") divEl.addEventListener("click", ()=> console.log("div")) pEl.addEventListener("click", ()=> console.log("p")) aEl.addEventListener("click", ()=> console.log("a")) //클릭 시 //a //p //div 한 요소에 이..