AI를 신뢰한다는 말ChatGPT에게 코드를 물어보고 그대로 붙여 넣은 적이 있다. 같은 질문을 해놓고도 검색 결과나 공식 문서를 다시 확인한 적도 있다.둘 다 AI를 사용한 행동이지만, 신뢰한 방식은 다르다. 앞의 경우에는 답변을 바로 의사결정에 반영했고, 뒤의 경우에는 AI를 출발점으로만 썼다. 인간-AI 상호작용 연구에서 신뢰는 보통 이런 차이를 가리킨다. 사용자가 AI의 능력과 한계를 어느 정도 이해하고, 그 수준에 맞게 의존하는가. 그래서 신뢰는 만족도나 사용 의도와 구분된다. 만족도는 결과나 경험이 마음에 들었는지에 가깝다. 사용 의도는 앞으로도 계속 쓸 생각이 있는지를 말한다. 반면 신뢰는 AI의 결과가 완전히 맞는지 모르는 상황에서도 그 결과를 판단에 반영하려는 정도다. ChatGPT를 매..

FECONF 2025에서 공개된 강남언니 SEO 웹 전략 영상을 봤다. 제목부터 강했다. 1년에 10억 원을 절약했다는 이야기였는데, 단순히 광고비를 아꼈다는 말보다 더 인상적이었던 건 SEO를 바라보는 관점이었다.나는 SEO라고 하면 먼저 메타 태그, 시멘틱 태그, LCP 같은 키워드를 떠올렸다. 프론트엔드 개발자가 챙겨야 하는 SEO도 그 정도라고 생각하기 쉬웠다. 그런데 강남언니 사례에서 중요한 포인트는 조금 달랐다.핵심은 검색 엔진이 우리 페이지를 얼마나 잘 발견하고, 이해하고, 노출하고, 사용자가 클릭하게 만들 수 있는가였다. 즉, SEO는 태그 몇 개를 넣는 작업이 아니라 검색 유입 퍼널을 설계하는 일에 가까웠다.SEO를 퍼널로 보기영상에서 가장 좋았던 부분은 SEO를 퍼널로 나눠서 설명한 점..

최근 holistics/dbx-multi-lang 저장소에 한국어 locale을 추가하는 PR을 보냈다.처음에는 단순히 “한국어 번역 파일을 추가하면 되겠지” 정도로 생각했다. 한국어 문장을 채워 넣고, 파일을 추가하고, PR을 올리면 끝나는 작업에 가까울 거라고 봤다. 그런데 막상 작업해보니 생각보다 단순한 번역 작업은 아니었다. 기존 locale 구조를 맞춰야 했고, 패키지에서 실제로 export되도록 연결해야 했고, placeholder나 특수 문자가 런타임에서 깨지지 않는지도 확인해야 했다. 결과적으로 PR은 merge되었고, dbdiagram.io와 dbdocs.io에서 사용할 수 있는 다국어 패키지에 한국어 locale이 추가되었다. 큰 기능을 만든 것은 아니지만, 한국어 사용자가 제품을 더 ..

1. 태그 기반 추천의 한계기존 추천 방식study-admin은 블로그 스터디를 운영하기 위한 관리 서비스다. 스터디원들이 작성한 글을 모아 보고, 외부 아티클이나 컨퍼런스 콘텐츠를 큐레이션하는 기능이 있다.처음 추천 방식은 단순했다. 사용자의 관심사 태그와 콘텐츠에 붙은 태그가 얼마나 겹치는지 보고 정렬했다.추천 점수 = 사용자 interests ∩ 콘텐츠 tags 개수작은 서비스에서는 이 방식도 나쁘지 않다. 구현이 쉽고, 결과를 설명하기도 쉽다. 예를 들어 사용자가 React, LLM에 관심이 있고 콘텐츠 태그에도 React가 붙어 있다면, 왜 추천됐는지 비교적 명확하다.하지만 실제 데이터를 넣고 써보면 한계가 빨리 보였다.태그가 비어 있으면 추천도 비어버린다첫 번째 문제는 태그가 비어 있거나 부정..

AI와 개발에 대해 이야기하는 구름 커밋 세션을 들었다. 요즘 워낙 "AI로 개발자가 대체된다", "바이브 코딩이면 혼자 서비스도 만든다" 같은 말이 많아서 조금은 뻔한 이야기일 줄 알았는데, 실제 현장에서 부딪힌 사례들이 꽤 구체적이었다.듣고 나서 제일 크게 남은 건 하나였다. AI가 코드를 잘 짜는 시대가 됐지만, 그 코드를 이해하지 못한 책임은 결국 사람에게 돌아온다.AI가 만든 코드는 빠르게 부채가 된다가장 인상 깊었던 사례는 STT 모델 이야기였다. 비개발자가 "음악을 텍스트로 바꿔줘"라고 요구했는데, AI가 서버에 무거운 STT 모델을 직접 올리는 방식으로 구현해버렸다고 한다. 요구사항만 보면 틀린 건 아닌데, 운영 관점에서는 서버 성능을 크게 갉아먹는 선택이었다. 문제는 이런 일이 한 번으로..

본 포스팅은 네이버클라우드에서 소정의 수수료를 제공받아 작성된 글입니다. 썸네일 출처: 네이버클라우드 제공 이미지인증서 만료는 작은 설정 문제가 아니라 서비스 신뢰 문제다웹사이트를 운영하고 있다면 사이트의 보안 유지는 더 이상 선택이 아닙니다. 특히 웹사이트와 사용자 사이의 신뢰 관계를 만들기 위해서는 보안서버 구축이 사실상 필수에 가깝습니다. 그 과정에서 자연스럽게 만나게 되는 것이 바로 SSL/TLS 인증서입니다.문제는 여기서 끝나지 않는다는 점입니다. 인증서는 발급만 받으면 끝나는 자산이 아니라, 적용 위치를 관리하고 만료 시점을 놓치지 않고 갱신 후 반영 상태까지 확인해야 하는 운영 자산에 가깝습니다. 운영자 입장에서는 작은 설정 하나처럼 보여도, 사용자 입장에서는 브라우저 경고 한 번으로 서비스..

최근 구름에서 열린 에이전트 코딩 세션에 다녀왔다. 발표자는 모아이(Moai) ADK라는 에이전트 개발 키트를 만든 분이었다. 세션은 본인의 실패 경험에서 시작해, 그 실패를 줄이기 위해 어떤 도구와 작업 방식을 만들었는지 설명하는 흐름이었다.2시간 정도 들었고, 끝나고 나니 몇 가지는 기록해두는 게 좋겠다고 생각했다.1. "AI한테 다 맡겼다가 500달러 날렸습니다"발표는 2024년 말의 실패 이야기로 시작됐다. 발표자는 와디즈에서 LLM 기반 사주 분석 서비스를 크라우드펀딩했다. 1차는 성공했지만 2차에서 문제가 터졌다.Cursor에 500달러를 썼는데, AI가 기존 코드를 마음대로 바꿔버렸다고 했다. 분명히 잘 돌아가는 것을 확인했는데 PDF 라이브러리가 어느 순간 교체되어 있었다. LangChai..

AI 서비스를 직접 만들고 운영하는 세 명의 실무자가 나눈 대화를 들었다. 이론서에 없는 현장 이야기가 많아서 메모하면서 계속 끄덕였다. 인상 깊었던 것들을 적어본다.틀린 이유를 쪼개야 고칠 수 있다AI 응답이 틀렸을 때 그냥 "틀렸다"고 넘기면 막막하다. 패널들이 오류를 네 가지로 쪼개서 분석한다는 이야기를 듣고, 이건 실무적으로 당장 써먹겠다 싶었다.문맥 파악 실패면 프롬프트를 고치고, 데이터 검색 실패면 RAG 파이프라인을 고치고, 데이터 조합 실패면 청킹이나 검색 로직을 점검하고, 최종 생성 실패면 모델이나 파인튜닝을 의심한다. 각각 해결책이 다르니까 원인을 먼저 분리하는 게 시작이라는 생각이 들었다.재현성 이야기도 나왔다. 100번 같은 질문했는데 99번은 같고 1번 다르게 나온다면, 이게 AI..

그림으로 이해하는 AWS 구조와 기술 서평1. 서론프론트엔드 개발자로 실무를 경험하면서 가장 크게 느낀 점 중 하나는,“나는 화면을 만들고 있지만, 서비스 전체 구조는 잘 모른다”는 한계였다. React 기반으로 UI를 구현하고 API를 호출하는 작업에는 익숙해졌지만,그 API가 어디에서 실행되고, 정적 파일이 어떻게 사용자에게 전달되는지에 대해서는명확하게 설명하기 어려웠다. 이러한 상황에서 AWS 전반 을 다루는 이 책은단순한 인프라 학습을 넘어,프론트엔드 개발자가 서비스의 전체 흐름을 이해하기 위한 입문서로 읽게 되었다.2. 책의 구성과 특징이 책은 AWS의 개념부터 시작해 컴퓨팅, 스토리지, 네트워크, 서버리스까지전체 서비스를 폭넓게 설명하는 구조로 이루어져 있다. 특히 인상적이었던 점은 AWS를 ..

1. 인트로며칠 전 aaru라는 해외 스타트업에 대한 글을 봤다. 이 회사는 가상의 페르소나 수천 명을 만들어서 실제 세계의 현상을 예측한다. 선거 결과, 제품 반응, 여론 동향까지. 실제 사람을 인터뷰하지 않고도 꽤 높은 정확도로 맞춘다는 얘기였다. "가상의 사람한테 물어보면 진짜랑 비슷하게 나온다고?"반신반의하면서도 흥미로웠다. 그러던 중 허깅페이스에서 엔비디아가 만든 한국인 페르소나 데이터셋을 발견했다. 이름은 Nemotron-Personas-Korea. 한국인 100만 명 분량의 가상 프로필인데, 연령, 성별, 직업, 거주지, 자기소개까지 딸려 있었다. 이걸로 내가 만드는 서비스에 대한 가상 사용자 인터뷰를 해볼 수 있지 않을까?그래서 해봤다. 1만 명한테 물어봤다. 내 컴퓨터 안에서.2. "그래..

현재 다니는 회사에서는 프론트엔드를 담당하고 있다.회식 자리에서 AI에 관심 있다고 말했다가,사내 AI 에이전트 개발을 맡게 됐다.하려는 것은 다음과 같다.맥을 병렬로 연결한다.(한 컴퓨터에서 도커를 여러개 띄우는 것처럼)이 맥들을 LiteLLM을 통해 라우팅 하며 관리한다.근데 사실 나는 ai 에이전트, 하네스와 같은 것에 관심이 있던거지 인프라에는 관심이 그렇게 많지 않았어서 당혹스러웠다.맥 스튜디오 128GB 짜리를 지급 받고 개발을 시작하려던 도중에 MLX와 GGUF라는 것에 대해서 알게 되었고, 이 차이를 명확하게 이해해보기 위해 글을 써보려고 한다.1. 들어가며휴대폰에서 돌릴 수 있는 Gemma4, 양자화등 로컬 환경에서 LLM을 돌리기 위한 노력들은 국내외를 가리지 않고 점점 늘어나고 있다...

들어가며거부기린은 개인적으로 애정이 가는 프로젝트다. 그래서 더 대충 넘기고 싶지 않았다."지금도 돌아가니까 유지하자"는 식으로 남겨두기보다, 실제로 쓰는 사람이 덜 답답하고 앞으로 유지보수하는 사람도 덜 고생하는 구조로 바꾸고 싶었다. 소프트웨어를 오래 운영하다 보면 초기에 가볍게 선택한 구조가 나중에는 로딩 속도, 화면 전환, 오류 대응, 테스트 난이도, 배포 리스크로 이어진다. 거부기린도 그런 시점에 와 있다고 느꼈다. 특히 이 앱은 장난감 프로젝트가 아니라 실제 업무에 쓰이는 도구라는 점이 컸다. 개발자 입장에서는 "조금 느리지만 참을 수 있는 정도"라고 넘길 수 있어도, 사용자는 매일 반복되는 작은 지연과 어색한 동작을 더 예민하게 느낀다.클릭했을 때 바로 반응하지 않거나, 화면이 잠깐 멈춘 것..

“ 본 포스팅은 네이버클라우드에서 소정의 수수료를 제공받아 작성된 글입니다. “ 오늘날 데이터 중심의 비즈니스 환경에서 실시간 데이터 처리는 선택이 아닌 필수가 되고 있습니다. 고객의 행동을 분석하고, 즉각적인 피드백을 제공하며, 시스템의 상태를 실시간으로 모니터링하는 것은 기업 경쟁력의 핵심 요소로 자리잡고 있습니다. 그러나 이러한 실시간 데이터 처리의 필요성은 동시에 인프라 운영의 복잡성을 증가시키고, 운영자에게는 새로운 기술적 도전 과제를 안겨줍니다. 특히, Apache Kafka와 같은 툴을 직접 관리해야 하는 경우, 그 부담은 더욱 커집니다.이러한 상황에서 네이버클라우드의 Data Stream 서비스는 강력한 솔루션으로 부상하고 있습니다. Data Stream은 Apache Kafka 기반의 기..

0. Intro인턴 시절 SaaS 어드민에 새로운 기능을 추가해야 했는데, 필요한 라이브러리를 설치하는 과정에서 문제가 생겼다. 당시 프로젝트에서 사용하던 TypeScript 버전이 오래되어, 최신 라이브러리와의 호환성이 좋지 않았기 때문이다. 결국 TypeScript를 3.x에서 5.x대로 마이그레이션하게 되었다.마이그레이션 이후 master 브랜치에 머지하고 CodePipeline에서 빌드를 확인했을 때, 속도가 눈에 띄게 빨라진 것을 체감했다. 그런데 실제로 코드에서 크게 바꾼 부분은 많지 않았다. any 타입을 좀 더 구체적인 타입으로 바꾼 정도였다.그래서 궁금해졌다. 빌드가 빨라진 이유가 any 타입을 줄였기 때문인지, 아니면 TypeScript 컴파일러 자체의 성능이 개선된 결과인지 확인해보고..

1. 들어가며 — AI 에이전트 코딩 시대, 병목은 도구가 아니라 내 머리였다AI 에이전트 코딩이 본격화되면서 개발자의 일하는 방식이 빠르게 바뀌고 있다.불과 1-2년 전만 해도 코드를 한 줄 한 줄 직접 짜는 게 당연했다. 지금은 다르다. Claude, Cursor, Windsurf 같은 도구들이 반복적인 구현을 대신 처리해주면서, 동시에 굴릴 수 있는 프로젝트 수도 자연스럽게 늘어났다.나도 그랬다. 이전에는 한두 개 프로젝트를 순서대로 진행했다면, 요즘은 3-4개를 병렬로 돌리는 게 일상이 됐다. 생산성이 올라간 건 분명한데, 이상하게 머릿속은 점점 더 복잡해졌다. A 프로젝트를 하다가 B로 넘어가면, A에서 어디까지 했는지, 다음에 뭘 해야 했는지, 왜 그런 결정을 내렸는지가 흐릿해졌다. 코드는 그..

Intro마이그레이션 작업 중 빌드 속도가 눈에 띄게 빨라진 적이 있었습니다. 어떤 변경이 원인인지 설명하려다 막혔습니다. tsconfig 옵션 몇 개를 건드렸다는 건 알았지만, 왜 그게 효과가 있는지는 몰랐습니다.그 경험이 이 글을 쓰게 된 계기입니다. TypeScript 컴파일러가 실제로 어떤 순서로, 어떤 이유로 동작하는지 이해하면 빌드가 느릴 때 어디서부터 손봐야 할지, 팀원에게 설정 변경 이유를 어떻게 설명할지 훨씬 명확해집니다.TypeScript 컴파일 과정의 전체 흐름tsc는 소스 파일을 받아 다섯 단계를 거쳐 JavaScript를 출력합니다.소스 파일 → Program 생성 → 파싱(AST) → 바인딩(Symbol) → 타입 체킹 → Emit각 단계는 독립적이지 않습니다. 바인딩이 끝난 심..

1. 멀티에이전트와 스킬, 왜 헷갈릴까?취업에 성공하고 나서 개발보다는 AX(AI Transformation)를 어떻게 높일 수 있을지 고민하며 코딩을 하던 중, 낯선 개념 두 가지를 마주쳤다.스킬과 멀티에이전트.스킬은 에이전트가 특정 책을 꺼내 읽고 그걸 참고해서 일하는 것, 멀티에이전트는 여러 에이전트가 각자 잘하는 일을 나눠서 맡는 것이라고 한다. 그런데 여기서 의문이 생겼다.어차피 둘 다 뭔가를 "불러다 쓰는" 건데, 도대체 뭐가 다른 걸까?2. 스킬이란 무엇인가?스킬을 한 문장으로 정의하면 이렇다.에이전트가 일을 잘 하기 위해 참고하는 "매뉴얼"이다. 사람으로 치면, 신입사원한테 "이 회사에서는 이렇게 일해"라고 적힌 온보딩 문서를 쥐여주는 것과 같다. 에이전트는 기본적으로 아무것도 모르는 상..

왜 먼저 디자인 패턴을 공부했는가디자인 패턴은 자주 반복되는 설계 문제를 정리한 방법이다.처음에는 면접 대비를 위해 패턴 이름부터 외웠다.하지만 공부를 이어가면서 질문의 의도를 조금씩 이해하게 됐다.면접관이 보고 싶은 건 암기량이 아니라 설계하는 방식이었다.내가 정리한 기준은 아래 세 가지다.책임을 어디에 둘지 설명할 수 있는가결합도를 낮추는 선택을 했는가변경이 생겼을 때 비용을 줄일 수 있는가이 문서는 그 기준으로 다시 정리한 기록이다.라이브러리와 프레임워크패턴을 보기 전에 제어권부터 정리했다.라이브러리공통 기능을 모아둔 코드내가 필요할 때 호출제어권이 호출하는 쪽에 있음프레임워크구조와 실행 흐름을 제공내 코드가 프레임워크 흐름 안에서 실행제어권이 프레임워크에 있음 (IoC)핵심은 누가 흐름을 잡는지다..

Intro개발자로 취업을 준비하면서 요즘 부쩍 불안감이 커졌다. AI의 발전은 날이 갈수록 가속화되고 있고, 경기 침체까지 겹치면서 취업의 문이 점점 좁아지는 것을 피부로 느꼈다. 채용 공고는 줄어들고, 요구하는 역량은 높아지고, 그 사이에서 '과연 내가 개발자로서 어떤 가치를 제공할 수 있을까?'라는 고민이 깊어졌다. AI를 단순히 두려워하기보다는 좋은 도구로 활용하고 싶었다. 그러려면 먼저 개발자가 코드 구현 외에 무엇을 할 수 있는지, 어떤 본질적인 역할을 하는 존재인지 명확히 정의해볼 필요가 있었다. 그러던 중 『우리, 프로그래머들』이라는 책이 눈에 들어왔다. 책 표지에는 "AI 시대에 잊혀 가는 '프로그래머 정신'을 다시 깨우다"라는 문구가 적혀 있었다. 마치 내가 지금 고민하고 있는 문제들에 ..

『개발자는 글을 못 쓴다고요?』 서평 기본 정보제목: 개발자는 글을 못 쓴다고요?저자: 전정은, 황수정출판사: 제이펍읽은 기간: 2025년 12월 3일 ~ 12월 17일읽게 된 이유프로젝트를 진행할 때 기능 구현은 어떻게든 해내지만, 문서화는 늘 뒤로 밀리는 편이었다. README는 비어 있거나 최소한의 실행 방법만 남아 있고, 변경사항은 머릿속에만 남아 시간이 지나면 "왜 이렇게 설계했지?"부터 다시 떠올려야 했다. 회고 글도 '잘 써야 한다'는 부담 때문에 시작이 늦어지기 일쑤였다.이 책은 제목 자체가 내 상황을 정확히 찌르는 느낌이었다. 개발자가 글을 "잘 쓰는 사람"이 되는 게 목표라기보다, 적어도 내가 했던 일을 나중에 다시 꺼내 쓸 수 있게 기록하고 싶었다. 그 방법을 구조적으로 배우고 싶어서..

1. 왜 인증이 중요한가?웹에서 인증은 필수적인 기능이다. 사용자의 데이터를 보호하고, 로그인한 사용자만 특정 기능을 이용할 수 있도록 제한하는 것이 중요하다.인증 방식에는 여러 가지가 있지만, 이번 강의에서는 세션 기반 인증을 배웠다. 특히 Next.js의 서버 액션과 Lucia 인증 라이브러리를 활용하여 인증 시스템을 구현하는 방법을 살펴보겠습니다.2. Lucia vs NextAuth: 어떤 인증 라이브러리를 선택할까?강의에서 Next.js에서 인증을 구현할 때 유명한 두 라이브러리로 Lucia와 NextAuth.js 얘기가 나왔다. 궁금해져서 지피티에게 물어보았다. 강의에서는 현재 NextAuth.js에 오류가 있어 Lucia를 선택하였다.1️⃣ Lucia✅ 세션 기반 인증 지원 (쿠키 기반, 서버..

강의를 듣다 저번 Nextjs 프로젝트 할때 가장 어려웠던 서버 컴포넌트와 클라이언트 컴포넌트에 대한 내용이 나왔다. 넥스트로 프로젝트를 처음해봤어서 편하다는 이유로 최상단 루트에 클라이언트 컴포넌트를 선언하고 개발을 진행했다. 그리고 개발이 다 끝나고 나서야 알았다. 이게 얼마나 멍청한 짓이였는지를.. 그래서 저번과 같은 실수를 반복하지 않기 위해 서버 컴포넌트와 클라이언트 컴포넌트에 대해 정리를 해보기로 했다.서버 컴포넌트 vs 클라이언트 컴포넌트서버 컴포넌트란서버 컴포넌트는 서버 측에서 렌더링되고 처리되는 React 컴포넌트이다. 그리고 넥스트의 모든 컴포넌트들은 기본적으로 서버 컴포넌트로 동작한다. 또한 주요 특징은 다음과 같다:서버 측 렌더링: 컴포넌트가 서버에서 직접 렌더링되어 초기 로드 속도..

1. Loader와 Action은 왜 나오게 되었나?데이터 API의 변화Loader와 Action이 나오기 전인 React Router DOM v6.4 이전에는 라우팅과 데이터 페칭이 완전히 분리되어 있었습니다. 라우터는 단순히 URL에 따라 어떤 컴포넌트를 렌더링할지만 결정했고, 데이터 로딩은 각 컴포넌트의 책임이었습니다.function ProductPage() { const [product, setProduct] = useState(null); const [loading, setLoading] = useState(true); const { id } = useParams(); useEffect(() => { async function loadProduct() { setLoading..

1. ICT 지원 동기ICT를 하게 된 이유는 사실 되게 간단하다.4학년이 되고 난 후, 학교에서 듣고 싶은 과목이 없었고인턴을 하며 실전 경험을 쌓고 싶었기 때문에 지원하게 되었다.2. 어떤 기업에 지원했나ICT는 총 3개의 기업에 지원을 할 수 있었다.그 중에서 내가 충분히 어필할 수 있는 내용의 프로젝트를 진행하는 기업에 지원했다.2-1. A 기업다른 기업들에게 솔루션을 제공하는 기업이었다.그리고 또한 내가 지원하는 기업들중 가장 규모있는 기업이었다.이미 진행중인 프로젝트에 내가 구현한 기능을 넣는다는 것이 매력적으로 다가왔다.2-2. B 기업지원 이유는?내가 이전에 해본 프로젝트들과 가장 핏한 기업이 아니였나 싶다.그 만큼 어필할 수 있는 점이 많았고, 잘 어필한다면 합격 가능성이 제일 크다고 생..

저번 테커 부트캠프때 깃허브를 이용해서 CI/CD를 해봤는데 지금 읽는 스터디 책에 깃허브로 CI하는 내용이 있어서 정리 한 번 해보고 코드에 반영을 할 수 있으면 반영까지 해보려고 한다!CI란?우선 기본적인 CI의 정의는 Continuous Integration(지속적 통합)의 약자로, 소프트웨어 개발에서 자주 사용하는 개발 관행 및 프로세스이다.코드에 CI를 적용함으로써 팀 구성원이 각자의 코드를 주기적으로 공통 레포지토리에 통합하는 작업을 자동화하여, 통합 과정에서 발생할 수 있는 문제를 조기에 발견하고 해결하도록 돕는다.CI의 주요 개념지속적 통합(Continuous Integration):개발자가 작업 중인 코드를 자주(하루에도 여러 번) 공유 리포지토리에 푸시하여 다른 개발자의 코드와 통합.통..

디버깅은 프로그래밍에서 가장 중요한 요소중 하나다. 잘못된 동작을 찾아내는 것은 때론 간단하지만, 여러 라이브러리와 작성된 코드들이 섞인다면 잘못된 동작을 찾아내기란 사막에서 바늘 찾기다. 이때 활용할 수 있는 리액트 개발 도구에 대해 소개해보겠다.리액트 개발 도구리액트 개발 도구란?리액트 팀에서 리액트 개발을 더 편리하게 돕기위해 만든 디버깅 툴이다. 리액트 개발도구는 브라우저의 확장 프로그램으로 만들어져있다.크롬, 파이어폭스, 엣지를 지원하는데 나는 크롬을 사용하기에 크롬에 설치해보았다.리액트 도구를 설치하고 난 후에 회색으로 뜬다면 리액트 개발 도구가 정상적으로 접근할 수 없는 페이지이거나 리액트로 개발되지 않은 페이지라는 뜻이고 리액트 로고가 정상적으로 표시된다면, 리액트 개발 도구가 웹 어플리케..

이 글을 읽는 모두 SSR에 대해 많이 들어봤을것이다.SSR, 서버 사이드 렌더링 나도 많이 들어봤지만 그게 정확히 뭐야? 라고 한다면 잘 설명하지 못했었던거 같다. 글을 쓰며 정리하고 다시 읽어보며 SSR을 정복해보자!우선 SSR에 대해 잘 알고 설명할 수 있으려면 SPA에 대하여 잘 알아야한다고 생각한다.📌 SPA란?spa는 뭘까? 스파? 따뜻하겠다.. 가 아니라 싱글 페이지 어플리케이션이다.싱글 페이지 애플리케이션이란 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 말한다.최초에 첫 페이지에서 데이터를 모두 불러온 이후에는 페이지 전환을 위한 모든 작업이 자바스크립트로 이루어지기 때문에 페이지를 불러온 이후에는 서버에서 HTML을 받지 않고 하나의 페..

친구랑 해커톤에 나가려고 찾아보던중에 유일하게 모집하던 sparcs 해커톤을 보게 되었다.SPARCS는 카이스트 총학생회 산하 단체로, 이전에도 여러 해커톤을 개최했지만 이번에는 대전 사이언스 페스티벌에서 해커톤 기간 동안 제작한 서비스로 직접 부스를 열어 일반 시민들의 반응을 볼 수 있는 좋은 기회라고 생각했다.새로운 경험과 자극이 될 것 같아 기대를 가지고 지원하게 되었다.프로젝트 미리보기팀 소개우리 팀은 프론트 2 + 백엔드 1 + 디자이너 1 총 4명으로 해커톤에 나가게되었다.그 중에서 나는 프론트엔드를 맡았다. ~ 0일차팀 빌딩우선 이번 해커톤은 개인 지원과 4인 팀 지원을 받았다. 원하는 팀으로 나가고 싶었기에 4인 지원을 하기로 마음을 먹었다.하지만 팀원을 찾는 과정에 있어서 어려움이 있었다..

React 애플리케이션에서 자주 사용하는 useThrottle와 useDebounce는 사용자 인터페이스 성능을 최적화하는 데 유용한 커스텀 훅이다.스크롤, 키보드 입력, 리사이즈 등 이벤트가 자주 발생하는 상황에서 불필요한 호출을 줄여 부드러운 사용자 경험을 제공하는 것이 목적이다 먼저 useThrottle과 useDebounce에 대해 알기전에 커스텀 훅에 대하여 알아야한다.커스텀 훅이란?커스텀 훅(Custom Hook) 은 React에서 상태 관리 및 로직을 재사용 가능하도록 만드는 함수다. 일반적으로 useState, useEffect 같은 내장 훅을 활용해 특정 기능을 캡슐화하고 이를 필요할 때마다 호출하여 사용할 수 있다. 예를 들어, useThrottle와 useDebounce 같은 커스텀 ..

스터디 책을 읽다가 평소 관심이 있던 최적화와 관련된 부분이 있어서 정리해보기로 했다.메모이제이션이란?계산 결과를 메모리에 저장해 두고 동일한 계산이 요청될 때 다시 계산하지 않고 저장된 값을 반환하는 최적화 기법이다.리액트에서는 useMemo, useCallback 훅과 고차 컴포넌트인 memo를 활용해 메모이제이션을 하곤한다.추가: React.memo, useMemo, useCallbackReact.memoimport React from 'react';const ChildComponent = React.memo((props) => { console.log('ChildComponent rendered'); return Child Value: {props.value};});const ParentCom..

지금 블로그는 버셀로 배포가 되어있기 때문에 이번에 만들고 있는 개인 포트폴리오 사이트는 깃허브 페이지로 배포하기로 했다.깃허브 페이지 배포하는것은 크게 어렵지 않았지만, 커스텀 도메인 연결이 시간이 오래걸렸어서 까먹지 않기 위해 정리 한 번 하려고 한다.1. 도메인 구매나같은 경우에는 가비아에서 이미 도메인을 산 상태여서 새로 구매는 안했다.검색창에 원하는 도메인을 치고 아직 구매안된 도메인을 사면된다.2. DNS 설정내 도메인을 깃허브 페이지의 IP 주소에 연결하기 위해 A레코드를 다음과 같이 추가해준다.타입호스트값/위치A@185.199.108.153A@185.199.109.153A@185.199.110.153A@185.199.111.153그리고 또한 나는 서브 도메인 연결을 위해서 CNAME도 사용..

정규표현식 정규식, Regualar Expression 역할 문자 검색 (search) 문자 대체 (replace) 문자 추출 테스트 사이트 https://regexr.com/ 정규식 생성 // 생성자new RegExp("표현", "옵션"); new RegExp("[a-z]", "gi"); // 리터럴/표현/옵션 /[a-z]/gi 예제 문자 const str = ` 010-1234-5678 hochoi8621@tukorea.ac.kr aaaabbbbbccccc The quick brown fox junps over the lazy dog. ` 메소드 메소드 문법 설명 test 정규식.test(문자열) 일치 여부(Boolean) 반환 match 문자열.match(정규식) 일치하는 문자의 배열(Array) ..