Front-end/JavaScript

벌써 몇 번을 이 문제를 가지고 시간낭비를 해놓고서 또 삽질을 해버린 삽질 전문가... {expenses.map(({ date, desc, amount, payer }) => { {date} {desc} {payer} {parseInt(amount)}원 ;})} 아무리봐도 코드에 문제도 없고 콘솔에 찍어봐도 깨끗한데 동작이 되질 않는다.입력한 값을 콘솔로 찍어보면 나오는데 저장된 상태를 불러오려고 하니 undefined가 반환되서 상태관리를 잘못했나? 싶어다른 곳에서 한참 시간을 낭비했다.  이유는?간단했다. 냅다 {} 를 사용해버려서 생긴 문제. ()로 바꿔주니 간단하게 해결됐다.  이 둘의 차이를 정리해보자. { } {expenses.map(({ date, desc, amo..

📍 표준내장객체 강의를 듣고 복습도 하고 필요할때 마다 꺼내 볼 수 있게 간단하게 정리해두려고 합니다. 자바스크립트를 공부하다보면 적재적소에 메서드 사용하는게 정말 어려운데 제대로 정리해두고 익숙해져서 잘 활용할 수 있었으면 좋겠습니다! 표준 내장 객체 - JavaScript | MDN 이 장은 JavaScript의 모든 표준 내장 객체와 그 메서드 및 속성을 나열합니다. developer.mozilla.org 1. 문자(String) 메서드 내용 length 문자의 길이(숫자)를 반환 includes() 대상 문자에 주어진 문자가 포함되어 있는지 불리언 값으로 확인 indexOf() 대상 문자에서 주어진 문자와 일치하는 첫 번째 인덱스(숫자)를 반환 ( 일치하는 문자가 없으면 -1 반환) padEnd(..

Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 📍 강의 들으면서 처음 알게 된 슬라이드 라이브러리! 아무것도 모르던 때 슬라이드 기능을 구현하겠다고 🐶고생을 했던적이 있었는데.. 이렇게 간단하게 슬라이드 기능을 구현할 수 있다는게 얼마나 감격스럽던지ㅠ_ㅠ 아무튼 아무것도 모르던 저처럼 고생하는분이 없길바라며 간단하게 정리해보았습니다. # Swiper 다양한 동작의 슬라이드 기능을 쉽게 사용할 수 있는 슬라이드 라이브러리이다. 1. 라이브러리..

# GSAP gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers GSAP is a JavaScript library for building high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...anything JavaScript can touch! No other library delive cdnjs.com JavaScript에 애니메이션 처리 해주는..

# 호이스팅 이란? 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서 먼저 소스코드의 평가과정을 거치면서 소스코드를 실행하기 위한 준비를 한다. 소스코드의 평가 과정에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행한다. 소스코드의 평가 과정이 끝나면 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행한다. 자바스크립트 엔진은 선언들이 어디에 있든 상관없이 다른 코드보다 먼저 실행한다. 쉽게 말해 자바스크립트 엔진이 코드를 실행하기 전 선언문을 끌어올리는 것을 말한다. 정확히 말하자면 선두도 끌어 올려진 것 처럼 동작한다. 모든 식별자(변수,함수, 클래스 등)은 호이스팅 된다. # 변수 호이스팅 변수는 3단계에 걸쳐 생성된다..

#callback 1. 동기와 비동기 자바스크립트는 동기적이다. hoisting이 된 이후 부터 작성한 순서에 맞춰 하나씩 실행된다는 것(한번에 하나의 일만 수행) hoisting? var, function declaration(함수선언) 같은 선언들이 제일 위로 올라가는것 synchronous(동기)는 정해진 순서에 맞게 코드가 실행되는것이고 asynchronous는 비동기적으로 언제코드가 실행될지 예측할 수 없는것 console.log(1); console.log(2); console.log(3); 자바스크립트 엔진은 코드를 제일 위에서 부터 밑으로 실행하기 때문에 순서대로 작동된다. console.log(1); setTimeout(() => console.log(2),1000); console.lo..