윤개발

이번에 진행하는 프로젝트의 요구사항이 다음과 같습니다. gitlab에 public으로 Markdown(이하 md) 업로드 - 로그인 없이 볼 수 있는 페이지여야함 Vue에서 gitlab markdown을 로딩하여 보여줌 - gitlab 페이지 호출 이렇게 진행하면 다음과 같은 장단점이 있습니다. 장점 html을 수정할 필요 없이 바라보는 gitlab md 파일만 수정하여도 운영환경에 반영(재배포가 필요없음) 프로젝트 초기 자주 수정될 수 있는 Guide, Faq등은 md로 간단하게 표현 가능 단점 gitlab(또는 github) 에서 md를 가져오므로 정적파일을 로딩하는 것보다는 시간이 조금 더 걸림 md를 이용하다 보니 style 적용은 힘듬 Vue에서 Markdown을 불러오며 단점을 극복하기 위해 ..

필자의 경우 Axios를 이용해 서버에서 데이터를 변수에 넣고 그 데이터를 테이블로 보여주는 경우였다. # 이름 직책 팀 응답상태 {{ question }} 응답날짜 수정날짜 응답 수정 메일 전송 {{ index + 1 }} {{ line.name }} {{ line.position }} {{ line.teamName }} Loading... {{ text }} {{ line.responseDate != null ? line.responseDate.split('T').join(' ') : '' }} {{ line.modifiedDate != null ? line.modifiedDate.split('T').join(' ') : '' }} Edit 수정 요청 재전송

1. 하나의 클래스를 boolean 으로 적용하기 ... data() { return { previewFlag: false }; }, previewFlag가 true 값일때 hide 클래스가 적용된다. 2. 두개 이상의 클래스를 boolean으로 적용하기 previewFlag에 따라 어떤 클래스가 적용될지 다음과 같이 할 수 있다.

사용자가 email을 입력하는 input에서 벗어나면 자동으로 이메일 중복체크를 하도록 구현할 것이다. 1. View Email 이미 사용중인 이메일입니다. 이메일 형식이 다릅니다. @blur="함수명" 을 사용 : 포커스를 벗어나면(사용자가 input을 이탈하면) 자동으로 method가 실행된다. 2.Method async checkDuplicate() { //일단은 사용가능한 이메일로 true로 초기화 한다. this.availableEmail = true; //이메일 유효성을 검사한다. if (!validateEmail(this.email)) { //유효성이 틀리다면 data 값을 false로 한다. this.availableEmailForm = false; return; } else { this...

1.Axois 설치 백엔드의 api 호출을 위해 axios호출을 사용한다. npm i axios 2. API 폴더 & index.js 생성 api 구조화를 위해 methods에서 작성하지 않고 src 폴더 밑에 api 폴더를 만들고 index.js 에서 api 호출을 하게한다. index.js를 export 하는 구조로 사용하도록 한다. import axios from 'axios'; const instance = axios.create({ baseURL: 'http://localhost:8080', }); function registerUser(userData) { return instance.post('signup', userData); } export { registerUser }; axios ur..

email 성함 비밀번호 비밀번호 확인 직책 팀 이름 회원가입 1. View @ 는 v-on 과 같은 표현식이다. 폼 내부에서 버튼을 누르면 submit 이벤트가 form 으로 전송되고 v-on:submit이 실행된다. 이때 페이지가 새로고침되므로 .prevent를 통해 새로고침을 막고 methods의 함수롤 호출하게 한다. 2. Methods 이때 페이지가 새로고침되므로 .prevent를 통해 새로고침을 막고 methods의 함수롤 호출하게 한다. 함수를 구현하여 backend로 Axios 호출을 보내는 부분을 작성하면 된다.

1. vue.config.js 파일에 아래와 같은 내용을 추가한다. const path = require('path'); module.exports = { configureWebpack: { resolve: { alias: { '@': path.join(__dirname, 'src/'), }, }, }, }; 2.webpack.config.js 파일을 생성하고 아래내용을 추가한다. const path = require('path'); module.exports = { resolve: { alias: { '@': path.resolve(__dirname, 'src/'), }, }, }; 3. preferences > webpack 검색후 webpack.config.js 파일을 경로로 잡아준다. 3. 아래와..

NPM 은 Node Package Manager 이다. node 에서 사용하는 라이브러리들을 관리해준다. NPM의 장점 라이브러리 관리 측면에서 html에 직접 코드를 삽입하는 것 보다는 package.json을 통해서 관리하는 것이 보기 편하다. 라이브러리 설치 측면에서 웹에서 찾아서 넣는 것 보다 install을 통해 바로 받아오는 것이 편하다. visual studio code 또는 편집기에서 터미널을 실행한다. 설치가 잘 되어있는지 확인하기 위해 명령어를 입력한다. node -v //노드의 버전 npm -v //노드 패키지 매니저 버전 NPM 초기화 명령어 npm init 명령어를 입력하게 되면 프로젝트의 내용을 하나하나 설정할 수 있다. 모두 입력하게 되면 package.json 이 생성된다. ..

웹팩이란 프런트 엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러이다. 모듈 번들러란 자원들(HTML,CSS,JS,IMAGE)을 하나로 병합해주는 것을 말한다. 1. 임의 폴더 생성 2. npm init -y y:(기본 설정으로 하겠다는 옵션) 3. npm i webpack webpack-cli -D i: install 약자 -D --save-dev 개발용 옵션 4. npm i lodash lodash 설치 5. index.html 파일 생성 후 아래내용 붙여넣기 6. root dir에 src 디렉터리를 생성하고 안에 index.js 생성 후 아래내용 붙여넣기 function component() { var element = document.createElement('div'); /* lodash is..