전체 글
-
v-if와 동적ui모달창 만들기Vue.js 2022. 7. 12. 13:25
모달창은 항상 모달창 ui를 미리 만들어놓고, 숨겼다 보여줬다만 해주면된다. 그래서 먼저, 모달창 ui를 만들어보자. 상세피이지 상세페이지 내용 body { margin : 0; } div { box-sizing: border-box; } .black-bg { width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: fixed; padding: 20px; } .white-bg { width: 100%; background: white; border-radius: 8px; padding: 20px; } 이런 식으로, 모달창을 만들어주고, 이제, 1. ui 현재상태를 데이터로 저장을 해주고, 2. 데이터에 따라 ui가 어떻게 보일지 작성해주면 된다..
-
이벤트 핸들러로 click감지Vue.js 2022. 7. 12. 03:07
허위매물신고 신고수 : 0 이렇게 버튼을 만들어서 버튼을 누르면 신고수가 올라가게끔 만들 때, 원래는 onClick를 사용했다. 하지만 vue에서는 v-on:click=" " 또는 @click=" "를 사용할 수 있다. 먼저, 신고수의 숫자는 중요한 숫자이므로, data() {//데이터 보관함 return { 신고수 : 0, 메뉴들 : ['Home','Shop', 'About'], products : ['역삼동원룸', '천호동원룸', '마포구원룸'], prices : [50, 60, 70] } }, 이렇게 신고수라는 데이터를 만들어주고, 허위매물신고 신고수 : {{신고수}} 이런 식으로, 데이터바인딩을 해준다. 그리고 이제, 옛날 방식으로 하면 버튼을 누르면 숫자를 찾아서 +1을 해주고, +1된걸 HTM..
-
v-for반복문Vue.js 2022. 7. 11. 13:19
vue에서의 반복문은 v-for 굉장히 간단하다. 반복할 태그안에 v-for="작명 in 반복할수"를 적어주면 된다. 그리고 그 옆에 :key="작명"을 적어주면 된다. Home 이렇게 적어주면 생성된다. 근데 이러면, Home만 3개가 생성되므로, data에 오브젝트데이터를 넣어서 반복문에 오브젝트를 넣어 오브젝트 자료의 갯수만큼 반복하게 해주면 된다. {{a}} data() {//데이터 보관함 return { 메뉴들 : ['Home','Shop', 'About'], products : ['역삼동원룸', '천호동원룸', '마포구원룸'], prices : [50, 60, 70] } }, 이렇게, 오브젝트 이름을 써주면 작명한 i가 오브젝트의 데이터가 된다. 따라서 {{ a }}라고 써주면 오브젝트내의 갯..
-
vue의 데이터바인딩 문법Vue.js 2022. 7. 6. 13:51
html에 꽂아넣는 데이터바인딩 문법을 알아보자. xx 원룸 {{price1}} 만원 xx 원룸 {{price2}} 만원 vue에는 데이터 보관함이 있는데, script태그안에 export default안에 data () { return {} }안에 데이터를 오브젝트 형식으로 넣어주면 되며, 사용할 땐, {{ 키값 }} 이렇게 중괄호 2개에 데이터이름만 적어주면 된다. 이렇게 {{ 데이터바인딩 }}을 하는 이유는 vue가 실시간 자동 렌더링을 하기 때문이다. 데이터바인딩은 그래서 실시간으로 변경되는 데이터들을 쓴다. 그리곤 속성도 데이터바인딩이 가능하다. 데이터보관함에 이름 : '속성'을 쓰고, html에 :style="데이터이름" 이런 식으로 :을 써주면 된다.
-
Vue 개발환경 셋팅Vue.js 2022. 7. 5. 13:01
vscode 터미널에 npm install -g @vue/cli //또는 yarn global add @vue/cli 이렇게 입력해서 우선 vue를 설치해준다. 그리곤, Extensions버튼을 눌러서 에디터 부가기능을 설치해준다. vetur과 html css support, vue 3 snippets 를 설치해준다. 그리고, 터미널에 vue create 프로젝트명 을 써서 프로젝트를 만들어준다. 이렇게 만들어진 폴더를 vscode로 오픈하고 코딩을 시작해주면 된다. 그리고 미리보기를 띄우고 싶으면 터미널에 npm run serve 를 입력하면 된다. 메인페이지는 App.vue가 된다. 만약, build를 하려면 npm run build를 해주면 된다.
-
1장 koa사용해서 웹서버 만들어보기백엔드기초 다져보기 2022. 7. 4. 21:58
koa란? Node.js에서 가장 인기있던 웹 프레임워크인 Express.js개발팀이 만든 웹 프레임워크로 Express보다 Koa는 가볍고 async / await 기능을 편하게 사용할 수 있다. 이제, koa를 설치해보자. 웹 서버프로젝트를 위한 디렉토리를 만들고, 해당 디렉토리에서 yarn init을 통해 패키지 정보를 생성하고, koa를 설치해준다. $ mkdir heurm-server $ cd heurm-server $ yarn init $ yarn add koa 먼저, 서버를 여는 방법을 알아보면, src폴더에 index.js파일을 만들어서 const Koa = require('koa'); const app = new Koa(); app.use(ctx => { ctx.body = 'Hello ..
-
1회차쿠팡코딩챌린지 2022. 6. 30. 19:47
쿠팡코딩 챌린지를 시작했다. 한참 기본 문법을 공부했고, 더 알아가고 싶지만, 어떤 챌린지를 하면서 사람들의 인사이트나 경험을 얻고싶었던 난 쿠팡코딩 챌린지를 발견했고, api에 a자도 몰랐지만 리액트는 알자나! 라는 마음에 시작했다. 1회차 미션은 로그인을 위해 필요한 Data Fetching 모듈을 만들어볼 것입니다. 주어진 Interface에 맞게 Class 및 Function들을 만들어보며 지속가능한 모듈 설계와 프론트엔드에서의 객체지향에 대해서 고민해봅니다. 라는 간략한 두 줄 이었고,.. 역시 처음엔 너무나 막막했다. 먼저 타입스크립트, 리액트쿼리, next.js 중에서 내가아는건 타입스크립트 밖에 없어서 공부를 했다. 그리곤, 깃허브에서 저장소를 클론해서 미션을 수행하기 시작했다. 내가 할 ..
-
git 기초Git 2022. 6. 27. 23:19
git add . git commit -m "수정한내용" 현재 내용을 기록하려면 위처럼 입력해서 git에 add해주고 .대신 파일명을 입력해서 add해줄 수 있다. (.을 쓰면 모든 파일 add) 그리고 commit으로 메모를 남길 수 있다. 과정을 보면 add를 하는 작업은 staging(스테이징)이라고 하며, Staging area에 저장된다. 그리곤 commit을 해주면 repository저장소에 저장된다. git push origin main 그리고 git diff를 입력해서 j/k 로 스크롤조작을 하고 q로 종료를 할 수 있는, 추가한 것과 삭제한 것들을 볼 수 있다. 근데 엔터까지 감지하므로 쓰레기같아서 git difftool을 입력하는게 훨 낫다. 그리고 git difftool 커밋아이디를 ..