Javascript
-
localStorage & sessionStorageJavascript 2024. 4. 19. 14:56
우선, 로컬스토리지와 세션스토리지는 익히 들어보았지만, 웹 스토리지란 단어를 처음 들어봤다. 웹 스토리지란 그래서 뭘까?? 웹 스토리지 API는 기존 쿠키(cookie)의 문제점을 극복하기 위해 웹 브라우저가 직접 데이터를 저장할 수 있게 해준다고 한다. HTML5 이전에는 응용 프로그램이 데이터를 서버에게 요청할 때마다 매번 쿠키에 그 정보를 저장했지만, 웹 스토리지는 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장할 수 있도록 해주고, 최소 5MB 이상의 많은 공간을 가지고 있으며, 이 정보는 절대 서버로 전송되지 않는다고 한다. 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com 웹 스토리지라는 개념 안에 로컬..
-
[JS]변수, 표현식과 문, 데이터타입, 타입 변환 - 타입 변환이 필요할 때Javascript 2024. 4. 14. 13:50
변수 메모리 공간에 값을 식별할 수 있는 고유한 이름을 '변수 이름' = 식별자 변수에 저장된 값을 변수 값 변수에 값을 저장하는 것을 할당 변수에 저장된 값을 읽어 들이는 것을 참조 console.log(score) // undefined var score; // 변수 선언문 첫 줄에서 참조에러가 발생해야 하는데 undefined가 발생하는 이유는 호이스팅 때문! 표현식과 문 **문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위 토큰이란 문법적인 의미를 가지며 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소 문에는 표현식인 문과 표현식이 아닌 문이 있다. 표현식인 문은 값으로 평가될 수 있는 문이고, 표현식이 아닌 문은 그렇지 않은 문이다. 예를 들어, 변수 선언문은 표현식이 아니다. 할당문은..
-
[JS] this에 대해 알아보자!Javascript 2023. 11. 8. 22:12
평소에 저는 혼자 공부할 때 우테코 문제를 풀어보면서 공부를 진행했었는데요, class를 자주 사용하는 형식이다 보니 아무래도 this를 자주 쓰게 되더라구용. 문득 이런 생각이 들었습니다. ‘내가 과연 정확히 이해하고 this를 쓰고 있는 것이 맞나?’ 이번 기회에 ‘this’에 대해서 같이 알아보면 좋지 않을까라는 생각에 공부를 좀 해봤습니다! 코어자바스크립트를 참고하며 정리해봤어요!! 안그래도 javascript언어 자체와 this에 관심이 많았고, ‘자스를 잘하는게 아무래도 간지가 좀 나지 않습니까?’ 제가 잘 설명할 수 있을지는 모르겠지만 한 번 출발해보져! 먼저, this란 무엇일까요? this란 말그대로 ‘이것’이라는 뜻입니다. 그니까 ‘이것’이 뭔데…? “누가 나를 불렀느냐”를 뜻한다고 합..
-
[js] mvc 패턴을 연습해보자 -4 최근 검색어(3) mvc패턴 연습 순수js 마지막Javascript 2023. 7. 21. 12:14
mvc패턴 순수 자바스크립트 부분 마지막 요구사항 ● 검색시마다 최근 검색어 목록에 추가된다 모델 역할을 하는 Store.js 파일에 removeHistory(keyword) { this.storage.historyData = this.storage.historyData.filter( history => history.keyword !== keyword) } addHistory(keyword) { keyword = keyword.trim(); if(!keyword) { return; } const hasHistory = this.storage.historyData.some(history => history.keyword === keyword) if(hasHistory) { this.removeHistor..
-
[js] mvc 패턴을 연습해보자 -4 최근 검색어(2)Javascript 2023. 7. 21. 11:55
요구사항 ● 목록에서 x 버튼을 클릭하면 선택된 검색어가 목록에서 삭제된다 HistoryListView.js 파일에 bindEvent를 생성해준다 bindEvent() { delegate(this.element, "click", "button.btn-remove", event => this.handleClickRemoveButton(event)) super.bindEvent(); } delegate는 강의에서 제공해주는 헬퍼함수. 그 후 부모의 bindEvent로 오버라이딩 해준다. handleClickRemoveButton(event) { console.log(tag, "handleClickRemoveButton",event.target); const value = event.target.parentE..
-
[js] mvc 패턴을 연습해보자 -4 최근 검색어(1)Javascript 2023. 7. 21. 10:42
요구사항 ● 최근 검색어 이름, 검색일자, 삭제 버튼이 목록 형태로 탭 아래 위치한다 (추천 검색어와 비슷) ● 목록에서 검색어를 클릭하면 선택된 검색어로 검색 결과 화면으로 이동한다 (추천 검색어와 같음) HistoryListView.js 파일을 만들고 초기 세팅을 해준다. 그런데 가만보니, KeywordListView와 굉장히 유사한 방식이기 때문에, export default class HistoryListView extends KeywordListView { constructor() { super(qs("#history-list-view"), new Template()); } } extends View가 아닌 extends KeywordListView로 해준다. 그러나 KeywordListView..
-
[js] mvc 패턴을 연습해보자 -4 추천검색어Javascript 2023. 7. 20. 18:37
추천 검색어 구현 ● 번호, 추천 검색어 이름이 목록 형태로 탭 아래 위치한다 ● 목록에서 검색어를 클릭하면 선택된 검색어의 검색 결과 화면으로 이동한다 KeywordListView.js 파일을 만들어주고 초기 셋팅을 해준다. export default class KeywordListView extends View { constructor() { super(qs("#keyword-list-view")); this.template = new Template(); } show(data = []) { this.element.innerHTML = data.length > 0 ? this.template.getList(data) : this.template.getEmptyMessage(); super.show()..
-
[js] mvc 패턴을 연습해보자 -3 탭(3)Javascript 2023. 7. 20. 15:02
오늘의 요구사항. ● 각 탭을 클릭하면 탭 아래 내용이 변경된다 Tabview.js 파일에 bindEvent를 추가해준다. export default class TabView extends View { constructor() { super(qs("#tab-view")); this.template = new Template(); this.bindEvents(); } bindEvent는 bindEvents() { delegate(this.element, "click", "li", event => this.handleClick(event)) } delegate는 강의에서 제공해주는 헬퍼 함수이다. 쉽게 설명하면, 이벤트를 위임받은 자식 요소들에 대해 특정 이벤트를 처리하는 메서드이다. tabView 아래 내..