Front-End

Front-End/Vue.js & Nuxt.js

[Vue.js] Vue cli로 Vue.js 프로젝트 생성하기

vue cli 공식 사이트https://cli.vuejs.org/ Vue CLI cli.vuejs.org node, npm 버전 확인node, npm 버전을 확인하고, 없으면 설치해야한다.node -vnpm -v vue cli 설치npm install -g @vue/cli vue 프로젝트 생성vue create  vue 프로젝트 실행npm run serve

Front-End/Vue.js & Nuxt.js

[Vue.js] 기본 문법 알아보기 / Vue 인스턴스, 컴포넌트 / Vue 디렉티브

Vue 인스턴스: new Vue()new Vue()로 생성한 Vue 인스턴스는 화면에 뿌려지는 최상위(Root) 컴포넌트를 말한다. 해당 Vue Instance에서 여러 컴포넌트를 호출에서 사용하는 것이 Vue의 기본 문법이다. 아래의 5가지 요소들을 가장 많이 사용한다.el: '#app'Vue 인스턴스가 관리할 DOM 요소를 지정한다. 위쪽에 id=app인 에 Vue 인스턴스를 연결한다.해당 Vue 인스턴스는 위에 id=app인 태그만을 관리한다.dataVue 인스턴스에서 관리할 데이터를 정의한다.  {{ message }}  message란 이름의 데이터를 Vue 인스턴스 내에서 this.message로 사용 가능하고, DOM 요소에서는 {{message}}로 가..

Front-End

[Mock Rest API] jsonplaceholder 소개 (REST API 테스트용 가상 데이터 제공 사이트)

해당 사이트에 정말 쉽고 편하게 설명되어 있기 때문에, 기록용으로 쓰는 글입니다.프런트엔드 쪽은 처음 공부해 보는데 정말 편리한 사이트들이 많네요...(이게 말로만 듣던 javascript 생태계..?) jsonplaceholder.typicode.comhttps://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API{JSON} Placeholder Free fake and reliable API for testing and prototyping. Powered by JSON Server + LowDB. Serving ~3 billion requests each month.jsonplaceholder.typicode.com  위의 사이트..

Front-End/Vue.js & Nuxt.js

[Nuxt / axios] axios 사용법 / require() of es module 에러 해결 방법

axios 사용법axios를 import 하고, async - await와 함께 axios.get을 사용했다.axios base-url을 설정하는 방법 / import 없이 사용npm install @nuxtjs/axiosnuxt.config.jsmodules: [ '@nuxtjs/axios', ], // Axios 설정 axios: { baseURL: 'http://localhost:8080', // 기본 URL 설정 },export default { async created(){ const response = await this.$axios.get('/blog/happyhsryu/posts'); console.log(response); }} 이렇게 하면 require(..

Front-End/Vue.js & Nuxt.js

[Nuxt / Vue] Nuxt 프로젝트 생성하기

개발환경 세팅개발환경 구성ChromeVSCodeVue.js DevTools (크롬 extention)Node.jsnpmVSCODE extentions파일 아이콘 테마 : Material Icon Theme뷰 확장 플러그인 : Vetur뷰 코드 스니펫 : Vue VSCode Snippets문법 검사 : ESLint, Prettier, ES6 String HTML실습 환경 보조 : Live Server프로젝트 생성원하는 위치에 폴더 하나 만들고, VSCode로 열어서 터미널을 켜주고 아래 명령어를 입력한다.npm init nuxt-app@latest  axios 설치npm i axios

Front-End/Web Views

[JSP] JSP, 자바 웹프로젝트 환경설정 (IntelliJ, gradle, Tomcat)

1. Tomcat 설치 1) 구글에 톰캣 검색 2) Download 3) 운영체제에 맞게 다운로드 이후에 IntelliJ에서 프로젝트 생성 시 Tomcat 다운로드 압축 푼 파일 위치를 지정하면 된다. 2. 프로젝트 생성 Jakartta EE ( Java Enterprise, Java EE와 같습니다.) Tomcat 설치 후 서버 설정 (Application server) Gradle 선택 JDK 선택 (1.8 또는 11 추천) (Next) Jakarta EE(Java EE) 버전 선택 디폴트 dependencies로 Servlet 만 선택되어 있음 3. UTF-8 설정, Annotation Processor 설정 File - Setting - Annotation Processor 검색 - Enable ..

Front-End/Web Views

[JSP] JSP 간단 정리

JSP란? JSP는 Java(Jakarta) Server Page로, HTML 내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹페이지를 생성하는 서버사이드 스크립트 언어이다. 스프링 MVC 구조에서 V(view) 역할을 담당한다. Thymeleaf라는 새로운 기술이 등장하며 Spring에서는 Thymeleaf 사용을 권장하지만 JSP가 이전에 사용되었던 기술이고, 쉽고 빠르다는 장점 때문에 아직도 많이 사용된다. JSP는 실행 시에 내부에서 자바 서블릿으로 변환되어 실행된다. HTML 표준에 몇 가지를 추가하여 HTML에서 자바 코드를 실행하고, 그 값을 이용할 수 있게 된다. JSP를 사용하려면. html이 아닌. jsp로 파일로 만들고, html처럼 사용하면 된다. 간단하게 사용법을 알아보자. JS..

Front-End/Web Views

[Thymeleaf] 기본 문법 (연산, 반복, if, 블록)

연산 1. 산술 연산 2. 비교 연산 > , gt (greater) = > ge (greater or equal) = >= lt (little) =

HSRyuuu
'Front-End' 카테고리의 글 목록