본문 바로가기

전체 글320

프론트엔드 프레임워크 선택 기준: Next.js, React, Angular, Vue, Svelte 프레임워크 선택은 인기 순위 맞히기가 아닙니다. 팀 규모, SEO, 라우팅, 배포 방식, 모바일 확장, 기존 코드와의 궁합을 함께 봐야 합니다.쉬운 비유자동차를 고르는 일과 비슷합니다. 스포츠카가 빠르다고 모든 가족 여행에 맞는 것은 아닙니다. 짐, 도로, 운전 습관, 정비 비용까지 봐야 합니다.먼저 물어볼 질문질문의미SEO와 서버 렌더링이 중요한가?콘텐츠 페이지, 커머스, 마케팅 페이지라면 중요할 수 있습니다.팀이 이미 잘 아는 기술은 무엇인가?학습 비용은 일정과 품질에 직접 영향을 줍니다.라우팅과 데이터 로딩 규칙이 필요한가?프레임워크가 제공하는 구조가 생산성을 높일 수 있습니다.웹과 모바일을 함께 볼 것인가?React Native 같은 선택지를 함께 검토할 수 있습니다.장기 유지보수 팀이 있는가?커.. 2026. 8. 27.
프론트엔드 면접 한 달 공부 계획, 무엇부터 볼까 면접 준비는 많이 공부하는 것보다 빠뜨리면 위험한 범위를 순서대로 줄이는 일이 중요합니다. 한 달을 쓴다면 지식 암기, 코드 연습, 설명 연습, 모의 면접을 따로 나누는 편이 효율적입니다.쉬운 비유면접 준비는 시험 전 책상 정리와 비슷합니다. 모든 책을 펼쳐 놓으면 바빠 보이지만 머리에 남기 어렵습니다. 오늘 볼 책, 풀 문제, 말로 설명할 주제를 나눠야 합니다.4주 계획주차목표해야 할 일1주차JavaScript와 브라우저 기본기스코프, 비동기, 이벤트 루프, DOM, HTTP 정리2주차React와 상태 관리렌더링, hooks, 폼, 리스트 key, 서버 상태 정리3주차실전 구현 연습검색, 무한 스크롤, 폼 검증, 접근성 있는 컴포넌트 구현4주차면접 답변과 회고말로 설명, 코드 리뷰, 모의 면접, 약한 .. 2026. 8. 27.
React Hooks 헷갈리는 5가지 차이 실무 예시로 정리 React Hooks는 이름이 비슷하고 함께 쓰이는 경우가 많아 헷갈리기 쉽습니다. 훅을 고를 때는 “렌더링에 영향을 주는 값인가, 계산 결과인가, DOM과 동기화해야 하는가”를 먼저 보면 좋습니다.쉬운 비유훅은 주방 도구입니다. 냄비, 칼, 도마가 모두 요리에 쓰이지만 쓰임이 다릅니다. 같은 재료라도 어떤 작업인지에 따라 도구가 바뀝니다.5가지 차이 요약쌍첫 번째두 번째useEffect / useLayoutEffect외부 시스템과 동기화할 때 주로 사용브라우저가 그리기 전에 필요한 레이아웃 작업useMemo / useCallback계산 결과를 기억함수 자체를 기억useState / useRef값이 바뀌면 다시 렌더링값은 기억하지만 렌더링을 일으키지 않음useReducer / useState상태 변화 규.. 2026. 8. 27.
JavaScript 번들 최적화: Code Splitting, Lazy Loading, Preloading 웹 앱이 느릴 때 이미지나 서버만 보는 경우가 많지만, JavaScript 번들도 큰 원인이 될 수 있습니다. 처음 화면에 필요 없는 코드를 나중에 가져오면 시작 속도를 줄이는 데 도움이 됩니다.쉬운 비유여행 가방을 생각하면 쉽습니다. 당장 필요한 지갑과 여권은 손가방에 넣고, 나중에 입을 옷은 큰 가방에 넣습니다. 모든 짐을 한 번에 들고 뛰면 출발이 느려집니다.세 가지 전략 비교전략뜻잘 맞는 상황Code Splitting코드를 여러 덩어리로 나눔페이지나 기능별 번들이 클 때Lazy Loading필요해지는 순간 불러옴모달, 관리자 화면, 차트처럼 처음에는 안 보이는 기능Preloading현재 페이지에서 곧 필요할 중요한 리소스를 미리 가져옴중요 폰트, 히어로 이미지, 곧 실행될 스크립트React.laz.. 2026. 8. 27.
HTTP 상태 코드 12개, 프론트엔드 실무 기준으로 정리 프론트엔드 개발자는 HTTP 상태 코드를 알아야 오류 화면과 재시도 흐름을 제대로 설계할 수 있습니다. 숫자 자체보다 “사용자에게 무엇을 보여 주고, 개발자는 무엇을 확인해야 하는가”가 중요합니다.쉬운 비유상태 코드는 음식 주문 결과표와 같습니다. 주문 성공, 접수만 완료, 재료 없음, 권한 없음, 주방 문제처럼 상황을 짧은 번호로 알려 줍니다.자주 만나는 상태 코드코드의미프론트엔드 대응200 OK요청 성공정상 화면 표시201 Created새 리소스 생성 성공상세 화면 이동 또는 성공 메시지202 Accepted요청 접수, 완료와 성공은 아직 미확정진행 상태 조회 또는 안내204 No Content성공했지만 본문 없음삭제 성공, 토글 성공처럼 처리400 Bad Request요청 값 문제입력값 확인 메시지.. 2026. 8. 27.
React Query와 useEffect, 서버 상태 관리는 왜 따로 볼까 React에서 데이터를 가져올 때 처음에는 useEffect 안에서 fetch를 호출하는 방식이 자연스럽습니다. 하지만 화면이 늘어나고 같은 데이터를 여러 곳에서 쓰기 시작하면 캐시, 재시도, 로딩 상태, 오래된 데이터 문제가 반복됩니다.쉬운 비유useEffect로 직접 fetch하는 방식은 매번 편의점에 직접 뛰어가는 것과 비슷합니다. React Query는 동네 물류 창고처럼 이미 가져온 물건을 보관하고, 오래되면 다시 가져오고, 여러 사람이 같은 물건을 찾을 때 중복 이동을 줄입니다.역할 차이구분useEffect + fetchReact Query주요 목적컴포넌트가 외부 시스템과 동기화할 때 사용서버에서 가져온 상태를 캐시하고 관리캐시직접 구현해야 함queryKey 기준으로 관리로딩·오류컴포넌트마다 .. 2026. 8. 27.

티스토리툴바