heyday2024 님의 블로그

https://idkhowtonamethispage.netlify.app/ 스타벅스 주문 시스템 idkhowtonamethispage.netlify.app  속성의 이름이 data-로 시작하는 모든 속성은 데이터 속성. data-index 속성은 HTML 요소에 사용자 정의 데이터를 저장할 수 있는 속성 1. order.item1.name점 표기법 (Dot Notation):이 방식은 객체의 속성에 직접 이름을 사용하여 접근하는 방법.item1은 order 객체의 속성으로, 해당 속성은 객체여야함. 예를 들어, order 객체가 다음과 같다고 가정해보면, let order = { item1: { name: "아메리카노", quantity: 2, } };위와 같이 정의된 경우 order.item1.name..

firebase 한계점(백엔드에 대한 컨트롤을 일부 잃게 됨/ 커스터마이징 힘들다....) 1) 서버 제어 제한: 파이어베이스는 서버 인프라에 대한 직접적인 컨트롤 제한됨.(파이어베이스에서 제공하는 기능, 방식에 따라 작업 수행해야함.)2) 확장성 제약: 파이어베이스는 규모에 따른 가로 확장성 측면에 제한이 있음3) 종속성: 파이어베이스 사용 시 google서비스에 의존하게되기 떄문에 외부의 다른 서비스나 기능 활용 어려움.파이썬 사용!!(파이어베이스의 제한 사항을 넘어선 더 많은 컨트롤 가능!(다양성, 유연성)) 1) 개발자가 원하는 방식으로 서버 구축, 관리 가능2) 서버의 확장성 조절 가능, 필요에 따라 리소스를 추가하거나 조정할 수 있음(대규모 기업이나 많은 트래픽을 처리해야하는 프로젝트에서 중요..

다시 정리, type="module"이 붙는 순간 onclik 작동 안함. 이유?모듈은 엄격 모드(strict mode)로 실행: type="module"을 지정하면 스크립트는 자동으로 엄격 모드(strict mode)로 실행됨. 엄격 모드에서는 변수 선언 없이 변수를 사용할 수 없으며, 암시적인 글로벌 변수 선언이 제한됨. .모듈 스코프: 일반적으로 type="module"을 사용하면, 그 스크립트 파일 내의 변수와 함수는 전역 범위(global scope)에 추가되지 않고, 그 모듈 안에서만 유효한 모듈 범위(module scope)에 갇힘. 예를 들어, HTML에서 과 같이 정의했을 때, myFunction은 전역 범위에 있어야 하는데, 모듈 스크립트 안에 정의되면 전역 범위에 노출되지 않기 때문에..

// 결과 텍스트를 저장한 객체 (MBTI 유형별로 설명을 저장)const results = { ESTJ: "당신은 현실적이고 실용적인 리더입니다! (ESTJ - 경영자)", ENTJ: "당신은 대담하고 결단력 있는 전략가입니다! (ENTJ - 통솔자)", ESFJ: "당신은 친절하고 외교적인 제공자입니다! (ESFJ - 집정관)", ENFJ: "당신은 카리스마 있고 영감을 주는 리더입니다! (ENFJ - 선도자)", ISTJ: "당신은 책임감 있고 신뢰할 수 있는 관리자입니다! (ISTJ - 논리주의자)", INTJ: "당신은 독창적이고 결단력 있는 전략가입니다! (INTJ - 과학자)", ISFJ: "당신은 헌신적이고 믿을 수 있는 수호자입니다! (ISFJ - 수호자)", INFJ: "..

https://lottonum-generator.netlify.app/ 로또 번호 생성기로또 번호 생성기 행운의 넘버!lottonum-generator.netlify.app로또 번호 생성기랜덤으로 로또 번호 생성하는 웹페이지스타일box-shadow: CSS에서 요소에 그림자를 추가할 때 사용하는 속성 (여러 값을 받을 수 있으며, 각각의 값은 그림자의 위치, 흐림 정도, 퍼짐 정도 등을 설정)offset-x: 그림자의 가로 방향 거리. 양수일 경우 오른쪽으로, 음수일 경우 왼쪽으로 이동.offset-y: 그림자의 세로 방향 거리. 양수일 경우 아래쪽으로, 음수일 경우 위쪽으로 이동.blur-radius (선택 사항): 그림자의 흐림 정도. 값이 클수록 그림자가 더 부드럽게 퍼짐.spread-radius ..

구글이 만든 백엔드(Firebase)를 이제 사용할 예정. Firebase? 구글이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼. 구글의 클라우드 기반 NoSQL 데이터베이스.(개발자들이 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중할 수 있도록 도와줌.) - 웹서버를 대신 만들어주는 서비스- 서버 개발 없이 제작 가능(serverless)- 프론트 지식만으로 웹서비스 출시 가능.  데이터 베이스 1) 관계형 데이터베이스(SQL): 정히된 정보를 다룰 떄 사용 (은행, 대기업)2) 비관계형 데이터베이스(NoSQL): 복잡하거나 유연한 정보를 다룰 때 사용 (스타트업) (데이터 베이스는 indexing을 하기 떄문에 데이터가 정렬되어 더 쉽게 특정 정보를 빠르게 찾아낼 수 있음...

DOM( Document Object Model ) 이란? HTML, XML 문서의 프로그래밍 interface로, 쉽게 말해 HTML문서를 브라우저가 이해할 수 있도록 만든 Tree 자료구조!DOM은 nodes와 objects로 문서를 표현함.TO-DO-LIST할 일을 추가할 수 있는 투두리스트 웹페이지.https://todolistforonlytoday.netlify.app/ 투두리스트 todolistforonlytoday.netlify.app기능할일을 입력창에 입력하고,추가버튼(+)을 누르면 할일이 추가됨.추가된 항목은 delete버튼, 할일 내용, 체크박스를 포함하고 있음.delete 버튼을 누르면 항목 사라짐.const inputArea = document.getElementById("text..

https://koreanfood-menu.netlify.app/ 한식 메뉴 렌더링하기 koreanfood-menu.netlify.app 한식 메뉴를 렌더링 해보기주어진 데이터를 가지고, 데이터를 화면에 표시했다. 메뉴판 느낌으로 스타일링하고, 각 객체는 각각의 가격, 카테고리, 설명을 포함하고 있다. 카테고리별로 메뉴를 볼 수있고, 검색 기능을 사용해서, 입력한 키워드를 포함하는 요소를 보여줄 수 있다. 특징각 메뉴를 카테고리 별대로 볼 수 있도록 하는 기능을 추가했다. (드롭다운 메뉴)음식을 bootstrap에서 가져온 cards 코드를 이용해 정갈하게 나열했다.filter과 includes 메소드를 이용해서 특정 키워드를 사용자가 입력한 후 검색버튼을 누르면 검색어를 포함한 메뉴가 보이도록 하는 기..

숫자 기억 게임랜덤으로 생성되는 숫자를 사용자가 기억하는 게임. https://practicenumbergame.netlify.app/ 숫자 기억 게임3. 정답과 획득한 점수를 확인해보세요.😊 입력한 숫자가 맞으면 점수가 올라가고, 틀리면 점수를 획득하지 못합니다. 20점에 도달할 때까지 문제는 계속됩니다. 특정 점수 도달 시 숫자가 길어practicenumbergame.netlify.app넷리파이로 걍 배포해봄. 허술한 숫자 기억 게임 해보실분~~~~🙌🙌(반응형 아니라서 모바일에서 열지 마셔요... 눈감..감아...)  게임로직:시작버튼을 누르면 사용자는 1000~9999 사이에 랜덤으로 생성된 숫자를 보게되고, 시작 버튼이 사라짐과 동시에 제출버튼과 입력란이 생긴다. // 1000~9000 범위..

아래 코드는 fetch를 사용해서 미세먼지 API로 정보를 얻고, 미세먼지가 40이 넘어갈 때는 클래스를 추가하여 빨간색으로 표시함.   이전에 만들었던 album 표지에 서울 미세먼지 상태 표현. 현재 서울의 미세먼지 : 나쁨 span 태그는 HTML에서 인라인 요소 정의하는데 사용되고, 텍스트나 다른 요소를 스타일링하거나 특정 동작을 적용할 때 유용. 레이아웃에 변화를 주지 않고도 특정부분을 강조할 수 있음.  // 페이지가 열릴때 혹은 새로고침되었을 떄 이미 미세먼지 API가져와서 서울 미세먼지 상태 표시해야함: $(document).ready(함수 내용); 쓰기!! $(document).ready(function () { let url..