tree0505 님의 블로그

_01_모듈화index.htmlDOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle> script src="_main.js" type="module">script> head>body> body>html>_main.jsimport { ControllerMain } from "./_controllerMain.js";ControllerMain.start();_memberDAO.jsexport let MemberDAO = { //export 연동하는것 mem..

D10_dom_SPA_암기spasinglepageapplication 페이지가 하나밖에 없다. html이 하나밖에 없다. 페이지 이동을 어떻게 하냐? html여기를 계속 지웠다가 그렸다가 하는 것 고로 여기를 리엑트돔 알고리즘을 커버한다. 대표적으로 쓰고 있는 라이브러리가. 리엑트이다. 왜 하는지가 중요하다. 굳이 왜 하는가. 스마트폰이 나오면서 기존 게시판이 불편해짐기존의 게시판은 우리가 어떤식으로 처리를 했나. 페이징으로 했다. 게시글 => 1000개 10개 보여주기 밑에 버튼 스마트폰 드래그를 하면 게시글이 위로 올라가게무한스크롤 그래서 만들어 낸것이. 리엑트 dom 알고리즘 한번 그린 것은 기억을 해 놓았다가. 다시 안 그리는것 무한 스크롤 때문에 나온 기술 01_json버전_00_basic_..

05_달력1단계calendar1.html고대에 여러가지 달력이 나왔는데 그 중에 로마에서 사용하는 달력딱 맞아 떨어지지 않는다. 3000년까지만 맞다. 3000년 이후에는 다시 만들어야함 1년 => 365 => 365. ? =>4년 마다 윤년 윤년 => 366일 => 2월 28일 => 29일 달력을 만들기 위해 0001년 1월 1일부터 지금까지 일수를 구해야 한다. 1. 작년까지의 일수 265 * 2024 윤년 추가. 4년 마다 1+ 100년마다 1- 400년 마다 1+ 2. 올해는 따로 구해야한다. 올해가 윤년이면 [31,29,31,..]올해가 윤년이 아니면 [31,28,31/.....] 05_달력1단계calendar1.htmlDOCTYPE html>html lang="ko">head> met..

04_숫자슬라이드게임1단계slideGame1.html알고리즘버튼을 누르면 상하좌우 4군데를 검사를 한다. 검사를 해서. 비여있으면 자리를 바꾸는것 DOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle> style> #target { margin: 0 auto; display: table; } td { width: 100px; height: 100px; ..

03_순발력게임1단계_speedgame1.html1 to 50 배열이 2개이다.첫번째를 다 벗겨내면. 2번째할때는 빈칸이 된다. cursor: pointer;는 셀 위에 마우스를 올리면 손 모양이 나타나게 해서 **"클릭할 수 있다"**는 시각적 힌트를 줍니다.onload="init()"는 페이지가 로드되자마자 init() 함수 실행하라는 의미입니다.매우 중요! → JS로 화면을 그리려면 언제 실행할지 타이밍을 잡는 게 중요해요.화면에 들어갈 3개의 영역을 구분해 놓았어요.#header: 제목#center: 테이블이 들어갈 자리#footer: 나중에 점수나 타이머 같은 부가 요소 들어갈 수도 있어요.첫번째 반복문 첫 번째 반복문은 "숫자 데이터를 세팅(초기화)"하기 위한 것📦 두 반복문의 역할 비교:반..

댓글 알고리즘 을 추가해보자~ (설명 동영상) (해설은 수요일)댓글 알고리즘 댓글 알고리즘은 죽이되든 밥이되든 내가 만들어 보는게 중요하다. 자기가 스스로 아이디어를 내서 한번 만들어 보면 제일 좋다. 디비 상황 abc bbbcbccbd bcd 화면 c b -> bd -> bc -> -> bcd -> -> bcc -> bb adb의 있는 순서랑 화면에 있는 순서가 다르다. 댓글 알고리즘 해설 댓글 알고리즘 가장 효율이 좋은게 있다.변수 3개를 사용해서 메모리 효율도 챙기고 댓글도 구현한다. ref => 글그룹 step => 글 깊이 level => 같은 그룹내에서 출력 순서 알고리즘이 다른 경우새글 ref => 마지막 ref +1 step => 1 level => 1 댓글 ref => 부모 ref (..

02_틱택토1단계_tictactoe.html

D09_dom_버튼_암기 - 01_기본대부분이 웹은 버튼이다. _00_this개념1.html누른 애를 찾을 수 있어야 한다. 버튼이랑 윈도우를 구분할 수 있어야 한다. onclick="btn1Function()"은 이 버튼을 클릭했을 때 실행할 함수를 지정해요.onclick 방식은 HTML 안에 자바스크립트 로직이 들어가요.이 방식은 간단하지만, 유지보수가 어렵고 비추천되는 방식이에요. 실무에서는 잘 안 써요. alert(this);는 this가 무엇인지 팝업으로 보여줘요.여기서 this는 **버튼 자기 자신(btn1)**을 가리켜요. document.querySelector("#btn2").addEventListener("click", btn2Function); 👉 전체 의미: "웹 페이지에서 id..

D08_dom_실습_12_ToDoList.html_13_댓글.htmlf12눌러서. 요소 눌러봄. _14_기사필기시험.html_15_장바구니.html_16_회원가입.html 이건 반드시 외워야 한다. 장바구니. submit은 for문이 한개밖에 존재할 수 없다. db를 다녀오면 데이터가 지워진다. 리셋 비동기로 해결 db에 쓰레기 값이 안들아감

D08_dom_실습_12_ToDoList.html_13_댓글.htmlf12눌러서. 요소 눌러봄. _14_기사필기시험.html_15_장바구니.html_16_회원가입.html 이건 반드시 외워야 한다. 장바구니. submit은 for문이 한개밖에 존재할 수 없다. db를 다녀오면 데이터가 지워진다. 리셋 비동기로 해결 db에 쓰레기 값이 안들아감