익명의 개발노트

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. 선택 창이 위아래로 나누어진 경우 위의 선택값에..

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도 리랜더링을 통하여 삭..

깃에서 특정 브랜치를 클론하고 싶을때 사용한다. 통상 마스터 브랜치 밑에 Dev브랜치를 따고 관리를 하는데, Dev를 클론받고 싶을때는 아래 -b옆의 javajigi 브랜치명을 dev로 바꿔주면 된다. git clone -b {branch_name} --single-branch {저장소 URL} ex) git clone -b javajigi --single-branch https://github.com/javajigi/java-racingcar

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부분과 스크립트 부분 메소드이름을 깔 맞춤해야 정상 동작한다. 주의사항은 전달받은 인자 값은 부모컴포넌트에서 참고용으로만 활..

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) 장점 : 상태값들을 연결되어있는 객체들에게 전달해주어 동적으로 변화시킬 수 있다. (객체간 연결도를 느슨하게 해주어 유..