Front End/JavaScript9 [Vanilla JS] input에서 선택한 이미지 미리보기 이에 대한 건 클론 트위터에서 썼던 코드인데 당시에 강의에서 봤던 걸 그대로 따라 썼던 터라 조금 더 잘 이해하기 위해 다시 한 번 정리한다. 클론 트위터에서는 리액트로 구현을 했지만, 이번에는 mdn 문서를 찾아보며 바닐라 자바스크립트로 구현해본다. 일단은 index.html에 input을 마크업해준다. input에서 type을 file로 지정하고 accept로 모든 이미지를 선택할 수 있게 정한다. 그리고 자바스크립트에서 쓸 함수를 input에 넣어준다. input 속성으로 onchange를 쓸 수 있다는 걸 처음으로 알았던 오늘... 리액트에서 onChange가 있지만, 이 이벤트가 addEventListener('change', callback function)에서 왔을 거라 생각했던 터라 mdn.. 2021. 10. 4. [JS] Operations with Dates udemy, The Complete JavaScript Course 2021: From Zero to Expert! JavaScript에서 제공하는 Date objects 활용하기 const formatMovementDate = function (date) { const calcDayPassed = (date1, date2) => (date2 - date1) / (1000 * 60 * 60 * 24); const dayPassed = Math.round(Math.abs(calcDayPassed(date, new Date()))); if (dayPassed === 0) return 'Today'; if (dayPassed === 1) return 'Yesterday'; if (dayPassed (date2.. 2021. 6. 30. [JS] Array Methods Practice udemy, The Complete JavaScript Course 2021: From Zero to Expert! string을 Title case capitalization 하는 함수 만들기 // this is a nice title -> This Is a Nice Title const convertTitleCase = function (title) { const capitalized = str => str.replace(str[0], str[0].toUpperCase()); const exceptions = ['a', 'an', 'the', 'and', 'but', 'with', 'on', 'in']; const titleCase = title .toLowerCase() .split(' ') .ma.. 2021. 6. 30. [JS] Avoid callback hell, Promise udemy, The Complete JavaScript Course 2021: From Zero to Expert! / Teacher: Jonas Schmedtmann Promise chain을 사용하는 목적은 Callback HELL에서 벗어나기 위함이다. Promise : An object that is used as a placeholder for the future result of an asynchronous operation. 'AJAX call과 같은 미래에 받을 값을 담아놓는 상자' 정도로 이해하면 될 거 같다. setTimeout(() => { console.log('1 second passed'); setTimeout(() => { console.log('2 seconds passed'.. 2021. 6. 20. [JS] Object-Oriented Programming (OOP) Object-Oriented Programming (OOP) was developed with the goal of organizing code, to make it more flexible and easier to maintain (avoid 'spagetti code') - 최근에 SW 엔지니어링에서 가장 많이 쓰임. 죽 늘여놓는 코드를 쓰지 않고 정리할 수 있도록 해주며 유지보수를 쉽게 할 수 있다. [3 Ways of implementing prototypical inheritance in Javascript] 1) Constructor function 2) ES6 Classes : 쓰이는 코드의 방식이 constructor function과 매우 흡사하다. 3) Object.create() Th.. 2021. 6. 16. 이전 1 2 다음
