localStorage Web Storage의 방식중 하나로 사용자의 로컬 저장소에 키-값을 저장할 수 있다. 브라우저를 닫았다 열어도 데이터가 사라지지 않는다. 유효기간 없이 데이터를 저장한다. 도메인과 브라우저별로 저장된다. 값은 반드시 문자열로 저장된다. JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장데이터를 지워야만 삭제할 수 있다. window.localStorage에 접근하게 되면 Storage 객체의 인스턴스를 생성하게 되고, 이를 사용해 데이터 항목을 브라우저 내에 추가 또는 제거하거나 읽어올 수 있다. 데이터 추가하기 : setItem() window.localStorage.setItem(key, value) 💡 배열이나 객체를 저장해야할때 localStrorage에는 문자..
분류 전체보기
ISO 형식(ISO 8601 형식)은 날짜 및 시간 관련 데이터의 전 세계적인 교환 및 통신을 다루는 국제 표준이다. 이 표준은 숫자 날짜 및 시간 표기에 대해 서로 다른규칙을 사용하는 국가간에 데이터가 전송될때 데이터를 잘못 해석하지 않게 한다. 1. 날짜/시간을 ISO 형태로 변경할때 : .toISOString() const date = new Date(); // 새로운 Date 객체 반환 console.log(date.toISOString()); // 2023-01-22T05:05:24.783Z 2. ISO 형태의 날짜를 현지 시간에 맞게 변경할때 : .toLocaleString() const newDate = new Date('2023-01-22T05:16:26.418Z'); console.log..
App 컴포넌트 내부에 Sidebar 컴포넌트를 추가한다. span이나 i 태그에 className을 추가해 아이콘을 추가한다. Feature 컴포넌트 내부에 Counter 컴포넌트를 추가한다. Counter 컴포넌트 내부에 total 텍스트와 배열의 length를 구해 템플릿 리터럴로 작성한다. Features 컴포넌트 내부에 Footer 컴포넌트를 추가한다. Footer 컴포넌트에 리턴되는 요소들을 감싼 최상위요소 div를 footer 태그로 변경한다. img 태그를 추가하고 src에 tweet 객체에서 이미지 주소를 가져오는 값을 할당한다. span 태그를 추가하고 tweet 객체에서 유저 이름을 찾아 텍스트에 넣고 className으로 클래스를 지정한다. span 태그를 추가하고 tweet 객체에..
1. React 프론트엔드 개발을 위한 자바스크립트 오픈 소스 라이브러리. 📂 React의 특징 선언형(Declarative) 코드를 분석하지 않고도 의도를 이해할 수 있음. => 명시적인 코드 작성 한 페이지를 구현할때 html / css / js를 나눠서 작성하는 것이 아닌, JSX를 활용한 선언형 프로그래밍을 지향함 컴포넌트 기반(Component-Based) 컴포넌트(Component) : 하나의 기능 구현을 위해 여러 종류의 코드를 묶어놓은 것 리액트는 기능 구현을 위해 컴포넌트를 기반으로 애플리케이션을 개발함 컴포넌트로 분리시, 각각의 컴포넌트가 독립적이고 재사용이 가능하다. => 각 기능 자체에 집중하여 개발 가능. 유지보수가 편해지고 컴포넌트간 의존성은 줄어듬. 범용성(Learn Once,..
보호되어 있는 글입니다.
1. fetch API 자바스크립트를 사용하면 필요할때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다. ✅ 네트워크 요청이 필요할때 주문 전송하기 사용자의 정보 읽기 서버에서 최신 변경분 가져오기 fetch API를 사용하면 페이지 새로고침 없이 네트워크 요청을 보내고 새 정보를 받아올 수 있다. 1) fetch의 역할 특정 URL로부터 정보를 받아올 수 있다. 이 과정은 비동기로 이루어지며 경우에 따라 시간이 걸릴 수도 있다. 이때는 blocking이 발생하면 안되므로 특정 DOM에 정보가 표시될때까지 로딩창을 대신 띄우기도 한다. 2) fetch 사용하기 let promise = fetch(url, [options]) url : 필수. 접근하고자 하는 url을 넣어줌 opti..
보호되어 있는 글입니다.
1. Node.js Node.js는 비동기 이벤트 기반 JavaScript 런타임(실행환경)이다. Node.js의 많은 API들은 비동기로 작성되어있다. => 동시 다발적인 업무 처리가 쉽기 때문에 💡 모듈 : 어떤 기능을 조립할 수 있는 형태로 만든 부분 1) Node.js 모듈 사용법 Node.js 내장 모듈 목록 위의 링크에서 사용하고싶은 메서드를 찾아 읽고 사용할 수 있다. (1) require const fs = require('fs'); // 파일 시스템 모듈 불러오기 cosnt dns = require('dns'); // DNS 모듈 불러오기 JavaScript 파일 코드 최상단에 require 구문을 이용해 모듈 파일을 불러와서 사용한다. (2) 서드 파티 모듈(3rd-party modul..
보호되어 있는 글입니다.
1. 비동기 1) 동기와 비동기 (1) 동기(synchronous) 특정 코드의 실행이 완료될때까지 기다린 후에 다음 코드를 수행한다. 즉 여러가지를 한꺼번에 실행할 수 없고 한번에 하나씩만 실행한다. (2) 비동기(asynchronous) 특정 코드의 실행이 완료될때까지 기다리지 않고 다음 코드들을 수행한다. 즉 여러가지 코드를 한꺼번에 실행할 수 있다. 동기적인 코드보다 효율적이다. 2) 타이머 관련 API 이 API들은 브라우저에서 제공하는 Web API이며 비동기로 작동하도록 구성되어 있다. (1) setTimeout() / clearTimeout() const timerId = setTimeout(()=>{ console.log('1초 뒤에 실행') }, 1000) clearTimeout(tim..
