yeeed_log

기존 commonJS 모듈방식을 사용하다 ES module 방식으로 바꾸게되면 많은 에러를 만나게된다. ES module 방식은 import/export 구문을 사용할 수 있게 해준다. 원래도 import/export 방식을 사용했다고해서 ES module 시스템을 사용하는 것은 아닐 수 있다. 마침 이번 feconf 에서 토스팀의 박서진 개발자님이 이 주제로 연사를 한 내용이 있어 첨부한다. https://youtu.be/mee1QbvaO10 esm방식을 사용하기 위해선 package.json 파일에 모듈선언을 해야한다. { "type": "module" } { "type": "commonjs" } 타입 선언을 하고나면 현재 package.json 파일을 기준으로 하위에 있는 파일은 선언한 방식을 사용..

이전에 만들었던 리액트 프로젝트 파일을 재사용하려고 봤더니 콘솔에 이런 오류가 떴다. 리액트 18에서는 더 이상 ReactDOM.render을 사용하지 않으니 createRoot를 사용하라는 말 공식문서에도 아주 잘 나와있다. 공식문서 예제를 살펴보면 // Before import { render } from 'react-dom'; const container = document.getElementById('app'); render(, container); // After import { createRoot } from 'react-dom/client'; const container = document.getElementById('app'); const root = createRoot(container)..

회원가입 폼을 react-hook-form을 이용하여 개발하던 도중 만난 에러 일전에 validation을 직접 useState로 상태 관리를 하며 개발한 적이 있었는데 코드도 너무 길어지고 복잡해 보여서 간편한게 없나 찾다 리액트 훅 폼을 발견하고 적용해봤지만 적용이 되지 않았다... 정확히는 register를 사용하려했는데 register로 전달된 data값이 콘솔에 찍히지 않았다 ㅜ const Input = ({ id, type, ...props }: InputProps) => { return ; }; 내가 작성했던 Input 컴포넌트. 알고보니 register에는 onChange, onBlur, ref, name 을 props로 전달하고 있었는데 일반적인 사용법처럼 props로 register을 ..

사건의 발단 styeld-components를 사용해서 스타일을 진행하던 중 갑자기 알 수 없는 경고 문구를 마주했다. 엥? 왜 갑자기... 이런 문구가 뜨는 거지?! 싶었지만 스타일드 컴포넌트를 함수 내에 작성하지 말라는 것 같다... 예를 들면 아래와 같이 작성해야 하는데, import styled from 'styled-components' const StyledSpan = styled.span` color: blue; ` const MyExampleComponent = () =>{ return Test } 바보처럼 함수 내에 작성하고 있던 것~~^^ import styled from 'styled-components' const MyExampleComponent = () =>{ const Styl..

개인적인 해결 방법을 적었습니다. 문제가 있다면 댓글로 알려주세요! 문제의 시작 리액트로 작업한 결과물을 깃헙에서 제공해주는 pages기능을 이용해 배포해보고자 열심히 찾아서 빌드하고 npm run deploy.... 명령어 열심히 쳐서 배포 뙇! 했는데. ... 아무것도 나오지 않았다... 분명 내 로컬환경에서 npm start 로 실행시키면 잘만나오는데!! 왜 배포하니까 안나오는거지?! 이유를 찾다 create-react-app로 개발한 리액트 프로젝트는 기본적으로 루트(/) URL을 기준으로 프로젝트가 생성된다. GitHub는 gh-pages페이지방식이 조금 이상했다. 내깃허브아이디.github.io/페이지 이게아니라 내깃허브아이디.github.io/ 레파지토리명 / 페이지 이런 방식이었다. 그래서..