익명의 개발노트

Emmit은 이벤트 발생기이다. addTodo(){ //arrow function 사용x if(this.newTodoItem !== ''){ var value = this.newTodoItem && this.newTodoItem.trim(); this.$emit('addTodo', value); this.clearInput(); } }, 기본적으로 이런식으로 사용하며, 하위컴포넌트에서 상위컴포넌트로 값을 전달할 때 사용한다. $emit('parents component event name', value) 와 같이 사용하며, 받는 쪽에서는 template 부분에서 이벤트 수신 v-on부분과 스크립트 부분 메소드이름을 깔 맞춤해야 정상 동작한다. 주의사항은 전달받은 인자 값은 부모컴포넌트에서 참고용으로만 활..

Vue.js는 2버전과 3버전으로 현재 나뉘고 있다. 2버전과 3버전으로 설치시 명령어가 다르다. 리액트에 create-react-app이 있다면, 뷰에는 Vue-cli가 있다. 1. 설치방법 npm i -g @vue/cli // vue-cli 3.x npm i -g vue-cli // vue-cli 2.x 2. 프로젝트 생성 vue create '프로젝트 명' // vue-cli 3.X vue init webpack '프로젝트 명' // vue-cli 2.X 3. 2버전을 설치하였다면, 프로젝트를 생성한 후 npm install를 실행해서 node_modules를 깔아주어야 하고, 3버전은 프로젝트생성시 자동으로 설치 된다. 4. 웹팩 설정파일 2버전은 노출이 되어있고, 3버전은 노출이 안되어있다. ..

1. 서로 다른 컴포넌트끼리 값 직접 참조할 수 없다. 2. 컴포넌트 안에서 Vue인스턴스가 상위 컴포넌트가 된다. 3. 상위컴포넌트에서 하위컴포넌트로 데이터 전달시 props로 전달 가능하며, 하위에서 상위로 데이터 전달시 이벤트 버스를 사용한다. 4. 이벤트를 발생시키는 쪽에서는 $emit('이벤트명') , 받는쪽은 v-on:으로 수신한다. 5. 같은 레벨의 컴포넌트간의 통신은 아래 그림과 같다.(부모보냈다가 부모에서 값 받아야함) 관계없는 컴포넌트 간 통신은 통상 이벤트버스를 이용해서 통신한다. 6. template 특성 1) template 대신 render 함수로 구현해도 됨. 2) 싱글 파일 컴포넌트 체계 => .vue 파일 1개는 1개의 컴포넌트와 동일 7. 데이터 바인딩 방식 1) v-on..

리액트, 앵귤러와 같이 3대장 중 하나이다. 특징은 쉽고 빠르게 그릴수 있다. 기본적으로 html, script, css 구조로 이루어져있다. 통상 MVC 패턴에서 일반적인 함수들은 Controller에 해당한다. Vue의 script부분은 기본적으로 인스턴스로 구성되고, 그안에 property로 data를 다루는 model부분과, Controller를 다루는 객체부분이 존재한다. 그밖에도 여러개의 Vue 인스턴스 속성을 가지고 있다. Vue 3부터 설치명령어가 살짝 다르다. npm install -g @vue/cli 프로젝트 시작하기 vue create my-app

1. NVM이란 노드 버전 매니져의 약자이며, 노드를 깔기전에 NVM을 먼저 설치를 하면 노드를 버전별로 설치도 가능하고 원하는 버전을 사용할 수 있다. http://jeonghwan-kim.github.io/2016/08/10/nvm.html NVM으로 노드 버전 관리하기 기본적으로 노드는 LTS 버전인 v4를 설치해서 사용한다.LTS 버전을 사용하면 좀더 안정적으로 지원받을 수 있다는 생각 때문이다.그러나 요즘 개발툴들은 노드기반의 것이 많고 상위 버전의 노드를 요구하는 경우가 종종 있기 때문에 내 컴퓨터에 여러 버전의 노드를 설치해야할 필요가 생겼다. jeonghwan-kim.github.io nvm ls //nvm list nvm use 버전명 2. Vue.js는 카테고리 참고

이 글이 올라갈 때 쯤이면, 난 이미 국내 3번째 부트캠프인 Wecode를 수료한 상태가 될 것이다. 3개월 전 자리 1자리밖에 없었는데, 코드XXXX에서 부당계약서로 인해 급하게 선회한 부트캠프였다. 바닐X 코딩도 있었지만, 들어가기엔 불명확한 상황에서 Wecode 대표님 링크드인에 남긴 같이 일했던 동료들의 추천사 (외국은 잘 안써줌)를 같이 간 동생이 읽어보니 "형 여기 진짜다" 라고 말하고 강한 확신을 가지고 무작정 Wecode 송은우 대표님을 찾아갔다. 그리고 1자리 뿐이었지만, 나를 비롯한 동생2명을 같이 받아주셨다. 시너지효과가 날 것을 믿으시며 우리를 받아주셨고, 3개월동안 우리는 미친 텐션을 발휘하며, 같이 시작한 동료들을 하이텐션으로 끌어당겼다. 정말 3개월 스트레스도 일부 받았던 시간..

1. CRA에서 production 레벨 설정하기. package.json의 script부분을 보면, build 인 경우에만 production 레벨을 설정할 수 있다. 그러면 build 이후에 실행을 어떻게 시킬까?? AWS에 배포할때, AWS상에서 깃헙에서 pull받아온 후 실행환경을 설정해준다. 프론트엔드의 경우 서버를 만들어주어야 띄울 수 있기에, 프로젝트에 server.js 를 만들고, build 이후에 아래와 같이 명령어를 입력한다. node server.js server.js 에서 포트를 개발서버와 다르게 변경해주고, localhost:5000 route 주소를 치면 프로덕션 레벨로 실행됨을 볼 수 있다. *추가적으로 상업용서버에서 실제로 url 값이 다르게 지정되있을 수도 있다. .ENV ..

77일 인줄알았는데 80일 이라니.. 잃어버린 3일은 어디로?! 1. 디자인 패턴이란? 소프트웨어 디자인 패턴은 소프트웨어 공학에서 소프트웨어 디자인에서 특정 문맥에서 공통적으로 발생하는 문제에 대해 재사용이 가능하도록 도와주는 패턴이다. 2. 옵져버 패턴 1) 정의 : 관찰자(Observer)가 관찰대상을 선택하고 지켜보고있다가 관찰대상의 상태값이 변하면 관찰자들에게 알림 을 주고, 알림을 받은 옵져버들은 특정 행위를 수행한다. 2) 용도 : 이벤트 처리 및 위임 3) 예시 : addEventListener, 구독과 알림(카톡플러스 친구 구독, 플친내용 변경시 구독자들에게 알림) 4) 장점 : 상태값들을 연결되어있는 객체들에게 전달해주어 동적으로 변화시킬 수 있다. (객체간 연결도를 느슨하게 해주어 유..

1.SEO 검색엔진 최적화, 웹사이트를 만들때 사용자로 하여금 검색이 잘 되게 노출하는 것이 중요하다. 프론트엔드 개발자의 중요한 임무중 하나이다. 검색엔진 최적화 효과를 보려면, 변경시작한 시점을 기준으로 성과가 나타날때까지 보통 4개월에서 1년 정도 소요된다. 핵심은 2가지. 1. 잘노출되게 한다. 1) 우리사이트 주소가 여기저기서 링크되고 있어야 한다. 2) 헤더에 페이지 정보(title, 주소, description)를 잘 작성한다. 참고로 CRA는 SEO가 좋지 않다. 왜?? index.html이 하나뿐이어서, 이 부분을 보완하기위해서 gatsby.js가 나온 것이다. CRA를 사용하려면 react-helmet을 설치하고 import해서 아래와 같이 필요한 페이지에 helmet 태그로 감싸서 넣..

1. 반응형으로 모바일 화면을 꾸미다 보면, 모바일 창 넓이, 높이를 알고 싶을때 사용하는방법 모바일에서는 콘솔창이 의미가 없다. 따라서, alert(window.innerWidth) or alert(window.innerHeight)로 값을 확인하면 아주아주 좋다. 2. 유지보수하기 좋은 코드란?? 오늘 대표님께서 코드 리뷰를 해주시면서 여쭤보셨다. 눈에 보기에 좋은 코드일 수도 있지만, 객체지향적으로 나누고 분리해서 필요할때 간단하게 가져다 쓰거나, 수정할 수 있게 하는 코드가 유지보수하기에 좋다고 답변드렸다. 추가적으로 내가 자바와 자바스크립트로 게임을 만들어보면서 클래스나 함수형으로 만들었더니 유지보수하기에 좋았다고도 같이 말씀드렸더니, 만족해하셨다. 시스템을 만들때 가장 중요한 요소는 뭐라고 생..