도룩이의 개발일기

리액트 기본 개념 정리 JSX JavaScript XML 줄임말 컨테이너 element에 포함시켜야 함.-> 항시 태그를 묶어준다. javascript 변수를 사용할 때는 {} 중괄호를 이용해 사용해야 한다. 스타일 설정할때는 camelCase로 처리해야된다. 주석을 사용할 때는 { /.../ } props(프로퍼티) & state(스테이트) props: 컴포넌트 내부의 불변 데이터 ( 컴포넌트를 외부에서 조작할 때 사용된다. ) 프로퍼티는 상위 컴포넌트에서 하위 컴포넌트로 전달할 때 사용하는 데이터 props는 컴포넌트 내부에서 값을 변경할 수 없다. 예를 들어, App 클래스내에 MyComponent를 포함하고 있으면, App > MyComponent 방향으로 전달됨. class App extends..

1. React? React는 페이스북에서 개발한 유저인터페이스 라이브러리로서 개발자로 하여금 재사용 가능한 UI를 생성 할 수 있게 해줍니다. 이 라이브러리는 현재 페이스북, 인스타그램, 야후, 넷플릭스를 포함한 많은 큰 서비스에서 사용되고 있습니다. 이 라이브러리는** Virtual DOM** 이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 유저인터페이스를 렌더링합니다. 따라서, 최소한의 DOM 처리로 컴포넌트들을 업데이트 할 수 있게 해줍니다. React를 왜 사용하는가? 1. 사용자 경험이 좋아짐 (가독성) (웹에서 앱과 같은 사용자 경험) 2. 재사용 컴포넌트(유지보수) - 중복되는 요소들을 하나로 묶어줘 유지보수가 좋다. 3. 재사용 컴퍼넌트(재사용성) - 데이터와 화면의 일치 1-2. ..

JS 이벤트 위임 이벤트 버블링과 캡쳐링을 이용한 방법으로 이벤트 리스너를 해당 요소에 추가하는 대신 그 상위 요소에 추가하여 위임하는 것을 말합니다. 요소가 동적으로 추가될 때 이벤트 리스너가 붙지 못하는 문제를 막아주고, 이벤트 리스터의 남발로 인한 메모리 낭비를 줄여줍니다. 이벤트위임이 왜 필요한지 중요한 예시 juein.tistory.com/63 [javascript]이벤트 위임(event delegation) JS 이벤트 위임 left right 위와 같은 DOM구조에서 각 버튼 클릭시 이벤트가 발생하길 원할 때 const btns = document.querySelectorAll('.btn'); function btnClick(){ console.log(this); } for(let i = 0..

특정 태그가 가진 속성들 예를 들어 id값이나 class명이 가진 값을 알아야하는 경우 사용 가능한 함수입니다. 값을 가져오는 것도 가능하고 지정할 수도 있습니다. 이때 사용하는 함수는 아래와 같습니다. 선택할 요소.getAttribute('값을 불러올 속성') 선택할 요소.setAttribute(''지정할 속성', '지정할 값') [ 1 ] 속성 값 지정 또는 불러오는 예제 보기

www.youtube.com/watch?v=36HrZHzPeuY

자바스크립트를 공부하면서 return은 어떤 반환값을 얻을 때 쓰는 명령어로만 알고 있었습니다. 그러다 스프린트를 진행하면서 반환값이 없는 return; 을 사용하는 케이스들을 접하고 return의 역할에 대해 정리했습니다. return 의 용도 MDN의 설명에 따르면 'return 명령문은 함수 실행을 종료하고 주어진 값을 함수 호출 지점으로 반환합니다.' 라고 되어있습니다. 함수 중단 주어진 값을 함수 호출 지점으로 반환 함수에서 return 명령문에 도달하면 함수의 실행은 그 지점에서 중단되고, 값을 제공한 경우는 함수를 호출한 곳에 그 값을 반환합니다. 이때 값을 명시하지 않으면 undefined를 반환합니다. 아래와 같은 명령문은 모두 함수 실행을 중단합니다. return; return true..

heropy.blog/2018/10/28/regexp/ 정규표현식, 이렇게 시작하자! 매일 쓰는 것도, 가독성이 좋은 것도 아니지만, 모르면 안되는 정규표현식. 저는 이렇게 공부하기 시작했습니다! (자바스크립트를 기준으로 설명합니다) heropy.blog

1. 객체 지향 프로그래밍 ( Object Oriented Programing ) 1) 객체 객체란 말 그대로 대상을 나타내는 단어입니다. 예를 들어, 사람 개인 한 명 한 명을 모두 객체라 할 수 있고, 책 한 권 한 권을 객체라 할 수 있습니다. 사람은 생김새와 성격이 똑같을 수는 없기 때문에 개개인을 객체라 할 수 있으며, 책도 내용이 같을지라도 한 권의 책에 흠집을 낸다고 해서 모든 책들이 전부 흠집이 나는 것이 아니기 때문에 한 권 한 권을 객체라 할 수 있습니다. 2) 클래스 사람들은 일반적으로 같은 속성들을 갖고 있습니다. 여기서 속성이란 눈, 코, 입, 손, 발, 등의 신체들을 의미합니다. 책도 책 이름, 작가, 출판사, 출판일 등 같은 속성을 갖고 있다고 할 수 있습니다. 사람, 책 같은..