안녕하세요 김효빈 입니다 😊
프론트엔드를 희망하는 분들을 위해 쉽고 친절한 강의를 제공합니다.
프론트엔드 교육자
(전) 스타트업 프론트엔드 리드 개발자
웹 페이지
온라인 강의
도서
외부활동
udemy, codeit, 한양여자대학교 등 특강 진행
강의
수강평
- 한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
- 한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
- 한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
게시글
질문&답변
BigInt Type 에 대하여
안녕하세요 Coding Basic님! 질문 주셔서 감사합니다.BigInt는 JavaScript에서 매우 큰 정수를 정확하게 표현하고 연산할 수 있게 해주는 데이터 타입입니다. 강의에서 설명드린 것과 같이, 끝에 n을 붙이거나 BigInt() 를 사용해 나타낼 수 있습니다.어떤 점이 궁금하신건지 구체적으로 알려주시면, 그 부분에 대해서 자세하게 설명드리겠습니다 🙂감사합니다 😊(+ 질문 가이드라인은 삭제해주세요!)
- 0
- 1
- 15
질문&답변
CityList 개발 실습진행 오류
안녕하세요 yh J님! 질문 주셔서 감사합니다 🙂혹시 코드를 아래와 같이 변경하고도 오류가 발생한다면, 다시 한 번 질문 남겨주세요!!app.get('/*splat', (req, res) => { res.sendFile(path.join(__dirname, '..', 'index.html')); });
- 0
- 2
- 18
질문&답변
프로그래밍 방식 관련 질문
안녕하세요 HK님 🙂 질문 감사합니다.querySelector('div.content')에서 querySelector는, 문서상 첫 번째로 매칭되는 요소 1개만을 선택합니다. 하지만, 혹시 모를 오류에 대비해 id값으로 명확하게 선택하는 것도 좋은 방법입니다.id 값은 고유하니, content라는 클래스명을 갖고있는 div들이 여러개라면, id 값을 설정해 사용하는것이 조금 더 안전할 것 같습니다!
- 0
- 2
- 27
질문&답변
노드 텍스트 추가
안녕하세요 HK님! 질문 주셔서 감사합니다. 3가지 방식을 조금 설명드려 보자면,textContent : 가장일반적이고 빠르며 안전한 방식입니다. 보통 단순히 텍스트만 넣고 싶을 때 사용합니다.innerText : 실제로 사용자가 보든 텍스트만 조작하고 싶을 때 주로 사용됩니다.innerHTMNL : HTML 코드로 해석해서 DOM으로 변환합니다. 여러가지 태그들도 삽입 가능하지만, 스크립트 삽입 위험성(XSS)이 있어 보안에 취약합니다.다음과 같은 차이점들이 있어, 상황에 따라 알맞게 사용하시면 됩니다 🙂
- 0
- 2
- 18
질문&답변
promise.all
안녕하세요 🙂 HK님 좋은 질문 감사드립니다.자바스크립트는 싱글 스레드 언어지만, Promise.all()을 사용하면 비동기 작업을마치 병렬처럼 동시에 시작하고, 모든 작업이 끝날 때까지 기다렸다가 결과를 한 번에 반환하게 됩니다.
- 1
- 2
- 33
질문&답변
계속 헷갈리네요. 이게 맞나요?
안녕하세요 GG G님!Promise 개념은 조금 어려운 개념이기 때문에 당연히 헷갈릴 수 있습니다 😀Promise 객체는 생성될 때 내부적으로 executor 함수를 실행합니다. resolve와 reject는 executor 함수의 매개변수이며, 우리가 원하는 시점에 비동기 작업이 성공했을 때 resolve함수를, 실패했을 때 reject 함수를 호출하면 됩니다.resolve(value + 10)을 호출하면 Promise 의 내부 상태가 fulfilled로 변경되고, value + 10 이 Promise 객체의 결괏값이 되죠. workA()를 실행하면 workA는 결과로 Promise 객체를 반환합니다. Promise 객체를 반환하기 때문에 then 메서드를 사용할 수 있습니다.const workA = (value) => { const promise = new Promise((resolve) => { setTimeout(() => { resolve(value + 5); }, 5000); }); return promise; }; workA(10).then((resA) => { console.log(resA); // 20 (== value + 10) });따라서 위의 코드는, workA가 프로미스 객체를 반환하고, 5초 후에 resolve(15)을 호출한 다음,.then()에 등록된 콜백 함수가 실행되면서, resA에는 resolve(15)의 값인 15가 전달되어 출력되는 것입니다. Promise는 자바스크립트에 내장된 전역 객체이고, new Promise()를 사용해서 비동기 작업을 관리할 객체를 생성하는 것이라고 이해해주시면 될 것 같습니다 🙂 감사합니다.
- 1
- 2
- 46
질문&답변
동물앨범 3-3 에서 express@5 설치 후 app.get('/*', callback) 에서 문제가 발생합니다.
안녕하세요 coding bear님!해당 오류는, 최근 express 버전이 업데이트 되어 발생하는 문제인데요, 해당 문제는 제가 '핸드북'과 '수업노트'에 해결방법을 작성해두었습니다!공식 문서 링크도 남겨두었으니, 참고해보시면 좋을 것 같습니다. 감사합니다 🙂
- 1
- 1
- 33
질문&답변
1. 동물 앨범 만들기 1-1 에서 template 배열 선언후 왜 문자열로 합치기를 했나요?
안녕하세요 🙂 coding bear님!강의에서는 초보 개발자분들을 위해 보다 깔끔하고 간단한 코드를 작성하려고 다음과 같은 방식으로 작성을 했는데요, 작성해주신 방식이 훨씬 명확하고 좋은 것 같습니다.해당 부분은 조금 더 보완해서 보다 더 좋은 방식으로 이번주 내로 업데이트 해두겠습니다. 의견 감사드립니다!!
- 1
- 1
- 34
질문&답변
조건부 렌더링을 위해 인스턴스를 매번 생성하는 것의 장단점이 궁금합니다.
안녕하세요 cho766님! 질문주셔서 감사합니다 🙂cho766님의 말대로, 페이지를 이동할 때마다 새로운 인스턴스를 계속 생성하게 되면 메모리 측면에서 단점이 생길 수도 있고 성능에 영향을 줄 수도 있습니다. 하지만, 자바스크립트는 '가비지 컬렉션'을 지원하기 때문에 더 이상 참조되지 않는 객체는 자동으로 메모리에서 제거됩니다. 따라서 이정도 소규모의 프로젝트나 단순 학습의 목적이라면 크게 신경쓰지 않아도 괜찮을 것 같습니다.그리고, 아주 간단하게 말해보자면, React에서는 필요한 부분만 업데이트 할 수 있는 기능, 컴포넌트의 재사용 등으로 이를 해결할 수 있습니다.좋은 질문 감사드립니다!
- 1
- 1
- 27
질문&답변
Promise 객체 출력
안녕하세요 godeka님! 질문 감사드립니다 🙂console.log로 delya(3000)의 반환값인 프로미스 객체를 출력하는 것이 맞습니다.하지만, await 키워드를 작성해주었기 때문에, resolve되는 프로미스 객체가 반환하는 값을 기다렸다가 result 변수에 그 값을 저장합니다.다시 정리해서 말해보자면, await 키워드를 작성해주었기 때문에,프로미스 객체가 반환하는 값을 출력하게 되는 것입니다.async/await 강의에서는 프로미스 객체 resolve 함수를 통해 반환하는 값을 출력할 수 있는 then 메서드 대신, async/await 키워드를 사용해 이를 출력하는 방법에 대해 설명하고 있습니다.'비동기' 개념은 중요한 개념인 만큼 조금 어려운 내용이기 때문에 핸드북을 통해 다시 한 번 천천히 읽어보시는 것을 추천드립니다 😊
- 1
- 3
- 60