도리 도리

https://www.totaltypescript.com/tutorials/beginners-typescript Beginner's TypeScript Tutorial Free interactive video tutorial that will help you get started with TypeScript. www.totaltypescript.com (모르는 외국분이고 홍보 아님!) 유튜브로 공부하다가 알게된 분인데 입문자용으로 무료 강의를 만들어 둬서 한번 봤다. 영어로 되어있긴한데, 되게 쉽고 입문자에게 필요한 내용들만 추려놨기 때문에 입문용으로 좋은 것 같다. 진행 방식 영상으로 짧은 문제를 준다. (글로도 적혀있어서 굳이 영상을 보지 않아도 된다.) 영상을 본후, 코드 화면으로 전환되면 거기서 ..

Vercel은 웹 어플리케이션 배포를 위한 end-to-end 플랫폼이다. 쉽게말하자면, 깃 저장소에 소스코드를 올리고 연결하기만 하면 Deploy, CI/CD, 도메인, 모니터링까지 제공해주는 아주 간편한 툴이다. 무료티어도 제공하고 있어서 연습용으로 사용하기도 좋다. 간단하게 스텝 바이 스텝으로 Vercel을 사용해보자. 홈페이지: https://vercel.com/pricing Pricing – Vercel The fastest frontend platform for deploying Next.js, Create React App, and more. Plans starting at $0/month. vercel.com 시작하기 들어가면 로그인을 선택할 수 있다. 나는 깃헙을 통해 로그인했다. 로그..

출처: https://makandracards.com/makandra/66994-css-flex-and-min-width Flex를 사용하다보면 child가 부모 밖으로 넘쳐 튀어나오는 경우가 있다. 이는 min-width: 0 를 통해 해결할 수 있다. 이런 현상이 생기는 이유 보통은 min-width의 기본값은 0으로 설정되어있다. 하지만 flex의 경우, auto 로 설정되어있다. min-width는 width값과 경쟁 시 이기도록 설계되어 있다. 즉, width가 min-width보다 작아지는 경우 min-width값이 선택된다. 그런 이유로 여기서 엘리먼트가 암묵적 auto width 이하로 줄어드는 경우, min-width: auto가 선택된다. 이로인해 엘리먼트가 위 사진처럼 튀어나가게된다...

Toolbar 및 마무리 toolbar 마지막으로 현재 todo들의 상태를 나타내는 부분이 있었으면 좋겠다. 간단한 템플릿과 totalCount, todoCount, doneCount를 prop으로 받아서 보여주는 간단한 상태바 컴포넌트를 만들었다. total: {{totalCount}} 할 일: {{todoCount}} 한 일: {{doneCount}} 먼저 만든 툴바를 todoList에 넣어준다. TODO LIST ... 그럼 툴바와 함께 모두 0의 값이 입력되고 변경되지 않는 것을 볼 수 있다. 이제 TodoManager에서 totalCount, todoCount, doneCount를 만들어주자. // TodoManager.ts get totalCount() { return this.todos.le..

todo 삭제 및 편집 todoItem 템플릿 {{todo.message}} 편집 X 템플릿은 간단하다. 체크박스가 있고, 메시지가 보인다. 뒤에는 편집과 삭제 버튼이 있다. 이 버튼들을 누를 때 기능들을 추가해볼 것이다. @click.stop 편집/삭제 버튼을 만들면서 v-on:click.stop을 사용했다. .stop을 붙이면 이벤트의 propagation이 중지된다. 즉, 편집버튼을 클릭한다고 해보자. 따로 캡쳐링 단계에서 이벤트를 리스닝하는 리스너는 없으므로, 버블링 단계에서 가장 먼저 이벤트 핸들러 onClickEdit이 호출된다. .stop이 없다면 그 후 버블링이 진행되어 상위 컴포넌트인 li에서 onClickItem이 호출된다. 하지만 .stop을 통해 이벤트 propagation을 중지 ..

이전 글에서 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..