Frontend

현재 스프링부트 프로젝트에서 프론트엔드 개발을 하고 있다. 프로젝트 특성상 JSP 파일 위에서 자바스크립트를 이용한 화면 구현을 할 수 밖에 없는데 예전부터 매우 불편하게 사용해 왔던 JSP 내에서 템플릿 리터럴을 사용하는 방법에 대해 글을 써보려고 한다.이 글에서는 템플릿 리터럴에 대한 설명과 JSP의 EL, 구문 중첩 현상, JSP 동작 원리 내용까지 가볍게 포함하고 있습니다.템플릿 리터럴(Template literals)이란?템플릿 리터럴은 이중 따옴표나 작은 따옴표 대신 백틱(` `) (grave accent) 을 이용한 내장된 표현식을 허용하는 문자열 리터럴이다.표현식을 넣을 때는 $와 중괄호( $ {expression} ) 로 표기할 수 있다. 자세히 알아보기 한마디로 문자열 안에서 표현식을 ..

항상 javascript로 개발을 할 때는 함수의 매개변수에 기본값을 명시적으로 적어주려고 노력했다. 실무에서는 객체나 배열 등의 요소를 함수에 자주 전달하고, 그에 대해 내장 메소드나 객체 내 필드값을 이용하는 데이터 처리가 많았기 때문이다.하지만 오늘 개발을 하다가 조금 당황스러운 상황을 마주했다. 함수의 인자로 null이 넘어갔는데 기본값 처리가 되지 않아서 로그를 찍어봤는데도 당연히 null로 나왔다. 나는 인자의 값이 undefined 또는 null 일 때 기본값 처리가 된다고 생각을 했고, 지금까지의 모든 개발은 그렇게 해왔는데 null은 기본값 처리에 포함되지 않는다니...?이슈 내용const func = (value = "") => { console.log(value)}func(); ..

리액트 강의를 보며 공부한 내용을 정리 및 작성한 글입니다. 1편: https://youngdev57.tistory.com/102 React 기초 그리고 입문리액트 강의를 보며 공부한 내용을 정리 및 작성한 글입니다.      리액트의 기술적인 특징리액트의 기술적인 특징은 세 가지가 있다. 1. 컴포넌트 기반으로 UI를 표현한다.컴포넌트(Component)youngdev57.tistory.com    React Hooks리액트 훅이란 클래스 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있도록 하는 메소드이다.(위의 useState(), useRef()도 리액트 훅이다.)훅들의 특징은 use 라는 접두사가 붙는다. (예를 들어 useEffect(), useReducer() 등)조건문과 반복문 내부에서..

리액트 강의를 보며 공부한 내용을 정리 및 작성한 글입니다.      리액트의 기술적인 특징리액트의 기술적인 특징은 세 가지가 있다. 1. 컴포넌트 기반으로 UI를 표현한다.컴포넌트(Component)란 말 그대로 화면을 이루는 "구성 요소"를 뜻한다. 아래에 자세한 설명을 포함한다.프로젝트의 사이즈가 점점 커지고 페이지가 많아질수록 코드를 수정하기 어려워지는데이렇게 중복되는 코드들을 컴포넌트화하여 제거하면 유지보수 차원에 용이하다는 이점이 있다. 2. 화면 업데이트에 대한 구현이 쉽다.화면 업데이트란 쉽게 말해 사용자의 행동에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용하는 것이다.리액트는 과정을 생략하고 목적만 간결히 명시하는 방법인 선언형 프로그래밍 방식으로 동작하고,자바스크립트는 목적을 이루기..

스프링 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..