Front-End(Web)/Javascript
-
[JS / Web공통] 링크복사 및 SNS 공유버튼 만들기Front-End(Web)/Javascript 2022. 5. 10. 21:47
이번에 사이드 프로젝트로 간단하게 MBTI를 개발했다. (링크) 여타 MBTI도 그렇고 사용자들의 원활한 공유를 위해 링크복사 버튼과 SNS 공유버튼(카카오, 페이스북, 트위터) 을 추가했다. 크게 어려운 기능은 아니나, 서비스 홍보 목적에서 FE에서 유용한 기능이므로 간단하게 정리 및 공유하면 좋을 것 같아 간만에 포스팅을 작성한다! 📒 링크복사 버튼 링크복사의 경우, 다양한 방법들이 있다. 그러나, execCommand() 는 deprecated 되었으며, Clipboard API를 가장 권장한다. 1. document.execCommand (deprecated) 기존엔 document 전역객체의 execCommand() 메서드를 사용했으나, 현재는 deprecated 되었다. export const..
-
[Javascript] 정규 표현식 (Regular Expression)Front-End(Web)/Javascript 2022. 2. 15. 02:14
🤔 서론 Javascript 언어를 사용하거나, 관련 프레임워크로 개발하다 보면 정규식이라는 개념을 종종 접할 수 있다. 아마도, 다양한 조건을 검색 혹은 대체하기 위한 목적으로 많이 사용해보았을 것이다. (이메일, 패스워드 조건 or match(), replace() 메서드 등) 지금까지는, 템플릿화된 정규식을 가져다 쓴게 대부분이고, 그렇기에 문법을 명확히 이해하지 못하고 관습적으로 사용하고 있었다. 이를 주도적으로 이해하고 직접 작성하기 위해선 제대로 공부해야겠다는 생각을 했고, 이번 포스팅을 그 기회로 삼을 예정이다! 📒 정규 표현식 (Regular Expression) 이란? 정규 표현식(이하 정규식) 은 '문자열에 나타나는 특정 문자조합과 대응시키기 위해 사용되는 패턴'으로 MDN 공식문서는 ..
-
[Javascript] ES6 이후 - (2) ES2019, ES2020, ES2021Front-End(Web)/Javascript 2022. 2. 9. 13:15
이전 포스팅에서, 최근 Javascript의 문법이 격변했던 ES6(ES2015)에 대해 정리한 적이 있다. (포스팅 링크 : https://abangpa1ace.tistory.com/146?category=910462) [Javascript] ES6(ES2015) 🧐 서론 드디어, 내가 이전부터 포스팅하고 싶었던 Javascript의 ES6 문법이다! 나는 2020년에 Javascript를 처음 공부했고, 오히려 ES6 문법을 당연하다는 듯이 사용하게 된 뉴비 중 한명이다. 😚😚😚 abangpa1ace.tistory.com ES6 버전업 된 2015년 이후, Javascript는 매년 TC39에 의해 버전업이 진행되고 있으며, ES2018(ES9) 버전까지 포스팅했었다. (포스트 링크 : https:/..
-
[Javascript] ES6 이후 - (1) ES2016, ES2017, ES2018Front-End(Web)/Javascript 2022. 2. 8. 19:37
이전 포스팅에서, 최근 Javascript의 문법이 격변했던 ES6(ES2015)에 대해 정리한 적이 있다. (포스팅 링크 : https://abangpa1ace.tistory.com/146?category=910462) [Javascript] ES6(ES2015) 🧐 서론 드디어, 내가 이전부터 포스팅하고 싶었던 Javascript의 ES6 문법이다! 나는 2020년에 Javascript를 처음 공부했고, 오히려 ES6 문법을 당연하다는 듯이 사용하게 된 뉴비 중 한명이다. 😚😚😚 abangpa1ace.tistory.com 이 당시에, Javascript 문법에 많은 수정과 추가가 진행되었으며, 이는 컴파일링이 필요할 정도로 호환성 문제가 계속해서 대두되었다. (통상 IE) 이 포스팅은, 2015년 E..
-
[Javascript/lib.] LodashFront-End(Web)/Javascript 2021. 8. 17. 21:45
🧐 서론 lodash 역시 회사 실무를 접하면서, 처음으로 경험해본 Javascript 라이브러리이다. 사실, Javascript에서 제공하는 왠만한 메서드들을 표방한 것이다보니 필요성이 있을까 싶지만, _cloneDeep() 으로 객체를 깊은 복사하거나, _has() 로 객체의 필드 포함여부를 확인하는 등 다양한 기능을 수행할 수 있다. 현재 실무에서는, 더 다양한 Lodash 메서드들을 사용하고 있기 때문에, 이의 기원과 대표적인 메서드들을 정리해보고자 이 글을 포스팅한다. 📒 Lodash 란? Lodash는 Javascript 유틸리티 라이브러리의 일종이다. 즉, 모듈성, 성능 등을 제공하기 위한 라이브러리인 것이다. * Lodash는, node.js 에서 많이 쓰이는 underscore 라이브러리..
-
[Javascript] ES6(ES2015)Front-End(Web)/Javascript 2021. 4. 9. 01:12
🧐 서론 드디어, 내가 이전부터 포스팅하고 싶었던 Javascript의 ES6 문법이다! 나는 2020년에 Javascript를 처음 공부했고, 오히려 ES6 문법을 당연하다는 듯이 사용하게 된 뉴비 중 한명이다. 😚😚😚 최근 면접 준비를 하면서, 특히 이전 문법과 비교하는 강의들을 보면 기능과 편의성 측면에서 많은 개선을 지원해준 ES6 버전이다. 이를 전체적으로 훑어보고 정리해봐야겠다고 생각했으며, 동시에 감사함도 느끼는 시간이 될 것 같다! 📒 ECMAScript (선행 개념들) Javascript의 ES6는 일종의 버전이다. 2015년 버전이며, 마치 아이언맨에서 MK6(마크6) 와 같이 생각하면 되겠다. 그렇다면 ES의 뜻은 무엇인지, 버전6이 같는 의미는 무엇인지 알기 위해선 우선 선행되는 개..
-
[Javascript] 이벤트(Event)Front-End(Web)/Javascript 2021. 3. 16. 13:56
React의 이벤트에 대해 포스팅하면서, Javascript에서의 이벤트 핸들링과 흐름, 관련된 개념들 역시 정리할 필요성이 있었다. Javascript 관련된 내용을 분리했으며, 이를 토대로 이벤트 위임까지 한번 정리해보도록 하겠다. 📒 Event Handling React 합성 이벤트의 다양한 attribute들을 알아보면서, 이벤트가 기본적으로 어떻게 브라우저에서 감지되고 전파되는지 공부할 필요를 느꼈다. 그래야, bubbles의 개념이나, eventPhase의 각 페이즈를 이해할 수 있겠다고 생각했다. 1. 이벤트 핸들링(Handling) 이벤트는 마우스 클릭이나 키보드 입력같이 일반적으로 사용자가 행하는 모든 동작을 일컫는다. 이러한 이벤트를 원하는데로 처리하는것을 이벤트 핸들링 이라고 한다. ..
-
[Javascript] 객체의 복사 (깊은 복사, 얕은 복사)Front-End(Web)/Javascript 2021. 3. 12. 17:43
🤔 서론 알고리즘을 풀거나, 웹페이지에서 배열상태를 최신화할때 경험했던 일이다. "나는 사본을 수정했는데, 왜 원본도 같이 바뀌지???" 자바스크립트에서 배열이나 객체를 복사하는데 다양한 방법이 있으며, 이들은 조금씩 다른 원리를 가지고 있던 것이다! 📒 복사 복사는 원본가 모두 같은 내용으로 사본을 만드는 작업이다. 원본과 사본이 각각 존재하며, 이들의 관계에 따라 복사종류를 구분할 수 있다. - 얕은 복사 사본을 만들어내지 않고 원본을 참조하도록 소위 "복사한 척" 을 하는 것이다. 1. 참조 할당 const arr1 = [1,2]; const arr2 = arr1; arr2[0] = 3; console.log(arr1[0], arr2[0]);// 3 3 가장 기본적인 형태이다. arr2 변수에 ar..