소개
안녕하세요, 시니어 프론트엔드 개발자 정재남 입니다.
서로 돕고 함께 발전하는 건전한 공유문화를 지향하여 다양한 활동을 하고 있습니다.
저서: 코어 자바스크립트
유튜브 채널: 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
강의
전체10수강평
- 헷갈렸던 부분들이 시원하게 해결됐습니다. 감사합니다.
김종환
2024.04.03
1
게시글
질문&답변
2024.04.06
학습자료 관련해서 질문있습니다.
네 당연히 문제없죠!
- 0
- 1
- 78
질문&답변
2024.04.05
무한스크롤 강의 관련 질문입니다.
당시 step을 적용하다보니 로직이 꼬였었는데요, [복습스터디 #3. 무한스크롤 - 코드리뷰 + QnA + 버그수정] 24:30쯤부터 내용 설명 및 버그 수정하는 내용이 나옵니다. 어떤것을 리팩토링하신다는 것인지 이해하지 못했습니다만, ding-co님께서 더 나은 방법이라고 생각하시는 코드가 있다면 수정된 내용 전반을 여기에 공유해주세요. 다른 분들께도 참고가 되어 좋을 것 같네요! 참고로 긴 코드는 우측의 [ ] 버튼을 눌러 작성하실 수 있어요. (사진)
- 0
- 1
- 96
질문&답변
2024.04.02
반응형 TextBox 질문입니다.
TextBox2의 강의내용을 시청하지 않고 코드만 보시고 말씀하신 것 같아요. TextBox2는 처음에는 ref를 작성했다가, 나중에( 복습스터디 #1. 텍스트박스, 여러줄 말줄임 - 코드리뷰 ) 변경하게 되거든요. 강의자료의 코드는 강의의 최종 상태만 반영되어 있으니, 가급적 강의영상 위주로 봐주시기 바랍니다 🙂 최종 코드상의 TextBox1과 TextBox2의 차이는 onChange -> onInput으로 바뀐것 뿐만이 아니라, value={text} 가 사라진 것도 있어요. controlled와 uncontrolled를 가르는 중요한 차이점은 이벤트 핸들러의 등록여부가 아니라, state 의 사용 유무에 있습니다. 다만 위 영상(복습스터디 #1)에서는 onChange handler를 적용하면 Lint에서 " value 도 적용하여 controlled로 사용하거나, value 와 함께 onChange 도 빼서 uncontrolled로 사용할 것"을 경고하기 때문에, 이 경고를 피하기 위해 onInput 을 적용했던 것으로 기억해요. 리액트에서는 onChange와 onInput이 동작상에 차이가 없습니다. https://react-ko.dev/reference/react-dom/components/input (사진)(사진) 여기서 'historical reason'이란 이런걸 말하는 것이 아닐까 추측하고 있습니다. https://legacy.reactjs.org/docs/dom-elements.html#onchange (사진) useImperativeHandle 은 상태에 관여하지 않는 예외적인 상황에서 실제로 사용하고 있습니다. 대표적으로 ui적으로만 조정이 필요한 경우, 예컨대 스크롤 위치 조정이라거나 엘리먼트의 position을 옮기는 용도로요. (이에 대해서는 scrollSpy 강의의 마지막 영상에서 다루고 있습니다 - 스크롤스파이 (4/4) 스크롤박스 재활용 ) 원론적인 얘기이지만, 리엑트는 선언형 프로그래밍이므로 ref를 위로 전달하여 직접 호출하는 명령형 프로그래밍은 전체 철학의 방향성에 맞지 않습니다. 따라서 ref를 forward하지 않고도 처리할 수 있는 다른 방법이 있는지를 먼저 고민해보는 것이 바람직합니다.
- 0
- 1
- 140
질문&답변
2024.04.01
이벤트에 대한 타입을 지정할 때 궁금한 점이 있습니다.
이건 제가 고쳐나가야 할 문제입니다. 변명이 될 수도 있을 것 같지만, 제가 왜 이런 방식을 써왔는지를 제 경험을 토대로 말씀드려 볼게요. React에서 제공하고 있는 event 타입의 종류는 제법 많습니다. https://react.dev/reference/react-dom/components/common 그런데 이들에 대한 타입이 전부 처음부터 딱 이렇게 정해지지는 않았습니다. 초기에는 대표적인 몇가지 이벤트 타입만 정의되어 있었다가, 이후 점차 늘어 지금의 형태를 완성하게 되었죠. 그래서 과거에는 아직 미완성인 구체적 이벤트 타입보다는 SyntheticEvent를 사용하는 편이 여러모로 나았습니다. 새로 정의된 타입을 적용하려고 하면 브라우저에서는 구현되어 있음에도 타입정의에 빠져있는 프로퍼티 때문에 문제가 되는 경우가 빈번했거든요. 물론 그 당시에 들인 습관을 아직까지 그대로 사용하고 있는 것은 제 스스로 부끄러운 일입니다. 질문자님께서 말씀하신 방식이 타입스크립트를 훨씬 잘 사용하는 방식이라고 생각해요. 덕분에 저도 오래된 습관을 고쳐볼 기회로 삼아봐야겠네요. 감사합니다!
- 0
- 1
- 80
질문&답변
2024.04.01
Tooltip의 useStyleInView 훅 질문입니다.
그 부분은 part2에서 popover를 다룰 때 등장하게 됩니다. 코드를 재사용하기 위해 아쉬운 부분은 보완하다보니, 뒤로 갈수록 다른 내용들이 채워지게 되었는데, 강의자료는 최종본(강의 종료시점)을 업로드해서 part2의 내용까지 포함되었네요. 툴팁 내용은 relative 방식만으로도 충분합니다. 불필요한 내용 제거한 버전을 다시 업로드 하였습니다. 혼란을 드려 죄송합니다.
- 0
- 1
- 76