IT_susu

정의string 내장메서드로 string안에 특정 string을 찾아주는 역할. 생각힌트문자열에서 특정 문자열을 찾아 그 인덱스를 반환 받는 경우- 중복은 잡아내지 않음- 해당 문자열이 없으면 -1을 반환하는 조건

* 메모리 관리를 해야 하는 이유브라우저는 가비지 컬렉션을 지원하는 프로그래밍 환경이고, 우리가 개발하는 웹자바스크립트는 브라우저 환경 기반 하에 동작하므로 일반적으로는 메모리 관리를 크게 신경쓰지 않아도 된다. 그러나 웹브라우저에서 사용할 수 있는 메모리는 일반적인 데스크톱 애플리케이션의 가용 메모리에 비해 매우 적기 때문에 (브라우저로 인해 운영체제가 다운 되는 것을 방지) 아예 무시할 수는 없는 문제다. heap(힙) -브라우저가 갖고 있는 메모리 공간 stack(스택) -함수 저장??

이벤트를 걸 당시에 해당 html이 아직 존재하지 않는다면 이벤트는 해당 html에 연결되지 않는다.이는 마치 존재하지 않는 변수에 어떤 함수를 연결하는 것과 같은 행위다. 그러나 동적으로 html을 생성할 때는 처음부터 그 dom요소가 존재하지 않으므로 이벤트를 걸기가 애매해진다.이럴 때는 2가지 방법이 있다. 1) 부모요소 혹은 body에 이벤트를 걸어놓는다.$menu.on("click", "li", function(){ // li의 부모요소에 클릭 이벤트를 걸어 놓음}); 1번 방법으로 안될 경우에 함수로 맵핑하는 방법이 있다. 2) 함수로 맵핑하여 다른 메소드에서 호출한다. - 함수 맵핑(이벤트 해지 후 재설정)function RefreshSomeEventListener() { // Remove ..

props는 부모 자식 관계에서 데이터를 주고 받는 것이지만, state는 하나의 컴포넌트 내부에서 데이터 값이 변하는 것입니다. state의 값을 변경할 때는 항상 setstate라는 함수를 사용하여 변경합니다. 왜냐하면 setstate함수가 호출되면 컴포넌트가 리렌더링되도록 설계되어 있기 때문입니다. setstate를 거치지 않고 값을 직접 변경해도 리렌더가 되지 않으면 소용없겠죠? 뷰에 업데이트가 되지 않을테니까요. import React, { Component } from 'react'; export default class Counter extends Component{ state = { number: 0 -------------------------- 1 } handleIncrease = ()..

리액트를 사용할 때 알아두어야 할 기초 개념들에 대해서 간단하게 짚어보자. 1. ES62015년에 업데이트 된 자바스크립트 공식문서다. 자바스크립트의 영역이 확장되면서 많은 보완과 업데이트가 이루어졌다. 모던 자바스크립트이기에 아직 플랫폼들이 최신버전을 다 반영하지 못했으므로 es6를 사용하려면 보완책이 필요하다. 2. babel브라우저 등 플랫폼들이 최신 자바스크립트를 반영하지 못하는 문제는 해결하기 위해 나온 자바스크립트 변환 도구이다.우리가 최시버전으로 작성해도 babel을 적용하면 이전 버전으로 다운그레이드시켜준다. 3. webpack모듈 번들러. 프로젝트의 다양한 파일들을 하나로 모아주고 프로젝트의 빌드 작업을 도와준다. 4. redux리액트에서 어플리케이션의 상태를 관리하려면 redux를 사용..

정의 리액트 컴포넌트에서 데이터를 다루는 방법은 2가지가 있다. 1. props ( 값을 안주면 default value : true ) 2. state props는 부모 컴포넌트(import받는 컴포넌트)에서 자식 컴포넌트(export하는 컴포넌트)로 데이터를 넘겨주는 용도로 사용한다. 자식 컴포넌트에서 수정은 불가능하고 부모 컴포넌트에게서 받을 수만 있는 값이다. (가능해도 하지 마세요. 코드 엄청 복잡해집니다.) state는 컴포넌트 내부에서 선언하여 내부적으로만 값을 변경할 용도로 사용한다. props 구현 // App.js import React, { Component } from 'react'; import MyName from './MyName'; class App extends Compon..

react에서 jsx사용이 필수는 아니지만 시각적으로 더 도움이 되고 react에서 보내주는 에러 및 경고 메시지 서비스를 받을 수 있어 많이 사용합니다. jsx는 JavaScript에 XML을 합쳐 구문을 확장한 표현식입니다. 컴파일 후 JSX 표현식은 일반 javascript함수 호출이 되고 javascript객체로 평가됩니다. 식은 값이 될 수 있기 때문에 if명령문과 for 루프 안에서 사용할 수 있고, 변수에 할당하고 함수의 인수로 받거나 반환할 수 있습니다. * 인젝션 공격 예방 react Dom은 렌더링 되기 전에 jsx내에 포함된 모든 값을 문자열로 바꾸기 때문에 XSS(cross-site-scripting)공격을 막을 수 있습니다. * innerHTML을 대체하는 dangerouslySe..

리액트에서 html을 표현하기 위한 JSX를 작성할 때 주의 점을 살펴봅시다. html과 매우 유사하지만 조금은 다른, jsx입니다. 1. 모든 돔 태그는 항상 닫혀있어야 한다. html 태그 중에는 input, br과 같이 닫히는 태그가 없는 태그들도 있지만, jsx에서 에러가 난다. xml 방식이기 때문이다. 셀프 클로징이라도 해야한다. ex) 회원가입 회원가입 둘러보기 2. 하나의 컴포넌트의 최상단에는 모든 태그를 감싸고 있는 하나의 엘리먼트만 있어야 한다. 하나의 엘리먼트가 DOM 트리 구조를 가진 하나의 객체로 변환되어 이전버전과 지금 버전의 차이점을 알 수 있게 해준다. 만일 이렇게 감싸는 것이 의미없는 태그를 하나 더 쓰는 것 같아 싫다면 혹은 로 감싸도 됩니다. 단, v16.2이상에만 사용..

옵션 값을 합치기 위해 extend 메소드를 사용해 봅시다. $.extend(target[,object1][,objectN])target : 합쳐지는 추가 객체의 속성을 받을 객체.object1 : 합쳐질 때 기준이 될 객체. 즉, 기본옵션objectN : 기준 객체에 합쳐질 추가 객체 즉, 사용자지정옵션 사용 예options = $.extend(default_options, options)

이벤트를 짤 때, 이벤트핸들러에 함수명을 적어도 동작합니다.$(document).on('keydown', keyboardInput);위의 예에서 keyboardInput은 다른 곳에 정의되어 있는 함수이죠.위와 같이 코드를 작성하면 jquery에서 이미 이벤트핸들러 함수인 keyboardInput을 호출하는 코드가 이미 적혀있는 것입니다. 또한 keyboardInput 함수에서 파라미터로 받을 수 있는 것이 이벤트 객체입니다.// 이벤트 객체를 사용할 경우 function keyboardInput(e) { console.log(e); }여기서는 e가 이벤트 객체를 받는 파라미터가 되는 것입니다.위 코드를 치고 실행하면 콘솔에서 이벤트객체를 확인할 수 있습니다.