![[React / VanillaJS] UI 요소 직접 만들기 Part 2강의 썸네일](https://cdn.inflearn.com/public/courses/333795/cover/0cf744ff-43a2-4de7-a5e5-7f5619b7cb15/333795.png?w=420)
[React / VanillaJS] UI 요소 직접 만들기 Part 2
정재남
대표적인 UI 요소들을 React 버전 및 순수 JavaScript 버전으로 만들어 보면서, Web API를 활용한 다양한 관점과 방법을 경험하고, 프론트엔드 개발 실력을 한층 끌어올려 보세요.
초급
React, vanilla-js, ui
By creating representative UI elements in React and pure JavaScript versions, you can experience various perspectives and methods using Web APIs and further improve your front-end development skills.

React practical knowledge
DOM API
Ability to utilize various other Web APIs
Who is this course right for?
Front-end developer aspirant
Frontend Junior Developer
Need to know before starting?
HTML
CSS
JavaScript (ES6+)
React
TypeScript
32,839
Learners
689
Reviews
395
Answers
4.8
Rating
11
Courses
안녕하세요, 시니어 프론트엔드 개발자 정재남 입니다.
서로 돕고 함께 발전하는 건전한 공유문화를 지향하여 다양한 활동을 하고 있습니다.
저서: 코어 자바스크립트
유튜브 채널: FE재남
아티클 및 인터뷰 영상:
원티드) 신입 개발자, 뭘 공부해야 하죠? https://www.wanted.co.kr/events/22_02_s01_b01
인프런) To. 주니어 개발자 https://www.inflearn.com/pages/for-junior-developers-20211207
벤처이몽) 벤처/스타트업 시니어 개발자와 주니어 개발자의 솔직담백 토크쇼 https://youtu.be/6D7I4NNFHsU?si=nD6-F7EU_ZtYqDLI
바닐라코딩) 프론트엔드 개발자 취업 마인드셋 https://youtu.be/zX68pyoLctI
All
49 lectures ∙ (12hr 7min)
Course Materials:
All
24 reviews
5.0
24 reviews
Reviews 2
∙
Average Rating 5.0
5
강의 컬렉터로서 여러 강의를 들어봤지만 진짜 최고의 강의인것 같습니다! 일단 강사님이 최신 타입스크립트 문법, 리액트 문법에 능숙하셔서 이럴때 저런걸 쓰는구나하고 보고있는 것만으로도 실력이 느는것 같습니다. 원래 책이랑 문서만 보고는 잘 이해가 안가는데, 문서로만 배웠던 내용을 아~ 저렇게 적용하는구나 하고 다시한번 체득하게 됩니다. 레벨은 너무 신입보다는 1-3년차 주니어들이 보면 좋으실 것 같습니다. 일단 강의자체가 실무에 바로 적용 할 수 있고, 리액트 심화부분까지 젹용해보기 때문입니다~ 단순 구현에만 그치지 않고 어떻게하면 좀 더 좋은 코드가 될지 고민해보면서 주니어에서 중니어로 한단계 성장하고 싶은 분들에게는 꼭 추천드립니다. 이제 어떤 ui를 만나더라도 이제 구현할 수 있다는 자신감이 생겼습니다 ㅋㅋㅋㅋ100% 이해를 못햇더라도 챕터별로 짜여졌던 코드를 다시 보면서 실무에 적용할 수 있다는 점이 너무 좋은거 같습니다. 일단 이 강의를 들으면서 완성된 ui 코드를 갖고있는 것 만으로도 강의의 값어치를 넘는거 같네용ㅎㅎ 다음파트도 얼른 나왔으면 좋겠습니다!
정성스러운 수강평 감사합니다 😃 제가 이 강의를 기획하면서 기대했던 것이 잘 전해진 것 같아 기쁘고 힘이 나네요! 다음 파트도 영상 편집에 박차를 가해서 최대한 빨리 오픈할 수 있도록 해볼게요 😂
Reviews 2
∙
Average Rating 5.0
5
구현 방법을 한 가지만 알려주시는게 아니라 여러 방식을 소개해 주셔서 너무 알차요!! 그리고 단순히 UI 요소의 기본 동작 구현을 넘어서 아코디언 ctrl+F로 검색하면 열리는 기능, 툴팁이 화면 안에서 보이도록 하는 방법 등 정말 디테일한 동작까지 알려주시더라구요. 평소 개발할 때 구현해보지 않은 UI를 개발하면 구글링이나 유튜브를 이용해서 따라했었는데, 강의를 듣고 나니까 '이 UI는 이런식으로 구현해야 되겠구나'라는 감이 잡혀서 구현에 대한 자신감이 많이 생긴 것 같아요. 가격에 비하면 다른 강의들보다 훨씬 얻어갈 수 있는게 많은 것 같습니다. part1도 유익했는데 part2도 요소들 목록을 보니 너무 기대되네요!!! 주니어 프론트 개발자들에게는 최고의 강의인 것 같습니다ㅎㅎ 항상 좋은 강의 감사합니다 :)
민혜님, 소중한 강의평 감사합니다! 강의내용을 저보다 잘 소개해 주신 것 같아요 ㅎㅎ :D
Reviews 8
∙
Average Rating 5.0
5
사실 리뷰를 잘 남기는 성격은 아닌데 이번 강의를 보면서 참 좋다는 생각을 많이 했습니다. 초반에 Next 14 맛보기로 프로젝트 셋팅, 그리고 좌측 사이드바를 만들 때의 생각할 수 있는 방법, 이후 리액트에서 Vanilla 코드를 작성하는 방식, 재사용 컴포넌트별로 어떻게 구현하고 사고하는지에 대해 라이브코딩으로 잘 알려주십니다. 원래 강의를 모두 다 듣고 리뷰를 작성하려고 했는데 지금 작성합니다 ㅎㅎ 은은하게 하루에 컴포넌트 강의 하나씩만 수강해도 좋을 것 같습니다~ 좋은 강의 만들어주셔서 감사합니다!
정성스러운 수강평 감사합니다 😄 하루 한 컴포넌트씩 보시는거 뒤로 갈수록 힘들어지실까 걱정되네요. 무리하지 않는 선에서 적당히 꾸준히 끝까지 완주해주시길 기대합니다.
Reviews 1
∙
Average Rating 5.0
Reviews 3
∙
Average Rating 5.0
Edited
5
재미있고 알찬 강의입니다. React, Ts, Js의 기본 개념을 실제에 어떻게 적용할 수 있는지를 배울 수 있고, 같은 UI를 다른 방식으로 많이 구현해보면서 요구사항별로 좋은 방식을 많이 배울 수 있어 매우 유익했습니다. 사수처럼 현실적인 방향을 제시해주시면서도, 다알려주지는 않는(?) 사고력을 길러주는 교수님 같은 스타일의 강의라고 생각합니다. 그래서 강의를 듣다 보면 "나라면 이렇게 해볼 것 같은데?" 하는 생각이 자연스럽게 들고, "이 부분은 왜 이렇게 작성하셨을까?" 생각하면서 재미있게 들을 수 있습니다. 예를 들어, hidden 속성을 React가 강제 타입 변환하기 때문에 속성을 대문자로 작성하고 끝나는 부분에서, 저는 "어차피 ref로 접근했으니 setAttribute 메서드로 속성을 할당하면 되지 않을까?" 하고 해보는 등 생각할 수 있는 기회가 있었고 또 클로저 활용, GNB의 타입을 가독성 있게 더 안전하게 다루는 방법 등 실무적인 팁도 많이 배울 수 있었습니다. 좋은 강의 만들어주셔서 감사합니다. 덕분에 많이 배우고 있습니다!
이레님, 정성스러운 후기 감사합니다! 스스로 생각하며 수강하셨다니, 딱 제가 원하는 이상적인 모습이네요! 중간중간에 더 나은 방법이라고 생각하시는 내용이 있다면 커뮤니티에 소개해 주시면 모두에게 도움이 될 것 같아요.
$53.90
Check out other courses by the instructor!
Explore other courses in the same field!