본문 바로가기

프론트엔드(Front-end)/Tools10

Github Actions 사용해보기 https://ldd6cr-adness.tistory.com/309 Github Actions란 뭘까목차1. Github Actions란?2. 작성 예시3. 구성 요소 자세히 보기 3-1. Workflow 3-2. Event 3-3. Job 3-4. Runner 3-5. Step 3-6. Action1. Github Actions란?Github에서 제공하는 빌드, 테스트 및 배포 파이프라인을 자동화할 수ldd6cr-adness.tistory.com 목차1. 워크플로우 파일 생성2. ESLint 및 Prettier 통합3. 빌드 성공한 모습1. 워크플로우 파일 생성레포지토리의 루트 디렉토리에 .github/workflows/ci.yml 파일을 생성하고 내용을 작성한다.// ci.ymlname: CIon: .. 2025. 5. 26.

Github Actions란 뭘까 목차1. Github Actions란?2. 작성 예시3. 구성 요소 자세히 보기 3-1. Workflow 3-2. Event 3-3. Job 3-4. Runner 3-5. Step 3-6. Action1. Github Actions란?Github에서 제공하는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼Github 저장소에 이벤트(push, pr..)가 발생하면 미리 정의한 작업(테스트-빌드-배포..)을 자동으로 실행해준다. Github Actions의 구성 요소에 대해 알아보자구성 요소설명Workflow자동화 프로세스가 정의된 스크립트 파일로, Github Actions에서 가장 최상위 개념이다.EventWorkflow를 실행시키는 트리거로, p.. 2025. 5. 26.

axios 사용해보기 https://ldd6cr-adness.tistory.com/306 axios : HTTP 통신을 위한 JS 라이브러리Axios란?https://axios-http.com/kr/docs/intro 시작하기 | Axios Docs시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 Hldd6cr-adness.tistory.com jsonplaceholder를 빌려 axios 실습을 해볼거다. 목차1. Axios 설치 및 기본 설정2. GET 요청 : 게시글 불러오기3. POST 요청 : 게시글 업로드하기4. PUT 요청 : 게시글 수정하기5. DELETE 요청 : 게시글 삭제하.. 2025. 5. 26.

axios는 뭘까 목차1. Axios란?2. Axios를 사용하는 이유3. Axios 기본 사용법 3-1. 설치 3-2. GET 3-3. POST 3-4. DELETE 3-5. PUT4. 자주 사용하는 기능들 1. Axios란?https://axios-http.com/kr/docs/intro 시작하기 | Axios Docs시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코axios-http.com*Promise API를 활용하는 HTTP **비동기 통신 자바스크립트 라이브러리이다.프론트엔드에서 백엔드 API .. 2025. 5. 22.

Zustand 사용해보기 https://ldd6cr-adness.tistory.com/297 Zustand는 뭘까목차1. Zustand란?2. Zustand 사용법 2-1. Zustand 설치 2-2. 스토어 생성 2-3. 컴포넌트에서 스토어 사용3. Zustand의 특징 3-1. set()을 활용한 상태 업데이트 3-2. get()을 활용한 상태 가져오기 3-3. subscribe()를 활ldd6cr-adness.tistory.comTanstack Query 연습용으로 생성한 프로젝트에 이어서 zustand 연습도 해볼거다.게시글 필터링을 위한 스토어를 만들어보자목차1. Zustand 설치?2. store 폴더 생성 및 filter 스토어 생성3. 생성한 store를 활용하는 filter 컴포넌트 생성4. PostList 컴포.. 2025. 5. 15.

TanStack Query 사용해보기 https://ldd6cr-adness.tistory.com/303 Tanstack Query는 뭘까목차1. TanStack Query란2. 설치 및 기본 설정 2-1. TanStack 패키지 설치 2-2. Query Client 생성 및 Provider 설정3. 데이터 조회 (Fetching)4. 데이터 변경 (Mutations)5. 쿼리 무효화 및 리패칭6. 기타 기능들7. 툴1. TanStldd6cr-adness.tistory.com 목차1. 실습 프로젝트 내용2. 기본 설정 2-1. 기본 설치 2-2. 라우팅 설정 2-3. TanStack Query 기본 설정------1. useQuery로 데이터 조회(fetching)2. useMutation으로 데이터 변경3. 메서드를 사용.. 2025. 5. 14.

Tanstack Query는 뭘까 목차1. TanStack Query란2. 설치 및 기본 설정 2-1. TanStack 패키지 설치 2-2. Query Client 생성 및 Provider 설정3. 데이터 조회 (Fetching)4. 데이터 변경 (Mutations)5. 쿼리 무효화 및 리패칭6. 기타 기능들7. 툴1. TanStack Query란서버로부터 데이터 가져오기, 캐싱, 제어 등 데이터의 효율적인 관리를 돕는 라이브러리이다.https://tanstack.com/query/latest TanStack QueryPowerful asynchronous state management, server-state utilities and data fetching. Fetch, cache, update, and wrangle al.. 2025. 5. 8.

Zustand는 뭘까 목차1. Zustand란?2. Zustand 사용법 2-1. Zustand 설치 2-2. 스토어 생성 2-3. 컴포넌트에서 스토어 사용3. Zustand의 특징 3-1. set()을 활용한 상태 업데이트 3-2. get()을 활용한 상태 가져오기 3-3. subscribe()를 활용한 상태 감지 3-4. persist()를 활용한 상태 저장 (local storage) 3-5. useShallow()로 불필요한 렌더링 방지 3-6. zustand + immer로 불변성 유지 1. ZustandReact의 상태를 관리하는 라이브러리로, Redux보다 간결하고 사용하기 쉬우며 성능이 뛰어나다. Flux 패턴의 상태 관리를 한다.저장소(store), 액션함수(a.. 2025. 4. 4.

Next.js는 뭘까 목차1. Next.js란?2. Next.js 시작하기3. Next.js 프로젝트 파일 구조4. App Router vs Page Router 1. Next.jshttps://nextjs.org/ Next.js by Vercel - The React FrameworkNext.js by Vercel is the full-stack React framework for the web.nextjs.org Next.js는 리액트 기반 웹 개발 프레임워크이다.SSR(Server Side Rendering) 지원컨텐츠를 서버에서 HTML로 미리 렌더링하여 사용자 브라우저로 전송하는 방식CSR(클라이언트 측에서 JS로 동적렌더링)에 비해 초기 로딩 속도가 빠르다.SEO(Search Engine Optimization).. 2025. 3. 20.

이전 1 2 다음

티스토리툴바