IT/React11 번들링, 웹팩 번들링프론트 개발자에게 번들링이란?사용자에게 웹 어플리케이션을 제공하기 위한 파일 묶음사용자가 브라우저를 열고 주소를 입력하면 해당 주소에서 프론트 개발자가 번들링한 여러 파일을 받음이 파일을 브라우저가 실행하여 웹 어플을 사용자에게 제공하게 됨번들링의 필요성번들링 없이 그냥 일반적인 방법을 사용하게 되면 발생할수 있는점두개의 js 파일에서 같은 변수를 사용하고 있어 변수간 충돌이 일어남딱 한번 불러오는 프레임 워크 코드가 8MB 라서 인터넷이 느린 곳에서 사용자가 불편함을 느낄수 있음번들 파일 사이즈를 줄이기 위해 파일의 공백을 모두 지우니 가독성이 떨어지게 됨배포 코드가 너무 읽기 쉬워 개발을 할줄 아는 사용자가 프론트 애플리케이션을 임의로 조작해 피해 발생할수 있음번들링 작업에서는 필연적으로 용량을.. 2025. 2. 28. 커스텀 훅 사용해보기 솔로프로젝트를 구현해보는중에 user 관련된 로직이 많이 중복되게 쓰이는걸 보다가 문득 커스텀훅으로 코드의 중복성을 줄여보고자 사용해봄!! user 관련된 로직이 사용되는 곳1. 로그인2. 로그아웃3. 헤더에서 로그인 했을때와 안했을때 상태 감지할때 user 필요4. 마이페이지5. 권한이 있는지 없지 확인하는 로직 지금 다 구현하지 않았음에도 여러곳에서 user 가 사용되고 있음을 확인할수 있음 user 로직을 useUser 라는 커스텀 훅을 통해 간단하게 코드를 구현해보려고 함! export const useUser = () => { const queryClient = useQueryClient(); // user 상태를 useQuery로 관리 const { data: user, isLoading.. 2025. 2. 20. React - AJAX 실습(1) 간단하게 AJAX 를 통하여 무료 API 활용하여 실습을 해보자!!일단 AJAX 는 useEffect 안에서 내부 또는 이벤트 핸들러에서 실행이 되어야 함또한 직접 해보니 로딩이나 오류 에러 와 같은 상태 관리가 중요하다고 생각이 듬라이브러리는 axios 나 fetch 를 사용하면 되는데 둘다 해보기로 함! 일단 fetch 를 통하여 API 를 받아오되 첫번째 단계로 다섯개만 뿌리고 새로운 포스트 작성을 하면 맨 위로 올라갈수 있도록 해보자!! ** 가장 기본 뼈대 생성import React from "react";const BlogPostFetch = () => { return( )}export default BlogPostFetch; 1. 데이터를 먼저 받아서 잘 받아 왔는지.. 2025. 2. 4. React - AJAX 리액트에서의 AJAX 는 서버와 데이터를 주고 받을수 있는 기술임!전체를 새로고침 또는 로딩을 하지 않고 일부분만 새로고침 할수 있는 특징이 있음 AJAX 의 기본원리비동기 통신 - 서버에 요청을 보낸 후 응답을 기다리지 않고 다른 작업을 계속 할수 있음부분 업데이트 - 웹페이지의 일부분만 새로고침이때 서로 데이터를 주고받을때 주로 사용하는것 두가지 fetch, axiosaxios 는 라이브러리! 설치해야 사용가능 AJAX 리액트에서 작동방식1. 서버에 요청 전송 2. 데이터 수신3. 화면 일부 업데이트 주요 사용하는 곳 3가지1. 컴포넌트 초기화 시 데이터 불러오기2. 사용자 이벤트 처리 (좋아요, 댓글 작성 등등)3. 주기적 데이터 갱신 (실시간 차트, 채팅 메세지 자동 새로고침 등등) 여러 API .. 2025. 2. 2. 이전 1 2 3 다음
