여씨의 개발이야기

코딩애플 강좌 듣는 도중 문제가 생겼다. 강좌 내용을 응용하여 반복문을 이용한 div 내에 img 태그를 삽입하려는데, 이 때 변수를 이용해 다양한 이미지를 삽입하고 싶었다. before 처음 시도. :src를 입력한 뒤에 데이터 바인딩을 이용해 반복문의 키값을 넣어주려 했다. 결과는 실패. GET http://localhost:8080/img/assets/room0.jpg 404 (Not Found)라는 에러가 뜨며 모두 엑박이 떴다. {{item}} 가격은? 허위매물신고 신고수 : {{report[i]}} after 이런저런 방법을 찾아본 결과, require를 이용하면 변수를 사용할 수 있다고 한다. 그래서 다음과 같이 작성해보았다. {{item}} 가격은? 허위매물신고 신고수 : {{report[..

해당 에러는 위와 같이 v-for를 사용했을 때 나는 에러이다. v-for를 사용할 경우에 키값도 같이 지정을 해줘야 한다. 그렇기때문에 아래와 같이 수정하였다 {{p}} 가격은?

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() ..