칠구의 블로그

기본 용어 정리 NodeJS Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 환경 즉 -->> 자바스크립트를 실행하는 환경을 제공해주는 프로그램 모듈 기능별로 쪼개놓은 파일 --->> commonJS 모듈(CJS) // ES 모듈 (ESM)로 나눠짐 -CJS- // module.cjs // In a CommonJS module const builtin = require('node:module').builtinModules; -ESM- // module.mjs // In an ECMAScript module import { builtinModules as builtin } from 'node:module'; 같은 모듈이지만 CJS냐 ESM이냐에 따라 다르기 때문에 잘 가져다..

이상형 월드컵을 하다보면 랭킹(순위)를 볼 수 있다. 자바스크립트를 이용한 간단한 구현이기 때문에 로컬스토리지를 이용했다. 당신의 1등이 로컬스토리지이고 나머지 1등들은 그냥 코드를 넣었다 ㅜㅜ 실력이슈 저번 리뷰를 만약 봤으면 알겠지만 나는 우승자를 나타내는 함수가 winnerImage이다. 그래서 라운드 진행하는.html localStorage.setItem('winnerImage', winnerImage); 랭킹을 보여주는 .html var winnerImage = localStorage.getItem('winnerImage'); // 가져온 이미지를 화면에 표시 document.getElementById('winnerImage').src = winnerImage; 이것만 추가해주면 된다. 전체 코..

저번에 화면 구현을 완료했고 이번엔 게임을 진행해보았다. 솔직히 금방 끝날 줄 알았는데 생각보다 오류가 많이 발생해서 오래걸림 ㅠㅠ var text = ""; var images = []; //이미지 데이터들을 담을 곳 var rounds = ["16강", "8강", "4강", "결승", "우승자"]; // 라운드별 이미지 수 var roundIndex = 0; // 현재 라운드 인덱스 var matches = rounds[roundIndex] === "16강" ? 8 : (rounds[roundIndex] === "8강" ? 4 : (rounds[roundIndex] === "4강" ? 2 : 1)); // 현재 라운드의 경기 수 var currentMatch = 0; // 현재 진행 중인 경기 var..

document 객체는 쉽게 말해서 현재 웹 페이지를 나타내는 객체라고 생각하면 편하다 getElementById(id) : 저장된 아이디를 가진 HTML 요소를 찾아 반환 딱 하나 밖에 없는 고유한 속성을 가지고 있는 HTML 요소에 적용해줄 때 사용하며 자바스크립트를 이용해서 코딩을 하다보면 가장 자주 보게 된다 document.getElementById('winnerContainer').style.display = 'block'; 위는 winnerContainer 요소에 display 속성으로 block 으로 지정하는 내용으로 getElementById 사용한 간단한 예시이다 querySelector(selector) : 특정 조건을 만족하는 여러 엘리먼트 중 원하는 것 선택한 후 반환 queryS..

저번에 피그마로 구상했던 화면 구현을 완료했다. 막상 구현하다보니 수정된 부분들이 조금 있다. 기능 부분은 아직 구현 전이다. 메인화면 아이돌 이상형 월드컵 👩여자 아이돌 시작 랭킹 👨남자 아이돌 시작 랭킹 라운드 선택 (팝업창) 👨남자 아이돌 라운드 16강 8강 4강 결승 시작 라운드 진행 여자 아이돌 16강 👑당신의 이상형👑 🏆여자 아이돌 랭킹🏆 🥇1등🥇 여기에 이름 여기에 픽 🥈2등🥈 여기에 이름 여기에 픽 🥉3등🥉 여기에 이름 여기에 픽 4등 여기에 이름 여기에 픽 5등 여기에 이름 여기에 픽

자바스크립트를 공부하며 작은 토이 프로젝트를 하면 좋겠다라고 생각을 했고 이상형 월드컵을 만들어봐야겠다고 생각을 했다 메인 화면 -> 팝업창 (라운드 선택) -> 월드컵 -> 우승자 -> 랭킹 이렇게 프로토타입을 구성했고 피그마를 통해 화면을 구상해봤다. 일단 남자 , 여자 아이돌 16 / 8 / 4 / 2 라운드로 구현할 예정이다 화면 구상 -> 화면 구현 -> 기능 구현 -> 벡엔드 연동 이렇게 진행해볼 예정 메인 화면 구별하기 쉽게 여자 아이돌은 7D3AD2 15% 남자 아이돌은 2293D2 15%로 대표 색을 지정했다. 라운드 선택 팝업창 라운드 진행 우승자 랭킹 화면

자바스크립트를 이용한 할 일을 추가할 수 있는 캘린더 구현이다 날짜를 클릭하고 할 일을 추가하면 달력 밑에 메모에서 적은 내용을 볼 수 있고 해당 날짜에 동그라미로 할 일이 추가된 것을 확인할 수 있다. 또 메모가 입력 된 날짜를 클릭하면 내용을 수정 할 수 있다. See the Pen Untitled by pronambin (@kimnambin) on CodePen. html / css 일 월 화 수 목 금 토 📝메모 전체적으로 rap을 이용해서 감싸고 header / dateHead / dateBoard /memoContainer 이 들어가 있다 header -> 버튼과 타이틀 / dateHead -> 요일 / dateBoard -> 일 (day) / memoContainer -> 추가한 메모 .da..

See the Pen Untitled by pronambin (@kimnambin) on CodePen. 이번엔 자바스크립트를 이용해서 할 일을 적을 수 있는 간단한 투두 리스트를 만들어보겠다 ▪ '낮음', '보통' , '높음', '아주 높음'으로 우선 순위를 체크하고 할 일을 추가 ▪ 한번 적은 할 일 리스트를 수정 및 삭제 ▪ 총 할 일 리스트를 '전체' , '완료' , '미완료' 로 구분해봤고 구분해서 볼 수 있게 하였다 주석으로 보는 코드 먼저 body 부분 📝TO DO LIST 전체 완료 미완료 ➕ 낮음 보통 높음 아주 높음 ✍️LIST 자바스크립트 부분 // 할 일 목록 const todoList = []; // 할 일 추가 function add() { const inputtodo = doc..

말 그대로 자바스크립트를 이용해서 간단한 시간 다운 타이머를 만들 것이다 구현한 기능: 버튼들 (스타트/스탑/리셋) + 시간 입력 결과물 미리보기 ⬇️⬇️ See the Pen Untitled by pronambin (@kimnambin) on CodePen. 주석으로 한줄한줄 자세한 설명부분 ⬇️⬇️ 버튼부분 자바스크립트 //타이머를 0초부터 let timer; let seconds = 0; //스타트 버튼 1초씩 업데이트 setInterval function start() { timer = setInterval(update, 1000); } //스탑 버튼 -> 정지 = clearInterval function stop() { clearInterval(timer); } //리셋 버튼 -> 정지와 0초로..