감히 최고라고 할 수 있는 리액트 영상이었습니다. 전에도 코멘트를 남겼지만 군더더기 없고 무엇보다 코딩앙마의 실력을 느껴질 수 있는 영상이었습니다. 또한 질문을 하는것보다 생각하는 힘을 만들어주는 영상이었습니다. 끝으로 이곳으로 안내해준 유튜브의 검색알고리즘을 칭찬하면서 좋은 영상 만들어주셔서 감사,, 감사,, 감사합니다.
리액트 관련 나름 많은 강의를 접해왔습니다. 너무 옛날 강좌도 있었고 버그가 있는 강좌도 있었습니다. 복습해가며 혼자 만들어 낼 수 있을 때까지 노력이 필요하겠지만, 가려운 곳을 긁어주는, 막히는 부분없이 매끄러운 강의 제공해주셔서 감사합니다. 타입스크립트 강좌도 찾곤 했는데... 코딩앙마님 강의에서 미친듯한 만족감을 느끼고 갑니다. 꾸준히 공부할 수 있게 도움주셔서 감사합니다.
4:40경 첫번째 Word.tsx 작업하신 분들은 리액트 크롬창에서 Module not found 에러화면이 뜰텐데요. Day.js 파일에 가서 import Word from "./Word.tsx"; 로 바꿔주시면 됩니다! js파일은 확장자를 생략해도 되는데, tsx같은 건 안되나보네요ㅎㅎ
tsx로 바꾸면 import 경로를 import useFetch from '../hooks/useFetch.ts'; import Word, { IWord } from './Word.tsx'; 이런식으로 js때 생략한거와는 달리 확장자를 바꿔줘야 화면이 제대로 나오던데 빨간줄이 생깁니다. 상관없나요? 아니면 다른 방법이 있나용?
제가 봐온 React 강좌중에 단연 최고십니다. 1강부터 마지막까지 스트레이트로 정독 했습니다. 근데 궁금한게 있는데요, 중간에 타이핑을 다 치지 않아도 자동으로 완성해 주는 vs code 단축키 or 플러그인은 어떤것 인가요? 이를테면, 컴퍼넌트를 만들때 export default function 함수명 같은거라든가... 단축키 관련해서 강좌하나 해 주실 수 없으신지요 ㅎㅎㅎ^^;
안녕하세요~ 강의 잘보았습니다! 감사합니다. 다름이 아니고 다 따라서 하긴 했는데(댓글들 참고하여 react-router-dom 6버전으로 진행) App.js에서 Day, CreateWord, DayList, useFetch 의 Module not found 에러가 뜹니다... tsx로 변경한 것들을 import 하지 못하는 것같은데 어떤 현상일까요..?
useFetch.ts 로 변경 후 경로 못 찾는 부분에 대해서 아래와 같이 해결했습니다. 1. npm 설치 및 npm init , tsc init ----- npm install typescript ts-node ts-node-dev -g npm init tsc --init npm install --save-dev typescript tsconfig-paths ------ 2. tsconfig.json 파일이 생기는데, 해당 파일 수정 ------ "jsx": "react-jsx" ------ 3. npm 구동 ------ npm start ------ 도움 되셨길 바랍니다.
12:42 에 3개의 변수가 필수 값이 되었는데 2가지만 필수이고 1개가 필수가 아닐땐 if 문에서 제거하게 될텐데 아래 오류나는건 어찌 해결할 수 있나요? 그리고 react 를 이제 배우는 입장이라 ...변수 < 이것에 대한 이해를 도울만한 링크나 설명좀 부탁드립니다.
타입스크립트까지 리액트를 익힐 수 있어서 정말 좋은 강의 들었습니다. 과제로 이전,다음페이지 와 day 삭제도 알려주신것 토대로 잘 배웠습니다. 번외로 질문이 있습니다. Day.tsx 에서 table 상단에 버튼하나 만들어서 클릭해서 누르면 테이블 전체 단어 한글 뜻보기를 만들어 보려고 하는데.. (전체 정답 보기 같은거죠..) 제 머리로는 좀 아직 부족한거 같습니다. 이와 관련해서 어떤식으로 해야할지 힌트라도 부탁드립니다 ^^ 좋은강의 제공해 주셔서 감사합니다~~
우선 Day 에서 관리해야 겠네요. 각 단어 컴포넌트에서는 관리하긴 힘들구요. Day 에 isShowAll 같은 status 값을 boolean 으로 만들고 각 단어들에 props 로 전달하면 되겠습니다. (일단 여기까지만 힌트 듣고 충분히 만드실 수 있을것 같아서.. 그만 쓰겠습니다 ㅎ)
@@codingangma 댓글 주셔서 감사합니다. 모듈이랑 타입스크립트 재설치 하니까 화면은 나오는데 Uncaught (in promise) TypeError: Failed to fetch 라는 에러가 발생하면서 로딩 만 계속 나오네요 ㅠ 계속 해결 방법을 찾고는 있는데 잘 안되네요 ㅠㅠ
![아직도 React 폴더 구조로 고민하고 계신가요? FSD 한 번 써보세요[제로초뉴스]](/img/n.gif)
감히 최고라고 할 수 있는 리액트 영상이었습니다. 전에도 코멘트를 남겼지만 군더더기 없고 무엇보다 코딩앙마의 실력을 느껴질 수 있는 영상이었습니다. 또한 질문을 하는것보다 생각하는 힘을 만들어주는 영상이었습니다. 끝으로 이곳으로 안내해준 유튜브의 검색알고리즘을 칭찬하면서 좋은 영상 만들어주셔서 감사,, 감사,, 감사합니다.
리액트 관련 나름 많은 강의를 접해왔습니다. 너무 옛날 강좌도 있었고 버그가 있는 강좌도 있었습니다.
복습해가며 혼자 만들어 낼 수 있을 때까지 노력이 필요하겠지만,
가려운 곳을 긁어주는, 막히는 부분없이 매끄러운 강의 제공해주셔서 감사합니다.
타입스크립트 강좌도 찾곤 했는데... 코딩앙마님 강의에서 미친듯한 만족감을 느끼고 갑니다.
꾸준히 공부할 수 있게 도움주셔서 감사합니다.
크.. 감사합니다. 요즘 업무가 너무 많아서 ㅠㅠ 타입스크립트 강좌를 못 만들고 있네요.
어서 만들어서 올리도록 하겠습니다!
와 react에 ts 적용하는거 막연하게 부담 느껴서 미뤄뒀는데 ts적용 안한 react -> ts 적용하는거 보여주시니까 너무너무너무 좋네요..... 14분의 짧은 강의로 대체 몇 시간을 세이브 해주신거지... 정말 감사합니다bbbb
4:40경 첫번째 Word.tsx 작업하신 분들은 리액트 크롬창에서 Module not found 에러화면이 뜰텐데요. Day.js 파일에 가서 import Word from "./Word.tsx"; 로 바꿔주시면 됩니다! js파일은 확장자를 생략해도 되는데, tsx같은 건 안되나보네요ㅎㅎ
17개 강의 모두 보면서 너무 도움이 되었습니다 ㅠㅜㅜㅠ 감사합니다
깔끔하고 군더더기 없는 리액트 강의 넘모 좋아용. 바로 구독 좋아요 박았습니다
정말 감사합니다 이런 귀한 영상들을 남겨주셔서
선생님 너무 감사합니다. 복습하겠습니다.
리액티 개괄하는데 많은 도움이 되었습니다. 강의 감사합니다. 강의 퀄이 너무 좋아요~
앙마라뇨 그저 천사....👼
tsx로 바꾸면 import 경로를
import useFetch from '../hooks/useFetch.ts';
import Word, { IWord } from './Word.tsx';
이런식으로 js때 생략한거와는 달리 확장자를 바꿔줘야 화면이 제대로 나오던데 빨간줄이 생깁니다. 상관없나요? 아니면 다른 방법이 있나용?
타입스크립트는 못참지!!
감사합니다! 어떻게 바꾸는지 궁금했는데 저렇게 설치하고 하나하나 바꿔주면 되는거군요..! 타입스크립트 공부.. 열심히 해보겠습니다...!!!
제가 봐온 React 강좌중에 단연 최고십니다. 1강부터 마지막까지 스트레이트로 정독 했습니다. 근데 궁금한게 있는데요, 중간에 타이핑을 다 치지 않아도 자동으로 완성해 주는 vs code 단축키 or 플러그인은 어떤것 인가요? 이를테면, 컴퍼넌트를 만들때 export default function 함수명 같은거라든가... 단축키 관련해서 강좌하나 해 주실 수 없으신지요 ㅎㅎㅎ^^;
일부 단어, 컴포넌트명은 vscode가 제공해주는거고, 빠르게 완성되는 코드들은 제가 편집한거에요 ㅎㅎ
코딩앙마님의 실력도 굿! 그리고 댓글 다시는 분들의 댓글로도 많은 공부가 되네요..
기초이지만.. 어려운 리액트-_- 하지만 재미있는 리액트 ! 강의 정말 잘 들었습니다. 감사감사... 열공 하겠습니다~! m(__)m
천재인가요?
안녕하세요~ 강의 잘보았습니다! 감사합니다. 다름이 아니고 다 따라서 하긴 했는데(댓글들 참고하여 react-router-dom 6버전으로 진행) App.js에서 Day, CreateWord, DayList, useFetch 의 Module not found 에러가 뜹니다... tsx로 변경한 것들을 import 하지 못하는 것같은데 어떤 현상일까요..?
01:04 js 파일은 .ts / jsx 파일은 .tsx로 변경하라고 자막이 나왔는데 js를 왜 tsx로 바꾸신건가용? 차이가 없나요?
jsx라는 파일은 따로 없습니다. js파일에서 html 을 사용 한 것을 jsx 문법이라고 합니다. 현재 .tsx라고 바꾼걸 코드 내용을 보시면 html이 들어가 있는 것을 확인 하실 수 있으실겁니다 :)
알찬내용 잘들었습니다.
useFetch.ts 로 변경 후 경로 못 찾는 부분에 대해서 아래와 같이 해결했습니다.
1. npm 설치 및 npm init , tsc init
-----
npm install typescript ts-node ts-node-dev -g
npm init
tsc --init
npm install --save-dev typescript tsconfig-paths
------
2. tsconfig.json 파일이 생기는데, 해당 파일 수정
------
"jsx": "react-jsx"
------
3. npm 구동
------
npm start
------
도움 되셨길 바랍니다.
감사합니다. 덕분에 Parsing error: '>' expected 오류가 해결됐습니다. 감사합니다.🙇♂🙇♂
감사합니다 :)
12:42 에 3개의 변수가 필수 값이 되었는데 2가지만 필수이고 1개가 필수가 아닐땐 if 문에서 제거하게 될텐데 아래 오류나는건 어찌 해결할 수 있나요?
그리고 react 를 이제 배우는 입장이라 ...변수 < 이것에 대한 이해를 도울만한 링크나 설명좀 부탁드립니다.
타입스크립트까지 리액트를 익힐 수 있어서 정말 좋은 강의 들었습니다. 과제로 이전,다음페이지 와 day 삭제도 알려주신것 토대로 잘 배웠습니다. 번외로 질문이 있습니다. Day.tsx 에서 table 상단에 버튼하나 만들어서 클릭해서 누르면 테이블 전체 단어 한글 뜻보기를 만들어 보려고 하는데.. (전체 정답 보기 같은거죠..) 제 머리로는 좀 아직 부족한거 같습니다. 이와 관련해서 어떤식으로 해야할지 힌트라도 부탁드립니다 ^^ 좋은강의 제공해 주셔서 감사합니다~~
우선 Day 에서 관리해야 겠네요. 각 단어 컴포넌트에서는 관리하긴 힘들구요.
Day 에 isShowAll 같은 status 값을 boolean 으로 만들고 각 단어들에 props 로 전달하면 되겠습니다.
(일단 여기까지만 힌트 듣고 충분히 만드실 수 있을것 같아서.. 그만 쓰겠습니다 ㅎ)
axios 사용하는것도 추가해주시면 좋을 것 같습니다 ㅎㅎ
안녕파세요 코딩앙마님 제가 어느날 다시 ㅎ실행하려하니 VM89:1 Uncaught (in promise) SyntaxError: Unexpected token '
5:42 초쯤에 임포트 해오는 단축키 어떤건가요?
강의 감사합니다! 혹시 13:04 에서 tsx가 아닌 ts를 사용하는 이유가 뭔가요??
강좌에서 설명이 나오는데 return에 jsx가 들어가지 않고 javascript만 있기 때문에 ts로 바꿨다고 나와요.
이거는 컴퍼넌트가 아니라 훅이어서
컴퍼넌트처럼 JSX를 사용하지 않으니까여
test 강좌도 해주시면 넘 감사하겠습니다!
혹시 Jest 에 관심이 있으시다면..
ua-cam.com/play/PLZKTXPmaJk8L1xCg_1cRjL5huINlP2JKt.html
만들어둔게 있습니다 ㅎ
타입스크립트도 변경해준 파일들이 $ npm start 시 컴파일 오류[Module not found: Can't resolve './component/Day' in ~~] 가 나는데, 혹시 타스에서 어떤 설정을 더 해줘야 할까요..?
단순히 js -> ts 로만 바꿨는데도 안되는 거라면 뭔가 설치가 덜 된 것 같은데요..?
@@codingangma 흡...! 체크해보겠습니다!
에러는 뜨지만 .. import useFetch from "../hooks/useFetch.ts"; 이런식으로 하면 잘 동작하기는 하네요. 저도 댓글들을 보면서 npm install 등을 했는데 에러가 안잡혀서요
@@joonheo6595 해보겠습니다! 감사합니다~
Thank you
ㅇㅕ기서 말하는 interface는 C++같은 객체지향의 그것과 다른 의미인가요?
음.. 제가 C++ 안써봐서 모르겠지만, JAVA 와 비교해 본다면 비슷한 개념이긴 합니다. 그런데 완전히 동일하지는 않아요.
C++의 struct와 더 비슷할 것 같습니다
여러가지 방법을 시도해봤는데도 module not found 가 발생하는데 왜 이럴까요… ㅠㅠ
혹시 설치가 덜 된게 아닐까요?
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
@@codingangma 댓글 주셔서 감사합니다. 모듈이랑 타입스크립트 재설치 하니까 화면은 나오는데 Uncaught (in promise) TypeError: Failed to fetch 라는 에러가 발생하면서 로딩 만 계속 나오네요 ㅠ 계속 해결 방법을 찾고는 있는데 잘 안되네요 ㅠㅠ
Iword에서 어떻게 string에서 object? 타입으로 쌍따옴표"" 바로 없애나요?
prettier 설치하시면 됩니다. 저장했을때 코드 정리를 자동으로 해줘요.
@@codingangma 감사합니다!
day를 입력받을 때 타입을 string이 아닌 number로 생성할 수 있나요?
음.. 질문 하신 부분이 맞는지 모르겠는데, useParams 훅은 항상 string 만 받습니다.
@@codingangma각각의 day 페이지에서 클릭버튼을 만들어 다음날이나 전날로 가게 만들고 싶은데 day가 number가 아니라서 어떻게 해야할지 모르겠어요.ㅠ
@@sunjushin6576
이런 형태로 해보세요.
이전
Number(day) 하면 day 가 number 로 바뀝니다.
@@codingangma 이렇게 하면 day 1일때 전날과 day마지막 일 일때 다음날에서 에러가 나는데 다른 방법은 없을까요?
@@sunjushin6576 현재가 day 1 이면 이전 버튼은 필요없고,
5일까지 있는데 현재가 day 5 이면 다음 버튼을 노출해선 안되겠죠. 이럴때는 조건문을 사용하셔서 분기 처리 하시면 됩니다 :)
tsx 에러가 안잡히시는 분들
npm install react@latest react-dom@latest
npm install --save-dev typescript@latest