potatosam
@potatosam
Học viên
287
Đánh giá khóa học
10
Đánh giá khóa học
4.7
안녕하세요, 4년차 프론트엔드 개발자 포테토쌤입니다.
현재는 글로벌 모빌리티 서비스를 개발하고 있어요. 다국어 서비스를 만들며 실무 경험을 쌓아왔고, 전 세계 개발자들이 사용하는 오픈소스 라이브러리 react-hook-form의 글로벌 Top 30 기여자이기도 합니다.
하지만 저도 처음부터 이랬던 건 아니에요.
JS를 처음 배울 때, 유튜브 강의를 따라 칠 때는 다 이해한 것 같았는데 막상 빈 에디터를 켜면 머리가 새하얘지는 경험을 수도 없이 했습니다. 처음엔 그저 구글링해서 찾은 코드를 복사하고 붙여넣기 바빴고, 에러가 터지면 어디서부터 손을 대야 할지 몰라 밤을 새우며 며칠을 좌절하기도 했어요.
그 과정에서 정말 많이 해맸습니다. DOM이 뭔지도 모른 채 코드를 짰고, 이벤트가 왜 두 번 실행되는지 몰라 몇 시간을 날리기도 했죠. 그때의 제가 가장 필요했던 건 방대한 문법 암기가 아니었어요. "이 코드가 왜 동작하는지"를 설명해주는 누군가였습니다.
4년간 실무를 거치면서 쌓아온 것들, 그리고 제가 초보 시절 가장 헤맸던 부분들을 정리해서 이 강의를 만들었습니다. 저처럼 돌아가지 않으셔도 됩니다. 제가 먼저 겪어봤으니까요.
Khóa học
Đánh giá khóa học
- Bắt đầu với TypeScript miễn phí: Từ cơ bản đến thiết kế kiểu dữ liệu
- Nhập môn Git & GitFlow với chi phí chỉ bằng một con gà rán
- Bắt đầu với TypeScript miễn phí: Từ cơ bản đến thiết kế kiểu dữ liệu
- Bắt đầu với TypeScript miễn phí: Từ cơ bản đến thiết kế kiểu dữ liệu
- Học HTML + CSS chỉ với 10.000 won
Bài viết
Hỏi & Đáp
useState 직접 구현 부분에서 질문이 있습니다.
안녕하세요! 질문 주셔서 감사합니다 :)헷갈릴 수 있는 지점을 짚어주셔서 감사합니다.먼저 해당 예제는 useState의 내부 아이디어를 가장 단순하게 보여주기 위한 개념 설명용 수도코드에 가까운 예제였습니다. 즉, “상태를 외부에 저장하고, setter가 상태를 바꾼 뒤 다시 render를 호출한다”는 흐름을 보여주는 데 초점을 둔 코드입니다.다만 말씀해주신 것처럼, 이 코드를 브라우저에서 그대로 실행하면 setCount is not defined 오류가 발생할 수 있습니다.문제는 이 부분입니다. return `${count}`;onclick="setCount(...)"는 HTML 문자열 안에 들어간 인라인 이벤트 핸들러입니다.innerHTML로 DOM에 들어간 뒤 버튼을 클릭하면, 브라우저가 이 문자열을 자바스크립트 코드처럼 실행합니다.이때 setCount를 Counter 함수 내부의 지역 변수로 찾는 것이 아니라, 전역(window) 스코프에서 찾게 됩니다.그런데 setCount는 아래처럼 Counter 함수 안에서 만들어진 지역 변수입니다.function Counter() { const [count, setCount] = useState(0); }그래서 클릭 시점에 브라우저가 window.setCount를 찾다 못 찾아 setCount is not defined 오류가 발생합니다.해결 방법은 말씀 주신 것처럼 크게 두 가지입니다.setCount를 바깥 스코프에 선언해서 전역에서 접근 가능하게 만들기addEventListener로 이벤트 핸들러를 직접 연결하기인라인 문자열 핸들러의 전역 스코프 문제를 피할 수 있고, 이벤트 콜백이 setCount를 클로저로 기억하기 때문에 addEventListener방식을 이용하는게 더 자연스러워 보입니다. ㅎㅎ예를 들면 다음처럼 바꿀 수 있습니다.// 전역 변수로 상태 저장 시도 let _state; function useState(initialValue) { if (_state === undefined) { _state = initialValue; } const setState = (newValue) => { _state = newValue; render(); }; return [_state, setState]; } function Counter() { const [count, setCount] = useState(0); const root = document.querySelector("#root"); root.innerHTML = `${count}`; root.querySelector("#btn").addEventListener("click", () => { setCount(count + 1); }); } function render() { Counter(); } render();개념 설명을 위해 단순화하다 보니, 실행 환경의 스코프 문제를 고려하지 못했네요 ㅠㅠ강의 자료도 addEventListener 방식으로 보완하여 업로드하였습니다.(다시 다운로드 부탁드립니다!)좋은 질문 주셔서 감사합니다. :)
- Lượt thích
- 1
- Số bình luận
- 1
- Lượt xem
- 54
Hỏi & Đáp
학습을 하고 블로그에 정리를 해도 괜찮을까요?
안녕하세요! 강의를 수강해주셔서 감사합니다 :)강의 내용이나 코드를 그대로 복사/붙여넣기 하는 것이 아닌, 수강생님이 직접 이해하신 내용을 바탕으로 요약해서 작성해 주시면 감사하겠습니다. 작성하실 때 강의 출처(강의명과 링크)도 함께 남겨주시면 더욱 감사하겠습니다 😊
- Lượt thích
- 1
- Số bình luận
- 1
- Lượt xem
- 54







