코딩을 배우는 직장인

그냥 일반 css 처럼 url에 파일 경로를 넣으면 styled-components에서는 작동을 하지 않는다. 다음과 같이 적어주면 된다. 난 현재 App.tsx에서 background-image를 넣어줄 생각이고 나의 이미지는 img/blue.png 이다. 일단 App.tsx에 blue.png를 import 해준다. import blue from "./img/blue.png"; blue라고 해도되고 이름은 상관이 없다. 이제 저 blue를 url에 적어주는 것이다. 이런식으로 그러면 완성!

오늘 공부를 하다가 항상 svg 파일 형식을 이용해서 icon을 추가해오다가 정말 칸단히 import를 해와서 React에 font-awesome icon을 추가하기 위해서 적힌대로 copy를 해왔으나 역시나 오류가 걸렸다. 정말 오류의 연속이다. 이 글을 보신 분들에게 도움이 되었으면 좋겠습니다. 일단 fontawesome 사이트를 보면 사진과 같이 React에서 사용하는 방법이 나와 있습니다. 하지만 복붙해도 절대 되지 않습니다. 왜냐하면 FontAwesomeIcon을 import 하지 않았기 때문입니다. 일단 install을 해봅시다. npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-sv..

https://create-react-app.dev/docs/importing-a-component/ 위 공식문서를 보면 absolute import 부분을 보면 절대 경로를 사용해서 import하는 방법이 나와 있다 일단 react를 사용한다는 전제하에 tsconfig.json 파일을 만들어준다. 근데 typescript를 사용중이라면 이미 저 파일이 있을 터 typescript가 없다고 가정 했을때 사용 법은 저 파일을 만들어서 저기 내용을 그대로 넣어주면 된다. 그러면 절대 경로로 import 할 수 있다. 이런식으로 src를 기준으로 절대경로로 작성해주면 된다 Auth.tsx라는 파일은 src를 기준으로 routes 폴더 안에 있으므로 import Auth from "routes/Auth" 이렇게..

selector은 atom으로 만든 인자를 다시 받아와서 atom의 값을 베이스로 새로운 값을 return 해줄 수 있는 함수인데 그러므로 selector은 atom의 값에 영향을 받게 됩니다. 일단 atom을 하나 생성 해줍니다. export const Todos = atom({ key: "ToDos", default: [], }); 이제 Todos 라는 atom의 값을 selector로 받아와 줍시다. export const toDosSelector = selector({ key: "toDoSelector", get: ( {get} ) => { const todos = get(Todos) return [] }) } 이런식으로 selector를 만들어주고 selector 안에 get이라는 key 값에는..

설치 npm i react-hook-form 2. 사용 const {register, watch, formState, handlesubmit} = useForm() 이렇게 사용 register은 데이터 값을 만들어 준다 사용법은 사용할 컴포넌트에 넣는다 example) 스프레드 연산자로 register() 로 return되는 객체 안에 있는 내용을 컴포넌트 안에 담아 준다. watch는 console을 찍어보면 내가 담은 데이터 들을 볼 수 있다. formstate에 errors를 보면 에러가 뭐가 일어 났는지 알 수 있다. handleSubmit은 그냥 form 태그에 onSubmit에 넣어주면 preventDefault를 해주는기능이다. 여기서 handleSubmit 안에 성공했을 때의 실행시킬 함수..

일단 useMotionValue를 사용한다 여기에 초기값을 적어주는 0을 적어주는게 좋다 tigim 은 Box안에 style에 x값에 넣어줄건데 x의 초기값을 0으로 해주는 것이다. tigim은 재렌더링 되지않는다 너무 많은 움직임이 포착되어서 그러면은 어떻게 console 에 찍어볼까? 이럴땐 onChange함수를 사용하면된다! useEffect(() => tigim.onChange(() => console.log(tigim.get())) , [tigim]) 이런식으로 tigim의 위치를 알수가 있다. 그러면 이거를 tigim에 연결할려면 style 에 x값에 value로 넣어주면된다. 우리는 useTransForm으로 다른 값을 얻을 수가 있는데!!! 이게 아주 중요하다!! const tomato =..

위 사진처럼 useRef를 사용해서 만든 biggerBoxRef를 BiggerBox에 ref로 넣어주세요!! 그리고 Box에 dragConstraints에 ref를 넣어 주면은!! box는 더이상 biggerbox를 벗어날 수 없답니당!

정말 파워풀한 framer-motion은 노드 패키지로 다운 받으면 된다! 정말 직이준다! https://www.framer.com/motion/ 이미지 썸네일 삭제 Production-Ready Animation Library for React | Framer Motion Framer Motion is a production-ready React animation and gesture library. www.framer.com 대표사진 삭제 사진 설명을 입력하세요. 여기 예시를 보아도 엄청 멋진 것들을 만들 수 있는데 앞으로 이 카테고리에 framer-motion 관련된 글을 적을 것이다!

https://www.npmjs.com/package/recoil-persist recoil-persist Package for recoil to persist and rehydrate store. Latest version: 4.2.0, last published: 12 days ago. Start using recoil-persist in your project by running `npm i recoil-persist`. There are 4 other projects in the npm registry using recoil-persist. www.npmjs.com recoil-persist에 대해 배워보겠습니다. 바닐라 js에서 연습을 할 때 storage를 많이 사용하는데 json화 시키고 저..

아래 내용은 스타트 위드 유데미에서 제공해준 강의를 토대로 리뷰를 작성한 것입니다. https://www.udemy.com/course/winterlood-react-basic/ component 간에 prop을 전달하는 방법을 알아보겠습니다. 정말 쉽게 설명하면 만일 App.js에서 tomato.js안에 있는 soCoolGuy function을 import 한다고 하면 App. js 에서 import soCoolGuy from "tomato.js" 라고 적겠죠 그리고 밑에 내용 여러가지가 있고 import soCoolGuy from 'tomato.js'; const App = () => { const apple = 5; return ( ); }; 이렇게 되있다면 soCoolGuy가 저장되어있는 toma..