한빛미디어 서평단 활동을 위해서 책을 협찬받아 작성된 서평입니다. 클로드 코드 마스터 | 이남희 - 교보문고클로드 코드 마스터 | 클로드 코드 하나로 기획·개발·운영을 한 번에 끝낸다AI 에이전틱 코딩의 실전 워크플로를 처음부터 끝까지 담은 최초의 클로드 코드 전문서. AI 코딩 도구는 이제 스스로product.kyobobook.co.kr “AI로 개발을 어떻게 해야 하는가”를 제시하는 책 책을 고른 이유깃허브 코파일럿(GitHub Copilot)을 사용하고 있으나, 주변에 클로드 사용자가 많아 궁금함이 있었습니다. 코파일럿보다 비싸고 모델 선택도 제한적임에도 다들 클로드를 쓰는 이유가 뭘까 하고요. 또 긴 대화에서 맥락을 잃지 않도록 플로우를 마크다운으로 먼저 작성하게끔 하고, 클로드만으로 서비스를..

개요회사 프로젝트를 유지보수하다보면, 분리한 자바스크립트 모듈 파일을 호출하기 위해 크게 두가지 방식을 사용하는 것을 확인할 수 있었습니다. 크게 관심 갖지 않고 다른 파일에서 쓰는 방식을 따라 쓰곤 했는데, A 프로젝트의 모듈을 B 프로젝트에 이식하려니 충돌이 발생했습니다.이를 해결하는 과정에서 자바스크립트 모듈 정의 방식인 ES Module(ESM)과 CommonJS(CJS) 방식을 이해할 수 있었습니다.이 글에서는 두 모듈의 개념과 특징을 확인하고 Node.js 환경에서 왜 두 문법을 혼용하게 되었는지, 그리고 이 과정에서 어떤 문제가 발생하는지에 대해서 정리해 볼 예정입니다! ES Module (= ESM)ECMAScript 표준에서 정의된 모듈 시스템입니다. 자바스크립트 언어 스펙 자체에 포함..

"한빛미디어 서평단 활동을 위해서 책을 협찬 받아 작성된 서평입니다." 이 책을 고른 이유AI툴의 선두주자인 챗GPT를 입맛대로 길들여 놓은 제 입장에서 제미나이는 “말대꾸하고, 잘못 인정도 안하는”이미지에 언제나 머물러 있었습니다. 또 AI 툴의 경쟁이 치열하다는 소식과 '나노 바나나가 강력해졌다!’ 는 소식은 쏟아졌지만 굳이 적응해둔 툴을 바꿀 정도의 매력은 느끼지 못했습니다. 제미나이가 챗GPT와 무엇이 다르고, 내 작업 흐름에 어떤 변화를 줄 수 있을지 확인하고 싶어 이 책을 골랐습니다. 특징 & 추천하는 대상이 책은 제미나이를 이미 능숙하게 사용하는 숙련자보다는 “AI툴을 아예 처음 써보는 사람”이나 제미나이가 “어떤 기능들을 제공하는지를 모르기 때문에 질문이 제한적이라고 느껴지는 사람”..

최근 ‘메모이제이션 구현하기’를 해보면서 이것저것 알아봤습니다. 메모이제이션이 리액트 내장 기능인 줄 알았으나, js, ts에서 쓸 수 있다는 걸 알았고 유용하게 쓰일 것 같아서 배운 것들을 공유하고자 이 포스팅을 씁니다. 메모이제이션(Memoization)이란? 복잡한 연산을 수행하는 `complexFn(arg)`이라는 함수가 있다고 가정합니다. 이 함수는 굉장히 길고 복잡해서 메모리를 많이 씁니다. 그런데 이 함수의 인자인 `arg`에 같은 값이 자주 들어온다면 어떨까요? 두 번 계산할 필요 없이 이미 나와 있는 답을 저장해두었다가 재사용하면 되지 않을까요? 이게 메모이제이션의 핵심 목표입니다.정리하자면 메모이제이션은 ‘같은 입력에 대해 동일한 결과를 반환하는 연산을 캐싱하여, 불필요한 재계산을 줄..

항해 작년 말부터 시작했던 부트캠프를 4월에 수료했다. 잘하면서 열심히 사는 사람들을 많이 만나고 그 환경에서 꾸준히 공부 의욕을 얻는다는게 가장 큰 아웃풋이었다. 이후에 학습메이트도 두 번 했고, 거기서 만난 사람들과 스터디도 하게되면서 일 년을 항해로 꽉 채웠다고 해도 될 정도다.원래 목표였던 수료 후 이직은 실패했고, 내 실력의 바닥을 자꾸 만나면서 좌절도 많이 했지만..무서움을 극복하고 신청했던 나를 칭찬한다. 배웠던 내용은 크게 `클린코드` - `성능 최적화` - `테스트코드` - `리액트원리`였다. 나한테 영향을 많이 줬던 순서다. 업무하면서 "코드가 이게 최선인가.."를 생각해 본 적이 많았는데 구체적으로 뭐가 문제였는지를 알게 되어서 도움이 많이 됐다.업무에 기능 구현 ( =새로운 코드..

서론Promise가 뭔지 몰랐던 시절, 어떻게든 그 값을 꺼내보겠다고 머리를 굴려봤던 기억이 납니다. 프로미스를 제대로 이해하지 못하고 어떻게든 결과값만 꺼내고 싶어서 지금 생각해보면 정말 말도 안되는 방식을 썼었습니다. 이런 식으로 값을 꺼내왔는데, 다행히 스벨트 환경이었기 때문에 화면에 리턴이 정상적으로 표시되었습니다. 그렇다면 이런 결과값은 어떻게 써야 했던 걸까요? 사용 목적자바스크립트에는 “비동기” 메서드가 존재합니다. 동기 메서드의 로직은 자바스크립트의 "단일 스레드(single-thread)"에서 작성한 순서대로 실행되지만 비동기 로직은 다 끝나지 않아도 기다리지 않고 다음으로 넘어갑니다. 그럼 자바스크립트에는 왜 비동기 메서드가 있는걸까요?여기가 카페고, 커피를 30분 뒤에 받겠다는 사람이..

정규식은 자바스크립트 외에도 다양한 언어에서 사용됩니다. 잘 활용하면 코딩 테스트에서도, IDE의 검색창에서도 활용도가 매우 높은데, 제대로 써먹는 개발자는 많지 않은 것 같습니다. AI프롬프트를 이용하면 기똥차게 정규식을 만들어주고, 만들어진 정규식을 해석해 주기도 하지만 기본적인 규칙 몇가지를 알아두면 더 빠른 개발생활을 할 수 있을 거라고 생각합니다. 정규식은 패턴과 플래그로 구성되어 일정한 패턴을 가진 문자열을 표현하는 형식 언어입니다. 표현이 조금 알쏭달쏭하지만 정규식이 뭔지는 알 거라고 생각하니 바로 설명으로 넘어가겠습니다. 정규식은 변수로 선언하면서 `/패턴/플래그`로 작성해도 되고, 생성자 함수를 사용해서 생성도 가능합니다. 생성자 함수를 사용하는 법은 아래에서 다시 다루겠습니다. 아래..

우리 솔루션 사용자들은 대부분 브라우저를 하루 종일 켜 둔 채, 새로고침 없이 업무를 이어갑니다. 그런데 사용 중 배포가 이뤄지면 브라우저(프론트엔드)는 구버전, 백엔드는 최신 버전 상태가 되어 저장 실패나 화면 오류가 자주 발생했습니다. 결과적으로 매 배포 직후 “화면이 안 넘어간다”, “저장이 안 된다” 같은 문의가 쏟아졌고, CS팀에서는 “강력 새로고침을 해보셨나요?”라는 안내로 분주했습니다.그래서 저는 브라우저가 열린 상태에서도 새 버전 배포 여부를 감지하고, 구버전을 사용중이라면 팝업을 띄워 강력 새로고침을 유도하는 기능을 도입하기로 했습니다. 이 글은 그런 문제의식에서 출발했고, 실제로 어떤 방식으로 적용했는지, 또 구현 과정에서 어떤 선택지들을 고민했는지 정리해 공유하려고 합니다. 결론해결 ..

hide서론/hide공부하다 보면 유용한 내장 함수나 기능을 많이 배우게 되는데, ES2020에서 제공하는 옵셔널 체이닝이나, 널 병합 연산자 등등을 우리 프로젝트에 적용하면 온통 문제가 발생했습니다.모르면 모를까 알고도 못 쓰는 건 너무 불편했습니다. 그리고 null 체크를 제대로 하지 않고 API 리턴값을 다루다 보니 `null.split(…)` 같은 호출로 오류가 자주 났습니다.이런 걸 발견할 때마다 ` if (값 == null)`이나 `값 === null ? null : 값.split("-")[1]`처럼 일일이 처리하는 방식은 마음에 들지 않았습니다. 그렇다고 Node 모듈이나 Vue 버전을 올리자니 대규모 공사가 필요하고, 회사에서도 허락해줄 리 없는 비현실적인 선택지였습니다. (사실 이런 논의..

최근 코딩테스트 스터디를 진행하면서 재귀함수를 이용해야 하는 부분이 있었는데 작성도, 해석도 어려워서재귀함수의 개념을 잘 모르고 있었다는 점을 깨달았습니다.이 포스팅은 개념을 다시 정리하고 빨리 해석하는 스킬을 얻기 위해 작성합니다!읽는 시간 : 5분 재귀함수는함수 내부에서 자기 자신을 다시 호출하는 함수입니다.주로 트리 구조를 탐색할 때와 같이, 반복적인 구조를 간결하게 처리해야 하는 상황에서 자주 사용되고, 대부분은 for나 while 등의 순회문으로 대체 가능합니다. 재귀 함수는 아래처럼 사용합니다.function 재귀함수(입력값) { if (종료 조건) { return (결과); } // 1) 작은 문제로 축소 -> 탈출조건에 가까워지는 요소 const smallerInput = …;..

항해99 플러스 프론트엔드반 4기를 마치고, 5기 학습메이트(이하 학메라고 합니다)로서의 활동이 끝났습니다!6기 학메도 확정이 난 상태에서,지난 5기를 되돌아보고 더 좋은 6기를 만들고싶은 마음으로 회고를 작성합니다.출항 ⛵ _hello, world! 내가 항해에서 얻은 기억이 너무 좋았기 때문에 다른 사람들에게도 이런 경험을 주고 싶었고, 나 또한 그 일부이길 바라면서 학습메이트를 신청했었다. 내가 수강생이던 시절의 자료를 한번 더 읽어보려고 했는데 이것저것 하다 보니 시간이 훌쩍 가서 거의 못 보고 개강일이 되었다. (ㅠ) 학메 고인물 태영님이 개강일 학습메이트 소개를 맡아 해주었다. 다른 분들의 자기소개를 열심히 듣는 척 했지만, 사실은 내 소개를 뭐라고 해야 할 지 열심히 머리 굴리고 있었다..

다들 과제 시작하셨나요? 처음으로 과제를 시작하려니까 막막할거예요.저는 포크를 항해에서 처음 떠 봤어요. 지금 회사에서는 이렇게 버전 관리를 하지는 않았거든요.말은 안해도 저 같은 사람이 분명 있을 것 같아서, 속터졌던 저처럼 되지 말라고 과제 시작하는 법을 알려드릴게요!발제 자료를 가볍게 훑어보기읽어봐야 할 자료가 너무 많이 쏟아지니까 정신없죠?과제 전에 이 많은 자료를 정독한다고 생각하면 시작도 하기 힘들어요.그렇다고 안 읽고 시작하면 빠르게 진행할 수 있는 힌트를 놓칠 수 있답니다.  과제 포크뜨기 진행할 과제를 포크 뜨고 시작해요. 과제 안내 페이지의 상단에 첨부된 깃 링크로 이동하세요   포크 버튼 클릭 -> create a new fork  자동완성된 내용이 있을텐데, 따로 변경하지 않아도 괜..

항해99 플러스 프론트엔드반 수료 후 작성하는 후기수료식때 회고 발표했던 내용인데 기억해두고 싶어서 정리한다. ">  드디어 진행 바가 다 채워졌습니다.일수로는 78일, 주차로는 11주였는데너무 멀어서 오지 않을 것 같던 수료일이 되니기분이 묘합니다.  트러블 슈팅 경험을 얘기해보자면,제 트러블은 코드나 잘 해결되지 않던 버그가 아니었습니다.주차 후기글로 작성했던 블로그 글을 캡쳐해봤는데,원하는 만큼의 실력이 나오지 않아서 괴로웠던 그때의 마음이 기억납니다.비슷한 연차인 것 같은데 다들 과제를 쑥 해버리는 모습을 보고난 왜 못하지.. 라는 자책과내가 못하는 이유를 어떻게든 만들어서 스스로 위로하기를 동시에 했었습니다.  이 트러블을 "슈팅"했던 이유는 생각지도 못하게 사람들 덕분이었습니다.메타버스에 ..

준비CDN도입 전 : S3CDN도입 후 : CloudFront 측정 환경 세팅측정 환경 : 동일한 PC / 윈도우 / Chrome측정 도구 : Chrome 개발자 도구 - Network, Performance, Lighthouse 기대 효과TTFB 감소: 요청이 지역 엣지 서버로 라우팅.대역폭 최적화: 압축 및 캐싱으로 전송 비용 감소.성능 일관성: 사용자 위치에 따른 성능 차이 감소. #성능 측정Queueing (대기열)요청이 브라우저의 네트워크 큐에 대기한 시간 Stalled (중단됨)요청이 실행되기 전 네트워크 자원 확보를 기다린 시간저하 원인 분석 & 개선DNS 조회 및 TCP 연결 증가 → AWS CloudFront에서 Keep-Alive 설정 _ 하려고 했으나 CloudFront는 원칙적으로 ..

프론트엔드 배포 CI/CD 파이프라인 구축하기 🤷‍♂️ 목적변경된 코드를 GitHub에 올리면 자동으로 지정된 아래 작업을 완료하고 배포하도록 만듦📦 구축된 CI/CD 의 빌드 과정Checkout 액션을 사용해 코드 내려받기 → GitHub Actions에서 제공하는 actions/checkout을 사용해 최신 코드를 가져옴의존성 설치npm ci 명령어로 프로젝트 의존성 설치 (npm install보다 빠르고 일관적)Next.js프로젝트 빌드npm run buildAWS 자격 증명 구성GitHub Actions에 저장된 계정 인증 정보를 사용해 구성빌드된 파일을 S3 버킷에 동기화AWS CLI 명령어를 사용하여 빌드된 정적 파일을 S3 버킷에 업로드.CloudFront 캐시 무효화최신 컨텐츠로 갱신 ..

이번 주 주제 : 클린코드와 리팩토링 정규모임 출석QnA세션 듣기멘토링기본과제심화과제전주 과제피드백 확인OO테오△△O 처음으로 심화를 시도해보긴 했지만 심화도 기본도 아쉬웠던 한 주.뜯고 붙이고 뜯고 붙이고 정말 시간을 많이 투자했는데결론만 놓고 보자면 바뀐게 별로 없는 리팩토링이었다. 결과만 본 사람들은 얘가 도대체 뭘 했다는 건지 의문이지 않았을까? 우리회사 코드를 보다 보면, 어떻게 해야 좋은지는 모르겠지만"하여튼 이건 좀 아니다..." 싶은 부분이 정말 많았다. "A상태 변경"이라는 이름을 가진 메서드 안에전혀 엉뚱한 요청 API가 껴 있기도 하고 (그리고 그 요청은 높은 확률로 DB를 변경시켰다.)이 함수를 처음에  어떤 용도로 만들었지만결국 어떻게 괴랄해졌는지 역사를 알 수 있는 네이밍까지....

정규모임 출석QnA세션 듣기멘토링기본과제심화과제전주 과제피드백 확인OX1/3OXO 코딩도 일기를 쓰면 도움이 된다고 해서 써보는 WIL. 그렇지만 과제가 다 끝나면 분명 기억이 안날테니까 과제 중에 채워나가는 중. createVNode를 잘 베끼고 normalizeVNode를 시작하면서 고뇌가 시작됐다. 재귀를 처음 해봤는데, 인셉션같은 구조라 너무 어려웠다. vNode를 만드는데, 그 vNode가 사실 다른 vNode를 만드는 함수일 수 있대. 그래서 그 함수를 불러서 vNode를 만들어 바깥으로 꺼내줘야 하는데 내 createVNode는 object를 인자로 받지 않았지만 그 함수는 인자를 object로 해줘야 한대..!!!미칠 것 같은 디버깅의 시간이었다. 챗 지피티를 얼마나 괴롭혔는지 모르겠다.고..

많은 웹 사이트에서 사용자 인증을 할 때, 1. 로그인 정보로 토큰 취득 2. 토큰을 헤더에 담고 3. 매 요청 시 토큰을 담은 헤더를 보냄 방식으로 진행합니다. 따라서 변경되지 않는 고정 토큰을 사용할 때를 제외하고는 포스트맨에서 API를 체크하기 위해 로그인API 실행 --> 응답에서 토큰값을 복사 --> 헤더에 넣고 -->원하는 요청 실행 을 반복해야 합니다. 매번 이렇게 하면 너무 귀찮으니까 로그인 API가 실행되면 응답에서 토큰을 찾아 모든 request의 헤더에 자동으로 넣어주려 합니다. 꼭 토큰이 아니더라도 요청의 응답을 전역변수로 지정하는 방법이므로 여러 가지로 활용이 가능해요 방식은 아래 순서로 진행됩니다! 1. 컬렉션 (request들의 집합)에서 공통으로 사용할 변수를 하나 정의해 r..