본문 바로가기

React8

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.

gatsby build 이후 gatsby serve시 index(root)가 로드 되지 않는 오류 1. 일단 정말 싸발적이다. 이것 때문에 한 한시간 동안은 고민을 하였다.. 일단 gatsby develop을 통해 렌더링한 페이지는 모든 라우트가 정상적으로 작동하였다. 그러나 문제는 여기서 발생한다. gatsby 프로젝트 폴더를 gatsby build하고 gatsby serve를 통해 localhost:9000 에서 실행해보면 / 루트 라우트가 정상적으로 렌더링 되지 않는다. 아래 사진과 같이 말이다. 말도 안나오는 오류이다. gatsby new 로 새 프로젝트를 생성하고 파일들만 옮겨서 똑같이해봐도 똑같은 오류가 발생한다. 크롬에서도 같은 오류가 발생했다. 2. 구글링도 해봤지만 답은 나오지 않았다. 그래서 결국 콘솔의 오류를 눌러보았다. 오류가 발생하는 파일에서는 "Amazing Pandas Ea.. 2020. 7. 31.

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.

Functional Component 에서 Ref 사용법 1. 함수형 컴포넌트에서 렌더링 요소를 가리키기 위해서는 React Hooks 중 하나인 'usRef'를 사용한다. 2. import {useRef} from 'react'; //... const textInputRef = useRef(); //... react native 의 렌더링 요소에서 ref prop로 위에서 할당한 useRef 객체를 넘겨주면된다. 2020. 7. 15.

[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.

카카오맵(Kakao Map) Javascript API 사용하기 - 2) 저번 포스팅에서 카카오맵 api를 사용할 앱과 도메인을 등록하는 과정까지 마쳤습니다. 이 다음 단계로, 리액트 웹 앱에 직접 api를 가져와서 지도를 띄워보겠습니다. 1. 개요 1. localhost 도메인 등록 2. HTML script 추가 3. React component에서 map 생성 4. 서버 실행 2. 실행 1. localhost 도메인 등록 저번 포스팅에서는 카카오맵 apif를 사용할 깃허브 페이지 주소를 추가했었습니다. 개발 단계에서 카카오맵 api를 가져와야 하기 때문에, localhost:3000 과 같은 로컬호스트 url을 추가해줍니다. (로컬 서버라 안될 줄 알았는데, 잘 되더라구요..) 2. HTML 스크립트 추가 이제는 카카오맵 api모듈을 가져오는 스크립트를 html파일에 추.. 2020. 2. 11.

이전 1 다음

티스토리툴바