게으른개발너D

프론트엔드 개발에서 브라우저 능력치는 웹 애플리케이션이 서버의 도움을 최소화하고 사용자의 기기에서 자체적으로 수행할 수 있는 모든 기능적 역량을 의미한다. 브라우저는 단순한 문서 뷰어를 넘어 하나의 독립적인 운영체제처럼 작동하기 때문이다. Web API는 전체를 외우려고 할 필요는 없다. 어떤 작업을 하려는지에 따라 필요한 API를 찾아 쓰면 된다.하지만 필수를 모르는 프론트엔드 개발자는 없겠지? 1필수로 알아야하는 Web API 아래 API들은 우리가 이미 잘 알고 있는 것들이겠지만 일단 정리해 본다! 1. DOM API — HTML 요소를 찾고 바꾸기화면의 HTML 요소를 선택하거나 내용을 변경하고, 이벤트를 등록할 때 사용하는 API다.요소 선택, 내용 변경, class 조작, 이벤트..

앞선 글에서는 Network, Elements, Console, Sources 등 프론트엔드 개발자가 기본적으로 알아야 할 Chrome 브라우저의 개발자도구 기능을 살펴봤다. Chrome DevTools ① - 프론트엔드 개발자라면 알아야 할 필수 기능개발을 하다 보면 이런 순간이 있다. API를 호출했는데 데이터가 화면에 나타나지 않는 경우CSS를 수정했는데 왜 적용되지 않는지 모르겠는 경우로컬에서는 잘 되는데 실제 환경에서는 페이지가lazyhysong.tistory.com 이번에는 한 단계 더 나아가 보자.특정 API가 실패했을 때 화면이 어떻게 동작하는지 테스트하고 싶다.저사양 기기에서 페이지가 얼마나 느려지는지 확인하고 싶다.사용하지 않는 JavaScript와 CSS를 찾아내고 싶다.페이지가 오..

개발을 하다 보면 이런 순간이 있다. API를 호출했는데 데이터가 화면에 나타나지 않는 경우CSS를 수정했는데 왜 적용되지 않는지 모르겠는 경우로컬에서는 잘 되는데 실제 환경에서는 페이지가 느린 경우모바일에서만 버튼이 잘리거나 레이아웃이 깨지는 경우 이럴 때 코드를 무작정 수정하기보다 먼저 확인해야 하는 도구가 있다. 바로 DevTools(개발자 도구)이다.DevTools는 브라우저에서 실행 중인 웹 페이지의 HTML, CSS, JavaScript, 네트워크 요청 등을 확인하고 디버깅할 수 있는 도구이다.이번 글에서는 프론트엔드 개발자라면 기본적으로 알아두면 좋은 기능 10가지를 크롬 브라우저의 개발자 도구 위주로 정리했다. 1. Network API 요청과 응답 확인하기 프론트엔드..

AI에게 코드를 작성해 달라고 요청했는데 결과물이 마음에 들지 않는 경우가 있다. 요구사항을 제대로 반영하지 않거나, 기존 프로젝트에 없는 라이브러리를 사용하거나, 이미 구현된 공통 기능을 새로 만들기도 한다. 간단한 기능 하나를 수정했을 뿐인데 관련 없는 파일까지 변경하는 경우도 있다. 이럴 때 가장 먼저 떠올리는 해결책은 프롬프트를 더 자세하게 작성하는 것이다. 물론 구체적인 프롬프트는 중요하다. 하지만 모든 작업에서 프로젝트 구조와 개발 규칙을 반복해서 설명해야 한다면 효율적인 협업이라고 보기 어렵다. 실무에서 필요한 것은 매번 긴 프롬프트를 작성하는 기술이 아니다. 프로젝트의 공통 규칙은 문서로 관리하고, 작업별 요구사항은 프롬프트로 전달하며, 결과물은 명확한 완료 기준으로 검증하는 것. 이 글에..

AI와 협업하는 개발자는 무엇이 달라야 할까?요즘은 AI에게 프롬프트 몇 줄만 입력해도 웹사이트를 만들고, 컴포넌트를 구현하고, API를 연결할 수 있다.그렇다면 개발자는 이제 원하는 기능을 설명하는 능력만 갖추면 되는 걸까?실제 프로젝트는 그렇게 단순하지 않다. 😫 하나의 서비스를 만들기 위해서는 기획자의 요구사항을 이해해야 하고, 디자이너의 의도를 구현 가능한 형태로 해석해야 한다. 기존 시스템의 구조와 규칙을 파악해야 하며, 다른 개발자와 충돌하지 않도록 작업 범위를 나누어야 한다. 구현이 끝난 뒤에도 테스트와 코드 리뷰, 성능 개선, 유지보수가 기다리고 있다. AI가 코드를 작성할 수 있게 되었다고 해서 이러한 과정이 사라지는 것은 아니다. 오히려 코드를 빠르게 생성할 수 있기 때문에 잘못된 설..

자바스크립트로 웹 개발을 하다 보면 document.querySelector(), fetch(), localStorage 같은 기능을 자연스럽게 자주 사용하게 된다. 그런데 문득 이런 생각이 들었다. “내가 뭘 갖다 쓰는 거지!??” 이럴 때 찾는 사이트는 MDNhttps://developer.mozilla.org/en-US/docs/Web/API Web APIs | MDN developer.mozilla.org MDN의 Web > Web API 페이지에 들어가 보니 생각보다 API가 매우 많고! 심지어 알파벳순으로 정리되어 있다!! 페이지에는 Specifications와 Interfaces라는 목록이 따로 있었고, API마다 어떤 페이지에는 Interfaces가, 어떤 페이지에는 Properties나 ..

Step8. 브라우저 동작 확인 지금까지 만든 전체 플로우를 실제로 검증할 것이다.코드가 빌드되는 것과 실제로 동작하는 건 다르기 때문! npm run dev 서버 정상 기동되면 http://localhost:3000 을 브라우저에서 열어서 아래 순서로 테스트해준다. 페이지 진입시 /login 페이지로 진입한다. 테스트 시나리오 시나리오 1 — Protected Route 차단 확인http://localhost:3000/home 직접 접근예상: 스피너가 잠깐 보이다가 /login으로 리다이렉트 시나리오 2 — 로그인 유효성 검사 확인http://localhost:3000/login 접근빈 폼으로 Submit예상: "이메일을 입력해주세요.", "비밀번호를 입력해주세요." 인라인 에러 표시이메일에 a..

Step7. Protected Route + useAuthMe 이 단계가 인증 아키텍처에서 가장 복잡한 부분이다. 두 가지 문제를 동시에 해결해야 한다. 문제 1: 새로고침하면 access token(메모리)이 날아간다. 로그인 상태인데 로그인 페이지로 튕기면 UX가 망가진다.문제 2: 비인증 사용자가 /home에 직접 접근하면 막아야 한다. 해결 전략(dashboard)/layout.tsx └── 마운트 시 GET /auth/me 호출 ├── 성공 → access token 복구 + 사용자 정보 Zustand에 저장 → 페이지 렌더 ├── 401 → refresh token으로 재발급 시도 (axios interceptor가 자동 처리) │ ├── 재발급..

Auth Project - Step0. 폴더 구조 설계이건 프론트엔드 기술에 뒤처진 나를 위한 self course 이다.회사에서 2년동안 운영 업무를 맡다보니 신규로 프로젝트를 진행하는 일이 없고, 최신 기술을 쓸 일이 없으며 공부 또한 안했음..나중엔lazyhysong.tistory.com Auth Project - Step1. 프로젝트 초기 세팅Auth Project 1 - 폴더 구조 설계이건 프론트엔드 기술에 뒤처진 나를 위한 self course 이다.회사에서 2년동안 운영 업무를 맡다보니 신규로 프로젝트를 진행하는 일이 없고, 최신 기술을 쓸 일이 없으lazyhysong.tistory.com Auth Project - Step2. Axios 인스턴스 + Interceptor 설계Auth Pro..

Auth Project - Step0. 폴더 구조 설계이건 프론트엔드 기술에 뒤처진 나를 위한 self course 이다.회사에서 2년동안 운영 업무를 맡다보니 신규로 프로젝트를 진행하는 일이 없고, 최신 기술을 쓸 일이 없으며 공부 또한 안했음..나중엔lazyhysong.tistory.com Auth Project - Step1. 프로젝트 초기 세팅Auth Project 1 - 폴더 구조 설계이건 프론트엔드 기술에 뒤처진 나를 위한 self course 이다.회사에서 2년동안 운영 업무를 맡다보니 신규로 프로젝트를 진행하는 일이 없고, 최신 기술을 쓸 일이 없으lazyhysong.tistory.com Auth Project - Step2. Axios 인스턴스 + Interceptor 설계Auth Pro..