3-8
🏹Array에 자주 쓰는 sort, filter, map
얘네 왜쓰냐? sort는 정렬, filter는 필터링, map은 전부 변형
문자는 그냥 .sort()해주면 되는데 숫자는 따로 콜백함수 작성해줘야한다.
product.sort((a, b) => {
return a - b;
});위와 같이 말이다. 원리는 리턴값이 양수면 a를, 음수면 b를 오른쪽으로 정렬해준다.
$('#sortPrice').on('click', () => {
products.sort((a, b) => {
return a.price - b.price;
});
$('.row').html('');
appendCard(products);
});이건 진행중인 실습코드, 가격 순으로 정렬 해 html을 생성한다.
filter함수는
var arr = [7,3,5,2,40];
var newArr = arr.filter(function(a){
return a < 4
}); 위 처럼 원하는 것만 필터링하는 것이다, 위와같은 경우는 3과2만 남게 될 것이다.
var arr = [7,3,5,2,40];
var newArr = arr.map(function(a){
return a * 3;
});map함수는 위와 같이 배열 전체에 일정한 변형을 수행할 수 있다.
여기서 중요한건 sort는 원본을 변형시킨다는 것이다
filter와 map과의 차이점인데 따라서 원본이 훼손될 수 있으니 주의해서 sort를 사용해야한다.
3-9
🏹브라우저 저장공간 중 하나 : Local Storage
Local Storage / Session Storage (key : value 형태로 문자, 숫자 데이터 저장가능)
Indexed DB (크고 많은 구조화된 데이터를 DB처럼 저장가능, 문법더러움)
Cookies (유저 로그인정보 저장공간)
Cache Storage (html css js img 파일 저장해두는 공간)
이 정도 있다.
Local Storage / Session Storage의 차이는 Local은 영구히, Session은 브라우저를 종료하면 데이터가 날아간다. 문자만 저장 가능하며 5MB까지 저장된다.
$('.buy').on('click', function () {
let title = $(this).siblings("h5").html();
if (localStorage.getItem('cart') == null) {
localStorage.setItem('cart', JSON.stringify([title]));
} else {
let getCart = JSON.parse(localStorage.cart);
getCart.push(title);
getCart = JSON.stringify(getCart);
localStorage.setItem('cart', getCart);
}
});실습중인 코드로 예를 들면
localStorage.setItem()을 통해 로컬 스토리지에 저장이 가능하고
localStorage.getItem()을 통해 로컬 스토리지의 항목을 갖고올 수 있고localStorage.removeItem()을 통해 로컬 스토리지의 항목을 삭제할 수 있다.
그런데 로컬 스토리지는 문자만 가능하다고 했다. 따라서 배열이나 객체가 원래는 저장 불가능하지만 JSON형식으로 변환 해주어 저장이 가능하다.
3-10
🏹모던 웹개발 시 알아야 할 것들(아무말 대잔치)
- html css js
- 라이브러리
- npm
- nodejs
- bundling tool
- build
- SPA
- state management
- server side rendering
- meta-framework
- typescript
- serverless
웹 사이트에 ..
글자 그림 넣고 싶으면 html
디자인 넣고 싶으면 css
기능 넣고 싶으면 js
이 세개면 못만드는거 없긴한데...
코딩 편하게 하려고 라이브러리를 쓰고(남이 작성한 코드)
npm을 사용해서 라이브러리 관리가 쉬워진다(package manager)
node js는 js 실행 엔진
npm으로 설치한 라이브러리들을 가져다 쓰고 하면 파일 구조가 복잡해질수도 있는데,
bundle/build tool을 사용하면 이제 이런 파일들을 합쳐준다.
거기에 더해서 안쓰는 함수나 변수는 제거해주고
.ts .vue .jsx이런걸로 개발한거도 .js로 변환해주고
최신 문법을 호환성 좋게 바꿔주기도 한다.
요즘 많이쓰는 자바스크립트 라이브러리들을(vue, react) 쓰면 자바스크립트로 html조작이 쉬워진다.
근데 사실 SPA을 만들 수 있어서 쓴다.
싱글페이지 어플리케이션이라고 모바일 화면처럼 새로고침없이 부드럽게 이용가능해서 좋다
참고로 js로 html을 건드리는 짓거리는 client-side rendering이다.
근데 이런 라이브러리들을 사용하면 수많은 변수관리가 넘 어렵다.
그래서 변수들을 관리하는 행위가 state management라고 하고
이걸 쉽게 도와주는 라이브러리들을 사용하여 해결한다(redux 같은거)
근데 또 큰 단점이 존재하는데
구글검색결과 노출이 어렵고 js파일이 너무 커져서 첫페이지 로딩시간이 끔찍하다는거다.
그게 싫으면 server-side rendering 하면된다.
요즘은 메타 프레임워크가 나와서 이제 react문법같은걸로(자바스크립트)만 풀스택 개발이 가능하다. (next.js nuxt.js)
js는 원래 타입 강제하는 기능이 없어가지고 타입 버그가 발생하는데 그걸 방지해주는게 typescript. 문법은 js랑 똑같은데 타입을 지정한다. 그리고 ts는 웹에서 해석이 안돼서 이따가 번들링 툴 같은거 써서 js로 변환해주어야 한다
완전한 웹서비스를 하려면 html css js만 있어서 되는게아니라 이제 서버 db 까지있어야 웹서비스가 되는건데 내가 서버를 만들줄 모르면 서버역할을 대신 해주는 서버리스 서비스들을 사용하면 된다. (firebase) 같은거, 근데 얘넨 비쌈
End
🏹 강좌를 마치며
- 강좌의 코드를 따라치는게 아닌 내 스스로가 생각하고 직접 코드를 짜며, 내 수준이 얼마나 부족하고 더 공부가 필요한지 절실하게 깨닫게 되었다.
- 그래서 좋았다, 어떠한 답안을 보지않고, 혼자서 생각해서 코드를 짜는 연습을 할 수 있어서 내 실력의 부족과 향상을 느낄 수 있었다.
- js강의였지만 코딩에 필요한 마인드같은걸 많이 배운거같다. js는 UI를 미리 만들어놓고 필요할때 보여주고 숨기고 한다던가, 한글로 미리 정리를 해놓고 코드를 짠다던가 그런것들이 큰 도움이 되었다.
- js의 기본을 훑을 수 있어 좋았다. 깊었다곤 생각안하지만 필요한 부분을 다 거칠 수 있었다.
