e7e

2023.06.28 - [자바스크립트] - 시베리안 허숙희의 자바스크립트 비기닝 30 글에서 페이지 나누기를 해보았당. 모바일에서 많이 사용되지만 요즘은 데스크탑에도 그냥 거부감없이 사용되고 있는 무한스크롤을 구현해 보장! 사용자들이 항상 보여지는 모든 글을 읽는 건 아닐 거시당. 무겁게 리스트를 다 가져 왔는데 몇개 보다 다른 곳으로 갈 수도 있당. 아주 낭비당. 그래서 무한 스크롤은 일부만 보여주다가 사용자가 스크롤을 끝까지 내리기 직전에 다음 데이타를 가져오는 식으로 구현된당. 당연히 주로 AJAX와 함께 사용될 거시당. 아래 소스는 google 뉴스를 검색으로 가져오고, 일부만 보여준다메, 스크롤을 내리면 가져온 데이타의 나머지도 보여지는 방식으로, 무한스크롤이 주로 사용되는 배경과 쪼메 다르긴 ..

자바스크립트 2023. 6. 28. 17:36

이전 글2023.06.27 - [자바스크립트] - 시베리안 허숙희의 자바스크립트 비기닝 29에서 페이지 나누기를 위한 localStorage에 더미 데이터를 넣기 위해  울 게시판에 맞는더미 데이터를 만들어 주는 ranUtil.js를 맹글어 첨부해 주었고, 그것을 dummy.html을이용하여 108개의 있어보이는 더미 데이터을 넣었당. (준비 완료?) 자~~  이제 페이지 나누기 산수를 해보장. (아주 쉽당, 외우지 말고 필요한 걸 생각하는 습관!)급할 꺼 없당. 차분히 생각해 보면 아래 정도의 정보와 세팅이 필요함이 이해된당.1. 페이지당 글 수(갯수_2. 전체 글 수(갯수)3. 페이지 수(갯수) ( 계산해야함!, 전체 글 수를 페이지당 글 수로 나누면 되는데, 나머지가?)4. 페이지 별 시작 글..

자바스크립트 2023. 6. 28. 07:42

이전글2023.06.23 - [자바스크립트] - 시베리안 허숙희의 자바스크립트 비기닝 28에서 모달로 상세내용 보기까지 했으닝, CRUD(Create,Read,Update,Delete)로 보면 UD만 남았당.수정, 삭제 역시 상황과 맥락에 따라 그 어려운 정도가 달라질 것이지만. 여기선 넘 쉽당.문제는 수정, 삭제를 위해서는 글의 num  속성값을 넘겨 받아야 한다는 것이다. 알(콩알?)만한 사람은 이미 모두 눈치 챘을 것이다. num 속성을 일부러 같은 값이 발생하지 않도록계속 +1씩 증가하는 시퀀스 형태로 관계형DB의  Primary-Key 형태로 사용하려 한다는 거슬.....그런데 이 값이 사용자에게는 특별히 의미가 없고, 개발자에게는 필요하당.요따구 경우(사용자에게 보여 줄 필요는 없는데, 프로그..

자바스크립트 2023. 6. 27. 08:49

이전 글 2023.06.22 - [자바스크립트] - 시베리안 허숙희의 자바스크립트 비기닝 27 의 list.htm에는 글의 제목을 클릭하면 상세내용을 모달창으로 보여주기 위해 함수 fmodal이 일부러 껍데기만 들어있당!.(모든 게 알고보면 다 안배당~~) 실제 모달창은 CSS 몇개만 알면 아주 쉽고도 쉽게 만들 수 있는 데도 불구하고, 원리 이해 없이 bootstrap의 모달 창과 씨름 하는 모습이 아쉽기만 하당. 이번 기회에 자기만의 모달창을 잘 만들어 두고, 계속 기능 확장해서 사용할 수 있길 기대본당. 먼저 모달창이 뭔지?, 왜 이걸 많이 쓰게 되었는지 생각해 보장! 예전엔 window.open을 이용하여 새창을 여는 거슬 많이 사용하였지만, 못된 사이트들이 새창 열기 지옥(도박,성인사이트등 불법..

자바스크립트 2023. 6. 23. 17:00

이제 이쯤에서 쪼메 이상한 게시판을 맹글어 보도록 하장!(예전 모델1방식으로..)데이타 저장공간으로는 연습을 위해 얼마 전에 배운 LocalStorage를 사용해 보장 [만들어 가는  과정에서 서버의 동적액션은 없으니 끊임없이 의심하고 의심해야 한당. 제대로만 이해한다면, 웹 프로그램의 흐름 이해는 완벽하다고 단언할 수 있겠당! ] 먼저 글을 작성하는 페이지를 맹글장.(아래 코드를 카.복 하장)write.html  [checkbox 갯수 체크와 submit부분은 유심히 보장!] 어리둥절 JS 께시판 제목 글쓰니 내용 ccc 관련언어(최소1개 MAX 3개까지 선택) ..

자바스크립트 2023. 6. 22. 20:52

리팩토링(Refactoring)에 대해 간략히 느낌있겡 이야기 해보장.사전적 의미는 재정의, 재 인수분해등 어디서 그리 잘 찾는지 느낌 먼 말들로만지루하고 느낌없게  학문적으로 설명한당.규모와 영역에 따라 구체적이고 세부적인 설명이 당연 달라질것이다. 꽤 다름의 원리당. 억지로 느낌오게 현실감 있게 팍 줄이면 , 집안의 물건들을 잘 정리 하는 것이라 생각하자.왜 정리하는가?,  찾기쉽게(효율), 보기 좋게(가독성), 필요 없어진 건 버린당(공간확보)등..결국 유지보수, 업그레이드도 쉬워지고, 다음 개발에 보일러플레이트로 활용될 수 있당, 무엇보다도 개발자의 뇌와 습관에  좋은 경험치를 올려 레벨을 올려줄 수 있당.물론 매니저의 IQ가 나쁘면 진행과정이 지루하고 시간소비만 많고 얻는 게 적을  수 있당! ..

자바스크립트 2023. 6. 21. 12:33

브라우져에는 쿠키(cookie)라는 저장공간이 있고, 도메인당 약 4KB의 Max Limit로50개 까지 저장 가능하다고 알려져 있당. 이걸 이용해서 접속자의 ID나,보안상 위험(암호등)하지 않은 것들을 유효기간을 주어 저장하곤 했었는데, 요즘은localStorage나 sessionStorage를 사용하는 거시 훨씬 모던해 보일뿐더러 사용도 쉽당.(localStorage의 용량은 크롬 기준으로 도메인당 5M 정도로 알려져 있당.) localStorage와 sessionStorage는 사용법은 완전히 똑같고, 단지 브라우져에서해당사이트를 닫으면 저장내용이 자동삭제가 되는가(sessionStorage)?안 되는가?(localStorage)만 다르당. 아직 너무 cookie에만 메달려 있다면 이번 기회에 제발..

자바스크립트 2023. 6. 21. 00:21

Math, Date는 표준 내장(built-in) 객체당, 아주 자주 쓰는 JSON이라는표준 내장(built-in)객체가 더 있는뎅, 사용법은 너무도 간단하여 아래 처럼2개 메소드밖에 없당! ( 의외로 고민 1도 없이 에러가 나면 당연히 화를 낸당!) JSON.stringify(객체); // 객체를 문자열화(serialize) JSON.parse(문자열); // 문자열을 객체화(deserialize)객체를 문자열화하는 것을 멋진말로 시리얼라이즈(serialize)라 하고,반대(문자열->객체)를 디시리얼라이즈(deserialize)라 한당! (무슨 의미, 왜 필요?) 초보자들에겐 실행결과만 성취감으로 남고, 개념이나 과정은 잔상조차 안 남으니,특단의  말도 안되는 억지 무지막지 과장된 강제 뇌..

자바스크립트 2023. 6. 20. 12:10