전체 글
-
2023년을 어떻게 지냈나 생각정리카테고리 없음 2024. 1. 27. 19:47
올해 크게 있었던 이벤트들은 1. 다시 고향으로 돌아왔고 2. 잘 다니던 회사를 퇴사했고 3. 새로운 친구들을 많이 정말 많이 사겼고 4. 영어 공부를 하고 있다. 내년에 이루고 싶은 일은 1. 개발 공부 꾸준히 하기 2. 내가 되고 싶은 사람의 모습을 구체화 하기 2023.07 다시 고향으로 돌아왔다 이건 개인적인 이벤트까진 아니지만 사회적으로 이슈가 많았다. 한창 내가 이사할 집을 찾아봐야할 시즌에 전세사기 관련 문제가 너무 많았다. 물론 내가 살고 있던 집은 전세 사기가 나지 않을 정도의 집이긴 했지만 꼭 이사 가고 싶었다. 옥상에서 비가 새서 다이닝룸에 실내 풀장이 오픈된다던가, 집의 모든 구멍을 막아도 나타나는 카카로취, 여름엔 고양이도 쪄죽을 것 같은 더위와 겨울엔 자다가 엉덩이가 시려워서 ..
-
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)..
-
공부해야 할 것카테고리 없음 2021. 7. 25. 11:09
1. 스프레드 연산자 this.리스트.push(...info) 안됌 this.리스트.push(info) 됌 let testList = []; testList.push({...info}); 됌 testList.push(...info); 안됌 이유를 찾아내자 2. 이클립스 사용 시, 한글 인코딩 깨짐 - 그래들이 깨졌을 때, JDK연결을 다시 해줌 - 빌드.그래들 에 태스크옵션 추가 https://stackoverflow.com/questions/21267234/show-utf-8-text-properly-in-gradle
-
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는 초기 값만..