목록분류 전체보기 (153)
IT_susu
* 메모리 관리를 해야 하는 이유브라우저는 가비지 컬렉션을 지원하는 프로그래밍 환경이고, 우리가 개발하는 웹자바스크립트는 브라우저 환경 기반 하에 동작하므로 일반적으로는 메모리 관리를 크게 신경쓰지 않아도 된다. 그러나 웹브라우저에서 사용할 수 있는 메모리는 일반적인 데스크톱 애플리케이션의 가용 메모리에 비해 매우 적기 때문에 (브라우저로 인해 운영체제가 다운 되는 것을 방지) 아예 무시할 수는 없는 문제다. 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이상에만 사용..
웹사이트를 최적화하여 빠르고 효율적으로 웹을 사용하는 것은 매우 중요하다.같은 데이터 양이어도 엄청 느리거나 혹은 매우 빠를 수도 있기 때문이다. 그 방법의 일환으로 최소화가 있다.이는 압축과는 다른 것인데 압축은 아예 사용 불가능하게 용량을 줄여버리기 때문에 유저가 사용하려면 다시 압축을 해제해야 한다.최소화는 당연히 압축만큼 용량이 줄어들진 않겠지만 압축 해제가 필요 없어 빠르게 사용이 가능하다. 최소화를 하면 주석, 불필요한 공백을 제거해 준다.대표적인 툴로 JSMIN이 있다. 더 최소화 하기 위한 일환으로 난독화를 진행하기도 하는데, 이는 코드에 오류가 발생할 여지가 많으며 유지 보수와 디버깅에 불리하다.
시멘틱 웹(semantic web)이란? - 기기가 웹페이지의 구성을 빠르게 이해할 수 있도록 태그에 의미를 부여해주는 작업 사람은 디자인이 된 웹페이지를 보면서 어디가 헤더이고 어디가 검색하는 곳이고 어디가 본문인지를 알 수 있지만,기기는 그런 구성을 이해할 수 없기 때문에 명시적으로 해당 태그가 무엇을 의미하는 태그인지 명시해 주는 작업. html5버전부터 시멘틱이 도입되었으며 이는 검색엔진 등 기기가 정보를 판단할 때 도움이 된다.