본문 바로가기

programming study

 (889)
State와 생명주기(2) State를 올바르게 사용하기 1. 직접 State를 수정하지 말기 클래스형 컴포넌트에서 // 임의의 메서드 setNewState() { // 직접 변경하면, 컴포넌트를 다시 렌더링하지 않음 this.state.text = '변경'; } ​ // 아래와 같이 setState를 사용할 것 setNewState() { this.setState({text: '변경'}); } ​ // constructor constructor(props) { super(props); // 직접 state를 지정할 수 있는 곳은 constructor가 유일 this.state.text = '초기값'; } ​ ​ 2. State 업데이트는 비동기적일 수 있음 여러 setState 호출을 단일 업데이트로 일괄 처리 가능 props와..
State와 생명주기(1) State 클래스형 컴포넌트에서 state 정의하기 class Header extends React.Component { constructor(props) { // props를 인스턴스에 전달 // 클래스 컴포넌트는 항상 props로 constructor를 호출해야 함 super(props); this.state = {text: '헤더 컴포넌트 입니다.'}; } render() { return {this.state.text}; }; } 생명주기 메서드 마운팅 : 컴포넌트가 DOM에 렌더링되는 시점 언마운팅 : 컴포넌트가 DOM에서 삭제되는 시점 컴포넌트 클래스에서 생명주기 메서드를 선언하여, 마운트와 언마운트 시점에서 특정 코드를 실행시킬 수 있음 예시 class Header extends React.C..
Component와 props Component > Element 엘리먼트는 컴포넌트의 구성요소 함수 컴포넌트 vs. 클래스 컴포넌트 함수 컴포넌트 데이터를 가진 props 객체 인자를 받아 React 엘리먼트를 반환 JavaScript 함수의 형태 function Header(props) { return {props.headerText} ; } 클래스 컴포넌트 ES6 Class를 사용하여 컴포넌트를 정의 class Header extends React.Component { render() { return {this.props.headerText} } } 컴포넌트 렌더링 사용자 정의 컴포넌트를 나타낼 수 있음 React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견 시, JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달 ..
48장. 모듈 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 48.1 모듈의 일반적 의미 모듈 : 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각 모듈의 자산(변수, 함수, 객체)은 기본적으로 비공개 상태 캡슐화되어 다른 모듈에서 접근 불가 애플리케이션과 분리 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개는 가능 export 모듈 사용자 : 공개된 모듈의 자산을 사용하는 모듈 다른 모듈이 공개한 자산을 선택해 자신의 스코프 내로 불러 재사용 가능 모듈의 의의 코드의 단위를 명확하게 분리 재사용성, 개발 효율성, 유지 보수성 증대 48.2 자바스크립트 모듈 자바스크립트는 script 태그로 분리를 하여도 하나의 자바스크립트 파일 내..
47장. 에러 처리 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 47.1 에러 처리의 필요성 에러를 방치하면 프로그램은 강제로 종료 됨 try ... catch 문을 사용해 에러에 대응 에러가 발생해도 프로그램이 강제 종료되지 않음 예외적인 상황 에러를 발생하지는 않지만 에러를 야기시키는 상황 단축 평가 또는 옵셔널 체이닝을 사용하여 에러의 원인 방지 47.2 try, catch, finally 문 먼저 try 코드 블록이 실행 try 블록에서 에러가 발생하면, 발생한 에러는 catch 문의 에러 변수에 전달되어 catch문 실행 finally 블록은 에러 발생과 상관 없이 반 try { asyncFunc(); } catch(error) { console...
46장. 제너레이터와 async/await 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 46.1 제너레이터란? 코드 블록의 실행을 일시 중지 했다가 필요한 시점에 재개할 수 있는 특수한 함수 일반 함수와의 차이 함수 호출자에게 함수 실행의 제어권을 양도 가능 일반 함수는 제어권이 함수에게 있음 제네레이터는 함수 호출자가 함수 실행을 일시 중지 또는 재개 가능 함수 호출자에게 제어권을 양도(yield) 함수 호출자와 함수의 상태를 주고받을 수 있음 일반 함수는 외부에서 값을 주입 받아 결과 값을 외부로 반환 제너레이터는 함수 호출자에게 상태를 전달할 수 있고 받을 수도 있음 제너레이터 함수를 호출하면 제너라이터 객체를 반환 이터러블이면서 동시에 이터레이터인 제너레이터 객체를 반환 ..
45장. 프로미스(2) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 45.2 프로미스의 생성 Promise 생성자 함수를 new 연산자와 함께 호출 비동기 처리 상태와 처리 결과를 관리하는 객체 ECMAScript 사양에 정의된 표준 빌트인 객체 비동기 처리를 수행할 콜백 함수를 인수로 전달 ECMAScript 사양에서는 executor 함수라고 칭함 resolve, reject 비동기 처리가 성공하면 resolve 함수를 호출 비동기 처리가 실패하면 reject 함수를 호출 프로미스의 상태 정보 pending: 비동기 처리가 아직 수행되지 않은 상태(프로미스 생성 직후) fulfilled: 비동기 처리가 수행된 상태(성공, resolve 함수 호출) reje..
Vue.js - 브라우저 저장소를 이용한 인증 값 관리 1. 브라우저 저장소 JavaScript 레벨에서 로그인 인증값을 저장하여도, 새로고침을 했을 때 인증값이 날아가 버림 로그인 인증값을 브라우저 저장소에 저장 새로고침을 하더라도 브라우저 저장소에 저장된 로그인 인증값에 접근 가능 로그인 인증값과 같은 경우, 브라우저의 쿠키 저장소를 사용 브라우저 저장소는 아래와 같은 것들이 있음 로컬스토리지 세션 쿠키 상황에 맞게 필요한 브라우저 저장소를 사용 2. 인증값 보존 쿠키 저장소를 활용하여, 로그인 인증값을 보존 2.1 Cookie 관련 모듈 정의 쿠키 저장소에 관련된 모듈을 한 파일에 정의 function saveAuthToCookie(value) { ... } ​ function saveUserToCookie(value) { ... } ... export..

티스토리툴바