JavaScript
-
Javascript ES6 스프레드 연산자JavaScript 2021. 7. 25. 18:59
스프레드 문법(Spread syntax) ... 은 하나로 뭉쳐져 있는 여러 값들의 집합을 펼쳐서(전개하여, 분산하여) 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, Dom컬렉션(Node List, HTMLCollection), arguments처럼 for ...of 문으로 순회할 수 있는 이터러블에 한정 console.log(...[1,2,3]); // 1 2 3 이터러블인 배열을 펼쳐서 1 2 3 을 출력한다. 이때 1 2 3 은 값이 아니라 값의 목록이다. 스프레드 문법의 결과는 값이 아니다. 따라서, 스프레드 문법의 결과는 변수에 할당 할 수 없다. 공부해야 할 것 1. 스프레드 연산자 this.리스트.push(...info)..
-
DOM에서 event 다루기JavaScript/ReactJS 2021. 5. 3. 17:59
DOM요소에 클릭이벤트를 걸어 사용할 때, 종종 event.preventDefault(); 를 걸어줄 때가 있다. 클론코딩을 하며 클릭 이벤트마다 저 함수를 써주는지 궁금해서 DOM의 event에 대해 찾아 보게 되었다. 이벤트 버블링은 이벤트를 건 노드의 부모까지 이벤트가 전파되는 것이다. 위의 이미지를 참고해보면 태그에 내가 작성한 이벤트가 , .... 루트 노드까지 올라갈 수 있다는 것이다. 그렇게 되면 각각의 노드마다 다른 이벤트를 실행해야할 때, 이벤트가 엉킬 수 있다는 것이다. event.stopPropagation(); 을 사용하면 내가 지정한 노드에 걸어놓은 함수만 실행이 된다. 어떤 태그들은 클릭 이벤트 이외에 브라우저의 이벤트를 조작하는 경우가 있다. 태그의 경우, 클릭이벤트와 href..
-
🚨 array.filter의 값이 undefined로 나올 때!JavaScript 2021. 4. 22. 17:42
const selectedCode = this.list.find(e => e.code === this.data); 데이터 옵션에 정의된 this.data와 e.code이 같은 list의 요소를 찾으려고 할 때, 이렇게 filter함수를 사용했다. 그런데 selectedCode가 계속 undefined로 떴다. MDN에서 테스트를 해보았을 때도 문제 없이 잘 나왔다. 검색해본 결과, 화살표 함수에서는 this가 참조하는 대상이 다르기 때문이라고 했다. const temp = this.data; const selectedCode = this.list.find(e => e.code === temp); ✔ 대상 데이터를 새로운 변수에 담아 그 참조값으로 비교하였다! 정처기 실기 시험이 끝나면 this에 대한 공..
-
community-app 클론 코딩JavaScript/Vue.js 2021. 1. 3. 16:03
🧀 named router view 동시에 두 개 이상의 컴포넌트를 표시해야 할 때 사용한다. router-view에 name을 등록할 수 있다. 등록하지 않으면 기본적으로 default를 name으로 사용한다. 📍 App.vue name="header" 을 에 태그에 등록한다. name이 등록되지 않은 router-view는 default가 등록된다. 📍 route-index.js 하나의 patht에 components components로 두 개의 컴포넌트를 등록한다. export default new Router({ routes: [ { path: '/', name: 'PostListPage', components: { header: () => import('@/components/AppHeader..
-
memo-app 클론코딩 2JavaScript/Vue.js 2021. 1. 1. 00:40
🥥 REST API, Ajax, axios 🥝 REST ( Representational State Transfer ) http uri를 통해 자원을 명시하고, http methods(post, get, put, delete)를 사용해서 자원에 대한 CRUD를 구현한다. 서버와 클라이언트 사이의 통신 방식 중 하나로 http 프로토콜을 그대로 사용한다. # REST 구조 1. 서버와 클라이언트 구조 서버는 api를 제공, 클라이언트는 사용자 인증 또는 세션, 로그인 정보 등을 직접 관리한다. 2. 무상태 클라이언트의 세션, 쿠키 등을 서버에 저장하지 않는다. 서버는 각각의 요청이 별개의 것으로 인식하고 처리한다. 3. 캐시 처리 가능 웹 표준 http 프로토콜의 캐싱을 그대로 사용 할 수 있다. 캐시를 ..
-
memo-app 클론코딩 1JavaScript/Vue.js 2021. 1. 1. 00:39
🌮 props 속성 props 속성은 부모 컴포넌트에서 자식 컴포넌트로 단방향으로만 바인딩(전달)되는 데이터를 말한다. String, Number, Boolean, Array, Object, Date, Function, Symbol을 전달할 수 있다. 변수를 할당하게 되면 props를 동적으로 할당 할 수 있게 된다 🍀 단방향으로만 바인딩 부모 컴포넌트에서 속성이 변경되면 자식 컴포넌트에 전달이 되지만, 자식에서 변경된 데이터는 부모 컴포넌트에 전달되지 않는다는 뜻이다. 부모 컴포넌트가 업데이트 될 때마다 자식 요소의 모든 props들이 최신 값으로 새로고침이 된다. # 부모 컴포넌트 # 자식 컴포넌트 props: ['memo'] 🍀 props를 변경 할 수 있는 두가지 예시 1. props는 초기 값만..
-
크롬 앱, momentum 클론 코딩JavaScript 2021. 1. 1. 00:37
퇴사 전에, 프론트엔드 프리랜서 분께서 니콜라의 클론코딩을 추천해주셨다. 신입이면 클론코딩 해보는 것 만으로도 배우는게 많을 것이라며 구직활동 쉬는 동안 해보라고 하셨다. 책만 읽는 것보단 실제로 코드를 쳐보는게 좋은데, 기획이나 디자인이나... 그런 것 신경 쓰다 보면 프로젝트가 엄청 밀릴게 뻔했다. 그래서 하루에 동영상 10분짜리... 하나씩이라도 하자! 하고 시작한 구글 크롬앱 클론코딩이다. css는 완벽하진 않지만, 기능만큼은 똑같이 구현이 되었다. 나중에 css를 다시 공부 할 때, 여기에도 적용을 해봐야 할 것 같다. 🥨 console.log( )와 console.dir( ) console.log(object) : 콘솔에 메세지를 보여줌 & html과 같은 트리 구조로 출력 console.di..
-
vue.js 하면서 배운 것JavaScript/Vue.js 2021. 1. 1. 00:26
v-for 반복문 돌릴 때 유의할 점 v-for를 돌릴 때에 스코프 잘 잡아야함 li를 반복 시켜야 하면 vfor의 기준을 li로 잡아야 한다. ul로 잡으면 반복시켰을 때 ul-li가 같이 돌아서 css가 짜부러진다. 데이터가 바뀔 때 마다, 작동해야하는 라이브러리들의 타이밍 created() {}, mounted() {}에서 데이터가 아직 바인딩이 되지 않았다면 watch: {}에서 데이터 변화를 감지 시켜서 바인딩 시킨다. int 숫자, string '숫자' 변환하기 서버에서 보내주는 숫자의 타입을 잘 확인한 뒤에 클라이언트에서 보여 줄 형식으로 함수들을 잘 사용한다 parseInt(string'숫자') 스트링 -> 인트 변환 '12,900' > 12900..