front-end 국비과정 일차 18일차 학습일지:JS데이터의 불변성과 가변성,Json사용법,JS파일 import,export , lodash사용법,Storage에대한 개념,깊은복사와 얕은복사,
메모리란?
코드 내용이 저장되는 영역이다.
JS 메모리 할당 시점
JS는 값을 선언 할때 데이터를 자동으로 메모리를 할당한다.
함수를 호출하여 새로운 값이 발생 할 경우에도 메모리를 할당한다.
가비지 콜렉션(garbage collection)이란?
JS로 메모리에 등록된 내용이 쓸모없어지면 가비지 콜렉션이란 놈이 메모리를 돌면서 쓸모없어진 내용을 메모리에서 삭제한다
--- 데이터 불변성 ---
원시데이터 : 기본데이터를 의미한다
String,Number,Boolen,undefined,null
원시데이터에서 데이터 불변성
어떠한 변수에 값을 저장하면 해당값은 메모리에 특정 주소에 저장된다
새로운 변수에 기존의 있던 변수의 값과 동일하게 설정할때 새로운 변수에 값은 새로운 메모리에 주소를 만드는 것이 아니라
동일한 값을 가지는 메모리의 주소를 바라보게 된다
ex)
a = 1
// a의 값인 1은 컴퓨터 메모리에 특정 주소에 저장됨
b = 1
//b의 값인 1이고 a와 동일한값을 가져 변수b는 컴퓨터 메모리에 새로운 주소에 저장되는것이 아닌 a의 주소를 바라보게됨
console.log(a===b)
// a와b의 메모리 주소가 같기때문에 true를 출력하는 원리
참조형 데이터
Object,Array,Function
★ 참조형 데이터에서 데이터 가변성 (참조형 데이터는 원시데이터의 불변성과 같은 성질을 가지지 않는다)
참조형 데이터는 불변성을 가지지않는다
즉 어떠한 변수에 참조형데이터의 값을 저장하고 새로운 변수에 동일한 참조형데이터 값을 설정해도
메모리 주소가 다르다는 의미이다
하지만 할당연산자(=)를 사용하면 변수와 변수가 같은 메모리 주소를 바라보게 되어 같은 값을 가지게된다
주의사항: 두 변수중 어느 한 변수의 값을 바꾸면 다른 변수도 같은 메모리 주소를 바라보기 때문에 수정 하지않았음에도
값이 수정된다
ex)
let obj1 = {
k: 1}
//obj1 이라는 객체(참조형 데이터)를 만듬
let obj2 = {
k: 1}
//obj2 라는 객체(참조형 데이터)를 만듬
console.log(obj1 === obj2)
// obj1과 obj2는 같은 key:value값을 가지지만 false출력 왜? 참조형 데이터의 메모리 주소가 다르기 때문에
obj1 = obj2
// 할당연산자(=) 을 사용함 때문에 obj1과 obj2 = 같은 메모리 주소를 바라보게됨
//obj1과 obj2가 같은 메모리 주소를 바라보는 상황에서 obj1의 key k의 값을 5로 재할당
console.log(obj1, obj2, obj1 === obj2)
//obj1의 k에 5라는값을 재할당 했기때문에 당연히 5를 출력 하지만 obj2를 수정 한적이 없음에도 obj2의 k 값이 5라고 출력됨
//왜? obj1과 obj2가 같은 메모리 주소를 바라보기 때문에
--- JS 얕은복사와 깊은복사 ---
얕은복사란?
기존 변수에 값과 복사된 변수의 값이 같은 메모리를 바라보는 복사 방식을 말한다
즉 값도 동일하고 메모리 주소 또한 동일 메모리 값이 동일하면 특정 변수의 값을 변경했을때 메모리 주소가 동일한 변수도 값이 변경된다는 장점이자 단점이있다
깊은복사란?
기본 변수에 값과 복사된 변수의 값의 메모리 주소가 다른 복사방식을 말한다
즉 값은 동일하지만 메모리 주소가 다름 때문에 복사한 변수나 복사받은 변수의 내용을 수정해도 서로 영향을 주지않음
--- js파일 import와 export ---
js파일을 export하는 방법은 2가지가 있다
1-1 defalut방식
export뒤에 defalut를 명시하는 방법을 사용하면 익명함수든 기명함수든 export할 수 있고 import받는 파일에서도 원하는 이름으로 export한 파일을 사용 할 수있다.
defalut를 명시하는 방법을 사용하면 파일안에 하나의 데이터만 export 할 수 있다는 단점이있다
ex)
//export-file
export default function (data){
return console.log(typeof data)
}
//import-file
import Type from "./getType";
Type("hello world")
Type(123)
1-2 named 방식
named 방식은 export뒤에 해당 함수이름을 명시하는 방법을 사용한다 때문에 익명함수로 작성하면 error가 발생한다.
import받는 파일에서도 해당함수에 이름이나,해당변수의 이름을 명시해야하고 다른 이름으로 변경해서 사용하고자한다면 as 다음의 사용 할 이름을 명시한후 {}로 감싸 줘야 한다
named 방식은 하나의 파일안에 여러 데이터를 export할 수있다
ex)
named방식과 default방식을 혼합하여 export할 수 있다.
ex)
//export-file
export function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
export const myInfo = {
firstName:"Kim",
lastName:"JungHwan",
age:26
}
//import-file
import {getRandom,myInfo as info} from "./getRandom";
for(let i=0; i<=5; i++){
console.log(getRandom(1,10))
}
console.log(myInfo)
--- JS라이브러리 Lodash 사용법 ---
1-1터미널에서 npm init -y 를 이용해 package.json, packagelock.json, node_modules라는 npm생태계를 로컬에 불러온다
1-2터미널에서 nmp i(intall의약어) lodash라고 입력하여 lodash package를 로컬에 설치한다 이때 lodash는 브라우저에 영향을 미치는 의존성package이기 때문에 -D는 붙이지 않는다
1-3lodash를 사용할 때 import로 불러온 이름(필자는 _을사용) 뒤에 사용 할 lodash속성을 명시하여 사용한다.
1-4
uniqBy() = 배열안에 동일한 값을 제거한다
2개의 파라미터를 사용하는데 1번파라미터엔 ._uniq를 적용할 배열의 이름을, 2번파라미터에는 ._uniq를 사용할 배열안에 특정 대상을 명시한다. 2번파라미터는 불필요시 생략 가능
ex)
import _ from "lodash"
const userA =[
{ userId:'1',name:"JungHwan"},
{ userId:'2',name:"Hurk"},
{ userId:'1',name:"Man"},
{ userId:'3',name:"Black"}
]
console.log(_.uniqBy(userA,"userId"))
//{ userId:'1',name:"Man"}이 배열에서 제거됨
const arr1 = [1,2,3,1,2,3,5]
const lodashArr = _.uniqBy(arr1)
console.log(lodashArr)
// 배열에서 중복되는 1,2,3은 제거됨 출력값 = [1,2,3,5]
1-5
unionBy() = 배열 과 배열을 하나로 합쳐준다 중복되는 값이 있다면 제거한다
총 3개의 파라미터를 사용 할 수 있는데 1,2번파라미터에는 합칠배열을 명시하고 3번 파라미터에는 _unionBy를 사용할 특정 대상을 명시한다 3번파라미터는 생략 가능하다
배열안에 요소가 객체일경우 3번파라미터를 사용하지않았을때 중복되는 key는 제거되지않는다
ex)
import _ from "lodash"
const userA =[
{ userId:'1',name:"JungHwan"},
{ userId:'2',name:"Hurk"}
]
const userB = [
{ userId:'1',name:"Man"},
{ userId:'3',name:"Black"}
]
const unionUser = _.unionBy(userA,userB)
console.log(unionUser)
const arr1 = [1,2,3,5]
const arr2 = [1,2,3,4]
const unionArr = _.unionBy(arr1,arr2)
console.log(unionArr)
1-6
find() = 배열안에 요소의 일부 정보를 이용해 그 요소의 전체 정보를 출력하는 기능을 가진다
총 2개의 파라미터를 사용 하는데 1번 파라미터에는 find()를사용할 배열의 이름 2번 파라미터에는 배열에서 찾을 요소의 일부 정보를 명시한다
ex)
import _ from "lodash"
const users = [
{userId:1, name:"Amy"},
{userId:2, name:"Evan"},
{userId:3, name:"JungHwan"},
]
const foundUser = _.find(users,{userId:3})
console.log(foundUser) // userId가 3인 배열의 요소 전체정보 출력
1-7
findIndex() 배열안에 요소의 일부 정보를 이용해 그 요소의 index번호를 출력하는 기능을 가진다
총 2개의 파라미터를 사용 하는데 1번 파라미터에는 find()를사용할 배열의 이름 2번 파라미터에는 배열에서 찾을 요소의 일부 정보를 명시한다
ex)
import _ from "lodash"
const users = [
{userId:1, name:"Amy"},
{userId:2, name:"Evan"},
{userId:3, name:"JungHwan"},
]
const foundIndexUser = _.findIndex(users,{userId:3})
console.log(foundIndexUser) //userId가 3인 배열안의 요소의 index번호인 2를 출력
remove() = 배열안에 요소의 일부 정보를 이용해 기존 배열 에서 그 요소를 제거하고, 새로운 변수에서 사용시 제거된 요소를 반환한다
총 2개의 파라미터를 사용 하는데 1번 파라미터에는 remove()를 사용할 배열의 이름 2번 파라미터에는 배열에서 제거될 요소의 일부 정보를 명시한다
ex)
import _ from "lodash"
const users = [
{userId:1, name:"Amy"},
{userId:2, name:"Evan"},
{userId:3, name:"JungHwan"}
]
const removedUser = _.remove(users,{userId:1})
console.log(users)
//기존배열에서 userId가 3인 요소 제거
console.log(removedUser)
//새로운 변수를 이용해 제거된 요소를 반환
---json ----
json이란?
데이터를 저장하거나 전송할 때 많이 사용되는 가벼운 DATA 교환 형식
1json의 자료형은 javascript자료형과 동일하다 (undefined는 제외)
주의사항 : 문자열을 작성할때 "" 만 허용된다
2javascript로 객체 data를 작성할때 key는 주로 문자열로 작성하지 않지만 json은 key를 문자열로 작성해야한다
3json을 작성할때는 객체의 형태로 {} 안에 데이터 내용을 담아 작성한다
4json file은 import 할 수있다.
5 JS파일에서 JSON내장객체 중 stringify()를 사용하면 Javascript의 데이터를 json의 형식인 문자열로 반환한다
6 json의 내장함수중 parse()를 사용하면 stringify()로 만든 json형식의 문자열 데이터를 분석하여 javascript의 알맞는 데이터로 반환한다
ex) json을 작성하는 기본적인 방법
{
"fistName":"kim",
"lastName":"JungHwna",
"age":"26"
}
ex2)
const user ={
fistName: "kim",
lastName: "JungHwna",
age: 26
}
//user라는 객체생성
const str = JSON.stringify(user)
console.log(str)
console.log(typeof str)
// user라는객체를 JSON내장함수 stringify를 이용해 JSON표현 방식의 문자열로 변환
const obj = JSON.parse(str)
// stringify를 이용해 문자열로 변경된 str이라는 변수를 obj라는 변수에 parse()를 사용 후
//js에 방식으로 원상복귀
console.log(obj)
console.log(typeof obj)
--- storage ---
storage는 데이터 저정소로써 localStorage와 sessionStorage로 나뉜다
localStorage : 데이터를 저장하며 따로 지우지않는 이상 반영구 적으로 저장되는 특징이있다
sessionStorage : 데이터를 저장하며 페이지를 닫을때 저장된 데이터가 사라진다
localStorage의 내장함수를 사용할땐 내용을 문자열 데이터로 명시하는것이 효율적이다
localStorage의 상태를 확인하고자한다면 개발자도구의 application에서 확인 할 수 있다
localStorage.setItem() =localStorage에 데이터를 저장한다
()안에 파라미터를 2개 사용한다 1번파라미터에는 데이터의 key를,2번파라미터에는 데이터의 value를 명시한다
value가 객체이거나 배열 등등 문자가 아닌 데이터 타입일경우 JSON.stringify()를 이용해 데이터를 문자데이터화 시켜 준후 해당 속성을 사용해야
내용이 잘 표시된다
localStorage.getItem() =localStorage에 저장된 데이터 정보를 다른장소에서 조회 할 수 있는 기능이 있다.
()안에 파라미터를 1개 사용한다 해당 파라미터에는 조회할 데이터의 key를 명시한다
localStorage.setItem()으로 localStorage에 데이터를 저장했을때 JSON.stringify()를 이용해 문자화 시켰기때문에
다른 장소에서 출력할때는 JSON.parse()를 이용해 JS의 데이터로 적절하게 변경시켜줘야한다
localStorage.removeItem() = localStorage에 저장된 데이터를 삭제한다
()안에 파라미터를 1개 사용한다 해당 파라미터에는 삭제할 데이터의 key를 명시한다
ex)
const myInfo = {
name: "KimJungHwan",
age: 26,
address: "Incheon",
email: "blacksoy0516@gmail.com"
}
localStorage.setItem("info", JSON.stringify(myInfo))
//localStorage에서 내용을 제대로 출력하기위한 데이터 문자화, key:value의 형태로 데이터 저장
console.log(JSON.parse(localStorage.getItem("info")))
// localStorage에서 문자화된 데이터를 JS에 알맞는 데이터로 분석후,
//localStorage.getItem()의 ()안에 key값을 넣어 console창에서 localStorage에 데이터를 조회하는 코드
//localStorage.removeItem("info")
// 주석헤제시 localStorage에 info라는 키를 가지고있는 데이터를 삭제
lowdb라는 라이브러리를 사용하면 좀 더 쉽고 효율적으로 localStorage에 내용을 다룰 수 있다. 향후 참조 예정
query-string이란?
url 주소뒤에 추가적인 정보를 서버 측에 전달하는데 사용되는 특수문자를 말한다, 주로 API를 다룰때 사용한다.
url 뒤에 ?표를 작성하고 추가할 정보의 속성과=값을 명시한다
명시할 속성과 값이 여러개일 경우 &로 구분한다
ex)
https://www.naver.com/cafe?cafeName=Edia & cafeaddress = incheon