나디아 성장 일기

at( index ): 배열(Array)의 해당 index의 요소 반환문자열(String)에도 사용 가능⭕양수, 음수 사용양수(+): 배열의 앞에서부터 카운트음수(-): 배열의 끝에서부터 카운트const cart = ["사과", "바나나", "배"];// 배열의 마지막 요소 반환 함수function returnLast(arr) { return arr.at(-1);}const item1 = returnLast(cart);console.log(item1); // '배'// 배열에 요소 추가cart.push("오렌지");const item2 = returnLast(cart);console.log(item2); // '오렌지' ex 1. 병합에도 사용 const numberList = [2, -2, 1]; ..

ECMAScript: ECMA-262 기술 규격에 따라 정의하고 있는 표준화 된 스크립트 언어Ecma 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의   ⏩ Ecma 인터내셔널(Ecma International): 정보와 통신 시스템을 위한 국제적 표준화 기구  1961년 유럽에서 컴퓨터 시스템을 표준화하기 위해 설립  ⏩ TC39(Technical Committee 39): ECMAScript의 표준화를 담당하는 ECMA International의 기술 위원회    ⏩ ECMA-262 기술 규격 : ECMAScript 표준의 공식 문서ECMA International의 기술 위원회인 TC39에서 개발하고 관리함  ⏩ ES6 (=== ES2015)ECMA-262 표준의 제 6판     E..

Quokka: 자바스크립트 코드 결과를 바로 확인할 수 있는 VS Code 확장 플러그인 코드의 동작을 실시간으로 볼 수 있어서 매우 유용 디버깅에 좋음 Quokka - JavaScript and TypeScript playground in your editorQuokka runs your JavaScript and TypeScript code and displays results inline in VS Code, WebStorm, and Sublime Text.quokkajs.com   설치vs code 마켓 플레이스에서 설치 Quokka.js - Visual Studio MarketplaceExtension for Visual Studio Code - JavaScript and TypeScript..

04. 로또 추첨기로또 추첨기 github   로또 추첨기 📌숫자 자릿수에 따른 공의 색상: 로또 공의 숫자에 따라 색상이 달라진다.1부터 10까진 노란색11부터 20까진 파란색21부터 30까진 빨간색31부터 40까진 회색41부터 45까진 남색보너스 숫자는 연두색 최종 등수와 상금: 로또 추첨과 일치하는 숫자의 개수에 따라 등수와 상금이 결정된다.랜덤 숫자와 모두 동일하면 1등 - 4억6개만 동일하면 2등 - 5천만원5개만 동일하면 3등 - 140만원 로또 추첨 로직(1) 숫자 추첨: 1부터 45까지의 숫자 중 무작위로 6개를 추첨(2) 보너스 숫자 추첨: 나머지 숫자 중에서 무작위로 1개를 추첨(3) 색상 결정: 각 숫자에 맞는 색상을 결정하여 표시(4) 등수 결정: 사용자가 입력한 숫자와 추첨된 숫..

03. 계산기계산기 github  계산기 📌산술 연산: 입력 받은 두 값을 연산한다.실시간 결과: 입력하는 즉시 결과를 확인한다.리셋 기능: 계산을 초기화하고 새로 시작한다.  구현쌀집 계산기를 너무 구현하고 싶었다!!!실제 사진 보면서 색상도 따왔는데 꽤 비슷해보여서 만족스러웠다.  프로젝트 목표 및 달성✊UI✅ CSS 레이아웃 구현쌀집 계산기 구현하기!  자바스크립트✅ 복잡한 로직의 단계를 나누어 구현하기✅ 함수로 만들어서 사용하는 것에 익숙해지기✅ 정규 표현식(Regex) 사용하기  순서도💻

📑 티빙(Tiving) 클론 코딩 프로젝트 회고 목차프로젝트 개요배포기간선정 이유목표기능 구현역할 분담기능 분담 피드백프로젝트를 통해 알게 된 것들회고칭찬반성노력느낀점결론프로젝트 전반적인 성과향후 계획 및 방향 🗂️ 프로젝트 개요 티빙(Tiving) 클론 코딩 프로젝트티빙(TIVING) 사이트의 주요 기능과 UI를 바닐라 자바스크립트를 사용하여 클론 코딩한 프로젝트  기간2024. 07. 05 ~ 07. 19  선정 이유반응형을 중점으로 구현해보길 원했는데 티빙 사이트가 반응형으로 구현하기 가장 좋은 사이트였다.쉽고 대중적인 OTT 플랫폼을 제작해보면서 컴포넌트 제작, 웹 컴포넌트 사용, 다양한 라이브러리 등을 사용해보고자 티빙(TIVING)을 선정하였다.  목표완성을 목표로 한다.수업 때 배운 것을..

02. 영화 소개 🎞️영화 소개 github  영화 소개 페이지📌카드 컴포넌트: 등장인물 소개영화 소개스크롤 위치: 스크롤 위치마다 스틸컷 변경비디오 삽입  구현한창 상견니에 빠져 있을 때 만들었던 영화 소개 페이지를 애니메이션을 추가해서 리팩토링 했다.     프로젝트 목표 및 달성✊UI✅ GSAP 라이브러리로 애니메이션 구현하기 자바스크립트✅ 스크롤 위치마다 사진이 달라지는 기능 구현하기 접근성✅ 접근성 고려하기

01. 끝말잇기🕹끝말잇기 github  끝말잇기 규칙📌시작 단어: 선수가 한 단어를 말하고, 이 단어가 제시어가 된다.끝말잇기: 다음 차례의 선수는 바로 전 선수가 말한 단어의 마지막 글자로 시작하는 단어를 말한다.참가자 순서: 참여하는 플레이어들은 정해진 순서대로 단어를 말한다.실패 조건: 끝말잇기의 규칙을 어길 경우 해당 플레이어는 실패하게 되어 해당 라운드는 종료된다.  구현   프로젝트 목표 및 달성✊UI✅ 반응형 구현하기✅ GSAP 라이브러리로 애니메이션 구현하기 자바스크립트✅ 요소 선택자 사용하기✅ 함수로 만들어서 사용하는 것에 익숙해지기✅ 간단한 로직도 단계로 나누어 구현해보기 접근성✅ 접근성 고려하기  순서도💻

📌 async: 비동기 함수를 정의, Promise를 반환 async function 함수명(매개변수) {     return 결과 값;} function 앞에 async를 붙이면 해당 함수는 항상 프라미스 객체(Promise object)를 반환- 내부에서 비동기 작업을 수행한다. - Promise가 아닌 것은 프라미스로 감싸 반환한다. async 함수는 항상 Promise를 반환하기 때문에 then() 메서드를 사용해서 호출, 처리⭕async function exampleFunction() { return "Hello, World!";}exampleFunction().then(result => console.log(result)); // "Hello, World!"  예시 2async func..

동기(Synchronous): 코드가 한 줄씩 순차적으로 실행되는 방식 세탁기 한 대- 이 빨래가 다 끝나야 다음 빨래 가능     비동기(Asynchronous) : 코드가 즉시 실행되지 않고, 특정 작업이 완료될 때까지 기다리지 않고 다음 코드를 먼저 실행하는 방식 특정 작업(서버 요청, 타이머 등)이 완료되면 콜백 함수를 통해 결과를 처리 세탁기 여러 대- 이 빨래 돌리면서 다른 빨래도 돌릴 수 있음    비동기를 다루는 방법1. 콜백 함수(Callback Function)특정 작업이 완료된 후 호출되는 함수콜백 지옥(Callback Hell) 문제를 야기할 수 있다.function fetchData(callback) { setTimeout(() => { callback("데이터"); },..