안오늘의 devlog

🍓𝗪𝗲𝗯/𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍

• Local Storage 사용하기

  🍓𝗪𝗲𝗯/𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 2021. 9. 23. 07:00

  Local Storage란 개발자도구 Application항목에 Local Storage 있음. 브라우저 청소를 하지 않는 이상 브라우저 닫아도 저장 가능(텍스트 5MB) sessionStorage는 휘발성이다. 문법 1. localStorage.setItem('name', 'kim') 자료저장 Object형으로 자료이름, 자료값 저장 localStorage.setItem('obj', {name: 'kim'}) Object를 그냥 문자로 바꾸면 깨진다. localStorage.setItem(arr,[1, 2, 3]) array를 저장했지만 출력할 때 1, 2, 3이 나온다. 즉, 자료형이 깨진다. array와 Object 자료형 손실없이 저장하려면 글자인척하면서 저장하면된다. " " 를 사용한다. => ..

  Read More
• null 병합 연산자를 이용해 코드 개선하기, reduce 함수 구현해보기

  🍓𝗪𝗲𝗯/𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 2021. 9. 9. 23:30

  콜백함수를 이용하여 나만의 reduce함수 만들기 reduce는 initialValue가 있으면, initialValue를 처음으로 하여, reduce를 해간다. accumulator = initialValue initialValue가 없으면, array의 첫번째 원소값을 처음으로 하여, reduce를 해간다. accumulator = array[0] 이 부분을 코드로 처음 구현했을 때는 아래와 같았다. 삼항연산자나 null 병합 연산자를 사용하라는 코드리뷰를 받고 개선해보았다! null 병합연산자는 처음 알게 되었다. null 병합연산자 ?? ??는 null 병합연산자로, 짧은 문법으로 여러 피연산자 중 값이 확정되어있는 변수를 찾을 수 있다. a ?? b의 경우 a가 null도 아니고 undefine..

  Read More
• SPA란?

  🍓𝗪𝗲𝗯/𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 2021. 8. 20. 16:28

  2000년대 초반의 웹페이지는 각 페이지마다 새로운 html을 요청해서 화면을 다시 그리는 방식이었다. 자바스크립트는 DOM을 조작하는 간단한 역할만 했었기 때문에 html의 script 태그에 넣는 것만으로도 충분했다. ajax가 유행했을 때는 자바스크립트의 비중이 조금 더 커졌지만, 페이지 당 자바스크립트 파일 몇 개면 충분했다. SPA(Single Page App)는 하나의 html에 수십, 수백 개의 자바스크립트 파일을 포함하기 때문에 기존 방식이 통하지 않는다. html에 script 태그를 여러개 추가하여 작업하다면, 계속해서 늘어나는 자바스크립트 파일을 관리하기 힘들다. 또한, 선언되는 순서도 신경써야하고, 기존에 생성된 전역 변수를 덮어쓰는 위험도 존재한다. webpack은 여러 개의 자바..

  Read More
• JavaScript padStart() padEnd()로 채우기

  🍓𝗪𝗲𝗯/𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 2021. 7. 14. 11:31

  padStart() padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용된다. str.padStart(targetLength [, padString]) 으로 사용한다. padString을 입력하지 않으면 공백으로 채워진다. padEnd() padEnd() 메서드는 현재 문자열에 다른 문자열을 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다. 채워넣기는 대상 문자열의 끝(우측)부터 적용된다. 예제 (출처: 제코베 자바스크립트 59번) 총 문자열의 길이는 50으로 제한하고 사용자가 문자열을 입력하면 그 문자열을 가운데 정렬을 해주고, 나머지 빈 부분에는 '='을 채워 넣어주세요. // 1..

  Read More
• JavaScript 정규식 활용 이메일 체크

  🍓𝗪𝗲𝗯/𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 2021. 7. 13. 22:01

  function isValidEmail(email) { // js email regex const re = /^(([^()[\]\\.,;:\s@"]+(\.[^()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(String(email).toLowerCase()); } test() 메서드는 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 true 또는 false로 반환한다. // Check email is valid function checkEmail(input) { // js email regex con..

  Read More
• JavaScript preventDefault()란?

  🍓𝗪𝗲𝗯/𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 2021. 7. 13. 15:09

  a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나, 창이 새로고침하여 실행된다. preventDefault 를 통해 이러한 동작을 막아줄 수 있다. 1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우 2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨) 예제 const form = document.getElementById('form'); form.addEventListener('submit', function (e) { e.preventDefault(); console.log('submit'); }); preventDefault()를 하지 않을 경우, submit버튼을 누르면 submit이 consol..

  Read More
• [제코베/JavaScript] 42번. 2020년. 요일구하기, Date 객체

  🍓𝗪𝗲𝗯/𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 2021. 7. 11. 14:22

  1. 문제 2020년 1월 1일은 수요일입니다. 2020년 a월 b일은 무슨 요일일까요? 두 수 a, b를 입력받아 2020년 a월 b일이 무슨 요일인지 리턴하는 함수 solution을 완성하세요. 요일의 이름은 일요일부터 토요일까지 각각 SUN, MON, TUE, WED, THU, FRI, SAT 입니다. 예를 들어 a = 5, b = 24라면 5월 24일은 일요일이므로 문자열 "SUN"를 반환하세요. 제한 조건 2020년은 윤년입니다. 2020년 a월 b일은 실제로 있는 날입니다. (13월 26일이나 2월 45일 같은 날짜는 주어지지 않습니다.) 2. 나의 풀이 const day = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']; const month = [..

  Read More
• JavaScript 특정 문자 치환 방법: replaceAll 함수사용과 정규식을 사용한 replace()

  🍓𝗪𝗲𝗯/𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 2021. 7. 10. 11:35

  1. replaceAll() 함수 사용 replace는 첫번째 문자만 바꿔주기 때문에, 문자열에 있는 모든 특정문자를 치환하기 위해서는 replaceAll을 사용해야 한다. function replaceAll(str, searchStr, replaceStr) { return str.split(searchStr).join(replaceStr); } 2. 정규식 사용 replace(/o/g, "*") : o를 *로 전체 치환한다. replace(/o/gi, "*") : o를 *로 대/소문자 구분 없이 전체 치환한다. g: 발생할 모든 pattern에 대한 전역 검색 i: 대/소문자 구분 안함 특수문자 치환 시 \를 붙여주어야 한다. 관련문제 : 제코베 자바스크립트 39번. 오타 수정하기 혜원이는 평소 영타가..

  Read More