여씨의 개발이야기

Nodejs설치하면 npm을 쓸 수 있음 npm이란 각종 웹 개발 라이브러리 설치 도우미로 'Node Package Manager'의 줄임말이다. npm으로 @vue/cli 설치할 수 있음 @vue/cli란 vue 프로젝트를 자동으로 빨리 생성해주는 라이브러리이며 프로젝트 생성은 vue create 프로젝트명 으로 할 수 있다. 프로젝트 구조 node_modules: 프로젝트에 쓰는 라이브러리들 src: 소스코드가 다 담기는 곳 public: html파일, 기타파일 보관하는 곳 package.json: 라이브러리 버전, 프로젝트 설정 기록하는 파일

vetur html css supports vue3 Snippets

yyyymmdd 포맷으로 오늘날짜 구하는 방법은 아래와 같다. getCurrentDate(){ var date = new Date(); var year = date.getFullYear().toString(); var month = date.getMonth() + 1; month = month

사내 프로젝트를 진행하던 중에, Thymeleaf 반복문을 이용해 작업하던 중에 행 번호를 넣어줘야하는 경우가 생겼다. 쿼리나 백단에서가 아닌 Thymeleaf에서 제공하는 기능으로 행 번호를 입력할 수 있지 않을까 하는 생각이 문득 들었다. Thymeleaf에서 반복문을 사용하는 방법으로는 th:each 속성이 있다. 같은 방식으로 사용하며 ${list}로 받은 것을 variable을 통해 하나씩 가져온다. 여기에 th:each의 두 번째 파라미터로 stat을 설정해서 반복의 상태를 확인할 수 있다. (파라미터명을 생략하는 경우에는 variableStat이 Default 값이 된다.) stat에는 여러가지 기능이 있다. - stat.index : 0부터 시작 - stat.count : 1부터 시작 - ..

Thymeleaf에서 html에 텍스트를 뿌려주고 싶을 때 두 가지 방법이 있다. 1. html 속성 내에 th:text를 이용하기 추가로 html태그가 포함됐을 경우에는 unescaped text를 출력해주는 th:utext를 사용한다. 2. 그대로 출력하기 [[${arrayItem.getVal}]]

이번 프로젝트에서 JSP가 아닌 Thymeleaf를 도입할 예정이라는 소식을 듣고 레퍼런스를 열심히 읽어보고 있다. 문서에 나와있는 내용들을 간단히 정리해보고자 한다. 1. Thymeleaf란? Thymeleaf란 자바 라이브러리이다. 이것은 XML/XHTML/HTML5 템플릿 엔진이며 애플리케이션에서 생성된 데이터 또는 텍스트를 표시하기 위해 템플릿 파일에 변환된 것을 적용할 수 있다. Thymeleaf의 주 목표는 템플릿을 만들 때 엘레강스하고 잘 구성된 방법을 우리들에게 제공하는 것이다. 이를 달성하기 위해서는 템플릿 내부 코드로 해당 로직을 명시적으로 작성하지 않고 DOM(Document Object Model)에서 사전 정의된 로직의 실행을 정의하는 XML 태그 및 속성을 기반으로 한다. 이 아..

요즘 weave scope 퍼블리싱을 하면서 jshint 오류를 계속 맞딱드리고 있다. (Weave Scope는 Docker 및 Kubernetes의 시각화 및 모니터링 도구이다.) 정리를 해두면 좋을 거 같아서 한 번에 정리해보겠다. 1. Script URL is a form of eval no-script-url Examples of incorrect code for this rule: /*eslint no-script-url: "error"*/ location.href = "javascript:void(0)"; location.href = `javascript:void(0)`; 2. Style prop value must be an object react/style-prop-object The is..

// async & await // clear style of using promise :) // 1. async async function fetchUser() { // syntactic sugar : promise 대신 async 한 단어만 넣으면 promise 기능 완! // do network reqeust in 10 secs.... return 'jisun'; } const user = fetchUser(); user.then(console.log); console.log(user); // 2. await ✨ function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function getApple() ..

Promise is a JavaScript object for asynchronous operation. - State: pending -> fulfilled or rejected - operation이 수행중일때 pending 상태 - operation 성공시 fulfilled / 실패시 rejected - Producer vs Consumer // 1. Producer // Promise는 클래스기 때문에 new로 생성 // 성공시 resolve(), 실패시 reject() // when new Promise is created, the executor runs automatically. // promise는 생성하는 순간, executor에 의해 자동으로 돌아가게 되어있음 const promise ..

요즘 회사에서 Vue.js 기반으로 한 웹 솔루션을 제작중인데 아무래도 Vue에서 권장하는 HTTP 통신 라이브러리가 axios여서 그런 지 솔루션에서도 axios를 이용해 api 통신을 하고 있다. 그러다 오늘 문득, Ajax와 Fetch, axios 이 세가지 통신 라이브러리에 대한 개념 정리가 필요하다는 생각이 들었다. 먼저 XMLHttpRequest(XHR)로 기반으로 제작된 Ajax에 대해 알아보자. 1. Ajax ajax란? Asynchronous javascript and xml의 줄임말로 직역하자면 비동기식 자바스크립트와 xml을 말한다. 자바스크립트를 이용한 비동기 통신으로, 클라이언트와 서버 사이에서 xml형태의 데이터를 주고받는 통신방법을 의미한다. jQuery에서 제공하는 $.aja..