본문 바로가기

전체 글47

리액트 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.
자바스크립트 기본 객체, 배열, 블록문, 스코프 객체와 배열은 참조타입객체복합적인 정보를프로퍼티로 키와 벨류값으로 갖는 자료형. 키 in 객체 ( 특정키 포함 여부 확인 ) 'age' in person; * const 선언 객체의 프로퍼티 변경은 가능하나새로 다시 할당은 불가!const person1 = { name: 'sd', age: 21};person1.job = 'developer'person1 = {}; 배열const a = [a, 'b',332, null ]배열 내에 다양한 자료형 넣을 수 있음원시타입/ 참조타입  -> 값복사인지 주소복사인지 블록문0개 이상의 문들을 묶은 단위, 일반적으로 제어문, 함수등에 사용되며 새로운 스코프를 생성{ console.log('blog');} 스코프 scope블록 안에 선언된 변수, 상수를 밖에서 사용 불.. 2024. 12. 2.
javascript 기본. 자바스크립트란? 변수와 상수, 자료 자바스크립트란?자바스크립트는 인터프리터 언어-컴파일 언어 : 코드 -> 컴파일 -> 실행 -인터프리터 언어 (따로 포장하거나 가공하는 과정 없음)바로 실행 => 버그가 덜 걸러지고 실행은 좀 느리지만 딱히 차이 없음 동적 자료형숫자로 저장한 변수에 객체나 함수 등으로 바꿀 수 있음.코딩이 자유롭지만, 에러가 날 가능성=> 이를 보완한 자바스크립트 코드를 엄격한 과정을 거쳐 생성해주는 타임스크립트 언어가 있음자바스크립트는 객체지향적인 언어지만, 자바랑은 또 색다름프로토타입 기반, (클래스 방식보다도 강력)일급 객체를 이용해서 함수형 프로그래밍을 할 수 있음 *Babel (코드 변환 소프트웨어)최신 문법인 자바스크립트 코드를 예전 버전으로 자동으로 번역해서 사용할 수 있어어떤 버전에서 나온 건지 상관없이 마.. 2024. 12. 2.
React 기초, Component react 좋은 이유- SPA (single page application) -> 페이지 전환 부드럽게- component -> html 재사용성 굿- 데이터가 html 재렌더링 자동반영 웹페이지는 html에서 이용해야함. 근데 어떻게 자바스크립트로 가능하냐?App.js - (index.js)-> index.htmlindex.js가 App.js 를 index.html로 바꾸줌Node js 뭐임?1) 컴퓨터에게 자바스크립트로 명령을 내릴 수 있게 하는 도구자바스크립트로 작성한 코드를 컴퓨터가 알아들을수 있게 통역해주는 프로그램*자바스크립트는 웹서핑을 하는데 사용되는 프로그램인 브라우저에서만 동작하는 언어 웹사이트 만들때만 쓸 수 있고 웹사이트 안에서만 동작하는 언어 우리는 JSX 문법으로 코드를 작성. -.. 2024. 11. 30.
React에서 JSX사용, state 변경 html이 아닌 JSX 문법 사용 리액트 데이터 바인딩 쉽게 됨서버에서 가져와서 html에 보여주는 방식원래는 let post = document.getElementById. 이런 방식 써야했음리액트에서는 중괄호 사용해서 { post } 변수명으로만 써서 가능. => 코드 간결 변수나 함수로도 html을 동적으로 사용가능 src, id, href, class name 등의 속성을 {} 안에 변수나 함수명을 써서 쓸 수 있음 -> 개편함 변수 저장시1. 변수 2. state변수 대신 쓰는 데이터 저장공간 -> stateusrState() 이용문자, 숫자, object 등 다 넣을 수 있음var [a, b] = [10, 100];// var a = 10, var b= 100// destructuring 문법.. 2024. 11. 21.

티스토리툴바