데브힐러의 프로그래밍

로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소이다. 간단한 키와 값을 저장할 수 있다. 키-밸류 스토리지 형태이다. 로컬스토리지의 데이터는 브라우저에 남아있다.(지속적으로 필요한 데이터 예-자동로그인 등 저장) 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다.(잠깐 동한 필요한정보 예-일회성 로그인 정보 저장) 참고자료 (HTML&DOM) 로컬스토리지, 세션스토리지 - 그리고 쿠키 안녕하세요. 이번 시간에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)에 대해 알아보겠습니다. 이름만 봐도 각각의 기능이 뭔지 대충 알겠죠? 영어에 약하신 분들을 위해 간단히 설 www.zerocho.com 참고자료2 쿠키와 세션 개념 개요 쿠키와 세션은..

var는 function-scope이고 let, const는 block-scope이다. var 는 재선언, 재할당이 가능 let은 재선언이 가능 const는 둘다 불가능 let은 값을 할당하기 전에 변수가 선언되어야 한다. 값을 먼저 할당하면 refference error가 된다. temperal dead zone 때문. var는 값을 할당한 후 변수를 선언해도 코드가 동작한다. 변수가 hoisting (함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다) 되기 때문이다. 참고자료

1. Syntax let add = (x, y) => x + y; 위와같이 오른쪽의 표현식이 하나라면 중괄호를 필요로 하지 않는다. let squareNum = x => x \* x; 위와 같이 argument가 한개라면 소괄호()를 생략해도 된다. 2. Arguments Binding (argument는 함수 안에서 접근 가능한 Object로써 함수에 전달되는 argument의 값을 포함한다.) arrow함수는 arguments 바인딩을 가지지 않는다. 그러나 가장 가까운 non-arrow형태의 부모함수에의 arguments 오브젝트에는 접근 가능하다. 3. 'this' keyword 사용 가능 유무 일반함수와 다르게 arrow함수는 자기자신의 this가 없다. arrow함수 내부의 th..

배열 정렬하기 (오름차순, 내림차순, 문자열, 객체) 1. sort() 함수 2. sort() 함수로 숫자 오름차순 정렬하기 3. sort() 함수로 숫자 내림차순 정렬하기 4. sort() 함수로 문자열 정렬하기 5. sort() 함수로 문자열(대소문자 구분없이) 정렬하기 6. sort() 함수로 객체 정렬하기 1. sort() 함수 Javascript에서 배열을 정렬하기 위해서는 sort() 함수를 사용합니다. arr.sort([compareFunction]) 파라미터 compareFunction 정렬 순서를 정의하는 함수. 이 값이 생략되면, 배열의 element들은 문자열로 취급되어, 유니코드 값 순서대로 정렬됩니다. 이 함수는 두 개의 배열 element를 파라미터로 입력 받습니다. 이 함수가 ..

1. DOCTYPE 를 선언하지 않으면 어떤일이 발생하나요? 2. 브라우저 렌더링 요소 중 Reflow, Repaint 의 정의와 관련되는 대표적인 CSS 속성은 무엇인가요. 3. 태그의 defer, async 속성의 차이는? 4. 쿠키, 로컬스토리지, 세션스토리지의 차이점은? 5. 점진적 향상법 (Progressive enhancement)과 우아한 성능 저하법 (graceful degradation)의 차이점? 6. FOUC 는 왜 생기는 건가요? 어떻게 피할 수 있는지 ? 7. CSS에서 floating clearing 하지않으면 어떤일이 발생하고 왜 이런일이 발생하는지 ? 8. CSS의 box-model 에서 블록요소의 영역을 차지하는 CSS속성은? 9. 자바스크립트에서 =, ==, === 의 차..

설치 $yarn add redux react-redux index.js 세팅하기 1) import Provider 하기 2) 로 감싸기 3) createStore() 안에 state저장 4) 에 props 전송 import {Provider} from 'react-redux'; import { createStore } from "redux"; let store = createStore(()=>{ return [{ id : 0, name : '멋진신발', quan : 2 }] }) ReactDOM.render( , document.getElementById("root") ); Cart.js 컴포넌트에서 store에 있는 state쓰려면 1) function을 만든다. 2) ex..

1 App function 밖에 입력(범위 생성) let 재고context = React.createContext(); 2. 같은 값을 공유할 HTML을 범위로 싸기 {shoes.map(function (a, i) { return ; })} 로 싸여진 콤포넌트는 props전송없이 재고라는 state가 사용가능하다. 3. useContext import import React, { useState, useContext } from "react"; 4. Card콤포넌트 안에 재고 변수안에 값을 입력하고 재고 변수 사용하기 let 재고 = useContext(재고context);

Ajax는 서버에 새로고침없이 요청을 할 수 있게 도와준다. 요청의 종류 1. GET요청: 주소창에 URL입력. 페이지/자료읽기 2. POST요청 : 서버로 중요 정보 전달 Ajax 쓰는 법 1. jQuery 설치 후 $.ajax() 2. axios 설치 후 axios.get() 3. 바닐라 자바스크립트로 fetch() 리액트에서는 axios를 사용한다. 설치 #yarn add axios import axios from 'axios'; { axios.get('api주소') .then((result)=>{ console.log(result.data) }) .catch(()=>{ console.log('실패') }) }}>더보기 요청한 자료는 따옴표가 있는 JSON..

let [alert, alert변경] = useState(true); let [inputData, inputData변경] = useState(''); useEffect(() => { let 타이머 = setTimeout(() => { alert변경(false) }, 2000); }, [alert]);​ class Detail2 extends React.Component { componentDidMout(){ } componentWillUnmount(){ } } useEffect 사용법 /*Detail function 안에*/ useEffect(()=>{ }); 컴포넌트가 mount되었을 때, 컴포넌트가 update 될 때 특정 코드를 실행할 수 있다. 1. Detail 페이지에 진입후 alert 창이 2..

아래의 코드는 태그 중복 에러가 난다. Home a태그 중복 에러 해결법