데브허브 | DEVHUB | WSL을 이용해 개발용 NAS 구축하기

Ultimate Guide to File Uploads & Management in Next.js

Hey everyone! File uploads are often one of the toughest features to get right. But after this video this will change. We’ll cover everything from creating a custom dropzone to uploading files server-side and client-side using a temporary API key, or as it’s often called, a presigned URL. For the storage itself we will use Pinata. We’ll also dive into file deletion and advanced validations directly on the dropzone. And to wrap it all up, I’ll show you how to retrieve and optimize your files for faster loading 🚀 Pinata: https://rebrand.ly/PinataJan 👨🏻‍💻 GitHub Repository: https://janmarshal.com/courses/ultimate-guide-on-file-uploads-in-next-js 🌍 My Website: https://janmarshal.com/ ✅ Follow me on X: https://x.com/janmarshaldev 📧 Business ONLY: jan@alenix.de 📅 Checkout Cal: https://dub.sh/FAuffAy Features: -Custom Dropzone with Drag and Drop -Further validation on Dropzone level (max files and size) -File uploads (server and client-side) with Pinata -Temporary API Key (presigned URLs) -Deletion of files -Signed URLs -Image optimization Timestamps: 00:00 Intro 03:00 Installation and Core Setup 23:44 Implement File Uploads 35:00 Server Side Implementation 49:00 Client Side Uploads 01:01:00 Custom Dropzone 01:15:00 Uploads with Dropzone 01:30:00 Showcase uploaded Files 01:37:00 Showcase loading state 01:45:00 Deletion of Files 02:02:00 Form Validation 02:12:00 Retrieval and Optimisation

2024. 10. 27.

AI Coding Devlog - Aider ON Sonnet 3.5 - CURATE your ELITE information DIET

Want to ESCAPE the ENDLESS scroll and CURATE a TOP TIER information diet? In this AI coding devlog, we're building "Zero Noise," an agentic workflow that filters content for you using the power of AI! 🚀 We'll be using Aider AI with the powerful Sonnet 3.5 model to code a tool that scrapes your favorite websites, blogs and changelogs and alerts QUITELY Notifies you to new and relevant updates. 🔥 Learn how to: - Leverage AI coding assistants for faster, more efficient software engineering. - Implement agentic workflows to automate tasks and boost productivity. - Craft effective prompts and prompt chains to get the most out of Sonnet 3.5. - Build a personalized content curation system to filter out the noise. 💡 This video covers key concepts like: - Live showing of AI coding best practices and techniques. - Aider AI setup and usage for AI-powered development. - Agentic engineering structures for building intelligent systems. - Prompt engineering in markdown format for optimal AI interaction and readability. Don't waste time sifting through irrelevant information. Like - Sub - Join the journey as we become Agentic Engineers. 🔗 Resources - Part 3 - Auto Updating Blog - https://youtu.be/F0eOYrA6ggY - Part 2 - Prompt Chains - https://youtu.be/UOcYsrnSNok - Part 1 - Master the prompt - https://youtu.be/4hSFcjspGOw - Start Coding With AI: https://aider.chat 📖 Chapters 00:00 AI Coding a Zero Noise Info Curation Tool 01:19 Reviewing scraping and streamlit 02:05 Using Aider and Sonnet 3.5 04:01 Importance of Curating Information 07:37 Prompting Agentics Prompt Chains (lol) 10:30 Markdown Prompt Chains 13:35 Aider generates Pydantic Models from JSON 19:17 Detecting Changes in Content 20:27 SUCCESS - Updates detected 21:00 Act Step in the Agentic Workflow 22:34 Running the Workflow 23:35 Adding Aider blog json with Aider

2024. 7. 8.

자바스크립트 DOM & EVENT #6 이벤트 버블링, 이벤트 위임

안녕하세요. 코딩앙마 입니다 :) 이번 시간에는 이벤트 버블링과 이벤트 위임에 대해서 알아보겠습니다! ---------------------------------------- 이 수업은 DOM 과 EVENT 에 대해 알아보고, 자바스크립트를 활용해 제어 해보는 영상입니다. 재생목록 링크 : https://www.youtube.com/playlist?list=PLZKTXPmaJk8JVQv3XSNF8yJMdsxbFrO3S #자바스크립트 #javascript #DOM #EVENT

2022. 3. 12.

{본질을 꿰뚫는 JS} - this에 대한 오해 풀기

Node에서 this에 대한 오해를 설명합니다

2024. 10. 15.

[취업을 위한 CS 지식] 9강. CPU | ④파이프라이닝을 통한 명령어 병렬처리

본 강의는 『이것이 취업을 위한 컴퓨터 과학이다 with CS 기술 면접』의 내용을 바탕으로 제작하였습니다. 👨‍🏫주요 강의 내용 CH 02 컴퓨터 구조 3. CPU - 파이프라이닝을 통한 명령어 병렬처리 ----- ✅어떤 내용을 다루고 있나요? • 컴퓨터 구조 • 운영체제 • 자료구조 • 네트워크 • 데이터베이스 ⠀ ★특별 제공★ + CS 기술 면접 질문 100제(도서 수록) + CS Note: https://csnote.net ⠀ ⠀ ✅누구를 위한 책인가요? • 기술 면접을 앞둔 취업 준비생 • 부족한 CS 지식을 보완하고 싶은 컴퓨터 공학 전공자 • 실무에 필요한 CS 개념을 체계적으로 정리하고 싶은 개발자 🔗도서 자세히보기: https://bit.ly/3XaghGC 🔗저자님께 질문하기: https://github.com/kangtegong/cs/issues #개발자 #취업 #기술면접 #CS지식 #컴퓨터과학 #컴퓨터구조 #CPU #파이프라이닝

2024. 10. 10.

[Anthropic Claude의 새로운 인터페이스 Computer Use] Windows에서 데모 경험하기

2024년 10월 23일, Anthropic은 업그레이드된 Claude 3.5 Sonnet과 Claude 3.5 Haiku를 발표했다. https://www.anthropic.com/news/3-5-models-and-computer-use 이와 함께 "Computer Use"라는 새로운 기능을 내놓았다. 이 기능은 AI가 단순히 텍스트 생성이나 질문 응답을 넘어, 컴퓨터 인터페이스를 직접 탐색하고 제어하는 가능성을 보여준다. 새롭게 선보이는 "Computer Use" 기능은 AI가 컴퓨터를 인간처럼 활용할 수 있도록 하는 것이다. 기존에는 AI가 특정 작업을 돕기 위해 개별적인 도구를 사용하는 경우가 많았다. 이번에 소개한 이 기능은 화면을 보고, 마우스를 움직여서, 클릭하고, 텍스트를 입력하는 방식으로 컴퓨터를 제어하는 능력을 갖췄다. 이는 사람이 직접 컴퓨터를 사용하는 것과 유사한 방식으로 작업을 진행할 수 있다는 점에서 주목할 만하다. 현재 이 기능은 Anthropic API를 통해 개발자들이 이용할 수 있는 공개 베타 버전으로 제공되고 있으며, 아직 실험적인 단계다. 사용 과정에서 번거롭거나 오류가 발생할 가능성이 있지만, 이러한 초기 피드백을 바탕으로 기능이 빠르게 개선될 것으로 보인다. 또한, 현재 데모 소개 페이지(https://github.com/anthropics/anthropic-quickstarts)에서 소스를 내려 받아 로컬의 웹 브라우저에서 Computer Use 기능을 경험해 볼 수 있다. 이를 위해서는 API key가 필요하며, 시스템에 도커(docker)가 설치되어 있어야 한다. 해당 설명에서는 Linux나 macOS에서 사용할 수 있는 소스를 제공하고 있으나, Windows에서 사용하고 싶다면 아래 코드를 사용할 수 있다. [PowerShell (PS)] $Env:ANTHROPIC_API_KEY="your_api_key" docker run ` -e ANTHROPIC_API_KEY=$env:ANTHROPIC_API_KEY ` -v ${HOME}/.anthropic:/home/computeruse/.anthropic ` -p 5900:5900 ` -p 8501:8501 ` -p 6080:6080 ` -p 8080:8080 ` -it ghcr.io/anthropics/anthropic-quickstarts:computer-use-demo-latest [Command Prompt (CMD)] set ANTHROPIC_API_KEY=your_api_key docker run ^ -e ANTHROPIC_API_KEY=%ANTHROPIC_API_KEY% ^ -v %USERPROFILE%/.anthropic:/home/computeruse/.anthropic ^ -p 5900:5900 ^ -p 8501:8501 ^ -p 6080:6080 ^ -p 8080:8080 ^ -it ghcr.io/anthropics/anthropic-quickstarts:computer-use-demo-latest Computer Use 기능은 Claude가 컴퓨터 인터페이스를 인지하고 상호 작용할 수 있도록 해주는 API로 구축되어 있다. 이를 통해 개발자들은 Claude에게 "웹 브라우저를 열어 검색을 통해 온라인 데이터를 찾고 특정 양식을 작성하라"는 지시를 내리고, Claude는 이를 실제로 실행한다. 예를 들어 스프레드시트를 확인하고, 커서를 움직여 웹 브라우저를 열고, 필요한 페이지로 이동해 데이터를 가져오는 작업을 수행할 수 있다. 이러한 기능은 반복적인 작업을 자동화하거나, 소프트웨어를 개발하고 테스트하는 데 유용할 수 있다. 새로운 기술이 도입될 때 발생할 수 있는 위험 요소에 대한 고려는 필수적이다. Claude의 Computer Use 기능 역시 자동화된 작업이 스팸, 허위 정보, 사기 등의 위협을 야기할 가능성이 있다. 이런 점은 점차 개선되고 보완될 것으로 기대된다. Computer Use 기능은 아직 초기 단계지만, 이를 통해 AI 시스템의 다양한 가능성을 확인할 수 있을 것이다. #claude #anthropic #computeruse

2024. 10. 23.

로딩 중...