React & TypeScript42 React useEffect (included api 호출) 가 있는 컴포넌트 분리 방법 자식 컴포넌트에서는 아래와 같이 쓰고 export const childComp = () => { const [data, setData] = useState(); useEffect(() => { refresh(); },[]) const refresh = () => { fetch("URL") .then((res)=> res.json()) .then(_newData => setData(_newData)); } return [data, refresh]; } 부모 컴포넌트에서는 아래와 같이 쓴다. import childComp from "./childComp"; const parentComp = () => { const [data, refresh] = childComp(); return ( Refresh! ) }.. 2022. 4. 29. Build 이후 흰 화면만 나오는 이유 (로컬 index.html 안열리는 이유, react-router, 파일 프로토콜, http 프로토콜) 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 이유를 알기 위해서는 생각보다 조금 더 깊게 학습이 필요했다. package.json에 homepage : "." 코드 한줄만 추가한다고 되는 게 아니었다. (사실, 이 건 필요가 없었다.) cli에서 빌드를 마치고 serve를 설치한 이후에 다음 명령어를 실행을 했어야 했는데, serve -s build 그 이유는 build시에 server에 대한 패키지는 빼고 빌드되기 때문이었다. (이렇게 static server.. 2021. 9. 16. [React] cypress를 활용한 React 테스트 (feat. 시나리오 테스트, E2E Test) 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 개발을 마치자마자 문제라는 녀석이 끼어들기 시작한다 개발 자체가 긴급해서 테스트를 직접해가면서, 개발을 마쳤다. 마치고 나니까, Front-end 테스트가 누락됨에 따라, 컴포넌트를 추가/수정하는 과정에서 에러가 발생하는 경우가 있었다. 꼭 Front문제라기 보담은, Back-end 개발자가 api를 변경한 경우에도 종종 문제가 발생하는 경우가 있었다. 모든 문제를 육안으로 모두 체크할 수는 없다 최소 비즈니스 로직에.. 2021. 8. 25. 리액트 SEO - 검색엔진(네이버, 구글)에서 검색되도록 고치는 방법 / robots.txt 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com robots.txt 고치기 public 폴더에 robots.txt 파일을 만든다. 아래와 같이 코드를 만든다. Sitemap: https://share.beautifulstore.org/sitemap.xml // 제작된 sitemap 경로 User-agent: * // 모든 검색엔진 (AdsBot 크롤러는 직접 입력해주어야 함) Allow: / // 모든 페이지 접근 허용 네이버, 구글 웹마스터 도구에 사이트 주소를 .. 2021. 7. 20. 여러개의 state 값을 1개의 객체로 관리하는 방법 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 코딩하다가 check 에 관한 컴포넌트 여러개의 check 여부를 1개의 state로 관리할 수 있을 것 같았다. 방법은 간단했다. 아래와 같이 useState 안에 배열, 그 안에 객체를 넣으면 된다. 순서는 컴포넌트 순서겠지? 미리 세팅해두면 된다ㅎㅅㅎ 이렇게 하면, 어떤 check 컴포넌트가 선택되었을 때, Re-Rendering 이 될 필요가 있으면, Re-Rendering 할 수 있게 된다. const [ch.. 2021. 6. 17. [React] useState 활용해서 사전에 객체의 Template 설정해야 하는 이유 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 에러 메시지 antd table Each child in a list should have a unique "key" prop. Check the render method of `Body`. 작업 도중에 위와 같은 메세지가 떴다. ㅎㅎ 상큼하다. 초급 개발자인 나는 한동안 해메이다 답을 찾았는데, useState로 객체를 설정해두어야 한다는 것이다. const [data, setData] = useState({ res.. 2021. 4. 28. 이전 1 2 3 4 5 6 7 다음
