도리 도리

이전 글에서 todoInput을 만들어서 이벤트를 Emit 시키고 todoList에서 받아서 출력해보았다. 이번에는 그 이벤트를 받아서 새로운 투두를 만들어본다. TodoManager.ts 투두를 생성하기위해 투두 데이터들을 관리하는 매니저 클래스를 만들어 본다. 사실 이름을 매니저라고 하는 것이 적절한 것인지는 의문이다. 그리 좋은 이름은 아닌 것 같지만 직관적인 것 같아서 그렇게 해봤다. Store와 비슷한 역할을 한다. Todo 클래스 우선 Todo 클래스를 만들었다. Todo의 데이터에는 투두에 담길 message, 각 투두의 id, 그리고 완료여부를 나타내는 isDone이 있다. 메서드로는 message를 변경할 수 있는 setMessage와 완료여부를 toggle할 수 있도록 하는 toggle..

포스트를 작성하던 중, 리액트 개발 업무가 많아져서 뷰 쪽을 잘 못보는 바람에 3번째 포스트를 작성하는데 오래 걸렸다. 아무튼 시작해보면! Vue Class Component 뷰는 기존의 옵션 객체를 넘겨줘서 컴포넌트를 만들기도 하지만, 클래스 기반 프로그래밍에 익숙하다면 클래스로 해볼 수 있다. 나는 클래스 기반 컴포넌트를 사용하게 됐기 때문에 이 사용법을 위주로 적어볼 예정이다. 안써본 사람들은 한번 이런게 있구나 보면 좋을 것 같다. 클래스 기반 컴포넌트를 사용할 때 vue-property-decorator와 타입스크립트를 사용하는데, 우선 몇가지 관련 설정이 필요하다. 아래는 설정하면서 만났던 에러들을 메모해둔 부분인데, 굳이 안봐도 된다. 같은 에러가 발생한 사람이 있을까봐 혹시 도움이 될까 싶..

npm으로 시작하기 공부할겸 올려보는 포스팅 2번째 앞선 내용: Vue가 기본적으로 어떤 형태이고, 어떤식으로 작동하는지 알아봤다. npm https://docs.npmjs.com/about-npm node package manager로 노드 프로젝트를 시작할 때 필요한 패키지를 관리하고, 실행할 수 있도록 해준다. 이전까지는 html의 script 태그를 이용하여 cdn을 통해 Vue를 가져왔다. 이번에는 실제로 더 많이 사용하게될 (아마도) 방법인 npm을 통해 Vue를 설치해보고 todolist를 만들어보기로 했다. Vue 설치 npm init -y npm install vue vue를 설치해서 사용하는데, vue를 이전과 같이 js, css 따로 만들어서 사용해도되지만, sfc(single fil..

들어가며 이번에 회사에서 맡은 프로젝트가 Vue를 사용하기 때문에 Vue를 시작하게 되었다. Vue는 js 프레임워크 중 하나로, 쉽게 FE 개발을 할 수 있다. 리액트를 해봤다면 더 쉬울 것이다. Vue 학습을 위해 todolist를 만들며 연습해본 과정을 정리해봤다. Vue 시작하기 Hello World! 가장 간단한 형태의 Vue app은 다음과 같이 만들 수 있다. // index.js var app = new Vue({ el: '#app', data: { message: 'Hello World!' } }) index.js를 보면 app이라는 새로운 Vue인스턴스를 생성한다. Vue 생성자함수는 옵션 객체를 인자로 호출되고 있다. 옵션 객체의 내부에는 el과 data가 있다. el은 css sel..

이미지 출처 프론트엔드 개발자를 위한 자바스크립트 프로그래밍 6장 요약 객체 지향 프로그래밍 ECMA 에는 클래스 개념이 없다. 객체란 그저 특별한 순서가 없는 값의 배열이다. 객체: `프로퍼티의 순서 없는 컬렉션이며 각 프로퍼티는 원시값이나 객체, 함수를 포함한다. 6.1 객체의 이해와 생성 같은 인터페이스의 객체를 여러개 만들 때, 중복을 줄이기 위해 팩토리패턴을 사용하기 시작했다. 팩토리 패턴 특정 객체를 생성하는 과정을 추상화. function createPerson(name) { var o = new Object(); o.name = name; o.sayName = function(){ console.log(this.name); } return o; } var person1 = createPer..

이제 진짜 현업으로.. 마지막 회고 3월 26일 마지막 발표가 있었다. 우리 기린TF와 끝까지 잘 마무리 했다. 발표 준비도 짧은 시간에 했지만 잘 했고, 우리 조장님도 좀 떨긴 했지만 잘 해줬다. 이어진 수료식에서 영상을 보는데 내가 꽤 많이 나왔더라 ㅎㅎ 세달이 이렇게 빠를 줄은 몰랐는데 가희님이 열심히 만드신 루키 8기 영상을 보니까 또 느낌이 달랐다. 교육에 몰입도 많이 했고 좀 더 잘 했으면 하는 아쉬움은 있지만 크게 후회는 안남도록 잘 한 것 같다. 아쉬웠던 부분은 꼭 현업에서는 보완해야겠다. 마지막까지 교육에 힘써주신 많은 분들께 감사했다. 에필로그 우리 팀원들 덕분에 루키 최고의 상이라는(ㅎㅎ) 쉐르파 상도 받았다. 부상은 5만원 상당의 도서! 엉클밥의 책을 두 권 더 구매했다. 토비의 스..

스프린트 6 (2.22 ~ 2.28) 코드리뷰, 클린코드, TDD 개발 산출믈 코드를 리뷰받았다. 책임님이 진행해주시는 리뷰는 처음엔 좀 겁이 났다. 하지만 막상 해보니 엄청 깔끔하게 설명해주시고 이해가 잘 되게 설명해주셔서 좋았다. 일정에 맞추기 위해서 좀 급하게 작성했던 코드이다 보니, 놓친 점이 많은 것이 좀 아쉬웠고 리팩토링을 통해 더 좋은 코드를 만들어야겠다고 생각했다. 처음으로 정적분석 툴을 사용해보았다. Sonarqube라는 툴이었는데, 적절하지 않은 코드나 오류등을 찾아서 분석해주는 툴이다. Intellij와 연계하여 사용할 수도 있다. 이런 걸 어떻게 만든건지 신기했다... TDD에 대해서도 배웠다. 배운 적은 있지만 실제로 도입해본 적은 없었던 개발 방식인 TDD를 처음 적용해보려했다...

미뤄뒀던 스프린트 회고 기록 베이스 캠프가 시작된 후 벌써 시간이 이렇게 지났다. 첫 월급 받은지 얼마 되지 않은 것 같은데 벌써 며칠 후면 월급이 들어온다고 한다. 앞에 어떤 활동을 했는지 슬슬 까먹어 가는 중이라 순서대로 글로 정리해보기로 했다. 스프린트 3 (2.1 ~ 2.7) 전반적으로 교육이 집중되어있던 주였다. 설 연휴 전에 교육을 시킨 후 연휴동안 진도를 나가게 하시려고 그랬던 것 같다. 1 (월) - 기획서 발표, 깃 교육 스프린트 2의 과제였던 프로젝트 기획의 발표가 있었다. 우리 기린티켓은 3번째 순서로 진행하여 발표를했다. 우리팀 용훈님이 발표를 잘 해주셨다. 깃 및 깃헙에 대한 교육을 받았다. 깃 포크라는 도구를 통해 사용법을 익혔다. CLI가 더 익숙하긴 하지만, 툴을 통해서 시각..