1. 웹 사이트 최적화 방법베스트 : 아무것도 하지 않는다.현실적인 선택 : 덜 일한다.2. 최적화 작업 진행 흐름진단 > 개선 > 테스트 > 진단1. 진단첫 페이지 왜 이렇게 느림?Core Web VitalsFirst Contentful PaintLagest Contentful PaintCumulative Layout Shift왜 이렇게 늦게 반응함?Core Web VitalsInteraction to Next Paint왜 이렇게 끊김?애니메이션 동작크롬 개발자도구 - lighthouse크롬 개발자도구 - performance, memory(누수는 없나?) 2.1 문제 해결 - 로딩 지연HTML Parsing 방해하지 않기script 위치 조정 (body 끝으로 이동)defer/async 속성 활용Bu..

1. HTTP 및 TCP/IP1.1 TCP와 IP의 역할IP (Internet Protocol): 데이터를 목적지까지 전달하는 역할.TCP는 IP 위에서 작동하며, 데이터를 패킷으로 나누어 전송한 후 수신 측에서 이를 재조립.TCP (Transmission Control Protocol): 데이터 전송의 신뢰성을 보장.1.2 HTTP 통신의 특징HTTP (Hypertext Transfer Protocol): 요청-응답 기반의 단방향 통신 프로토콜.클라이언트가 요청을 보내면 서버가 응답하는 구조로, 정적 콘텐츠 로드, 폼 데이터 전송, API 호출 등 일회성 요청에 적합.요청-응답 구조: 클라이언트가 요청을 보내고 서버가 응답하는 방식으로, 요청마다 새 연결을 설정하고 데이터를 주고받음.무상태성: HTTP..

vite proxy 설정을 통해서 백엔드 연동시도가 좋음// vite.config 파일export default defineConfig({ server: { proxy: { '/api': 'http://localhost:8080', }, },});디렉토리 구조features 중심?src/├── app/├── entities/├── features/├── shared/├── widgets/├── pages/룰을 만들고 => 코드리뷰를 AI에게 부탁.확장자타입파일이면 ts로/types/Window.tsany 타입interface BootStoreState { bootStatus: BootStatus; systemData: any; errorMessage: string | nul..

1. RAG ?검색(Retrieval) + 답변 생성(Generation)을 결합한 기술. 마치 오픈북 시험처럼, 필요한 자료를 찾아보면서 답변하는 방식.외부 문서를 업로드하고 질문에 대한 답변을 생성할 때 관련 문서를 검색해서 LLM이 더 정확한 답변을 생성.왜 필요할까?LLM은 학습 데이터에만 의존. 하지만 RAG를 사용하면?최신 정보 활용 가능사내 문서, 개인 자료 등 외부 지식 활용Hallucination(헛소리) 감소답변의 출처 추적 가능2. 데모2.1 요약문서를 벡터로 변환해서 Vector DB에 저장질문도 벡터로 변환해서 유사한 문서 검색검색 결과 + 질문을 LLM에 전달해 답변 생성2.2 준비Gemini key 생성해서 가져오기https://aistudio.google.com/api-key..

CH 1. Next.js 16 기본 구조 및 정적 UI 구축1-1. React와 Next.js의 차이점React는 UI를 만들기 위한 라이브러리. 기본적으로 클라이언트 측 렌더링(CSR)만 지원.Next.js는 React를 기반으로 하며, 개발에 필요한 모든 기능(라우팅, 데이터 페칭, 빌드 시스템)을 갖춘 풀스택 프레임워크.서버 측 렌더링(SSR), 정적 생성(SSG) 등 다양한 렌더링 방식을 기본으로 제공SEO(검색엔진 최적화)에 유리더 빠른 로딩 지원 (클라이언트 로드 부담 감소 )Server Component를 통해 서버와 클라이언트의 경계를 명확히 구분하여 성능을 최적화함.1-2 todo 개발 범위Read (읽기): ToDo 리스트를 서버에서 가져와 보여줌.간단한 토글 : ToDo 완료 표시Cr..

1. MSW 방식의 mocking 서버 구현feat.md 에 따라서 개발진행.동작 체크~서버 실행service worker 기반 응답 확인구조 이해 및 MSW 학습참고. Service WorkerService Worker 등록:시작코드, worker.start() 실행mockServiceWorker.js 파일을 백그라운드 스레드에 등록네트워크 가로채기모든 fetch 요청을 네트워크로 나가기 전에 가로챔.가로챈 요청(URL, 메서드)을 handlers.js에 정의된 Mock 목록과 비교하여 일치하는 핸들러 찾기일치시 : 실제 서버 통신 없이 핸들러에 정의된 Mock 데이터(JSON)를 즉시 생성불일치 : 요청을 bypass하여 통과Service Worker는 이 Mock 응답을 웹 페이지의 fetch 호출..

에러 핸들링의 목표는 두 가지다에러 처리는 단순히 try / catch를 쓰는 문제가 아니다.목표는 명확하다.개발자가 문제를 인지할 수 있는가어디서왜어떤 에러가 났는지사용자에게 비정상 상황을 적절히 보여주는가멈췄다는 사실을 알려주는지다시 시도할 수 있는지최소한 망가진 화면은 아닌지 에러 처리의 기초: throw는 어디까지 전파될까?function foo(s) { console.log("foo start"); if (typeof s !== 'string') throw '에러'; console.log("foo end");}function bar() { console.log("bar start"); foo(1); console.log("bar end");}function baz() { conso..

1. 디렉토리 구조가 중요할까?유지보수성: 기능이 늘어나고 팀원이 많아질수록, 구조가 엉키면 유지보수가 어렵다.코드 탐색 속도: 파일을 빠르게 찾을 수 있어 생산성 향상.협업 명확성: 역할별/기능별 책임이 명확해져 코드 충돌 줄어듦.확장성: 구조가 잘 짜여 있으면 기능을 확장하기 쉬움.애플리케이션이 복잡할수록 더 중요.2. "나눈다"는 건 무엇을 기준으로?디렉토리를 나누는 개념은 결국 모듈화를 어떻게 적용할 것인가에 대한 고민.ESM과 같은 모듈 시스템이 부족했던 시절에는?전역 객체(namespace)를 이용해 계층을 흉내내기도 함.과거 방식: Namespace 패턴 (ESM 이전)(와 전역변수 하나라니...)const naver = {}naver.auth = {}naver.auth.login = fun..