웹48 상태관리 라이브러리, Redux 에 대해서/Redux Toolkit에 대해서 목차 1. Redux란? 2. Redux 주요 개념 3. Redux는 언제 필요할까? 4. Redux-Toolkit에 대해서 4-1. Redux-Toolkit 파일 구조 4-2. Redux-Toolkit 사용법 1. Redux란? Flux개념을 바탕으로한 React에서 현재 가장 많이 사용되는 State 관리 라이브러리 입니다. 더보기 Flux는 Facebook에서 클라이언트-사이드 웹 어플리케이션을 만들기 위해 사용하는 어플리케이션 아키텍쳐이다. Flux Architecture는 MVC 패턴의 문제점을 보완할 목적으로 고안되었다. 페이스북과 같은 대규모 어플리케이션에서는 MVC가 너무 복잡했다. 이 같은 문제의 대표적인 사례가 바로 페이스북의 안 읽은 글 갯수(unread count) 표시이다. 사용자.. 2023. 9. 15. (Vue) 뷰 실행하기/Vue 처음 실행 (상세한 설명) 포스팅 목차 1. code 편집기에서 원하는 파일 열기 2. vue cli 전역에 설치하기 3. 현재 폴더에 vue 프로젝트 생성 (or 폴더 생성하여 vue프로젝트 생성) 4. 원하는 vue 버전 고르기 5. Vue 프로젝트 설치 완료 6. vue 프로젝트 실행 7. 해당 화면 나오면 성공! 포스팅 목차에서 원하는 파트를 누르면 해당 파트로 자동 스크롤 됩니다. 참고해주세요 !! 1. code 편집기에서 원하는 파일 열기 코드 편집기에서 개발환경을 세팅할 폴더를 열어줍니다. 저는 visual studio code를 사용해서, posting1 이라는 폴더 안에 vue를 실행할 환경을 세팅해보려고 합니다. 2. vue cli 전역에 설치하기 $ npm install -g @vue/cli 위 명령어를 썼을때.. 2023. 7. 12. (React)리액트 클래스에 조건문/리액트에서 클래스 다양한 방법으로 사용해보기/클래스명 여러개/className 여러개 일때/클래스에 변수 사용하기 포스팅 목차 1. css module사용 X : className 여러개 1-1. 적용된 화면 이미지 2. css module사용 X : className 여러개 + && 조건문 스타일 2-1. 적용된 화면 이미지 3. css module사용 X : className 여러개 + 삼항연산자 조건문 스타일 3-1. 적용된 화면 이미지 4. css module사용 O : className 여러개 4-1. 적용된 화면 이미지 5. css module사용 O : className 여러개, className안에 변수 사용 5-1. 적용된 화면 이미지 5-2. 적용된 화면 비디오 6. css module사용 O : className 여러개 + && 조건문 6-1. 적용된 화면 이미지 7. css module사용 O .. 2023. 7. 11. css, js 파일 HTML에 적용하기 (상세설명 + css 사용법 간략 설명) 1. 파일 구조 2. css와 js파일 html파일에 추가하기 3. css 파일 + 스타일 설명 4. js 파일 + 이벤트 추가 5. 완성시 화면 1. 파일 구조 2. css와 js파일 html파일에 추가하기 - css 파일 추가하기 1) 즉 헤드태그 사이에 아래 link태그를 삽입해 줍니다. 2) href에는 css파일이 있는 경로를 넣어주면 됩니다. - js 파일 추가하기 1) 하단 즉, body태그 사이의 제일 하단에 아래 - 작성된 예시 코드 보기 파일 경로 : ./index.html 1 2 3 3. css 파일 + 스타일 설명 파일 경로 : ./style.css #container{ /* id 가 container인 태그 스타일 설정*/ width: 500px; /*너비:500px*/ heigh.. 2023. 3. 12. (React) 리액트 드롭다운 메뉴 만들기/마우스 오버시 드롭다운 - 1탄 1. 결과화면 2. 동작 설명/기능 설명 3. 코드 4. 코드 설명 1. 결과화면 2. 동작 설명/기능 설명 1) 마우스오버시, 세부메뉴 드롭 다운 2) 해당하는 카테고리에 마우스가 오버됐을시, 다크블루로 표시. (예: 메뉴1에 오버했을 시, 메뉴 1 배경색깔이 바뀜) 3) 세부 카테고리에 마우스 오버됐을시, 해당하는 카테고리 및 세부카테고리 표시. (예: 메뉴2-1에 오버했을 시, 메뉴 2와 메뉴2-1의 배경색깔이 바뀜) 3. 코드 src / App.js import React from "react"; import Category from "./Category"; import Contents from "./Contents"; const App = () => { return ( ); }; export d.. 2022. 12. 17. (React with Typescript) module not found 'sass' 에러 해결, scss 사용법 간단 포스팅 상황 : scss 사용하려 했는데, module not found 에러 뜸 해결: > src 폴더 아래 global.d.ts 파일 생성 > 아래 코드 파일안에 복붙 src/global.d.ts declare module "*.module.scss" { const classes: { [key: string]: string }; export default classes; } > 서버 종료 후, npm run start로 다시 시작. 2022. 10. 27. 이전 1 2 3 4 ··· 8 다음
