본문 바로가기

IT 공부32

리액트 dispatch 안타는 문제 export const store = configureStore({ reducer: rootReducer,});dispatch() 하는데도 slice에서 안 먹는 문제로 6시간 정도 고생하다가 누가 알려주심 ㅋㅋ챗지피티 계속 물어봐도 같은 대답만하고 프로젝트 구조를 모르니 도움이 안됐다 일단, 분명 useBoard까지는 잘 찍히는데, dispatch를 안타는게 문제디버깅해도 안되었다 //indexexport const store = configureStore({ reducer: { board: boardSlice, },});//boardSlice const boardSlice = createSlice({ name: 'board', initialState, reducers: { s.. 2024. 12. 26.
리액트 리덕스 실전 사용 (모달편) 리덕스는 애플리케이션 전역상태 관리 라이브러리 모달 창을 띄우는 것, 제거하는 것 등을 리덕스로 관리해보자 리덕스 기본 개념1. state : 애플리케이션 데이터나 UI 상태 저장. => store2. action : 상태를 바꾸기 위해 발생하는 이벤트 => ex) 모달  띄우기, 모달 끄기3. reducer : 액션 처리, 새로운 상태 반환 함수 리덕스는 상태를 한군데에서 관리하고, 그 상태를 다른 곳에서 쉽게 사용할 수 있게 한다 dispatch 란? (시키는 애)액션을 발생시키는 애!. 이거 해줘!! 라고 말하는 애 (시키는 애)dispatch({ type: 'GET_APPLE' })reducer란? (새로운 거 반환 해주는, 행동자)상태를 변경하는 규칙서. 현재 상태와 액션을 받아 새로운 상태를 .. 2024. 12. 11.
npm 기초 node js 자바스크립트 런타임 환경 npm (node package manager)라이브러라, 모듈 등을 설치받을 수 있게 쉽게 도와주는 메니저 package.json프로젝트에 대한 정보를 갖고 있는 파일.dependecies 와 같은 속성을 활용하여 프로젝트에 의존된 라이브러리를 관리한다 package.json 파일은 직접 작성할 수도 있고,npm init 명령어를 사용해 자동으로 생성도 가능하다! npm 속성name : 프로젝트 이름version : 프로젝트 버전 description : 프로젝트 설명keywords: 프러젝트 검색시 참조되는 키워드private : true (소스 공개 안할거 )main : 패키지 메인 기본 진입점scripts : 자주 실행하는 명령어는 scripts로 작성예)n.. 2024. 12. 10.
자바스크립트 파일, script defer, async load 이벤트 리스너 등록window.onload : html  파싱 DOM 생성 그리고 외부 콘텐츠(css, images, scripts)가 로드된 후 발생하는 이벤트 window.onload = function () {  document.querySelector('#btn').addEventListener('click', functin() {     alert('aaaa')  })} >> 근데 비효율적임!왜냐면, 만약 사진이 100개 정도 있으면 그거 다 뜰때까지 기다렸다 실행할거임?그래서 DomContentLoaded HTML파싱 DOM생성 후 발생하는 이벤트 (외부 콘텐츠 로드 기다리지 않음) document.addEventListener('DOMContentLoaded', function ().. 2024. 12. 9.