1. 지원 계기 — 왜 부스트캠프였는가우선, 나는 부스트캠프를 지원 당시 나는 졸업을 앞두고 취업 준비를 하고 있는 상태였다. 바로 취업 준비를 할지 고민하다가, 쓰디 쓴 탈락의 고비를 마셨고... 🥹[네이버페이] 채용 연계형 FE 개발 인턴십 - 서류 합, FE 테스트 탈락ICT 글로벌 인턴십 1차 - 서류 전부 탈락ICT 글로벌 인턴십 2차 - 서류 한곳 통과, 최종 면접 탈락우아한 테크코스 6기 프리코스 탈락[네이버랩스] Frontend Engineer (인턴십/자율주행) 서류 탈락카카오 공채 1차 코딩테스트 탈락[토스] Frontend Developer Assistant 탈락스스로 더 성장과 학습이 필요하겠다는 결론을 내렸다.실패 원인을 분석해보았을 때 크게 3가지 이유가 있었다.지나치게 프론트..

보호되어 있는 글입니다.

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 호출..