프론트 개발/javascript

다양한 라이브러리 및 메소드의 매개변수로 DOM 요소를 전달할 때 jQuery 선택자를 이용해서 지정하면 에러를 출력한다. 사실 jQuery를 이용하지 않으면 그만인 문제이지만 코드의 일관성을 위해서 이 문제에 대해 찾아보게 되었고 근본적인 원인을 알게 되어 나름 공부가 된 듯 하다. 아래에서는 에디터와 자바스크립트 내장 메소드를 이용할 때를 예제로 가져왔다. 예시 (1) CKEditor let editorElement = document.querySelector('#editor'); const initializeEditor = () => { _editor .create(editorElement) .then(editor => { editorElement = editor; }) .catch(); } 에러 ..

자바스크립트로 복사한 내용을 가져오거나 복사하는 방법에 대한 포스팅이다. 만들고 있는 토이 프로젝트에 클립보드 내용을 가져오는 코드가 있었는데 이젠 다른 방법을 사용하게 되어서 적어놓으려고 한다 😃 다음에 언제 쓰일 지 모르니까... 클립보드 복사하기, 붙여넣기 방법은 두 가지가 있다. 1. document.execCommand를 이용한 방법 2. navigator.clipboard를 이용한 방법 각자 장단점이 있으니, 예제를 보면서 살펴보자. document.execCommand('copy') , document.execCommand('paste') // 텍스트를 클립보드에 복사 function copyToClipboard(text) { var textarea = document.createElemen..

배열 내 요소의 합을 구하는 문제를 풀다가 reduce의 자세한 문법을 몰라서 반복문을 이용했다. 풀이는 해결은 했지만, 그래도 이번 기회에 array의 reduce 메소드를 공부하며 알게 된 내용을 기록해본다. Array.reduce() 각 요소에 대해 주어진 콜백(callback) 함수를 실행하여 배열을 단일 값으로 축소하는 배열 메서드. 즉, 배열을 반복하면서 원하는 로직을 적용하는 부분에서 이용할 수 있다. 기본 사용법 arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]) 매개변수 종류 1. callback : 각 요소에 대해 실행할 함수로, 다음 네 개의 매개변수를 받는다. - accumulator 누적..

인강을 들으면서 ReactJS로 Movie App을 만들었었다. 그때는 데이터를 받기 위해서 fetch라는 걸 썼었는데 지금 만들고 있는 포트폴리오 사이트와 연동해서 브라우저에 올리기 위해서는 따로 JavaScript Ajax를 이용해야 했기때문에 방법을 더 찾아봤다. https://yts.mx/api#list_movies API Documentation - YTS YIFY Official YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details. yts.mx 영화 목록은 여기서 받아왔다. 아래로 내려가다 보면 URL이 두 개 나와있는데, 여기서 다음 표를 참고하여 정렬 기준을 바꿔서 데이터..

기존의 기술과 차이점 기존의 웹 브라우저는 굉장히 정적이여서, 클라이언트 측에서 어떠한 정보를 요청request하게 되면 서버 측에서는 해당 정보를 포함한 페이지 전체를 응답response으로 돌려주었다. 웹 브라우저는 서버로부터 받은 HTML을 브라우저에 띄워주는 일을 하였다. http 프로토콜상 요청 건에 대하여 응답을 받게 되면 이루어졌던 연결이 끊기게 설계되어 있는데 그 과정에서 브라우저는 비슷한 페이지를 다시 렌더링해야 했고 서버 또한 같은 페이지를 생성해야 하는 둥 많은 자원을 낭비하게 되었다. Ajax란? Ajax는 Asynchronous JavaScript and XML의 약자로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다. 이름에 XML이라고 명시되어 있지만 요즘에는..