코딩에 진심인 사람을 위해 준비한 리액트 타입스크립트 | 실제 회사에서 쓰는 레벨 ver

  Рет қаралды 42,376

코딩알려주는누나

코딩알려주는누나

Күн бұрын

Пікірлер: 112
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
* 삼쩜삼에서 숨은 환급액 찾아보기:bit.ly/3pkmocM 00:00 인트로 00:11 리액트 타입스크립트 프로젝트 시작법 01:03 tsconfig.json살펴보기 01:48 리액트 타입스크립트 컴포넌트로 바꾸기 02:56 오늘의 예제 소개 (레스토랑정보 보여주기) 06:20 객체 타입정의하는 법 06:41 유료광고 타임 삼쩜삼 세금신고서비스 08:44 다시시작 : 객체타입 정의하는 법 09:47 type으로 타입 정의하는법 12:20 타입안에 타입만들기 14:00 useState에서 타입스크립트 쓰는법 14:54 제네릭 문법 17:06 interface로 타입 정의 18:56 함수 타입스크립트로 정의하기 21:59 interface extends란? 사용법 26:49 type extends하는 방법 27:10 interface와 type의 차이 27:30 Omit 사용법 30:17 Pick 사용법 31:10 ? 사용법 32:22 api에서 타입스크립트 사용법: 제네릭 문법 응용법 * 1탄 보러가기: kzbin.info/www/bejne/fXmrhp1_icqfqaM * 코딩알려주는 누나 강의 듣는곳:codingnoona.thinkific.com/ 누나 인스타 뭐야? 1008_shine
@starp5259
@starp5259 Жыл бұрын
타입스크립트 첨 공부하고 첫 프로젝트 할 때, 배운거랑 실제 프로젝트랑 너무 달라서 힘들었는데 여기에 다 정리되어있네요... 앞으로도 이런 실전형 팁들 부탁드립니다
@티벳여우상
@티벳여우상 Жыл бұрын
헐 타입스크립트 다른곳에서 돈내고 강의들을까 했는데 마침 추천에 떳네요ㅋㅋㅋㅋ 저장해놓고 보겠습니다 돈 5만원 굳었네요 항상 행복하시고 감사합니다
@eddie_the_traveler
@eddie_the_traveler Жыл бұрын
안녕하세요 코딩알려주는누나님! 영상 너무 유익하게 잘 봤어요. 이렇게 typescsript를 친절하고 쉽게 가르쳐 주시는 분이 있으셨나 싶을 정도로 너무 재밌게 강의 들었어요. 🙇🏻‍♂ 이렇게 완벽한 강의에 11:44 에 zipCode에서는 "Number 타입"을 price는 "number 타입"을 쓰셨었는데 아마 깜빡하시고 설명을 못해주신 거 같아요! 제가 면접 질문 받았던 내용이라 + 혹시나 궁금하신 분들을 위해 짧게 설명을 드리자면 Number type은 interface type이고 number는 원시 type입니다. 그래서 명확하게는 두개가 서로 다른 타입이예용. 이걸 확인해볼 수 있는 코드는 다음과 같습니다. const num: number = new Number(1) // Type "Number" is not assignable to type "number". 일반적으로 우리가 알고 있고 사용하는 숫자 타입의 개념은 아니어서 "Number type"은 사용하지 않는게 좋다고 공식 문서에서 권고하고 있어용! 📌공식문서: www.typescriptlang.org/docs/handbook/2/everyday-types.html#the-primitives-string-number-and-boolean
@bobo9866
@bobo9866 6 ай бұрын
코드 짜다가 다시 돌아온 사람 추가요 👀 진짜 이 영상 보물입니다.. 처음엔 약간 이해안되던게 코드 짜보니 넘 이해가고 열번은 넘게 본거 같아요 헷갈리면 계속 돌아와서 봅니다 쵝오 💗
@bobo9866
@bobo9866 Жыл бұрын
타입스크립트 강의 듣고도 이걸 어떻게 실제 프로젝트에서 쓰는거지 하고 궁금했는데, 제가 궁금한거 여기 다 있네요! 진짜 짱입니다... 이런 실전형 팁들 너무 소중하고 쵝오입니다 감사해요 🫶
@dotow7
@dotow7 Жыл бұрын
정말 감사드려요 타입스크립트는 배웠지만 사실타입을지정해준다 정도로만 알았지 프로젝트짜는방향성을 잘 몰랐는데 그것도 같이 짚어주시는것같아 매우 도움되었습니다 누나영상보고 힘내서 빠른시일내 취직으로 보답하겠습니다 훼이렝~
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
훼이렝~~~~
@user-sj3xr8ow2e
@user-sj3xr8ow2e Жыл бұрын
설명 왜이렇게 찰지게 잘해주시죠??ㅋㅋㅋㅋ 집중 잘되네요. 타입스크립트 문법 다 배우고 막상 js로 된 프로젝트 ts로 바꾸려니까 시작도 못했는데 잘배웠습니다!
@heeyongkim5643
@heeyongkim5643 Жыл бұрын
이영상하나보고 바로 현장 투입됫는데 타입스크립이 다보여요!! 정말 감사합니다!!
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
키야ㅏㅏㅏㅏ뿌듯하다😍
@ASMR-tj4ko
@ASMR-tj4ko 2 ай бұрын
35:10 이꾸요잇.. 누나 타입스크립트 강의 가버렷..! 최고의 압축강의 감사해요! 그리고 누나 왜이렇게 이뻐요 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
@mingLee-no3sz
@mingLee-no3sz 7 ай бұрын
진심 마지막 멘트 ㅋㅋㅋㅋ 나중에 보면…. 진짜네요 감사합니다 ㅠㅠ
@음색깡패시-연
@음색깡패시-연 Жыл бұрын
와우 이거 귀한 영상이로군요! 타입스크립트 리액트 프로젝트에 어떻게 적용하는지 막막 했는데 감사합니다!!❤
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
꼭 써보세요!
@음색깡패시-연
@음색깡패시-연 Жыл бұрын
@@코딩알려주는누나 넵 :)
@치치-z5x
@치치-z5x Жыл бұрын
진짜 저 회사 프로젝트에서 쓰이는 그대롴ㅋㅋㅋㅋㅋㅋ나와서 ㄴ너무너무 신기..너무너무 좋아요 쓰면서도 ㄱ긴가민가 한 것도 이해가 잘됐어요 감사합니다
@알랭들롱-q4z
@알랭들롱-q4z 8 ай бұрын
감사합니다. 해당 강의 듣고 제네릭 부분 이해를 못했는데 완벽하게 이해했습니다.
@하하하맨
@하하하맨 Жыл бұрын
오늘도 감사합니다~~
@인덩-z6b
@인덩-z6b 6 ай бұрын
타입스크립트를 공부하고 처음 프로젝트에 도입하던 중에 보물을 찾은거 같아요.. 너무 감사합니다 ㅠㅠ
@BhusuwEujnsuuhh658
@BhusuwEujnsuuhh658 Жыл бұрын
33:49 에 나오는 38번 줄 T에 붙은 에러 안없어지는데 어떤 처리가 필요한가욤? 그리고 npm start로 로컬호스트를 띄우는게 아닌가요? 계속 에러가 떠서요.
@강한구-w2x
@강한구-w2x 11 ай бұрын
export typeApiResponse = { data: T[ ], .....} //할당 연산자
@찰리채플린-z1f
@찰리채플린-z1f 5 ай бұрын
수업을 다 듣고 문법이 숙달 될 때 까지 예제를 여러 번 곱씹어 보면 정말 실무에 도움이 많이 될것 같아요~
@monkeyg2221
@monkeyg2221 Жыл бұрын
매번 느끼는 거지만 똑똑하고 능력있는데 이쁘기까지 한 누나
@schoolkeepa
@schoolkeepa Жыл бұрын
춤도 잘춤
@chichi2_2
@chichi2_2 Жыл бұрын
언니 강의 영상 진짜 보물같아요.. 핵심만 쉽게 알려주셔서 감사합니다!! 꼭 마스터 해 볼게요🥰
@Chloe-cu6rw
@Chloe-cu6rw 10 ай бұрын
4:55 :React.FC 6:40 객체 타입정의(객체는 여러 종류의 자료가 섞여있어 하나로 정의하기 힘들다) 21:08 함수 prop으로 보내는 방법
@Samdasoo2
@Samdasoo2 9 ай бұрын
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ너무상큼하셔... 수업도 너무 좋았습니다! 감사합니다!
@박상용-g1p
@박상용-g1p Жыл бұрын
와.. 타입스크립트 이거 보고 완전 흡수함!!
@yeonjooism
@yeonjooism Жыл бұрын
진짜 보물영상 👍👍
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
이 댓글도 보물🥰
@AL-di1th
@AL-di1th Жыл бұрын
정말 쉽게 설명해주시네요! 감사합니다 👍
@yoot5617
@yoot5617 Жыл бұрын
감사합니다! 맨날 2-3년전 강의보고 다시 고치고 했는데 엄청 가독성있게 정리해주시고 딕션도 최고에요!
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
힣칭찬은 누나도 춤추게한다 감사합니다!!
@항별-w9m
@항별-w9m Жыл бұрын
웅니 너무 간단하고 체계적인 설명 고마워요.. 지루하지도 않고 이해가 쏙쏙.. 바로 구독 박았어요.. 다음에는 웹소켓 채팅앱 강의 들을거예요.. 🩷
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
오! 꼭완주해줘요!
@wodyd318
@wodyd318 Жыл бұрын
마지막 부분은 진짜 모르면 큰일나는 것들이 많이 들어있네요 좋은 강의 잘 보고 갑니다
@99narii
@99narii Жыл бұрын
오늘도 언니 강의 들으러 왔써요!!! >_< 늘 쬐릿해 베트남 방향으로 감사인사 올리고 시작할게요!!😍
@장미전쟁
@장미전쟁 Жыл бұрын
눈물나요. ~ 👍 저게 뭔가~ 했어요.
@Lannister129
@Lannister129 Жыл бұрын
이해가 한번에 되네 바로 구독 박음
@깁스-n5d
@깁스-n5d Жыл бұрын
예언 인정합니다.
@KienNguyen-ku1jt
@KienNguyen-ku1jt Жыл бұрын
omg 새로운 비디오, 너무 흥분
@bborongmaru
@bborongmaru 24 күн бұрын
리액트 프로젝트를 해보고 싶은데 너무 도움되는 영상이네요
@코딩알려주는누나
@코딩알려주는누나 23 күн бұрын
감사합니다!! 다른영상들도 도움 많이 되실거에요! 🥰
@히우우웅
@히우우웅 Жыл бұрын
와 너무 도움많이 됐어요!!
@wlsgus83
@wlsgus83 Жыл бұрын
타입스크립트로 마이그레이션 하는중인데 ...확실히 확확 이해갑니다 감사합니다
@uprisingalpha2065
@uprisingalpha2065 Жыл бұрын
20:21 21번째줄 prevState 함수로 최신상태 안가져오고...spread로 사용하신 이유가 궁금해요
@슈퍼데스크
@슈퍼데스크 Жыл бұрын
너무 쉽게 잘 설명해주시네요...감사합니다...^^
@Jaewonic
@Jaewonic Жыл бұрын
강의가 좋으니 생각보다 쉽고 재밌어요 ㄷ ㄷ
@ksiw0427
@ksiw0427 Жыл бұрын
ts 입문한지 얼마 안되었는데 이렇게 유익한 영상이라니! 감사합니다.
@hello-1024-wellcome
@hello-1024-wellcome Жыл бұрын
35:09 이부분 타입 제네릭설정은 되게 유익하네요! 근데 저 여쭙고싶은게있는데 인터페이스와 type으로 타입설정하는것중에 뭐가 더 많이 쓰이나요? 제가 하는 팀플젝에서는 인터페이스로 타입을 설정하자고들 하는쪽입니다. type으로 타입은 양자택일 뭐 예를들면 type hello= “안녕1”|“안녕2” 이런식인경우에만 type을 사용하자고 하시구요.. 이렇게 사용해도되나요? 또 타입설정할때 네임명은 어떤식으로 해야할까요?
@artistjsh
@artistjsh Жыл бұрын
실전 개꿀강의네요 감사합니다!
@인디밴드-w9l
@인디밴드-w9l Жыл бұрын
너무나 유익한 영상이에요!!! :) 감사합니다!
@만공자
@만공자 10 ай бұрын
대박이에요
@park_lego
@park_lego Жыл бұрын
타입스크립트 이 영상한번보면 바로 대부분이 이해되네요 ㅎㅎ
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
헤헤🥰
@park_lego
@park_lego Жыл бұрын
@@코딩알려주는누나 interface가 아니라 type을 선호하는 이유가 궁금합니다!
@user-esj67
@user-esj67 Жыл бұрын
리액트 랩업하고 갑니다
@vbn0213
@vbn0213 Жыл бұрын
이거 진짜 개꿀영상입니다 b
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
감사합니다!!
@chameleonnn
@chameleonnn Жыл бұрын
이 누나 완전 최고
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
힣 🥰
@한은서-u7k
@한은서-u7k 11 ай бұрын
사랑해요 언니
@kakalaws555
@kakalaws555 Жыл бұрын
한국사람이라서 감사드립니다..
@KwanyoungChoi-h8i
@KwanyoungChoi-h8i 8 ай бұрын
아씨 진짜 돌아왔네ㅋㅋㅋ
@jsjsnnjssk9923
@jsjsnnjssk9923 Жыл бұрын
많이 도움 받고 갑니다 ㅜ 감사합니다 ㅜ
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
제가 더 감사합니다🥰
@민스스-e9s
@민스스-e9s Жыл бұрын
감사합니다!
@jessicachoi9241
@jessicachoi9241 Жыл бұрын
프로젝트에 타입스크립트 도입해야 돼서 3일간 영상 20개도 넘게 본 현직자 여기에 뼈 묻습니다. 문법 설명에 영상 구분도 완벽 + 헷갈리는 부분을 나중에라도 확인할 수 있게 정리까지 갓벽하게 해두셔서, 보물 같은 영상이라고 하신 얘기 = 참말 사건입니다.ㅠㅠ 이 영상부터 볼걸 진짜~~~~~ 후회되고요ㅠㅜ;;; 열심히 타입스크립트 영상 준비하셨을 다른 개발자 분들께는 죄송하지만;;;;; 다른 영상은 솔직히 볼 필요도 없다고 단언합니다. 실시간 도입, 현직이면 그냥 이거만 보면 됨... 아무튼 제대로 된 타입스크립트 영상 봐서 몹시 흥분해서 아무말 대잔치해버린 거 같지만 좋은 영상 진심으로 감사합니다!! 언제나 좋은 하루 되시고요!!
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
우아 ㅠㅠㅠ 칭찬 너무 감사합니다!!
@bsk1776
@bsk1776 8 ай бұрын
흑 감사합니다!!
@nyangnyangoo7208
@nyangnyangoo7208 Жыл бұрын
세금 신고 기간이었네요 까먹고 있었는데
@minjikim1114
@minjikim1114 Жыл бұрын
안녕하세요 코딩알려주는누나님. 글을 남길 곳이 없어 이곳에 남깁니다. 다름이 아니라 "코딩알려주는누나 웹사이트"에 로그인할때, 자동으로 외부 id (e.g. google)로 로그인하는게 안되네요. 확인부탁드립니다. 감사합니다 :)
@ehsicheosmxbwisjdf
@ehsicheosmxbwisjdf Жыл бұрын
감사합니다 누낭 ㅎㅎ
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
댓글 고마워요!
@홍홍홍-k6i
@홍홍홍-k6i 11 ай бұрын
타입스크립트 실제로 어떻게 쓰이는지 궁금했는데 이 영상 보니까 감이 잡혔어요 !!! ㅠㅠ 욕심인건 알지만 redux 같이 store 쪽에서도 타입스크립트 어떻게 쓰이는지 추가되면 좋을 것 같아요 🥹
@sonic-cs6ig
@sonic-cs6ig 11 ай бұрын
선생님 말고도 시중에 타입스크립트 기반으로 하는 리엑트 강의는 왜 잘 안보이는건가용?
@jinleeeeeee
@jinleeeeeee Жыл бұрын
이게 공짜라니.. 너무 감사합니다😭😭
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
낄낄 잘써주세요!
@Torkmakto
@Torkmakto 10 ай бұрын
스타트업같은 소규모 프로젝트기준으로 쓰면 쓸수록 이게 과연 좋은건지 의문이 듭니다. 버그최적화는 좋으나 가독성이 떨어지고 개발속도가 js에 비해 떨어지는 느낌입니다 득보다 실이 더 많은거같아요. 대기업의 빅테크에서는 유용할수 있으나 스타트업에서는 글세요.. 그냥 너도 나도 타입이 대세니까 쓰자느낌이 강합니다. 혹시나 제가 모르는부분이 있나해서 이 영상을 봤는데 다른게 없네요. jsdoc이 더 발전하기를 기대하는중입니다.
@kie4825
@kie4825 Жыл бұрын
웅니이이!!! 저는 찐빱 응애 아기 개발자인데 어쩌다보니 얼레벌레 단기 프로젝트 프리랜서를 하게 되었는데 타입스크립트을 알아야 한다는거에여..? 저는 원시타입만 알거든요! 웅니 덕분에 하루만에 깨달음 얻고 하산하여 전쟁터로 떠납니다~~!! 감사해요 웅니!! 웅니 최고!!
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
멋지게 싸우고 오너라!!
@김혜빈-w3c
@김혜빈-w3c 6 ай бұрын
영상에서 number가 아닌 Number로 작성하신 이유가 있을까요!!
@podojam12
@podojam12 Жыл бұрын
안녕하세요! 강의 너무 귀에 쏙쏙들어옵니다! 귱금한게 있는데 changeadress함수에서 이벤트를 실행하면 ...myadress에 변경된 주소가 덮어씌워지는건가요???
@이름-d1t4h
@이름-d1t4h Жыл бұрын
@인덩-z6b
@인덩-z6b Жыл бұрын
타입 스크립트 강의 도 출시하나요 ?!!
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
아직은 계획 없어요!
@김한-j2k
@김한-j2k Жыл бұрын
앵귤러에서는 좀 다른가요? 보고 앵귤러에서 살짝살짝 따라해보는데 잘 안되네요..
@TheParkjunhwa
@TheParkjunhwa 5 ай бұрын
이 누나 강의는 알기 쉬움. 모르는데 왜 알기쉽지?
@코딩알려주는누나
@코딩알려주는누나 5 ай бұрын
제가 설명을 잘해서 🥰
@rebornive
@rebornive Жыл бұрын
함수형 컴포넌트의 반환값은 타입을 지정해주지 않아도 기본적으로 추정해주는 걸로 알고있는데, 명시해주는 게 좋을까요?
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
명시해주는게 좋아요 예상치못한에러로 다른 반환타입이.나올 수 있기 때문이죠!
@38thYun
@38thYun Жыл бұрын
누나 빨리 먹방하세요 개발영상은 수요자층이 너무 좁아요 누나의 입담과 매력이라면 전업 유튜버로 매달 수천만원씩 글어 모아요 ㅎㅎ 이번 영상은 넘 유익하네요 좋아요 감사해요 ㅎㅎ 얼런 가서 먹방 유튜버로 돈 긁어모으세요 ㅋㅋㅋ
@AbundanceMind1
@AbundanceMind1 Жыл бұрын
코알누 세금신고 광고 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
@38thYun
@38thYun Жыл бұрын
24:08 잘못 걸리면 ㅈ되는겁니다 여러분
@MinseopToT
@MinseopToT Жыл бұрын
누나 타입스크립트 너무 어지러워😢
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
두세번보면 다를꺼야!
@leciel87
@leciel87 Жыл бұрын
1. 함수 밖에서 let을 사용하는 이유가 있을까요? 이 강의의 코드에서는 당연히 문제가 발생 하지 않지만 리액트&JS의 기본중의 기본이라 생각되는부분인데 정확한 설명을 해주시면 좋을거 같습니다. 2. React.FC를 쓰면 여러가지 이슈발생할 가능성이 많아서 가능하면 쓰지 말라고 권장하는경우가 거의 대부분인데 여기서는 쓰는 이유가 궁금합니다. 굳이 이런 질문하는 이유는 [실제 회사에서 쓰는 레벨ver] 이라 적혀 있어서 그렇습니다.
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
안녕하세요 예제에서 const를 사용하는게 더 좋겠네요 강의할때 let을 많이써서 습관적으로 let을 썻는데 const사용하는게 맞습니다! React.FC같은경우에는 몇몇 단점이 있지만 현재 제가 크게 문제없이 사용하고있어서 가져왔습니다 회사마다 FC가아니라 일반 함수에 타입지정해주는 방식을 사용해줄 수도 있겠네요! 좋은질문주셔서 감사해요!
@twostar486
@twostar486 Жыл бұрын
이메일좀 확인해주세욧
@시
@시 Жыл бұрын
ver를 var로 봤네 ㅋㅋ
@김경범-i8j
@김경범-i8j Жыл бұрын
이게 무료라고?....
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
내말이....
@임대현-s1z
@임대현-s1z Жыл бұрын
장점도 있지만 스크립트라는 장점도 사라지네...
@chnokim2051
@chnokim2051 6 ай бұрын
내용은 모르겠고 얼굴만 봤습니다.
@코딩알려주는누나
@코딩알려주는누나 6 ай бұрын
그럼 앙대는데... ㅠ
@DANDANMusic-ru6zt
@DANDANMusic-ru6zt 6 ай бұрын
다른 분의 인프런 강의 구매했다가 이 강의 듣고 취소했습니다. ㅎㅎㅎㅎ
@seokwonnbae
@seokwonnbae 7 ай бұрын
뭐꼬?
@mathijs5199
@mathijs5199 Жыл бұрын
타입 쓰니까 확실히 코드가 지저분해지고 가독성이 떨어지네요
@코딩알려주는누나
@코딩알려주는누나 Жыл бұрын
하지만 그것보다 얻는게 훨씬 많죠!
@chameleonnn
@chameleonnn Жыл бұрын
협업할 때는 자유도 높은게 최악 ㅎ
1% vs 100% #beatbox #tiktok
01:10
BeatboxJCOP
Рет қаралды 67 МЛН
Quando eu quero Sushi (sem desperdiçar) 🍣
00:26
Los Wagners
Рет қаралды 15 МЛН
Support each other🤝
00:31
ISSEI / いっせい
Рет қаралды 81 МЛН
회사 첫 출근한 개발자가 이쁨받는 비결 알려드림
12:58
개발자 나연
Рет қаралды 4,5 М.
타입스크립트 쓰는 이유 & 필수 문법 10분 정리
13:28
코딩애플
Рет қаралды 193 М.
한시간 만에 끝내는 React.js 입문
1:16:34
개발자의품격
Рет қаралды 98 М.
1% vs 100% #beatbox #tiktok
01:10
BeatboxJCOP
Рет қаралды 67 МЛН