소개
안녕하세요, 시니어 프론트엔드 개발자 정재남 입니다.
서로 돕고 함께 발전하는 건전한 공유문화를 지향하여 다양한 활동을 하고 있습니다.
저서: 코어 자바스크립트
유튜브 채널: 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.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
- 40
질문&답변
2024.04.20
gnb 만들기를 실무 next js 프로젝트에서 사용할수 있나요?
그럼 실무의 next js 프로젝트에서 똑같이 gnb 를 구현 하면 안되겠죠? route와 gnb를 혼용해서 말씀하신 듯 하네요. routes.ts 파일을 route에 활용한 부분은 말씀하신대로 수업 편의를 위한 것입니다. 일반적으로 실무에서 적용하기엔 부적합한 경우가 많을 것입니다. 반면 이 파일을 gnb에 적용하는 부분은 실무에서 그대로 활용해도 무리가 없다고 봅니다. 순수 바닐라 js를 이용한 구현 부분도 실무에서는 별로 안쓸것 같고 어려울것 같아서 skip 해도 되나여? 이건 질문자님 개인이 알아서 판단하실 문제입니다. 이미 AI가 훌륭한 답변을 해주었네요 ㅎㅎ
- 0
- 2
- 94
질문&답변
2024.04.06
학습자료 관련해서 질문있습니다.
네 당연히 문제없죠!
- 0
- 1
- 87
질문&답변
2024.04.05
무한스크롤 강의 관련 질문입니다.
당시 step을 적용하다보니 로직이 꼬였었는데요, [복습스터디 #3. 무한스크롤 - 코드리뷰 + QnA + 버그수정] 24:30쯤부터 내용 설명 및 버그 수정하는 내용이 나옵니다. 어떤것을 리팩토링하신다는 것인지 이해하지 못했습니다만, ding-co님께서 더 나은 방법이라고 생각하시는 코드가 있다면 수정된 내용 전반을 여기에 공유해주세요. 다른 분들께도 참고가 되어 좋을 것 같네요! 참고로 긴 코드는 우측의 [ ] 버튼을 눌러 작성하실 수 있어요. (사진)
- 0
- 1
- 103
질문&답변
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