프론트 개발

스프링 JSP 프로젝트를 진행했을 때 tiles 라는 프레임워크를 사용해본 적이 있다. 레이아웃 구성이 간편해서 새 프로젝트를 구성할 때 쓰고 싶었지만 이제는 deprecated 되었다고 한다. 그래서 비슷한 구조를 만들기로 결심하고 include를 이용해서 살펴보던 중 JSP에도 Custom Tag라는 게 있다는 걸 발견했다. Custom tag란? 커스텀 태그는 말 그대로 JSP에서 사용자 지정 태그를 만들고 재사용할 수 있는 일종의 컴포넌트 같은 기능이다. JSP 2.0 이후에 등장하였으며, 이전 방식인 태그 라이브러리 태그보다 더 유연하고 간소화된 사용 방법을 제공한다고 한다. JSTL(태그 라이브러리)는 JSP에서 자주 사용하는 forEach, include 등의 태그 문법을 포함하고 있으며 이..

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

문제 설명 정수가 담긴 리스트 num_list가 주어질 때, 모든 원소들의 곱이 모든 원소들의 합의 제곱보다 작으면 1을 크면 0을 return 하도록 solution 함수를 완성해주세요. 제한사항 - 2 ≤ num_list의 길이 ≤ 10 - 1 ≤ num_list의 원소 ≤ 9 1차 풀이 function solution(num_list) { function sum(acc, cur) { return acc + cur; } function multiply(acc, cur) { return acc * cur; } const squaredSum = num_list.reduce(sum) ** 2; const multiplied = num_list.reduce(multiply); return Number(mul..

토이 프로젝트에 scss를 적용했는데 전역 스타일 적용 후 빌드 할 때 에러가 났다. 먼저 나는 vue2 (vue@2.6.14) 버전을 이용중. 여기서 전역 스타일 설정이란, 매번 스타일 영역에서 scss파일을 import하지 않고 사용하는 설정을 말한다. scss 설치 npm install --save-dev node-sass sass-loader 위와 같이 설치하고, 아래와 같이 전역 설정을 해주자. vue.config.js module.exports = { ... css: { loaderOptions: { sass: { data: ` @import "@/assets/scss/_variables.scss" ` } } } } 그리고 빌드. ValidationError: Invalid options ob..

자바스크립트로 복사한 내용을 가져오거나 복사하는 방법에 대한 포스팅이다. 만들고 있는 토이 프로젝트에 클립보드 내용을 가져오는 코드가 있었는데 이젠 다른 방법을 사용하게 되어서 적어놓으려고 한다 😃 다음에 언제 쓰일 지 모르니까... 클립보드 복사하기, 붙여넣기 방법은 두 가지가 있다. 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 누적..

스크롤 바 커스텀 디자인 하기. 원하는 색상 또는 효과를 준 다음 스타일 태그 안이나 css 파일에 넣어 두면 된다. Result

인강을 들으면서 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이 두 개 나와있는데, 여기서 다음 표를 참고하여 정렬 기준을 바꿔서 데이터..