본문 바로가기
반응형

tech documents/react7

react-redux undefined 문제 서론 express.js + react.js 를 사용한 server-side-rendering 으로 블로그를 제작중이다. react.js 에 redux를 사용해서 data를 전달하기 위해서 서버와 클라이언트에 redux를 추가하던 중 아래와 같은 문제가 생겼다. The slice reducer for key "category" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value .. 2022. 2. 26.
sass @use not working node-sass를 사용하는 경우 react에서 sass를 사용해서 css reset 파일을 사용하려 하는데 작동이 제대로 되지 않는 문제가 발생했다. 위와 같이 h1 태그가 제대로 초기화 되지 않는다. 구글링을 해보니 sass 에서 @use는 Dart-sass 에서만 지원을 하고 있다고 한다. sass 홈페이지에서는 위와 같이 나와있다. dart-sass 만 @use 태그를 지원한다. 그래서 @use 대신 @import를 사용하면 아래와 같이 잘 적용이 된다. 한편으로는 @import 는 사용하지 않는 것을 권장하고 있고, 점점 migration을 하는 중이라고 한다. 그냥 sass를 이용하자! 위의 문제는 react 설정을 할때 node-sass를 설치해서 생긴 문제로, node-sass가 위의 sa.. 2022. 2. 19.
setState 이후 업데이트 된 상태를 사용하지 못하는 이유. 1. 아래의 코드의 문제점을 찾아보자. const [items, setItems] = useState([]); const onClickEvent = (text) => () => { console.log('called') if (text) { let edit = {id: uuid(), name: name, message: text} setItems([edit,...items]); const upload = async ()=>{ console.log('upload called'); await db.collection('chatting').doc('chatting').update({chats: items})} upload() .then(()=>{console.log('upload finished')}) .ca.. 2020. 7. 16.
[React] Webpack - Module not found: Error: Can't resolve 'fs' , 'net' in ... 1. webpack을 사용하던 도중, 모든 것을 정확히 설정하였는데도 불구하고 webpack에서 오류메세지가 뜨기도 한다. node_modules 에 있는 모듈에 대한 오류인데, 에러메세지는 다음과 같다. 'fs'와 'net' 모듈을 resolve 할 수 없다는 에러이다. 사실 이러한 오류는 구글링을 조금만 해보면 바로 나온다. 해결책은 다음과 같다. 2. module.exports = { entry: './server.js', output: { filename: 'compiled.js' }, node: { fs: 'empty', net: 'empty', }, resolve: { extensions: ['.js', '.jsx'] }, module: { rules: [ { test: /\.(js|jsx)$.. 2020. 7. 13.
[React] Webpack - Module not found: Error: Can't resolve ... 1. webpack 을 사용하다가 이런 오류를 마주치곤한다. node_modules 와 관련된 문제라면 그러려니 하겠지만, 내가 import 한 모듈에 대한 문제가 발생한것이다. 그러나 이 에러의 해결법은 간단하다. 2. webpack docs 에서 resolve.extensions 부분을 읽어보면 아래와 같이 설명 되어 있다. resolve.extensions 는 import할때 확장자를 붙이지 않아도 되도록 하는 역할을 한다. 그러므로 webpack.config.js 을 아래와 같이 수정해주면 된다. module.exports = { entry: './server.js', output: { filename: 'compiled.js' }, resolve: { extensions: ['js','jsx'].. 2020. 7. 12.
TypeError: Cannot read property 'map' of undefined 1. import React, {Component} from 'react'; import {fromJS} from "immutable"; import {fetchUsers} from "./api"; export default class UsersContainer extends Component { state = { data: fromJS({ users: null, }) } get data() { return this.state.data; } set data(data) { this.setState({data}) } componentDidMount() { fetchUsers().then(users => { this.data = this.data.set('users', fromJS( users )) }) } .. 2020. 7. 12.
순수 객체 / 순수 함수 (Writing) 2020. 7. 5.
반응형

티스토리툴바