도리 도리

요즘 유행하는 ChatGPT로 리액트 간단한 리액트 컴포넌트를 작성해보았다. ChatGPT를 써 본 소감은 계속 ChatGPT와 티키타카를 해나가야 괜찮은 결과가 나온다는 것이다. 내가 해본 예시는 아래와 같다. (영어는 생각나는대로 했기 때문에 많이 틀렸을테지만 양해 바람) 1. 대화 시작 및 첫 스펙 제시 리액트 + 타입스크립트를 사용하여 인풋필드와 서밋 버튼이 있는 컴포넌트 작성 요청. 제출 목록은 인풋 아래에 있고, 제출 버튼을 누르면 목록이 업데이트 되어야함. Q. Create an React Typescript code. It should contain an input field and a submit button. when you click submit, the submitted list i..

Announcing TypeScript 5.0 Beta Announcing TypeScript 5.0 Beta Today we’re excited to announce our beta release of TypeScript 5.0! This release brings many new features, while aiming to make TypeScript, smaller, simpler, and faster. We’ve implemented the new decorators standard, functionality to better support ESM devblogs.microsoft.com 참고 내용 - 마이크로소프트 타입스크립트 블로그. 위 글에 각 내용들이 상세하게 정리되어 있으니 상세설명은 ..

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가 선택된다. 이로인해 엘리먼트가 위 사진처럼 튀어나가게된다...

Turborepo 홈페이지: https://turborepo.org/ 소개: Turborepo is a high-performance build system for JavaScript and TypeScript codebases. 빠른 속도의 빌드를 지원하는 모노레포 툴. 모노레포로 프로젝트를 진행하다가 사용해보고 싶어서 홈페이지의 내용을 정리해보았다. 모든 내용은 공식문서를 참고했다. 터보레포를 사용할 이유 (장점) Incremental Building 빌드를 여러번 하는 경우, 이전 빌드 내용을 기억해뒀다가, 이미 계산된 것들에 대해서는 빌드를 스킵한다. Content-aware hashing 빌드할 때 타임스탬프를 보는게 아니라 콘텐츠의 변화를 감지해서 어떤 파일이 빌드가 필요한지 파악한다. Rem..

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을 중지 ..