Study/개발
-
그림 그려주는 AI - Mid JourneyStudy/개발 2023. 3. 18. 23:01
홈페이지: https://www.midjourney.com/home/?callbackUrl=%2Fapp%2F text 기반 입력을 통해 그림을 그려주는 AI 서비스. 디스코드를 통해 무료로 쉽게 이용이 가능하다. 아래 링크를 통해 discord에 들어갈 수 있다. https://discord.gg/midjourney 디스코드 계정이 있으면 바로 사용할 수 있다. 없으면 가입해야한다. 예시 명령어를 통해 여자친구와 제주도 여행을 간 삼성맨을 그려달라고 했을 때 나온 결과물 꽤나 사람같이 잘 그려주는 것을 볼 수 있다. 사용법 가이드 문서 https://docs.midjourney.com/docs/quick-start Midjourney 디스코드에 들어간다. 좌측 목록에서 newbies-# 채널로 들어간다...
-
VS code에서 ChatGPT 사용Study/개발 2023. 2. 19. 15:50
요약: ChatGPT를 CodeGPT라는 VScode extension으로 IDE안에서 사용할 수 있다. 1. Code GPT 소개 이 전 포스트에서 ChatGPT를 통해 리액트 컴포넌트를 만드는 것을 테스트해봤다. https://blue-tang.tistory.com/33 Chat GPT로 리액트 컴포넌트 작성해보기 요즘 유행하는 ChatGPT로 리액트 간단한 리액트 컴포넌트를 작성해보았다. ChatGPT를 써 본 소감은 계속 ChatGPT와 티키타카를 해나가야 괜찮은 결과가 나온다는 것이다. 내가 해본 예시는 아래와 같 blue-tang.tistory.com 요새 이런게 이슈기도 하고, 실제로 써보니 재미도 있어서 이것저것 해보는 와중에 CodeGPT라는 것을 알게 되었다. CodeGPT는 VScod..
-
Chat GPT로 리액트 컴포넌트 작성해보기Study/개발 2023. 2. 9. 00:41
요즘 유행하는 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..
-
타입스크립트 5.0 베타 요약Study/개발 2023. 2. 6. 02:00
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 참고 내용 - 마이크로소프트 타입스크립트 블로그. 위 글에 각 내용들이 상세하게 정리되어 있으니 상세설명은 ..
-
타입스크립트 기초 강의 추천Study/개발 2023. 1. 29. 15:53
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 사용해보기Study/개발 2022. 9. 21. 22:24
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 시작하기 들어가면 로그인을 선택할 수 있다. 나는 깃헙을 통해 로그인했다. 로그..
-
부모의 width를 넘어가버리는 Child FlexStudy/개발 2022. 9. 18. 19:28
출처: 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가 선택된다. 이로인해 엘리먼트가 위 사진처럼 튀어나가게된다...
-
Vue 입문 - todolist 만들어보기 6 - 툴바Study/개발 2021. 11. 4. 23:09
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..