도리 도리

익스텐션 설치 링크: https://chrome.google.com/webstore/detail/talk-with-gpt-extensions/galockpmkiembebpfcnnalaomfglknkf Talk with GPT Extensions Extension to talk with GPT chrome.google.com 요새 일하면서도 지피티를 자주 활용하고 있다. 특히 내가 잘 모르는 파트에서 도움을 구하면, 어떤 대답이든 해주기 때문에 완벽하진 않더라도 실마리 정도는 주는 것 같다. 조금씩 하고 있던 영어 말하기 공부에도 활용하면 좋겠다 싶어서 크롬 익스텐션으로 한 번 만들어 봤다. 말하기의 가장 어려운 점은 말을 할 곳이 없다는 것이기 때문에 그런 부분을 조금은 해소할 수 있을 것 같다. 사용법..

홈페이지: https://www.midjourney.com/home/?callbackUrl=%2Fapp%2F text 기반 입력을 통해 그림을 그려주는 AI 서비스. 디스코드를 통해 무료로 쉽게 이용이 가능하다. 아래 링크를 통해 discord에 들어갈 수 있다. https://discord.gg/midjourney 디스코드 계정이 있으면 바로 사용할 수 있다. 없으면 가입해야한다. 예시 명령어를 통해 여자친구와 제주도 여행을 간 삼성맨을 그려달라고 했을 때 나온 결과물 꽤나 사람같이 잘 그려주는 것을 볼 수 있다. 사용법 가이드 문서 https://docs.midjourney.com/docs/quick-start Midjourney 디스코드에 들어간다. 좌측 목록에서 newbies-# 채널로 들어간다...

연관 포스트 - Codeium 사용하기 Codeium 사용하기Codeium 홈페이지: https://codeium.com/ Codeium · Free AI Code Completion & Chat Codeium offers best in class AI code completion & search — all for free. It supports over 70+ languages and integrates with your favorite IDEs, with lightning fast speedblue-tang.tistory.comCodeGPT 외에 Codeium이란 extension도 AI Assistant 기능을 잘 제공해준다.  TL;DR요약: ChatGPT를 CodeGPT라는 VScode exte..

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