게시글
질문&답변
2024.04.23
아코디언 1/6 강좌 클로져 관련 질문입니다.
이 자리에서 클로저의 정의를 자세히 설명해 드리는건 수업의 범위에서 많이 벗어납니다. 하여, 여기서는 질문하신 내용에 대한 최소한의 이해를 돕는 정도로만 소개드려 보도록 하겠습니다. MDN에서는 클로저를 다음과 같이 소개하고 있습니다. (사진) 이 중 '외부함수'와 '내부함수'의 관계를 클로저라고 하며, 흔히 외부함수에서 선언된 변수나 인자를 내부함수가 참조하는 경우를 일컫습니다. 예로, 다음 함수 originalFunc 는 const originalFunc = (id: string) => () => { console.log(id) } 풀어쓰면 다음과 같습니다. const orginalFunc = (id: string) => { return () => { console.log(id) } } 위 코드는 다음과 동작상에 차이가 없습니다. const orginalFunc = (id: string) => { const innerFunc = () => { console.log(id) } return innerFunc } 이 상태에서 보면, 내부함수인 innerFunc 에서 originalFunc 의 인자 id 를 참조하고 있습니다. 이는 클로저 현상을 활용한 대표적인 사례에 해당합니다. 이후 어디선가 originalFunc('abc') 를 실행하면 함수 자체가 반환될 뿐이지만, 이 반환된 함수를 변수 a 에 담아 다시 호출하면 ( a() ) 그 결과로 abc 가 반환될 것입니다. 이보다 자세한 내용은 자바스크립트 이론서나 이론강의 등을 통해 학습하시기 바랍니다.
- 0
- 1
- 35
질문&답변
2024.04.20
gnb 만들기를 실무 next js 프로젝트에서 사용할수 있나요?
그럼 실무의 next js 프로젝트에서 똑같이 gnb 를 구현 하면 안되겠죠? route와 gnb를 혼용해서 말씀하신 듯 하네요. routes.ts 파일을 route에 활용한 부분은 말씀하신대로 수업 편의를 위한 것입니다. 일반적으로 실무에서 적용하기엔 부적합한 경우가 많을 것입니다. 반면 이 파일을 gnb에 적용하는 부분은 실무에서 그대로 활용해도 무리가 없다고 봅니다. 순수 바닐라 js를 이용한 구현 부분도 실무에서는 별로 안쓸것 같고 어려울것 같아서 skip 해도 되나여? 이건 질문자님 개인이 알아서 판단하실 문제입니다. 이미 AI가 훌륭한 답변을 해주었네요 ㅎㅎ
- 0
- 2
- 90
질문&답변
2024.04.06
학습자료 관련해서 질문있습니다.
네 당연히 문제없죠!
- 0
- 1
- 87
질문&답변
2024.04.05
무한스크롤 강의 관련 질문입니다.
당시 step을 적용하다보니 로직이 꼬였었는데요, [복습스터디 #3. 무한스크롤 - 코드리뷰 + QnA + 버그수정] 24:30쯤부터 내용 설명 및 버그 수정하는 내용이 나옵니다. 어떤것을 리팩토링하신다는 것인지 이해하지 못했습니다만, ding-co님께서 더 나은 방법이라고 생각하시는 코드가 있다면 수정된 내용 전반을 여기에 공유해주세요. 다른 분들께도 참고가 되어 좋을 것 같네요! 참고로 긴 코드는 우측의 [ ] 버튼을 눌러 작성하실 수 있어요. (사진)
- 0
- 1
- 102
질문&답변
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
- 144
질문&답변
2024.04.01
이벤트에 대한 타입을 지정할 때 궁금한 점이 있습니다.
이건 제가 고쳐나가야 할 문제입니다. 변명이 될 수도 있을 것 같지만, 제가 왜 이런 방식을 써왔는지를 제 경험을 토대로 말씀드려 볼게요. React에서 제공하고 있는 event 타입의 종류는 제법 많습니다. https://react.dev/reference/react-dom/components/common 그런데 이들에 대한 타입이 전부 처음부터 딱 이렇게 정해지지는 않았습니다. 초기에는 대표적인 몇가지 이벤트 타입만 정의되어 있었다가, 이후 점차 늘어 지금의 형태를 완성하게 되었죠. 그래서 과거에는 아직 미완성인 구체적 이벤트 타입보다는 SyntheticEvent를 사용하는 편이 여러모로 나았습니다. 새로 정의된 타입을 적용하려고 하면 브라우저에서는 구현되어 있음에도 타입정의에 빠져있는 프로퍼티 때문에 문제가 되는 경우가 빈번했거든요. 물론 그 당시에 들인 습관을 아직까지 그대로 사용하고 있는 것은 제 스스로 부끄러운 일입니다. 질문자님께서 말씀하신 방식이 타입스크립트를 훨씬 잘 사용하는 방식이라고 생각해요. 덕분에 저도 오래된 습관을 고쳐볼 기회로 삼아봐야겠네요. 감사합니다!
- 0
- 1
- 82
질문&답변
2024.04.01
Tooltip의 useStyleInView 훅 질문입니다.
그 부분은 part2에서 popover를 다룰 때 등장하게 됩니다. 코드를 재사용하기 위해 아쉬운 부분은 보완하다보니, 뒤로 갈수록 다른 내용들이 채워지게 되었는데, 강의자료는 최종본(강의 종료시점)을 업로드해서 part2의 내용까지 포함되었네요. 툴팁 내용은 relative 방식만으로도 충분합니다. 불필요한 내용 제거한 버전을 다시 업로드 하였습니다. 혼란을 드려 죄송합니다.
- 0
- 1
- 78
질문&답변
2024.03.28
gnb 를 이렇게 수정해 봤어여
부모 토글기능 추가: 좋네요. 제가 뭐라고 할 게 있을까 싶습니다 ㅎㅎ zustand로 active 관리: 이부분은 갸우뚱합니다. 굳이 상태관리가 필요한 영역인지 모르겠군요. url path만으로도 active 상태를 알 수 있으니까요. routes 구현방식: 저는 gnb의 이상적이거나 보편적인 방식이 무엇인지는 모릅니다. 그저 제 강의 내용에 알맞은 형태를 고안하고 구현한 것 뿐이에요.
- 0
- 1
- 218
질문&답변
2024.03.25
css 만으로 아코디언 애니메이션을 적용할 경우, 다른 libary들은 코드로 그부분들을 해결해주고 있는걸까요?
withkey님께서 충분히 설명을 잘 해주셨습니다만, 추가로 예시를 들어보겠습니다. 연속하는 두 아코디언 아이템 A, B가 있다고 합시다. A의 실제 높이는 80px , B의 실제 높이는 100px 입니다. transition을 3초 간 주었다고 해보죠. max-height를 100px로 특정 각 컨텐츠의 height가 정해져있지 않기 때문에, transition의 판단기준은 100px가 됩니다. 즉 3초간 0px -> 100px 또는 100px -> 0px로 변화할 것입니다. 그렇다면 A는 전부 열리거나 닫히는 데에 3 x 80/100 = 2.4초 가 걸릴 것입니다. 나머지 0.6초 동안은 멈춰있게 되겠죠. (실제로는 easing함수가 적용되기 때문에 완전히 멈춰있지는 않을 것이지만, 여기서는 편의상 이 시간동안의 변화는 무시하고, 멈춰있는 것으로 간주합시다) 열릴때는 먼저 2.4초동안 높이가 변하고, 나머지 0.6초를 대기하는 반면 닫힐때는 0.6초를 대기하다가 이후 2.4초동안 높이가 변할 것입니다. 반면 B는 전부 열리거나 닫히는 데에 3초 가 걸립니다. 멈춰있는 시간은 없습니다. 따라서 A가 열려있는 상태에서 B를 클릭하는 동작에 대해 A는 0.6초를 대기 하다가 이후부터 닫히는 반면 B는 3초 전체 에 걸쳐서 열리게 됩니다. 0.6초는 제법 짧은 시간이라서 부자연스러운 느낌이 그렇게까지 크진 않습니다. max-height를 200px로 특정 A는 전부 열리거나 닫히는 데에 3 x 80/200 = 1.2초 가 걸립니다. 1.8초 동안은 멈춰있게 됩니다. 반면 B는 전부 열리거나 닫히는 데에 3 x 100/200 = 1.5초 가 걸립니다. 1.5초 동안은 멈춰있게 됩니다. 따라서 A가 열려있는 상태에서 B를 클릭하는 동작에 대해 A는 1.8초를 대기했다가 1.2초만에 닫히는 반면 B는 1.5초동안 열리고, 1.5초 대기합니다. 즉 처음 1.5초 동안은 A는 그대로 있는 상태에서 B만 높아지다가 1.5초 시점부터 1.8초까지는 A와 B 둘 다 아무런 변화가 없이 정지 해 있고, 1.8초 이후부터는 B는 그대로 있는 상태에서 A만 줄어들 것입니다. 따라서 '덜컥거리는' 느낌이 강하게 들게 됩니다. 이런 현상은 max-height와 실제 높이의 차이가 클수록 더욱 선명하게 드러나겠네요.
- 0
- 4
- 262
질문&답변
2024.03.25
class 자동완성 방법은 없을까요?
다음 내용을 참고하시면 될 것 같습니다. https://github.com/JedWatson/classnames/issues/300 다만 매번 .css.d.ts 파일을 생성해야 동작하므로 딱히 좋아보이진 않네요. 혹시 더 나은 방법을 알고 계시는 분은 여기에 공유해 주시면 좋겠네요!
- 0
- 2
- 162