본문 바로가기

패스트캠퍼스

 (31)
Storage [패스트캠퍼스 챌린지 11일차] Storage 브라우저에 데이터를 저장할 수 있는 서버 f12 (개발자 도구) → Application → Storage (Local&Session) 중점 Local storage & Session storage 어떻게 활용? Window.localStorage localStorage를 사용하면 Storage 객체에 접근할 수 있다. 저장한 데이터는 브라우저 세션 간에 공유된다. localStorage에 저장되는 데이터는 해당하는 도메인 주소에 종속돼서 저장이 되는 거임. → 쉽게 생각하면 사이트에 종속이 되는 개념 localStorage와 sessionStorage는 기본적으로 브라우저에 데이터를 저장할 수 있는 스토리지라는 점에서 비슷하지만 아래와 같은 차이점이 존재하며 나름대로의 장단점을 가짐. l..
JSON [패스트캠퍼스 챌린지 10일차] 자바스크립트의 객체 표기법 위키백과 설명 JSON(JAVAScript Object Notation)은, (쉽게 말하자면 자바스크립트의 데이터를 표현하는 하나의 포맷) 속성-값(키-밸류) 쌍으로 이루어진 (객체 데이터와 유사) 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신을 위해 넓게는 XML을 대체하는 주요 데이터 포맷이다. 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다. 특히, 컴퓨터 프로그램의 변수값을 표현하는 데 적합하다 (웹사이트는 자바스크립트가 동작할 수 있는 환경이기 때문에 JSON을 이용해 많은 것들을 할 수 있음) JSON의 공식 인터넷 미디어 타입은 application/json JSON..
가져오기, 내보내기 [패스트캠퍼스 챌린지 09일차] 기본 통로 | 이름 지정 해도 그만 안 해도 그만 Default export 기본 통로 즉, default 통로로 데이터가 나가면 이름을 따로 지정할 필요가 없음 (지정해도 상관 없음) 그리고 import로 가지고 와서 활용할 때도 언제든지 이름을 다른 걸로 지정해도 전혀 문제 없다export부터 - 기본 통로로 빠져나가는 데이터는 따로 이름을 활용하는 게 아니기 때문에 main.js에서 import로 불러올 때도 이름을 꼭 사용할 필요 없음 대신 main.js에서 import 뒤에 내가 원하는 이름을 붙여 활용할 수 있음// 파일명 getType.js export default function getType(data) { //함수명 getType 지워도 노 상관 return Object.prototyp..
데이터의 불변성/ 얕은 복사,깊은 복사 [패스트캠퍼스 챌린지 08일차] 데이터의 불변성 Immutability 원시 데이터 : String, Number, Boolean, undefined, null 참조형 데이터 : Object, Array, Function (콜백 함수)함수의 인수로 사용되는 함수. 함수도 데이터처럼 활용할 수 있기 때문에 참조형 데이터에 넣음 원시데이터 원시 데이터들은 새로운 원시 데이터를 사용했을 때, 만약에 그 원시데이터가 기존의 메모리 주소에 들어있다면 그 원시데이터를 새로운 메모리에 새로이 만드는 게 아니라 기존에 존재하는 메모리 주소만 바라보도록 만들어 줌 즉, 한번 메모리에 만들어지면 새롭게 만들어지는 것이 아니고 항상 불변한다는 개념 쉽게 말해서, 원시형 데이터는 결국 생긴 것이 다르면 다른 데이터이고 같으면 같은 데이터임 참조형 데이터 불..
JS 데이터. 구조 분해 할당 [패스트캠퍼스 챌린지 07일차] Destructuring assignment 비구조화 할당이라고도 함 객체 데이터와 구조 분해 할당 구조 분해 할당의 좋은 점? 속성이 많을 경우 속성을 모두 다 꺼내 올 필요 없이 필요한 것들만 꺼내서 사용할 수 있음 const user = { name: 'Heropy', age: 85, email: 'thesecon@gmail.com' } const {name, age, address } = user // 변수 자리에 왜 객체 데이터가 들어와 있죠? // user 라는 객체 데이터의 구조를 분해해서 원하는 속성들만 꺼내서 사용 //위의 방식은 user.address 요런 것과 동일 // user['age'] 이런 식의 인덱싱 방법도 있쥬 console.log..
JS 데이터. 배열, 객체 [패스트캠퍼스 챌린지 06일차] 배열 ~번째 : index 인덱스 숫자를 넣어 조회하는 걸 indexing이라고 함 배열 데이터 내 각각의 데이터들을 element(요소)라고 함. 공식 명칭은 element이지만, html과의 구분을 위해 배열의 item이라고도 함 const numbers = [1, 2, 3, 4] const fruits = ['Mango', 'Kiwi', 'Cherry'] console.log(numbers) /* (4) [1, 2, 3, 4] 0: 1 1: 2 2: 3 3: 4 length: 4 [[Prototype]]: Array(0) */ console.log(numbers[1]) //2 console.log(fruits) /* (3) ['Mango', ..
JS 데이터. 문자, 숫자 [패스트캠퍼스 챌린지 05일차] 문자 String 전역 객체는 문자열(문자의 나열)의 생성자입니다. indexOf 'Hello World'.indexOf() /**new String이라는 생성자 함수 대신 리터럴 방식으로 데이터를 만들 수 있음*/ // 문자 데이터 뒤에 직접적으로 함수를 작성 가능 // String.prototype.indexOf() // world라는 인수를 줘보자 'Hello world'.indexOf('world') //결과 반환됨 //반환된 내용을 result라는 변수에 저장 const result = 'Hello world'.indexOf('world') // 출력해보까연 console.log(result) // 6 //제로 베이스드 문자..
JS 클래스 [패스트캠퍼스 챌린지 04일차] 생성자 함수 const myName = { firstName:'Kaki', lastName:'Tree', getFullName: function () { return `${this.firstName} ${this.lastName}` } } console.log(myName) // {firstName: 'Kaki', lastName: 'Tree', getFullName: ƒ} console.log(myName.getFullName()) // Kaki Tree JS의 클래스 프로그래밍 언어에서 말하는 클래스와는 좀 차이가 있지만, 일단 그건 패스 프로토타입 prototype 메모리 효율적으로 관리 new 키워드... 생성자 함수 생성자 함수는 일반 함..
함수 [패스트캠퍼스 챌린지 03일차] 기명 함수 : function 함수이름 () {} 이름이 있는 함수 ```jsx function a() { console.log(1234) } //함수 호출 a() // 1234 ```익명 함수 : function () {} 이름이 없는 함수 ```jsx let b = function () { console.log(1234) } //함수 호출 b() // 1234 ``` 함수 호출 : 함수이름() or 변수이름() 선언된 함수 이름으로 호출할 수 있다 방식은 → 함수이름() 괄호 안에는 인수를 삽입하여 호출 가능 함수를 변수에 왜 담아? - 빌드업 고고 ```jsx function sum(x, y) { console.log(x + y) } /*함수 호출*/ sum(1, 3) // 4 /*재활용 가능*/ ..
조건문, 반복문 [패스트캠퍼스 챌린지 02일차] 조건문 getRandom 루트 경로에 getRandom.js 파일 생성 export default function random() { return Math.floor(Math.random()*10) } main.js 상단에 import 코드 작성 import random from './getRandom' 새로고침 할 때마다 새로운 값이 나옴 console.log(random()) If statement 맞는 조건을 찾아 아래로 착착 내려감 if, else const a = random() if (a === 0) { console.log('a is zero') } else { console.log('rest...') } if, else if, else const ..

티스토리툴바