본문 바로가기

programming study/JavaScript

 (186)
조건부 렌더링 JavaScript에서의 조건 처리와 같이 동작 if나 삼항 연산자를 활용하여 상태에 맞는 엘리먼트를 조건부 렌더링 조건이 복잡하다면, 컴포넌트를 분리할 때 상황에 따라, 가독성이 좋은 방법을 사용하기 특정 상황에서 컴포넌트 렌더링을 막으려면, 조건부로 null을 return하면 됨 예시(if) 로그인 상태에 따라 Header 컴포넌트의 문구를 다르게 출력 function Header(props) { // 부모로부터 유저가 로그인하였는지에 대한 값을 받음(boolean) const {isLoggedIn} = props; // 로그인을 한 상태면, 인사를 if (isLoggedIn) { return 안녕하세요! 환영합니다.; } else { // 로그아웃을 한 상태면, 로그인을 할 것을 보여줌 return..
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..
45장. 프로미스(1) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 45.0 프로미스란? 전통적인 비동기 처리 방식인 콜백 함수는 콜백 헬을 야기 나쁜 가독성 에러 핸들링의 문제 프로미스 ES6 콜백 패턴의 단점 보완 비동기 처리 시점을 명확하게 표현 비동기 함수 코드가 완료되지 않아도 기다리지 않고 즉시 종료 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료됨 처리 결과를 외부에 반환 불가 상위 스코프의 변수에 할당 불가 후속 처리는 비동기 함수 내부에서 수행해야 함(콜백 함수) 45.1 비동기 처리를 위한 콜백 패턴의 단점 45.1.1 콜백 헬 비동기 함수는 처리 결과를 외부에 반환 불가 태스크 큐에 저장되어 대기 -> 콜스택이..
44장. REST API 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 44.0 REST API란 HTTP의 장점을 최대한 활용할 수 있는 아키텍처 REST HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 REST API REST를 기반으로 서비스 API를 구현한 것ㅇ RESTful REST의 기본 원칙을 성실히 지킨 서비스 디자인 44.1 REST API의 구성 자원, 행위, 표현의 3가지 요소로 구성 자원: URI(엔드포인트) 행위: HTTP 요청 메서드 표현: 자원에 대한 행위의 구체적 내용 44.2 REST API 설계 원칙 URI는 리소스를 표현 HTTP 메소드는 행위에 대한 정의 44.3 HTTP 메소드 GET : 자원을..

티스토리툴바