e7e

랜덤 로또번호 6개 만들깅은 요즘 프로그램을 배우는 사람들은 거의 피할 수 없이 지나가야 하는 재미난 통과의례이당. 랜덤은 더미데이터 맹글기에 도움이 되어 전체적인 프로그램을 재밌게 보이도록 도와주공, 각기 다른 6개 번호를 골라야 하는 중복제거 로직은 지금은 체크 메소드가 다 준비되어 있어 시시하지만, 사실 초급자에겐 꼭 한번 생각해보면 좋은 알고리즘 과제이당. 단순히 화면에 번호만 찍히는 건 넘 재미없으닝, CSS와 타이머를 쪼메 섞어서, 로또복권 사고싶겡 쪼메나마 재밌게 만들어 보장. 일부러 기럭지가 기러지더라도 가독성 선택을 위해 CSS를 길게 펼쳐놓았으니, 소스 이해는 크게 어렵지 않을거지만, 전역변수를 window[`lotoNum${i}`] 식으로 사용한 부분과, 타이머 사용부분에 주목해서 보..

자바스크립트 2023. 7. 5. 17:58

드라마 뿌리깊은 나무에서 세종대왕께서 즐기시던 5 X 5 마방진! 알고보면 원리는 간단하당. 인간은 기억과 스스로의 반복 행동패턴에서 원리를 찾아내는 능력이 탁월하다. 그래서 그냥 반복 연습하면 다린이라는 칭호를 얻게된당. 마방진 원리는 아무쪽 변에서 시작해도 되는 뎅. 1. 변 정중앙에서 1이 시작되고, 대각선 방향으로 뻗는당. 2. 그자리가 비어있으면, 다음 숫자를 적고, 막혀있으면 그 자신 바롱 아래칸에 다음 숫자를 적는당. 3. 만약 막혀있지 않은데, 자리가 없다면 반대쪽 끝에 다음 숫자를 적는다. 위 1,2,3을 반복하면 어떤 마방진도 완성된당. 위 규칙을 괘니 맘 가는 대로 구현해 보았당. 너무 생각가는 대로 맹글어서 리팩토링이 필요하지만 싫당. 그저 로직훈련한 정도로 과정은 제끼고, 결과에 ..

자바스크립트 2023. 7. 5. 14:51

자바스크립트가 지금 처럼 제대로 언어로 대우받기 이전에도 사람들은 사실 대부분 자바스크립트를 무시하면서도 맘 속으로는 잘 하고 싶었고 부러워 했당. 2000년대 초반까지도 dhtml(dynamic html 동적 html)이란 말이 있었고, 자바스크립트를 쪼메 한다고 말하려면 마우스에 글자 따라 다니기를 구현할 수 있어야 했는데, snake 게임을 글자로 구현한 것이었당. 마리 기럭지가 기러지면 피곤하닝, 먼저 아래 소스를 실행해 보고 이야기 하장! mouseStr.html 아래 그림처럼 실행 될 것이당. 단 글자들이 뱀처럼 따라다니지 않고 한줄로 고정되어 따라다닌당.!(개선하장) 사실 이 로직은 쉬운 것은 아니지만, 한번은 해 볼 필요가 있당. 타이머에 의한 비동기 개념과, 다른 함수가 사용하고 있는 자..

자바스크립트 2023. 7. 1. 12:07

https://www.ag-grid.com/javascript-data-grid/getting-started/ 웹페이지를 만들다 보면 엑셀 모양의 리스트 페이지를 많이 만들게 되고 당연히 리스트를 만들면 페이지 나누기와 검색기능이 들어가야 하고 업무용 이라면 사용자는 원하는 부분을 파일로 받는 것을 넘어서 엑셀 시트 처럼 컬럼순서도 자유롭게 바꾸고,보고 싶은 컬럼과 보고 싶지 않은 컬럼 까지 자유롭게 선택할 수 있는 기능을 요구할거시당. 어쩌면 이미 엑셀등에 익숙한 사용자 입장에선 당연한 요구 지만 개발 입장에선 조금 난감하당. 이 경우 서버단과 클라이언트단이 이 책임을 나누어 가지는 것은 좋은 디자인이 아니고, 화면제어가 많이 필요한 상황에서 서버단이 책임을 지는 것 역시 좋은 디자인이 아닐 거시당. ..

자바스크립트 2023. 6. 29. 21:14

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

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

오늘은 한 템포 쉬어가는 느낌으로 잠시 3D 맛을 보고 가려한당.괘니 뭔가 있어보이게  지식있게 보이려고 정리한 노력이 아래 결과이다.~~그래픽 카드 비용이 조금 비싸긴 하지만  일상적으로  3D게임을 즐기는 사람도 많고, 유투브 영상 중에도 가상현실(VR)을 담고 있는 영상이 지속적으로 올라올 정도로 IT기술의 흐름은 사용자 인터페이스를 점점 3D쪽으로 몰아가고 있는 듯 보인당.웹에서도 환경상 성능의 문제가 있었지만 오래전 부터 페이지에 3D를 담는 기술이 있어 왔당.일찍이 Apple사의 제안으로 표준기술로 웹페이지에서 3D를 표현하려는 노력이 있어왔공, CSS의 3D 설정 속성과 자바스크립트를 이용하면 3D를 표현 하고 여기에 움직임까지 더 할 수 있땅.참고로 웹페이지에서 3D를 표현하기 위한  th..

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

이전 글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