React4 [TypeScript] 한 입 크기로 잘라먹는 타입스크립트 OT 미루고 미뤄왔던 타입스크립트를 공부해야할 때가 온 것 같다. 오늘부터 시작.오리엔테이션 요약강의 최종 목표- 단순히 문법만 나열하는 강의 X- 타입스크립트의 동작 원리 자세히 이해- 매력적인 타입 시스템에 대한 깊은 이해 수강 대상- 자바스크립트(ES6+)를 이미 다룰 줄 아는 사람(기본 문법 - 프로미스, 배열 메소드 정도만 알고 있으면 된다고 한다.) 커리큘럼0. 강의 소개1. 타입스크립트 개론2. 타입스크립트 기본3. 타입스크립트 이해하기4. 함수와 타입5. 인터페이스6. 클래스7. 제네릭8. 타입 조작하기9. 조건부 타입10. 유틸리티 타입11. 보너스) 리액트와 타입스크립트 비고학습 노트 작성을 권장하신다. 강의 내용 캡쳐, 소스 코드 공개 등을 자유롭게 해도 된다고 오리엔테이션에 명시해주셔서 .. 2024. 7. 3. [React] 동적 화면 넓이 구하기 const [innerWidth, setInnerWidth] = useState(window.innerWidth); useEffect(() => { const resizeListener = () => { setInnerWidth(window.innerWidth); }; window.addEventListener("resize", resizeListener); }); console.log("innerWidth", innerWidth); 높이는 Width를 Height으로 바꿔서 구하면 됨 출처 : https://velog.io/@bunny/%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%99%94%EB%A9%B4-%EC%82%AC%EC%9D%B4%EC%A6%88-%EA%B5%AC%ED%95%98%.. 2023. 8. 16. [React]줄바꿈 안 됨 오류 - 개행문자(\n) 인식하게 하기 문제 리액트에서 줄바꿈이 인식이 안 되는 경우가 있다. 어떤 블로그를 참고하여 {"\n"}, , 컴포넌트 분리의 방법을 모두 써봤는데 소용이 없었다. 해결 css에 white-space: pre-line; white-space: pre-line; 을 추가해주니 개행문자를 인식할 수 있게 되었다. 2023. 8. 13. [yarn]Command failed with exit code 127 / react-scripts: command not found 이번에 리액트로 협업할 일이 생겨서 git에서 다른 팀원이 셋팅해둔 파일을 클론해서 받았는데 실행하려니 오류창이 뜨는 것이다. $yarn start 지금까지 리액트는 npm으로만 해봤지 yarn으로는 한 적이 없어서 당황스러웠다. 구글링 했더니 npm update 하면 된다고 한다 $npm update 후 다시 $yarn start 다행히 금방 해결되었다 2023. 4. 15. 이전 1 다음