erumcoding

미들 (4~8년)

안녕하세요 경미님.시스템 이용에 관련된 문의는 제가 답변 드리기 어렵습니다. 그래서 해당 내용 인프런 측에 1:1 문의 남겨 놓았는데요. 12월 25일부터 1월 1일까지 인프런 휴무라고 합니다. 이후 연락 부탁한다고 남겨두었습니다~

수업재생안됌

준희님 안녕하세요.자바스크립트 파일이 불러와 지지 않는 상황이 워낙 다양해서 작성하신 전체 코드와 실행 환경 알려주시면 더 정확한 답변이 가능 할 것 같습니다!댓글로 추가해주세요!

모듈파트 초반 진행중 오류

안녕하세요 모짜르트님.보니까 데이터는 <code>products.json</code> 이고 불러오려는 것은 <code>product.json</code> (s가 빠짐)인 것 같습니다. 또한 <code>asssert</code> 대신 <code>with</code> 를 넣어 아래 코드 테스트로 사용하시길 바랍니다~ <code>with</code> 에 대한 내용은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://nodejs.org/docs/latest-v22.x/api/esm.html#import-attributes">여기</a>를 참고해주세용<pre><code>import products from '../products.json' with { type: 'json' };
console.log(products.data);</code></pre>

쌤 에러가 계속 나요ㅠㅠ

안녕하세요.<code>display</code> 함수 안에서 왜 <code>group</code> 변수를 초기화 하지 않고 변수만 선언한 이유는 (물론 안전하게 공백 등으로 초기화를 해줘도 좋지만) 변수에 들어갈 값이 바로 아래에서 결정되기 때문입니다.설명은 아래 주석을 참고해주세요!&nbsp;<pre><code class="language-javascript">const display = (bmi) => {
 const result = document.querySelector('.result');
 // 여기서 선언된 result는 const 상수이므로 반드시 우리가 사용하려는 객체로 초기화가 되어야 합니다. const 상수는 선언과 동시에 초기화가 이루어져야 하고, 값이 변경되지 않습니다.
 // 특별한 이유 = 값이 중간에 변경 되거나 확실하지 않은 어쩔 수 없는 경우를 제외하고는, 자바스크립트는 const를 기본으로 사용하시는 것이 좋습니다.

 let group;
 // 여기서 group 변수는 선언만 되고 초기화 되지 않았습니다.
 // 바로 아래 if 안에 걸리는 구간에서 값이 할당됩니다.
 // 왜 if 안에서 선언하면 안되느냐? = 각각의 변수가 아닌 하나의 변수를 사용하기 위해서 밖에서 선언한 것입니다.
 // 왜 애초에 위에서 초기화 하지 않느냐? = 여기 선 값을 결정하지 못했기 때문입니다. 해당 예제가 간단한 예제라서 이렇게 한 바닥에 다 보이게끔 작성을 했는데요. 꼭 이렇게만 해야 한다는 법칙 같은 것은 없으며, 만약 이 구조가 싫다면 값을 결정하는 구간을 선행하게끔 로직을 변경하시면 됩니다! (예 : 텍스트를 반환하는 함수를 따로 만들어서, display 함수에서는 업데이트만 해준다)

 if (bmi >= 30.0) {
 group = '중등도비만';
 } else if (bmi >= 25.0) {
 group = '경도비만';
 } else if (bmi >= 23.0) {
 group = '과체중';
 } else if (bmi >= 18.5) {
 group = '정상';
 } else {
 group = '저체중';
 }

 result.innerText = `${bmi} → ${group} 입니다.`;
};</code></pre>&nbsp;다음 링크를 함께 참고해보시면 더 좋을 것 같습니다.<ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const">https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const</a>&nbsp;</li></ul>

bmi 계산기 질문있습니다.

레이아웃을 짜는데 정답은 없습니다! 그리드든 플렉스는 애초에 어떤 구성을 기획하셨는지가 제일 중요해요. 그 모양으로 만들 수 있다면 그리드를 썼다고 틀린 것은 아닙니다. 또한 모바일에 대한 반응형 처리를 어떻게 할지에 따라 달라질 수 있습니다. 위와 같은 디자인은 전부 플렉스로 잡아도 충분할 것 같습니다 ^^한 마디로 그리드든 플렉스는 2개 다 반드시 잘 알고 계셔야 하고, 어떤 걸 쓰더라도 본인이 생각한 레이아웃을 잡을 수 있으면 되기 때문에 어떤 식으로 레이아웃을 잡아야 하는지 다양한 옵션에 대한 이해가 기본 되어야 합니다. 다만 추천을 드리자면, 그냥 가로든 세로든 쌓여 있기만 하면 된다면 플렉스를, 조금 독특한 구조의 레이아웃을 구성해야 하거나, 완전 표 형식의 규칙적인 데이터를 다룰 때는 그리드를 사용하시면 더 좋습니다.

flexbox와 grid

작성하신 코드의 상속 관계를 정확히 보여주시면 더 정확한 답변 드릴 수 있을 것 같습니다~

#21 그리드 강의 정렬 관련 속성

safeArea님 안녕하세요.네 학습 순서는 괜찮은 것 같습니다. 다만 자바스크립트로 개발 경험이 많지 않으시다면, 딥다이브 강의가 조금 어려울 순 있을 것 같습니다만, 워낙 좋은 강의이니 딥다이브 책과 강의는 교양처럼 개발하시면서 공부하셔도 좋을 것 같아요~ 최종적으로 리액트로 포폴을 만들고 싶으신거라면, 이 강의 들으시고 난 다음 리액트 강의를 기초부터 다양하게 들어보시면 더 좋을 것 같습니다. ^^그리고 ES는 자바스크립트 표준 규격이고, 크롬은 자바스크립트를 포함하고 있기 때문에 작동은 걱정하지 않으셔도 됩니다~<ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.w3schools.com/js/js_versions.asp">https://www.w3schools.com/js/js_versions.asp</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://caniuse.com/">https://caniuse.com/</a></li></ul>

재밌게 잘 듣고있어요~

안녕하세요 지만님.해당 오류는 경로가 잘못 되었을 경우 발생합니다. 작업 중인 폴더 <code>/common/reset.css</code> 경로에 해당 파일이 존재하는지 확인해보시고, 만약 공용으로 사용하는 파일을 추가하지 않으셨다면 추가해주시면 됩니다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/erumcoding/js-project-101/tree/main/common">https://github.com/erumcoding/js-project-101/tree/main/common</a>

bmi 계산기 css가 적용이 안됩니다

duswlskfk42님 안녕하세요.&nbsp;먼저, <code>dragOver</code>에서 말하는 타겟이란, 드래그-오버 되고 있는 대상을 의미하는데요. 이 이벤트는 이벤트 리스너가 달려있는 블록에서 드래그가 이루어지면 발생합니다. (현재 각각 todo, doing, done 리스트 블록)또한 <code>listIds</code>는 애초 리스트의 이름 (아이디)를 뽑아내기 위해 <code>Object.keys</code>를 사용해 가져오는 것이므로, todo, doing, done만 나오는 것이 맞습니다. 결론적으로, 할 일을 드래그 해서, <code>listIds</code> 값 중 하나와 동일한 아이디를 가진 블록 위로 드래그 한다면, <code>to</code>에 해당 리스트의 아이디 값을 대입해 도착지를 그곳으로 설정하게 되고, 드래그가 끝난 시점에 출발지와 도착지가 다른 경우에만 <code>dragEnd</code> 함수의 동작을 통해 요소가 이동 (실제로는 출발지에서 삭제 후 도착지에서 새롭게 생성)하게 됩니다.즉, 올바르게 블록 단위로 드래그 되어 타겟 아이디가 리스트 블록의 아이디 중 하나를 갖지 않는다면, <code>uuid</code>는 당연히 <code>listIds</code>에 없기 때문에 이동하지 않습니다. 그래서 반드시 다른 블록 (이벤트 리스너가 달려 있는 리스트 블록) 안에 놓아야만 이동하는 것으로 구현이 됩니다.&nbsp;다음 코드를 테스트 해보시면 좋을 것 같습니다.<pre class="hljs"><code>const dragOver = (event) => {
 event.preventDefault();

 const { id: targetId } = event.target;
 const listIds = Object.keys(lists);

 console.log(event.currentTarget.id);

 if (listIds.includes(targetId)) {
 to = targetId;
 }
};</code></pre>&nbsp;만약 왜 내부 할 일 항목에서도 이벤트가 발생하는 것처럼 보이는지 이 부분을 더 자세히 알고 싶으시다면, 자바스크립트의 이벤트 전파 방식 부분, Event Target과 Current Target의 차이점 등을 함께 공부하시면 도움이 될 것 같습니다.

trello-app에서 질문 있습니다

안녕하세요 그레이룩쇼님!파일 정상임을 확인했습니다. <code>index.html</code> 파일 상단에 다음과 같이 2개의 스타일시트 관련 코드가 있습니다.<pre class="hljs"><code><link rel="stylesheet" href="/common/reset.css" />
<link rel="stylesheet" href="style.css" /></code></pre>참고로 <code>common</code> 파일은 공통으로 쓰는 부분입니다!<h3>확인 결과</h3><h3><img src="https://cdn.inflearn.com/public/files/posts/c045f903-ba10-4078-bc11-350cf2389506/image.png" alt="image" title="image">링크</h3><ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/erumcoding/js-project-101/tree/main/common">https://github.com/erumcoding/js-project-101/tree/main/common</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/erumcoding/js-project-101/blob/main/01-exercise/03-bmi-cal/style.css">https://github.com/erumcoding/js-project-101/blob/main/01-exercise/03-bmi-cal/style.css</a></li></ul>

erumcoding

Posts