본문 바로가기

프론트엔드(Front-end)41

React는 뭘까 목차1. React란? 1-1. JSX의 사용 1-2. 단방향 데이터 바인딩 1-3. 가상 DOM 1-4. 선언형 프로그래밍 1-5. 컴포넌트 기반2. 리액트 개발 환경 2-1. Chocolatey, Node 설치 2-2. 리액트 프로젝트 생성1. React란?웹 프론트엔드 라이브러리로, 자바스크립트를 기반으로 동작한다.리액트의 특징에 대해 알아보자.1. JSX의 사용JSX는 자바스크립트와 HTML을 동시에 사용하는 문법이다. 일종의 템플릿 언어(Template Language)로, JS 함수가 HTML을 반환하거나, HTML에 JS 변수를 바로 사용할 수 있는 식이다. 2. 단방향 데이터 바인딩다른 프레임워크인 Angular와 Vue는 기본적으로 양방향 바인딩을 사.. 2025. 5. 30.

Tailwind는 뭘까 목차1. Tailwind CSS란?2. Tailwind 시작하기3. 001. Tailwind CSS란?오픈 소스 CSS 프레임워크이다.다른 여러 스타일 프레임워크들과 달리, 미리 만들어진 컴포넌트를 제공하는 것이 아니라, 원자화된 유틸리티 클래스를 제공한다.클래스 이름을 사용하여 HTML 요소에 직접 스타일을 적용하는 방식이다. button여기서 각 클래스명의 의미를 간단하게 살펴보면 아래와 같다.bg-blue-500 : 배경색은 blue 500hover:bg-blue-600 : hover시, 배경색은 bluee 600text-white : 텍스트색은 흰색py-2 px-4 : 상하 0.5rem, 좌우 1rem paddingrounded : 모서리 둥글게장점빠른 프로토타이핑 : HTML 안에서 직접 디자인.. 2025. 5. 29.

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.

이전 1 2 3 4 5 다음

티스토리툴바