Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

웹팩 설정하다 만난 오류이다. arrow function 이랑 class 의 차이 때문에 발생한 것 같은데, 문제를 찾는데 오래걸렸다. 아래는 웹팩의 전체코드이다. const path = require("path"); // path는 node 에서 기본적으로 제공하는 모듈 const webpack = require("webpack"); const RefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin"); module.exports = { name: "wordRelay-setting", mode: "development", // 실서비스: production devtool: "eval", resolve: { extensions: [".j..

[웹 게임을 만들며 배우는 React] 2장

className 리액트를 사용하면서 처럼 className 으로 css class이름을 정해주곤 했다. 왜 그런지 이유를 알게 되어 기록한다. className 인 이유는 class 로 할경우 자바스크립트 class 와 중복되기 때문에 className 으로 정해진 것이고, 비슷하게 for 속성도 htmlFor 로 정해졌다. 웹팩 설정 npm init npm i react react-dom npm i -D webpack webpack-cli 우선 WordRelay.jsx 파일을 만들어주었다. const React = require("react"); const { Component } = React; class WordRelay extends Compnent { state = {}; render() {}..

[웹 게임을 만들며 배우는 React] 1장

1. 가장 근본적인 코드 2. Babel + JSX 위 코드를 보면 다음처럼 바벨 cdn 을 추가해준 모습이다. 왜 바벨을 추가해줬어야했을까? 그 이유는 자바스크립트 코드에서 JSX 문법을 해석할 수 없기 때문이다. 즉 해석을 하려면 바벨이 필요하다. cdn 으로 바벨을 추가해주고 script의 type을 다음과 같이 설정해준다. button onClick 에서 this.onClickButton 을 사용하기 위해서는 다음처럼 바인딩이 필요하다. this.onClickButton = this.onClickButton.bind(this); 3-2. Constructor 를 안쓰는 방법 다음처럼 화살표 함수를 사용해서 constructor 를 쓰지 않고도 this.onClickButton을 사용할 수 있게 된..

javascript super

문제 정의 아래와 같은 class 가 있을때 나는 Person 을 상속해서 PersonPlus 라는 class 를 만들고 싶다. class Person{ constructor(name, first, second){ this.name = name; this.first = first; this.second = second; } sum(){ return this.first+this.second; } } 만약 PersonPlus의 constructor 에 third 라는 세번째 값을 추가 하고 싶다면 어떻게 해야할까? 다음처럼 상속없이 그냥 constructor 의 this 에 넣어주는 방법이 있을 것이다. 하지만 상속을 사용하면 코드를 재사용 할 수 있게된다. class PersonPlus{ construct..

ios 스크롤 바운스

다음과 같이 아이폰에서 흔들리는 현상을 ios 스크롤 바운스라고 한다. 해결방법 해결방법으로는 다음 css 를 적용시켜주는 것이다. 그리고 스크롤 되지 않길 원하는 부분을 .wrap css 로 감싸준다. html, body { position: fixed; overflow: hidden; } .wrap { width: 100vw; height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; } 다음 코드 처럼말이다. import Board from "./Board"; import "./App.css"; function App() { return ( ); } export default App; 참고자료 https://m.blog.naver.c..

따라하며 배우는 리액트 A-Z 넷플릭스

1. axios baseUrl import axios from "axios"; const instance = axios.create({ baseURL: "https://api.themoviedb.org/3", params: { api_key: "e8a960ccca46e3b7c8974d7353cbfadc", language: "ko-KR", }, }); export default instance; 2. requests.js const requests = { fetchNowPlaying: "movie/now_playing", fetchNetflixOriginals: "/discover/tv?with_networks=213", fetchTrending: "/trending/all/week", fetchTopR..

첫 해커톤 참여후기 [놀다가는 앞마당 해커톤]

8월 13일 8월 14일에 부산대학생을 위한 해커톤이 개최되어서 참여하게 되었습니다. 장소가 너무 멋졌는데 사진을 많이 못찍었다.. 안돼~ 도착하다. 도착해서 한 15분 정도 기다렸다. 팀이 어떤분이 될까 궁금했다. 팀 매칭 팀발표가 딱 났는데 다른팀은 다 4명이였는데 저희팀만 유일하게 3명이었다. 안돼~ 코로나때문에 불참하셨다고 하시더라구요. 아이스 브레이킹, 주제 선정 20분동안 아이스브레이킹과 함께 주제를 정했어야했다. 주제는 팀원의 공통 관심사로 어플리케이션을 만드는 것이었다. 저는 해커톤에 가기전에 주제를 다음 2가지 정도 생각을 해봤었다. 모두 음악을 좋아하면 음악을 만들어보자. https://www.youtube.com/watch?v=UBXU2l_0eRw 이모지 쓰는 걸 좋아하시나요? 이모지..

git 코드 리뷰

코드리뷰할때 승인하는 방법은 두가지가 있다. 1. 코멘트를 달고 approve 하는 방법 2. approve 하는 방법이 있다. 지금은 이미 merge 가 된 요청이라서 없는데 원래는 approve 라디오 버튼이 있다! 3. 리뷰어에게 다시 요청하는 방법 지금은 없지만 아직 풀리퀘가 merge 되지않은 상태인 경우 다시 리뷰어에게 요청을 보낼수 있는 기능이다. 발그림이지만 저 보라색 아이콘과 똑같이 생긴것을 누르면 된다. 4. draft draft 기능은 다음 빨간색 글씨 자리에 위치하는데 풀리퀘를 잠시 보류 한다는 느낌이다. 풀리퀘를 걸어놓고 , 아차! 아직 이 변경사항 커밋안했는데? 할때 사용한다. draft 가 된 풀리퀘는 다음자리에서 해제가 가능하다.회색 버튼이 생길 것 이다. 그러면 그걸 누르면..

동적 데이터요소 style 주기

갑자기 왜 이걸 하게 된거지? 어쩌다보니 데이터가 동적으로 5개 , 7개 몇개가 들어오는지 알 수 없을 경우 몇개가 들어올지 알수없는 데이터에 css 를 먹이고 싶었다. 그런 방법을 생각해보다가 다음과 같은 로직을 짰다. https://codesandbox.io/s/lively-currying-71lfgc?file=/src/App.js lively-currying-71lfgc - CodeSandbox lively-currying-71lfgc by ehddud1006 using react, react-dom, react-scripts codesandbox.io 데이터 배열에서 랜덤으로 3개 뽑은 배열을 map 함수 돌려서 index로 querySelector 로 DOM 을 얻어서 style을 먹이는 것이다..

github로 리액트 어플리케이션 배포하기

우선 기존의 API_key 를 .env 파일에 옮긴다. 위치시킬때, 루트에 위치해야한다. (src 폴더내부가 아님) 이제 process.env.REACT_APP_MOVIE_DB_API_KEY로 해당 api key에 접근할 수 있게 된다. .gitignore 에 .env 파일이 없어서 추가해주었다. 그후 yarn add gh-pages --save-dev 를 설치한다. 이제 배포를 하기위한 url 을 설정해준다. https://[본인깃허브아이디].github.io/[레포명] 또한 배포를 위한 scripts 도 작성을 해주어야한다. 이제 basename 을 설정해준다. 마지막으로 배포 명령어를 실행한다. yarn deploy 나의 리액트 프로젝트를 간단하게 배포할 수 있었다. https://ehddud100..