본문 바로가기

전체 글

(266)
알토르 1주차 - 업다운 게임 HTML / JavaScript랜덤넘버 생성 확인 let randomNumber = Math.floor(Math.random() * 100) + 1; /// 1번만 생성 let userInput = document.querySelector('#userInput'); let submitButton = document.querySelector('#submitButton'); submitButton .addEventListener('click', function(){ let randomNumber = Math.floor(Math.random() * 100) + 1; // 클릭 시 생성 let userNumber = userInput.value; ..
알토르 1주차 태그 1. 기본 문서 구조 태그이 태그들은 모든 HTML 문서에 반드시 들어가야 하는, 문서의 기본 틀을 잡는 태그입니다.: 이 문서가 HTML5 표준을 따른다는 것을 선언합니다.: HTML 문서의 시작과 끝을 나타내는 가장 최상위 태그입니다.: 문서의 메타데이터(문서에 대한 정보)를 정의하는 태그입니다. 웹 브라우저 화면에는 직접 보이지 않습니다.: 브라우저 탭에 표시되는 페이지 제목을 설정합니다.: 문서에 대한 다양한 정보를 정의합니다 (예: 문자 인코딩, 뷰포트 설정 등).: 웹 브라우저 화면에 실제로 표시될 모든 콘텐츠(텍스트, 이미지, 링크 등)가 들어가는 태그입니다.2. 텍스트 관련 태그텍스트의 의미와 모양을 정의하는 태그들입니다., , ..., : 제목(Heading)을 나타내는 태그입니다. 숫자..
알토르 1주차 Cusor AI Cursor AIAI 기능을 코딩 워크플로우에 통합하여 개발 생산성을 극대화하도록 설계된 코드 에디터Visual Studio Code를 기반으로 익숙한 인터페이스 제공Cursor AI 주요 방법인라인 편집 - Ctrl + K (Mac: Cmd + K)코드 수정: 수정하고 싶은 코드 블록을 드래그하여 선택한 후 Ctrl + K "이 함수를 화살표 함수로 바꿔줘", "성능 최적화를 위해 이 부분을 리팩토링해줘"와 같이 명령을 내리면 AI가 코드 수정코드 생성: 코드를 작성할 곳에 커서를 두고 Ctrl + K "사용자 정보를 가져오는 fetchUsers 함수를 만들어줘"와 같이 명령하면 AI가 코드 생성자연어 명령: "이 코드가 하는 일이 뭐야?", "여기서 버그가 발생한 것 같아. 원인을 찾아줘"와 ..
알토르 1주차 - API API서비스를 버튼화애플리케이션간 통신 인터페이스JSON구조화한 데이터 형태{ Key : Value }XML구조화한 데이터의 형태JSON + HTML처럼 태그 형태AJAX페이지 이동 없이 백단에서 서버와 HTTP 통신하는 기술화면의 일부만 업데이트
알토르 1주차 - Typing Game 4 const wordDisplay = document.querySelector('.word-display');const wordInput = document.querySelector('#word-input');const score = document.querySelector('.score');const time = document.querySelector('.time');const DEFAULT_TIME = 8;let wordList = ['apple', 'banana', 'cherry', 'pale', 'blueberry'];alert(wordList.length);let count = 0;let time_left = DEFAULT_TIME;console.dir(score, time);wordDispla..
알토르 1주차 ES6 JavaScript ES6 문법 정리1. ECMAScript(ECMA) 문법이란?ECMAScript(ECMA-262): 자바스크립트의 핵심 문법과 규칙을 정의한 표준 사양.JavaScript: ECMAScript 표준을 기반으로 만들어진 프로그래밍 언어로, 웹 API 등을 포함.배경1990년대 초반:Netscape: JavaScript 개발MS: JScript 개발→ 브라우저별 다른 문법으로 인해 호환성 문제 발생.표준화 필요성 대두 → Ecma International에서 표준 제정.표준 명칭: ECMA-262 (언어 명칭: ECMAScript)2. ES6(2015) 주요 문법2.1 변수 선언: let과 constlet: 재할당 가능, 블록 스코프const: 재할당 불가, 블록 스코프 (상수)객체/배열..
알토르 1주차 - Typing game 3 const wordDisplay = document.querySelector('.word-display');const wordInput = document.querySelector('#word-input');let wordList = ['apple', 'banana', 'cherry', 'date', 'elderberry'];let count = 0;// console.dir(wordDisplay);wordDisplay.innerText = wordList[0];wordInput.addEventListener("keydown", function() { if(event.key === 'Enter') { if (wordInput.value === wordDisplay.innerText) ..
알토리 1주차 Typing game -2 const wordDisplay = document.querySelector('.word-display');const wordInput = document.querySelector('#word-input');let wordList = ['apple', 'banana', 'cherry', 'date', 'elderberry'];// console.dir(wordDisplay);wordDisplay.innerText = wordList[0];wordInput.addEventListener("keydown", function() { if(event.key === 'Enter') { if (wordInput.value === wordDisplay.innerText) { w..