react35 [React / TypeScript] styled-components와 함께 사용하는 TypeScript에 대한 고찰 (feat.react) 0. 설치간 오류 JS로 만들어진 패키지, TS type이 정의된 패키지를 모두 설치해야 TS에서 인식할 수 있다. 어찌보면.. 당연. 패키지의 타입을 정의해서 가져다 줘야 해석을 하던가 말던가 하지.. 보통 이런 것들은 @types/~패키지명 으로 정의되어 있음. @types/~* 라고 정의되어 있는 경우, 모두 type 정의한 옵션 패키지 구나 정도로 생각하면 된다. 만약 @types/~패키지명을 설치 안하면 다음과 같이 display된다. Module not found: Error: Can't resolve 'styled-components' 패키지명은 예시 tip. 만약 본인이 패키지를 설치했는데 type이 없는 패키지일 경우, @types/설치한 패키지명 으로 install을 해보면 꽤 유명한 .. 2022. 11. 28. 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. [javascript/basic] import / export 구문과 코딩 스타일 짧은 정리 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com import 하는 방식이 너무 여러가지여서, 솔직히 좀 헷갈릴 때가 많았다. App Component export from 이후에 있는 R004_LifecycleEx 부분은 R004_LifecycleEx Component 에서 export한 식별자를 적은 것이다. R004_LifecycleEx.js 라는 파일명과는 무관하다. 사실 파일명을 써도 무관하다. 왜냐하면, 파일명을 써도 파일내부에서 export한 모듈을 인식.. 2022. 1. 6. 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. [HTML] Form TAG에서 name의 의미 어제 antd를 react 에서 사용하다가 Form 태그에서 자꾸 에러가 났었다. form에 있는 내용을 지우는 것이였는데, 지워지지 않았었다. 원인은 form.item 마다 설정되어 있던 name을 삭제해서였다. form 컴포넌트나 태그를 사용할 때, name을 사용하지 않으면, form의 정보를 핸들링 하는 것이 불가능하다. 바꿔 얘기하면, form을 핸들링할 필요가 없으면, name을 설정하지 않아도 무방하다는 뜻이기도 하다. 어찌보면, 단순하고, 기초적인...그러나 알아차리기 힘든. 습관처럼 작성하는 코드였을 수도 있기 때문에 헤매이다 어제 간신히 발견하게 되었다. console에도 버그가 따로 찍히지 않아서 완전 헤매었지...ㅠㅠ form.resetFields(); 도 먹히지 않았었다..ㅠㅠㅠㅠ.. 2021. 4. 30. 이전 1 2 3 4 5 6 다음
