일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
- Vue
- ES6
- react
- jsx
- Vue transition
- MySQL
- TypeScript
- event
- 자료구조
- HOC
- State
- App.vue
- Vue.js
- v-html
- 댓글달기
- sass
- 자바스크립트
- webpack
- scss
- input
- storybook
- 쉬운설명
- nodejs
- CSS
- JavaScript
- Wecode
- mapGetters
- vuex
- 리액트
- express
- Today
- Total
목록분류 전체보기 (238)
익명의 개발노트
1. 일반 css사용 우리가 아는 일반적인 css 이다. 단점은 재사용성에 불리하고, 빌드시 css가 하나의 파일로 합쳐지기 때문에 클래스 네임이 중첩되면 css 가 꼬여버린다. 2. css-module사용 리액트에서 css파일은 하나로 합쳐지기 때문에 클래스 네임이 같으면 css가 꼬여버리기 때문에 모듈시스템을 사용하면, 클래스 네임이 중첩되어도 css는 꼬이지 않는다. [fileName].module.css 로 이름을 짓는다. import React from 'react'; import style from './Button2.module.css'; function Button({size}){ if(size === 'big'){ return 큰 버튼; }else{ return ( 작은 버튼; ) } }..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bPxMMo/btqyzdGlv7K/kk8LqRUKbvgXIaTAW8cck0/img.png)
1.image import error처리 뷰에서 컴포넌트에서 sass, css 사용시 img src=""경로주소를 입력해도 화면에서 안 뜨고 에러가 나는 경우가 있다. This relative module was not found: ~~~~ 다른 곳에는 나오는데 해당페이지에서 계속 에러가 나는 경우 아래와 같은 방식(~@)으로 해결 할 수 있다. src="~@/assets/images/popup-wallet.svg" 2.multi button event handler 위와 같이 각각의 버튼 클릭시 열렸다가 닫히는 기능을 구현하고자 할때 어떻게 이벤트를 처리해야하나?? 멀티 인풋처럼, 네임을 지정해줘서 처리를 해야하는가?? 통상 토글이벤트 구현시, 단일은 script부분에서 data에 button: fal..
보통 하나나 두 개 이상의 비동기 작업을 순차적으로 실행해야 하는 상황을 흔히 보게 되고, 순차적으로 각각의 작업이 이전 단계 비동기 작업이 성공하고 나서 그 결과값을 이용하여 다음 비동기 작업을 실행해야 하는 경우를 의미하 는데 이런경우 프로미스 체인을 사용한다. 작성 순서대로 앞에 작업이 끝나면 실행 된다. 내가 업무에서 사용한 내용을 예로 들면, 하나의 작업이 끝난 다음에 실행될 수 있도록. static example(){ return new Promise(function(resolve,reject){ backendAPI.getWallet(function(res){ (..생략) this.test(); resolve(); },function(err){ (..생략) }) }) } static test(..
1. new Promise( function(resolve, reject)) 패턴 프로미스를 사용할때는 2가지 패턴이 있다. new Promise(function(resolve, reject)){}, Promise.resolve(function()) 에러처리를 할때 reject를 처리하냐 안하냐에 따라서 위의 두가지 방법중 하나를 선택하면 좋을 것 같다. 우선 백엔드에서 가져 온 값이 프로미스 기반이기때문에 A->B->C 로 전달해서 써야하는 상황이 왔다. C는 뷰를 담당하는 화면이고 , A,B는 비지니스 로직단이다. 따라서 C는 vue파일로 되어있고, A,B는 js파일로 구성되어 있다. A->B로 전달 클로져로 전달 받았는데, B에서 C로 갈때 그냥쓰면 undefined가 뜬다. C에서는 우선 프로미스..
1. textarea 입력내용이 브라우져에서 줄바꿈이 안되서 나오는 이슈가 있다. 우선 textarea의 값을 확인 후 replace를 통해서 값을 바꿔 주어야 한다. 1) 정규표현식을 이용한 replace를 적용한 방법 this.invitation.message.replace(/(\n|\r\n)/g, ' '); 2) 일반 메서드 적용한 방법 this.invitation.message.split('\n').join(' '); 단순히 위의 내용만 작성하면 반영이 안된다. 기존 메세지 값에 오버라이드 해주어야 정상작동한다. this.invitation.message = this.invitation.message.replace(/\n|\r\n/g,' '); 2. 선택 창이 위아래로 나누어진 경우 위의 선택값에..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dFxpV3/btqybfLZg09/tVhYwRMg2Lyty6RF0Mknl1/img.png)
1. 중복체크 방지 자바스크립트로 위 함수와 같이 작성할 수 있지만, Vue에서 아래와 같이 코드가 있을때, 중복체크를 방지하려면 v-model="checkCrypto" 부분을 넣어주면 된다. data부분에 checkCrypto : false로 명시해서 작성하면 됨. 2. input창 글자수 제한 input 속성에 maxlength명시해주면 된다. 3. v-if문 사용법 리액트에서는 this.state의 값에 따라서 값을 변하게 하는 반면, 뷰에서도 약간은 비슷하지만, html부분에서 더욱 직관적으로 표시가 가능하다. 코드의 깔끔함은 리액트가 더 깔끔한 듯 싶지만, 직관적인거는 뷰가 더 직관적인듯 싶다. v-if라는 조건을 만들어서 data(리액트의 state와 비슷)에 isClickShowPasswor..
1. 깃 stash 깃 stashing은 작업 중에 깃의 변동사항으로 pull을 받거나 갑자기 push를 할 경우에 내가 현재 작업하고 있는 내용을 커밋하는게 아니고 로컬에 잠시 저장하는 기능이다. 에디터에서도 stash기능을 지원해준다. stash를 할때는 메세지를 입력하게 되어있고, 나중에 꺼내올때 이 메시지를 기준으로 꺼내온다. git stash //로컬에 저장 git stash pop //저장된거 꺼내기 git stash list // stash에 저장된 목록 보기 stash를 한 후에 git status를 보면 기존에 작업하고 있던 값들이 보이지 않을 것이고, pop을 하면 보일 것이다. 2. 이미 깃에 노드 모듈이 올라가있는 경우. 윈도우, 맥-리눅스 포함하여, 노드 모듈이 다르다. 운영체제 ..
Vue의 특성 중 하나는 배열의 변경을 감지하여 DOM을 업데이트 한다. 금일 삭제기능을 구현 중에 애먹은 내용을 적어본다. 먼저, 현재 유지보수하고 있는 뷰의 코드 대부분 객체 지향으로 구성이 되어있다. NewAddress.vue 페이지에서 - 버튼을 누르면 해당 돔의 내용이 삭제 되게 끔 구현하려한다. 통상은 data()부분에 배열이 구성되어있어야 하나, 그렇지 않았다. 구조는 페이지에서 -버튼 누르면, 해당 객체의 주소값이 파라미터값으로 버튼클릭 이벤트 핸들러안에 들어가게 구현을 한 후 실제 삭제, 추가하는 파일(Contact.js)에 주소값을 넘겨주어 삭제하는 구조로 되어있다. 삭제까지는 잘 구현했는데, 돔이 리랜더링 되지않은 문제점이 발생한다. 내용이 삭제되면 보이는 UI도 리랜더링을 통하여 삭..
1. promise란?? 사전적의미는 약속이다. 오브젝트 안에 오브젝트를 포함하는 자바스크립트 오브젝트의 특별한 형태이다. 프로미스에 접근할 수 있는방법은 .then()을 통해서 접근할 수 있다. function getFirstUser() { return getUsers().then(function(users) { return users[0].name; }); } 프로미스가 미래 시점의 데이터를 위한 것이고, 프로미스를 가지고 있기만 하면, 그 데이터가 미래시점인지 현재인지는 상관없다. why?? then을 통해서 부르기만 하면 되는 것임. 프로미스를 사용한다는 것은 비동기함수가 될꺼야, 라는 것을 의미한다. 그래서 리턴값을 지금 사용하든지, 아니든지, 나는 비동기함수야의 의미가 된다. 프로미스 특징은 ..