flexbox와 grid

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

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

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

재밌게 잘 듣고있어요~

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

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

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

trello-app에서 질문 있습니다

duswlskfk42님 안녕하세요. 먼저, dragOver 에서 말하는 타겟이란, 드래그-오버 되고 있는 대상을 의미하는데요. 이 이벤트는 이벤트 리스너가 달려있는 블록에서 드래그가 이루어지면 발생합니다. (현재 각각 todo, doing, done 리스트 블록) 또한 listIds 는 애초 리스트의 이름 (아이디)를 뽑아내기 위해 Object.keys 를 사용해 가져오는 것이므로, todo, doing, done만 나오는 것이 맞습니다. 결론적으로, 할 일을 드래그 해서, listIds 값 중 하나와 동일한 아이디를 가진 블록 위로 드래그 한다면, to 에 해당 리스트의 아이디 값을 대입해 도착지를 그곳으로 설정하게 되고, 드래그가 끝난 시점에 출발지와 도착지가 다른 경우에만 dragEnd 함수의 동작을 통해 요소가 이동 (실제로는 출발지에서 삭제 후 도착지에서 새롭게 생성)하게 됩니다. 즉, 올바르게 블록 단위로 드래그 되어 타겟 아이디가 리스트 블록의 아이디 중 하나를 갖지 않는다면, uuid 는 당연히 listIds 에 없기 때문에 이동하지 않습니다. 그래서 반드시 다른 블록 (이벤트 리스너가 달려 있는 리스트 블록) 안에 놓아야만 이동하는 것으로 구현이 됩니다. 다음 코드를 테스트 해보시면 좋을 것 같습니다. 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; } }; 만약 왜 내부 할 일 항목에서도 이벤트가 발생하는 것처럼 보이는지 이 부분을 더 자세히 알고 싶으시다면, 자바스크립트의 이벤트 전파 방식 부분, Event Target과 Current Target의 차이점 등을 함께 공부하시면 도움이 될 것 같습니다.