본문 바로가기
반응형

Reactjs

Recoil 익숙해질 겸 예제 만들어보기 Recoil이 아직 물론 Redux 보다 아직 사용량도 적고 인식도 적겠지만 개인적으로 난 처음 접했을 때 너무 편했고 기존 리액트 훅과 비슷한 면도 있어서 아마 트렌드가 빠르게 바뀌는 프론엔드에서는 곧 Recoil이 Redux를 따라잡지 않을까 하는 생각도 해본다. 그런 의미에서 가볍게 예제를 한 번 더 만들어보자. Atom.js import {atom} from 'recoil'; export const usernameState = atom({ key:'username', default:'' }); export const arrayState = atom({ key:'samplearray', default: [ 1,2,3,4,5,6,7,8,9,10 ] }); Profile.js import React f.. 더보기
React Recoil 상태관리 (atom, selector, useRecoilValue(), useRecoilState()) 전에 내가 구독하고 있는 분의 블로거에서 Recoil 에 관한 내용을 본 적이 있다. 지금 우리 프로젝트에는 redux를 이용한 상태 관리 밖에 없었기에 나중에 기회가 되면 한번 써보고 싶었다. https://merrily-code.tistory.com/ 생각보다 빨리 Recoil을 이용한 상태관리를 알아둬야 할 일이 생겼기에 한번 간단한 계산기를 이용해 구현해보자. Recoil은 우선 Redux 보다 세팅이 훨씬 간편하다. 앞으로 나도 리액트를 이용해서 스크래치로 프로젝트 시작할 일이 있으면 Recoil을 한번 이용해볼 생각이다. npm install recoil 설치해준 뒤에 root 컴포넌트에서 RecoilRoot 로 감싸주기만 하면 된다. import React from 'react'; impor.. 더보기
리액트 APP 기본실행 포트 변경하기 기본 포트 3000으로 설정되어 있는 포트를 바꾸는 방법엔 3가지가 있다. 1. 명령어 이용하기 PORT=3003 npm start 2. package.json 파일 내 스크립트 직접 수정하기 ** MAC OS, Linux 기반 "start":"export PORT=3003 && react-scripts start" ** WINDOW 기반 "start": "set PORT=3002 && react-scripts start", 3. .env 파일 이용 프로젝트 폴더 내에 .env 파일을 하나 만든뒤에 포트번호 지정 PORT=3003 터미널에서 npm start 더보기
Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) 운영체제가 맥 기반인 환경에서만 설치가 가능하다는 에러메세지다. 그럼 윈도우 환경에서는 작업을 진행하려면 우선 검색해보면 package-lock.json 파일내에 node_modules/fsevents 객체 안에 os 가 darwin 으로 되어 있을 것이다. 'win32' 를 추가해주면 된다. "os": [ "darwin", "win32" ], 이렇게 해도 안 될 수도 있다리 (본인도 버전관련해서 에러가 있는것 같다. 아마 이걸로 대부분 해결 될 것이다. ) 더보기
Error: The slice reducer for key "log" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. 오늘 오랜만에 리액트 프로젝트에서 초기 리덕스 설정을 진행중에 요론 에러가 떴다. 기존에 설정해두던 폴더 구조와 설정으로 그대로 진행중이었는데 이런 에러가 떠서 한 번 찾아보았다. 내 에러명 처럼 'log'가 initialization 되는 과정에서 null 도아니고 undefined 를 반환하고 있기 때문이었다. 요런 상태였다. state에 초기값 넣어주고 액션 쭈루루 맞고 switch case문 쭈루루 맞고 뭐가 이상하단거야 했는데 default 부분이 문제였다. 가끔 정신놓고 코딩하다가 switch 자동완성 기능으로 세팅해두고 값 넣어줘야지 했다가 깜빡해서 난 에러였다. 이게 나름 정신놓고 보면 default 달려있네 하고 바로 다음 단계로 진행하기 때문에 자동완성 해놓고 깜빡 하지 말자. ** 결.. 더보기
React 리액트 이미지 불러오기(이미지 경로, 주소) 리액트 프로젝트 내에 'public' 폴더 내에 원하는 폴더명으로 이름을 지어주고 이미지 저장후 '지은폴더명/ 이미지명.확장자 ' 식으로 경로를 붙여주면 되겠다. 참고 https://iancoding.tistory.com/222 더보기
Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. styled-components 를 이용해서 UI 짜는 도중에 input submit 부분에서 제출 부분 input 에서 input은 void 태그여서 나는 에러인데 이런 식으로 원하는 텍스트를 value 값으로 넣어주거나 아니면 input 이 아닌 button 태그를 이용해서 정보를 전달해도 되겠다. 본인도 최종적으로는 제출부분은 버튼을 이용했다. ** input 이 void 태그여서 나는 에러이니 1. value 속성으로 원하는 값 넣기 2. 아예 버튼으로 바꾸기 더보기
Material-UI Modal border (outline) remove material-ui 에서 제공하는 컴포넌트들을 갖다 쓰면 기본적으로 반응형에 이쁜 효과들이랑 스타일들이 먹어져 있어서 자주 찾게 되지만 세세한 스타일링을 할 때 가끔씩 화가 머리 끝까지 치민다. 이미 정해져있는 스타일들을 바꾸기 위해 이거 저거 다 해봐도 안 될 때 매우 화나는데 오늘 20분 정도 애 먹었던 Modal 컴포넌트 이용시 focus 되어있을 때 테두리 선을 없애는 작업을 정리해보겠다. 구글에 https://stackoverflow.com/questions/62308779/remove-border-from-react-material-modal 더보기
반응형

티스토리툴바