분류 전체보기

노션을 꾸미는 중 디데이를 표시할 수 있는 위젯이 있었으면 좋겠다 싶어서 만든 간단한 노션 디데이 위젯입니다.복잡한 부분 다 빼고 가장 심플하게, 그리고 예쁘게 만들었습니다 :) Miny 디데이 위젯 살펴보기  위젯은 대시보드 오른쪽에 위치하고 있습니다. 노션을 접속할 때마다 업데이트 되어 디데이를 계산해줍니다.  크기 조절이 자유로워 다양한 곳에 삽입할 수 있습니다.또한 기본적으로 시스템 테마를 따라가기 때문에 다크모드에서는 밝은 폰트 색상으로 변하고, 라이트 모드에서는 어두운 색상이 됩니다. Miny 노션 디데이 위젯 만들기사용 방법은 간단합니다. 디데이 설정을 위한 몇 가지 정보를 위젯 주소창에 포함시키면 됩니다.데이터 키설명필수 여부기본값date디데이 날짜 ("YYYYMMDD" 형식으로 입력)O ..

간단한 토이 프로젝트 관리를 위한 개인용 템플릿입니다.이슈를 쉽게 관리하고 추적할 수 있으며, 이 페이지를 프로젝트 문서로 활용할 수도 있습니다 :) 실제로 저는 토이 프로젝트를 진행할 때 해당 템플릿을 많이 이용합니다.최소한의 기능만을 넣어 간단하게 만들어 두었으니, 주요 기능 뿐만 아니라 다양하게 확장해서 사용할 수 있습니다. 템플릿 복제하기아래 링크를 통해 템플릿으로 이동한 후 우측 상단의 복제 아이콘을 눌러 템플릿을 복제할 수 있습니다. https://youngdev57.notion.site/121d65b31f8680c3a682d22bbe288b68 토이 프로젝트 | Notion@minyyoungdev57.notion.site 템플릿 소개프로젝트 및 기능에 대한 개요를 포함하고 있습니다. 깃허브 ..

현재 스프링부트 프로젝트에서 프론트엔드 개발을 하고 있다. 프로젝트 특성상 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(); } 에러 ..