본문 바로가기

분류 전체보기

 (286)
React Hook, 왜 이렇게 복잡한 걸까요? React 개발을 하다 보면, 어느 순간부터 함수형 컴포넌트가 대세라는 사실을 깨닫게 돼요. 그런데 클래스형 컴포넌트에서 this.setState 잘 쓰고 있었는데, 갑자기 useState, useEffect, useMemo 같은 이상한 녀석들이 튀어나옵니다. 😵‍🚫 "이걸 왜 써야 하죠?" 🤷‍♂️라고 묻는 분들도 많아요. 답은 간단합니다. 코드가 간결해지고, 성능이 좋아지고, 유지보수가 쉬워지거든요. 하지만, "간결한 코드"를 위해 더 많은 개념을 배워야 한다는 함정이 숨어있죠. 😂 그래서 React Hook을 마스터하는 게 중요합니다! 🏆 필수 Hook 정리Hook역할useState상태 관리 (기본)useEffect사이드 이펙트 처리 (비동기, API 요청 등)useRefDOM 요소 접근 ..
주니어 React 개발자가 여전히 저지르는 12가지 useState 및 useEffect 실수 React를 처음 배우면 마법 같은 useState와 useEffect에 빠져서 열심히 써보게 돼요. 그런데 어느 순간 예상치 못한 버그에 멘붕이 옵니다. 😵‍💫 "아니, 분명히 상태를 업데이트했는데 왜 값이 바뀌지 않지?" "왜 useEffect가 무한 루프 도는 거야?" 이런 경험, 다들 한 번쯤 있지 않나요? (고개 끄덕이면 동지 ✊) 이번 글에서는 주니어 개발자가 흔히 저지르는 12가지 실수를 정리하고, 해결 방법을 제안해볼게요. 🔥 실수 1. 여러 번 setState를 호출할 때 예상치 못한 결과 발생const [count, setCount] = useState(0);const handleClick = () => { setCount(count + 1); setCount(count + 1..
Vercel 비용 최적화: 우리의 경험과 팁! 1. Vercel 비용 절감의 시작: 기본 전략 우리가 Vercel을 사용하면서 겪은 비용 문제를 해결하기 위해 몇 가지 전략을 공유하려고 해요. 먼저, 저희 요금은 한 달에 꾸준히 10달러 정도를 유지하고 있어요. 이게 가능했던 이유는 뭘까요?  바로 이미지 최적화와 대용량 파일 호스팅 전략 덕분이에요! 이미지를 최적화하면 대역폭 사용량이 줄어들고, 전용 서비스에서 대용량 파일을 호스팅하면 Vercel의 저장 공간을 절약할 수 있어요. 이렇게 하면 비용이 크게 절감되죠! 💸  또한, 분석 기능은 필요 없는 경우 제한적으로 구성하거나 비활성화하는 게 좋아요. 예상치 못한 요금이 발생할 수 있으니까요. 그리고 캐싱 전략을 구현하면 성능도 개선되고 비용도 절감할 수 있어요. 예를 들어, 캐시된 기능을 사용..
원격 데스크톱의 문제점과 대안: RustDesk와 TwinGate 1. 기존 원격 데스크톱 솔루션의 한계원격 데스크톱(이하 RDP)은 IT 업계에서 필수적인 도구이지만, 기존 솔루션에는 여러 가지 제약이 있어 사용자가 불편을 겪고 있어요.솔루션주요 문제점Windows RDPWindows Pro 에디션 필요, 동일 네트워크에서만 가능Mac 원격 접속Windows에서 Mac 접속 불가, 설정 복잡VNC속도 느림, 설치 과정 어려움TeamViewer무료 버전 제한, 서버 의존AnyDesk유료 기능 제한, 보안 우려  Windows 기본 RDP는 Home 에디션에서 지원되지 않아서 Pro로 업그레이드해야 해요. 돈 쓰라는 거죠. 😅 그리고 같은 네트워크에서만 접속할 수 있어서 외부에서 내 PC를 관리하는 게 어렵죠. Mac은 Windows에서 접속이 어렵고, Linux에서는..
TikTok이 만든 새로운 IDE, Trae: VS Code를 넘어설 수 있을까? TikTok의 모회사 바이트댄스(ByteDance)가 개발한 새로운 무료 IDE, Trae가 등장했다. 기존 VS Code를 대체할 경쟁자로 떠오르며, AI 기반 개발 도구로서의 가능성이 주목받고 있다. 하지만 TikTok이 개발했다는 점에서 보안과 유료화 가능성에 대한 우려도 적지 않다. Trae가 정말 유용한 개발 도구일지 직접 살펴봤다. Trae의 특징과 기능: 단순한 VS Code 복제품이 아니다 Trae는 단순한 VS Code 클론이 아니다. AI 기반 기능이 강점이며, 사용자의 요구를 자동으로 분석하고 개발 프로세스를 최적화하는 기능이 포함되어 있다. 주요 특징은 다음과 같다. 기능설명AI 에이전트 지원코드 분석 및 자동 수정 기능 제공Builder 모드프로젝트 구축 과정을 자동화UI 미리보기..
한국에서 참여할 수 있는 해커톤 총정리 🎯 해커톤이란?해커톤(Hackathon)은 해킹(Hack)과 마라톤(Marathon)의 합성어로, 짧은 기간 동안 개발자, 디자이너, 기획자가 모여 아이디어를 실현하는 대회예요. 말 그대로 "개발 마라톤"! 🚀 이런 해커톤을 통해 단순히 코딩 실력만이 아니라, 문제 해결력, 팀워크, 발표력까지 한꺼번에 성장할 수 있어요. 게다가 우수한 성적을 거두면 상금과 입사 제안까지 받을 수도 있죠! 👀 자, 그럼 한국에서 참여할 수 있는 해커톤들을 정리해 볼까요? 📜 📌 한국에서 참여할 수 있는 주요 해커톤해커톤 명참가 대상특징비고KISIA 정보보호 개발자 해커톤대학생 및 대학원생보안 개발자 육성 목적, 정보 보호 중심정보보호 분야 관심자 추천SAS 해커톤개발자, 데이터 과학자, 스타트업 등데이터 분석 및..
웹 애플리케이션 보안, 제대로 알고 있나요? 웹 애플리케이션 보안은 "이거 몰라도 돼?" 하는 순간, 해킹당하는 지름길이 됩니다. 🙅‍♂️웹 보안, 어디까지 신경 써야 할까요? 무조건 다 막아야 할까요? 이번 글에서는 가장 기본적인 개념부터 실무에서 반드시 고려해야 하는 보안 전략까지 한 번에 정리해 보겠습니다. 🚀 📌 웹 애플리케이션 보안 핵심 정리보안 개념주요 내용구현 방법API 보호클라이언트가 데이터베이스에 직접 접근하는 것을 차단백엔드(API) 사용 (REST API, tRPC, Next.js 서버 액션, React 서버 컴포넌트)인증(Authentication)사용자 로그인 시 토큰(JWT, 세션 ID) 발급 후 쿠키 저장NextAuth.js, Zsa 등 미들웨어 사용토큰 검증모든 API 엔드포인트에서 토큰 유효성 검사 및 만료 처리..
구글 에이전트 리뷰: 진짜 'AI 비서'의 탄생인가? 최근 구글이 발표한 에이전트 백서를 보면서, 이제 AI가 진짜 '스스로 생각하고 판단하는' 시대가 왔다는 걸 깨달았다. 기존 ChatGPT와 같은 챗봇이 아니라, 완전 자율적이고 독립적인 AI 시스템이라는 점에서 차원이 다르다. 직접 써본 느낌(?)으로 깊이 파고들어가 보자. (공식문서인데 매우 길고 영어입니다...)🧐 구글 에이전트, 도대체 뭐길래?기존 ChatGPT는 사용자가 입력한 질문에 대해 단일 API 호출을 통해 답변을 생성하는 방식이었다. 하지만 구글의 에이전트는 여러 단계를 거쳐 의사결정을 하고, 필요하면 외부 API도 호출하며 답을 찾는다. 쉽게 말하면, 사람이 개입하지 않아도 스스로 정보를 검색하고 조합해서 최적의 답변을 내놓는 AI다. 💡 핵심 특징 정리특징기존 ChatGPT구글 ..

티스토리툴바