반응형
- D10_dom_SPA_암기
- spa
- single
- page
- application
- 페이지가 하나밖에 없다.
- html이 하나밖에 없다.
- 페이지 이동을 어떻게 하냐?
- html
- <div id="root">
- 여기를 계속 지웠다가 그렸다가 하는 것 <서버 부담이 크다.>
- 고로 여기를 리엑트돔 알고리즘을 커버한다.
- </div>
- <div id="root">
- 대표적으로 쓰고 있는 라이브러리가. 리엑트이다.
- 왜 하는지가 중요하다.
- 굳이 왜 하는가.
- 스마트폰이 나오면서 기존 게시판이 불편해짐
- 기존의 게시판은 우리가 어떤식으로 처리를 했나. 페이징으로 했다.
- 게시글 => 1000개 <기존>
- 10개 보여주기
- 밑에 버튼
- 스마트폰
- 드래그를 하면 게시글이 위로 올라가게
- 무한스크롤
- 그래서 만들어 낸것이. 리엑트 dom 알고리즘
- 한번 그린 것은 기억을 해 놓았다가. 다시 안 그리는것
- 무한 스크롤 때문에 나온 기술
- 01_json버전
- _00_basic
- _01_json과함수.html
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>let MemberDAO = { //제이슨을 만듬. 클래스와 다름 없음memberList : [], //배열 만들고printMemberList(){ //함수 만들기//내용물이 어떻게 됬나.//MemberDAO = { memberList : [] , insertMemberList(member){},}//제이슨 (객체) 안에 함수도 넣을 수 있다.console.log("------[전체멤버]------");for(let i = 0; i < this.memberList.length; i++){console.log(this.memberList[i]);}},insertMemberList(member){this.memberList.push(member);},
deleteMemberList(number){for(let i = 0; i < this.memberList.length; i++){if(this.memberList[i].number == number){this.memberList.splice(i , 1);break;}}},updateMemberList(number, changedName){for(let i = 0; i < this.memberList.length; i++){if(this.memberList[i].number == number){this.memberList[i].name = changedName;break;}}},selectMemberList(number){console.log("------[선택멤버]------");for(let i = 0; i < this.memberList.length; i++){if(this.memberList[i].number == number){console.log(this.memberList[i]);break;}}}};
let member1 = {number : 1001, name : "김철수",};let member2 = {number : 1002, name : "이만수",};let member3 = {number : 1003, name : "조영수",};
MemberDAO.insertMemberList(member1);MemberDAO.insertMemberList(member2);MemberDAO.insertMemberList(member3);//위의 3개가 memberList 배열에 들어간것
MemberDAO.printMemberList();
MemberDAO.deleteMemberList(1002);
MemberDAO.printMemberList();
MemberDAO.updateMemberList(1001, "홍길동");
MemberDAO.printMemberList();
MemberDAO.selectMemberList(1003);</script>
</body></html>
- _02_json과Controller.html
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body>
<script>let MemberDAO = {memberList : [],printMemberList(){console.log("------[전체멤버]------");for(let i = 0; i < this.memberList.length; i++){console.log(this.memberList[i]);}},insertMemberList(member){this.memberList.push(member);},
deleteMemberList(number){for(let i = 0; i < this.memberList.length; i++){if(this.memberList[i].number == number){this.memberList.splice(i , 1);break;}}},updateMemberList(number, changedName){for(let i = 0; i < this.memberList.length; i++){if(this.memberList[i].number == number){this.memberList[i].name = changedName;break;}}},selectMemberList(number){console.log("------[선택멤버]------");for(let i = 0; i < this.memberList.length; i++){if(this.memberList[i].number == number){console.log(this.memberList[i]);break;}}}};//식을 제이슨 안에다가 집어 넣는것let ControllerMain = {start(){let member1 = {number : 1001, name : "김철수",};let member2 = {number : 1002, name : "이만수",};let member3 = {number : 1003, name : "조영수",};
MemberDAO.insertMemberList(member1);MemberDAO.insertMemberList(member2);MemberDAO.insertMemberList(member3);
MemberDAO.printMemberList();
MemberDAO.deleteMemberList(1002);
MemberDAO.printMemberList();
MemberDAO.updateMemberList(1001, "홍길동");
MemberDAO.printMemberList();
MemberDAO.selectMemberList(1003);}};ControllerMain.start();//밖에서는 한줄만 쓴느것</script></body></html>
- _01_모듈화
반응형
'코딩 > 1-JavaScript' 카테고리의 다른 글
| 03_클래스버전_전체스태틱 - _01_member (2) | 2025.06.09 |
|---|---|
| D10_dom_SPA_암기 => 01_json버전 => _01_모듈화, _02_모둘화와html (0) | 2025.06.09 |
| 05_달력1단계 ~ 05_달력2단계 (1) | 2025.06.05 |
| 04_숫자슬라이드게임1단계 ~ 04_숫자슬라이드게임3단계 (2) | 2025.06.05 |
| 03_순발력게임1단계 ~ 03_순발력게임3단계 (0) | 2025.06.05 |