나디아 성장 일기

템플릿 리터럴(Template literal): 자바스크립트에서 문자열을 입력하는 문자열 리터럴 `백틱(back-tick)`으로 사용문자열을 멀티 라인(여러 줄)으로 작성 가능 ⭕${보간법} 사용 가능 ⭕변수, 표현식, 연산 등을 문자열 안에 삽입할 수 있다.  * 데이터 + 템플릿 리터럴을 이용한 마크업 String// 데이터 객체const koreanFoods = { caption: "한식 메뉴", rows: [ { headline: "뚝배기 불고기", content: 8000 }, { headline: "스팸치즈볶음밥", content: 7500 }, { headline: "불고기낙지덮밥", content: 9000 }, ],};// 마크업 렌더링 함수function rende..

블록 스코프(Block Scope): 변수의 유효 범위를 블록 단위로 제한{중괄호}로 감싸서 사용{ statement_1; statement_2; ⋮ statement_n;}  var지역 및 전역 변수를 선언하는데 모두 사용블록 스코프(Block Scope) ❌ 블록을 고려하지 않고 현재 함수 또는 전역 스코프 어디에서나 접근할 수 있는 변수를 선언한다.var 변수는 호이스팅(hoisting) 되어 변수 선언이 코드의 최상단으로 끌어올려진다.function example() { if (true) { var x = 1; } console.log(x); // 1}example();======================var x = 1;{ var x = 2;}console.log(x); ..

✏️ 리액트 전 자바스크립트 복습   1. 변수 스코프 [JS] 블록 스코프(Block Scope) / 실행 컨텍스트(Execution Context)블록 스코프(Block Scope): 변수의 유효 범위를 블록 단위로 제한{중괄호}로 감싸서 사용{ statement_1; statement_2; ⋮ statement_n;}  var지역 및 전역 변수를 선언하는데 모두 사용블록 스코프(Block Scope) ❌tensdiary.tistory.com   2. 템플릿 리터럴(Template literal) [JS] 템플릿 리터럴(Template literal)템플릿 리터럴(Template literal): 자바스크립트에서 문자열을 입력하는 문자열 리터럴 `백틱(back-tick)`으로 사용문자열을 멀티 라인(..

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 라이브러리로 애니메이션 구현하기 자바스크립트✅ 스크롤 위치마다 사진이 달라지는 기능 구현하기 접근성✅ 접근성 고려하기