개발자 하민아빠의 Dev & Money

생성형 AI vs 예측형 AI: 실무 관점의 정리

지난번 글에서는 전통적인 프로그래밍과 AI, 그리고 머신러닝과 딥러닝의 근본적인 차이에 대해 다루어 보았습니다.이제 '데이터에서 규칙을 찾아내는' AI의 본질을 이해했으니, 한 걸음 더 나아가 볼까요? 요즘 IT 뉴스나 기술 블로그를 보면 온통 '생성형 AI(Generative AI)' 이야기뿐입니다.그래서인지 사내에 AI 기능을 도입하자고 하면 무작정 ChatGPT 같은 챗봇부터 떠올리는 경우가 많죠.하지만 실무에서 마주하는 모든 비즈니스 문제가 텍스트를 생성해야만 풀리는 것은 아닙니다. 저도 처음엔 모든 과제를 LLM으로 해결하려고 하다가, 응답 속도와 비용 문제로 낭패를 본 적이 있어요.오늘은 기존에 우리가 주로 쓰던 '예측형 AI'와 요즘 대세인 '생성형 AI'의 작동 원리와 도구, 그리고 실무 ..

리액트로 처음 프로젝트를 세팅하고 개발을 시작할 때, console.log를 찍어보고 당황했던 경험 다들 한 번쯤 있으시죠?분명 한 번만 실행되어야 할 로그가 두 번씩 찍히거나, API 호출이 연달아 두 번 발생하는 현상 말이에요.저도 초보 시절에는 "이거 리액트 버그 아니야?" 하면서 index.js에 있는 를 냅다 지워버리고 개발했던 부끄러운 기억이 있습니다. 하지만 실무를 경험하다 보니, 이 친구가 우리를 괴롭히려는 게 아니라 잠재적인 버그를 미리 잡아주기 위해 애쓰고 있었다는 것을 깨달았어요.오늘은 Strict Mode가 대체 무엇인지, 왜 컴포넌트를 두 번씩 렌더링하는지, 그리고 실무에서는 이를 어떻게 다루어야 하는지 제 경험을 녹여 자세히 설명해 드릴게요.1. Strict Mode란 무엇인가요..

XSS란? XSS와 CSRF 개념 및 차이점 정리 XSS와 CSRF 차이점 정리신입 시절, 기술 면접을 준비하거나 보안 관련 문서를 읽을 때마다 항상 헷갈리던 두 단어가 있었습니다.바로 XSS와 CSRF입니다.둘 다 웹 해킹 기법이라는 건 알겠는데, 막상 "정확히 뭐가 달라?"라show5116.tistory.com 웹 애플리케이션을 개발할 때 빼놓을 수 없는 보안 위협 중 하나가 바로 XSS(Cross-Site Scripting)입니다.악의적인 사용자가 웹 페이지에 악성 스크립트를 삽입해 다른 사용자의 정보를 탈취하거나 비정상적인 동작을 유발하는 공격이죠. XSS를 막기 위해 같은 위험한 태그를 막는 블랙리스트(Blacklist) 방식을 종종 사용하지만, 우회 기법이 끊임없이 발전하기 때문에 완벽한 방..

요즘 FastAPI나 LangChain 같은 도구들로 AI 기능을 붙이는 작업을 하다 보면, 문득 '내가 지금 다루고 있는 인공지능이라는 게 정확히 뭐지?'라는 근본적인 의문이 들 때가 있어요.API 문서만 보고 값을 던지고 받는 데 익숙해지다 보니, 정작 AI의 뼈대를 놓치고 있었던 거죠. 전통적인 프로그래밍 방식과 AI의 근본적인 차이를 깨닫고 나니, 이후에 다룰 RAG나 에이전트 개념을 이해하는 데 훨씬 큰 도움이 되었습니다.오늘은 개발자 관점에서 AI의 본질을 아주 쉽게 정리해 볼게요. 1. 패러다임의 전환: 규칙을 '만드는' 것에서 '찾는' 것으로가장 직관적으로 AI를 이해하는 방법은 우리가 매일 짜고 있는 '일반적인 코드'와 비교해 보는 거예요.전통적인 프로그래밍은 데이터(Data)와 규칙(R..

React로 개발을 하다 보면 누구나 한 번쯤 겪는 고통이 있습니다.바로 '클래스명 짓기' 인데요. .wrapper, .container, .btn 같은 흔한 이름을 썼다가 다른 컴포넌트의 스타일이 망가져 버린 경험, 다들 있으시죠?저도 예전에는 클래스명 충돌을 피하려고 .main-header-nav-inner-box 같이 끝도 없이 긴 이름을 짓느라 골머리를 앓았던 기억이 납니다. 😅 과거 전통적인 웹 퍼블리싱 환경에서는 전체 CSS를 하나로 묶어 관리하는 방식이 유행했지만, 컴포넌트 단위로 개발하는 React(또는 Next.js) 생태계에서는 스타일도 컴포넌트에 종속시키는 것이 대세입니다. 오늘은 SCSS 시리즈의 마지막 편으로, React 환경에서 컴포넌트(.tsx)와 SCSS Module(.mo..

우리는 지난 11편의 글을 통해 컴포넌트, 상태 관리(Redux), 라우터, 그리고 서버 통신(React Query)까지 리액트로 완벽한 웹 애플리케이션을 구축하는 뼈대를 모두 세웠습니다.기능적으로는 이제 남부러울 것 없는 멋진 서비스가 탄생했죠!그런데 프로젝트의 규모가 커지고 화면에 보여줄 데이터가 많아지면, 새로운 고민거리가 생깁니다."사용자가 '좋아요' 버튼 하나를 눌렀을 뿐인데, 왜 화면 전체가 깜빡거리면서 버벅거리지?" 오늘은 주니어에서 중급 개발자로 도약하기 위한 필수 관문인 리액트 메모이제이션(Memoization) 3총사의 정확한 사용법과, 실무에서 흔히 저지르는 '무지성 최적화'의 함정에 대해 탈탈 털어보겠습니다.1. 리액트는 언제 화면을 다시 그릴까? (리렌더링의 조건)최적화를 하려면 ..

SCSS로 파일을 분리해서 작업할 때, 숨 쉬듯이 사용하던 @import... 다들 익숙하시죠?저도 프로젝트를 세팅할 때면 항상 style.scss 파일 맨 위에 @import 'variables';, @import 'mixins';를 주르륵 적어두고 시작했는데요. 그런데 충격적인 소식이 있습니다.현재 SCSS의 표준 구현체인 Dart Sass에서 @import 문법은 점진적으로 폐지(Deprecated)될 예정이라는 사실, 알고 계셨나요? 😱오늘은 실무에서 왜 @import를 버려야 하는지, 그리고 이를 완벽하게 대체할 수 있는 새로운 모듈 시스템 @use와 @forward를 어떻게 적용해야 하는지 제 실무 경험을 바탕으로 알기 쉽게 정리해 드릴게요.1. 정들었던 @import, 왜 금지되었을까?가장..

지난 10편에서 우리는 무적의 useAxios 커스텀 훅을 만들어 인터셉터와 토큰 갱신까지 완벽하게 처리하는 방법을 배웠습니다.이제 백엔드 서버에서 데이터를 안전하게 가져올 수 있는 '통신망'이 완벽하게 구축되었죠! 자, 그럼 이제 게시판 목록을 화면에 띄워볼까요?아마 리액트를 처음 배우신 분들이라면 아주 자연스럽게 useState로 데이터를 담을 공간을 만들고, useEffect 안에서 axios를 호출하실 겁니다. 저도 처음엔 당연히 그렇게 했고요. 하지만 실무에서 이 방식을 계속 쓰다 보면, "아... 통신 한 번 할 때마다 코드가 왜 이렇게 길고 피곤하지?"라는 한계에 부딪히게 됩니다.오늘은 이 지긋지긋한 API 호출 노가다에서 저를 구원해 준 실무 프론트엔드 생태계의 절대 강자, React Qu..

지금까지 우리는 상태 관리(Redux)와 라우팅(React Router)을 통해 클라이언트(화면) 단의 뼈대를 튼튼하게 다졌습니다.특히 지난 9편엔 새로 고침에도 로그인이 유지되도록 하는 reudx-persist를 알아보기도 했습니다. 이제 진짜 데이터를 화면에 뿌려주기 위해 백엔드 서버와 통신(API 호출)을 할 차례입니다.보통 API 통신에는 axios 라이브러리를 많이 사용하시죠?그런데 실무에서는 컴포넌트마다 axios.get()을 하드코딩하며 매번 로그인 토큰(Access Token)을 손으로 집어넣지 않습니다.귀찮기도 하고, 토큰이 만료되었을 때(401 에러) 대처하기가 너무 힘들거든요. 오늘은 모든 API 요청과 응답의 '문지기' 역할을 하는 Axios 인터셉터(Interceptor)를 알아보..

퍼블리싱이나 프론트엔드 작업을 하다 보면 .mt-10 { margin-top: 10px; }, .mt-20 { margin-top: 20px; } 같은 유틸리티 클래스를 수십 개씩 타이핑해 본 경험, 다들 있으시죠?저도 예전에는 복사/붙여넣기를 반복하면서 '이걸 자동으로 만들어주는 기능은 없을까?' 하고 답답해했던 기억이 납니다. 😅 오늘은 이런 무의미한 타이핑 노가다를 완벽하게 끝내줄 SCSS의 강력한 무기, 조건문(@if)과 반복문(@for, @each)에 대해 이야기해 보려고 해요.CSS 파일에 로직을 더해서 코드를 우아하게 찍어내는 방법, 지금 바로 시작하겠습니다!1. CSS에서 로직이 왜 필요할까요?순수 CSS는 정적인 스타일 시트이기 때문에 "만약 A라면 B 스타일을 적용해라" 혹은 "1부터..