본문 바로가기

Today I learned!46

230201 모달 컴포넌트를 재활용하고 싶었다. searchParams를 통해 add일때와 edit일때를 구별해서 가져오게 하고 싶었는데, useQuery가 훅이다 보니까, 쉽지가 않았다. react-router-dom을 사용할 경우에도 get메서드를 사용하는건 같길래, 커스텀 훅으로 만들어서 사용하려고 했다. import { useEffect, useState } from 'react'; interface AnyObj { [index: string]: string | null; } const useSearchParams = (arr: string[]) => { const [newObj, setNewObj] = useState({}); //변수명 네이밍에 신경쓰지못했다ㅠㅠ useEffect(() => { const .. 2023. 2. 2.
[React]컴포넌트 재사용성 높이기!(컴포넌트에 각각 다른 attribute 설정하기) label+input을 따로 컴포넌트로 빼고 싶어서 재사용성을 고려하면서 코드를 작성하던 중 각기 다른 input의 attribute에 대해 생각을 할 수 밖에 없었다. input인 경우 attribute로 컨트롤을 할 수 있는데, 각 요소마다 attribute가 다르고 공통적으로 적용할 수 없을 때는 어떻게 해야할지, 컴포넌트로 따로 빼지 않고 때려박아서 컨트롤을 해야할 지, 고민하다가 뭔가 방법이 있을 것 같아 검색을 하게 되었다. 검색을 한 결과, 객체에 원하는 값을 넣고 ... 연산자를 사용하면 해결! 코드로 예를 들게 되면 //임의로 작성함 ------ const Input = ({ type, name, label, options }: { type: string; name: string; lab.. 2023. 1. 27.
typescript+react+webpack+babel 설정 때 본 오류^^.... 계속 cra쓰다가 너무 의존하면 안될 것 같아서 해봤는데 후 역시 첫시작은 항상 순조롭지 않지. 근데 그냥 다른것 보단 webpack사이트 보는게 젤 빠를듯 1.바벨 설정 module.exports = { presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'], }; 타스를 쓰지 않는 리액트 +웹팩 설정만 봐서 그런지 앞에 두개만 깔고 presents에 넣었는데 '@babel/preset-typescript' 필요 2.tsconfig 설정 tsconfig설정은 인터넷에 나와있는거보다 웹팩 홈페이지에 나와있는 설정이 최고다. 당연히 웹팩 설정도 그러하다!!!1 https://webpack.kr/guides/types.. 2023. 1. 21.
spa 배포시 주소창에 pathname을 직접 입력했을 때 404 에러 프리온보딩 사전 과제를 하면서 개발할 때는 잘 되니까 의식하지 못했었는데, 배포후 주소창에 '/todo' 를 입력했을 때 제대로 작동을 하지 않는다는걸 다른 동기분에게 피드백을 받으면서 알게 되었다. 이유가 무엇일까? 1. 검색해본 결과 spa이기 때문에 index.html에 대한 자원만 존재하고 다른 주소를 입력시엔 그 주소에 대한 자원이 없기 때문이라고 한다. 2. 그렇다면 프로젝트를 진행할 때 배포했을 때는 잘 됐었는데 왜 netlify나 github page에서 할 때는 왜 안됐던 걸까? -S3를 배포할 때를 생각해본다면 오류가 났을 시 지정했던 문서를 index.html로 설정했었는데, 그 당시에는 그냥 따라하기만하고 "왜"라고 생각을 안해봤던 게 패착이었다. spa의 특성을 생각하지 않다니.... 2022. 12. 13.

티스토리툴바