수업질문
142
작성한 질문수 5
안녕하세요,
수업 중 이해가 되지 않는 부분이 있어 질문 드립니다.
훈훈한 JS>섹션7>함수,변수의 호이스팅 강의에서 17:43에서 newLi에 complete 클래스를 추가해주는 기능을 설명에 이해가 되지 않습니다.
위에 content는 부분에서는 전체 todoInput.value를 가져와서 덮어씌우는 것으로 이해했는데,
아래 클래스를 추가하는 부분에 정의된 newLi는 엔터로 인해 함수 실행될 때마다 새로운 createElment("li") 값을 가진 변수인데, 여기에 어떻게 이전의 데이터를 가진 특정 배열에만 complete를 넣어줄 수 있는걸까요?
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
질문하신 내용에 대한 답변을 드리겠습니다. 자바스크립트에서의 호이스팅은 변수나 함수의 선언을 코드 상단으로 끌어올리는 현상을 말합니다. 하지만 여기서 주목해야 할 것은 호이스팅은 선언만을 끌어올리며, 할당은 끌어올리지 않는다는 점입니다.
newLi에 complete 클래스를 추가하는 기능은 newLi가 생성된 후에 일어나는 이벤트를 기반으로 합니다. 즉, newLi는 createElement("li")를 통해 새 element로 생성되며, 해당 element는 이후에 발생하는 사용자의 행동(예: 클릭)에 따라 complete 클래스가 추가되는 구조입니다.
질문하신 “어떻게 이전의 데이터를 가진 특정 배열에만 complete를 넣어줄 수 있는가”에 대한 답변으로는, 이는 storageData의 상태에 따라 처리됩니다. 만악 storageData에 저장된 각 항목이 complete상태를 가지고 있다면 해당 상태에 따라 동적으로 newLi에 complete 클래스를 추가하여 시각적으로 구분할 수 있습니다. 이 과정은 일반적으로 이벤트 리스너 내부 또는 특정 함수 실행 시 검사하여 처리됩니다.
클래스를 추가하는 과정에서는 newLi의 생성과 독립적으로 storageData 내부 데이터를 검증하여 조건에 맞는 newLi에만 complete 클래스를 추가할 수 있습니다. 이는 newLi가 생성될 때마다 storageData를 검사하고, 해당 데이터가 complete 상태인지 아닌지에 따라 클래스를 추가하거나 하지 않는 로직을 구현함으로써 이루어질 수 있습니다.
즉, newLi가 새로 생성될 때마다 storageData의 상태를 확인하고, 조건에 맞는 항목에만 특정 작업(클래스 추가 등)을 수행하는 것입니다. 이로 인해 사용자는 어떤 항목이 완료되었는지 시각적으로 쉽게 구분할 수 있게 됩니다.
fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다
0
40
1
댓글 기능 구현 중 질문드립니다.
0
66
1
쿠폰코드 발급
0
134
2
example 서버 플레이그라운드, API 접속 모두 안됩니다.
0
87
2
문의드립니다!! ㅠㅠ
0
102
2
graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.
0
77
2
_app.js 작성 이후로 에러가 발생하네요
0
94
2
학습자료
0
71
2
학습자료가 안열립니다.
0
50
2
플레이 그라운드 퀴즈 문제 질문이 있습니다.
0
61
0
기존강의 구매자, 업데이트 끝인가요?
0
110
3
업데이트 버전 수강
0
89
2
완벽한 프론트엔드
0
136
2
나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.
0
84
1
graphql 접속이 안됩니다.
0
100
2
const, let 사용 질문 드립니다.
0
70
2
싸이월드 만들기 1탄 피드백 부탁드립니다.
0
122
2
회원가입 과제 피드백 부탁드립니다.
0
80
2
styled.span / styled.input "CSS 자동완성"
0
47
1
쿠폰 발급 관련
0
166
2
서버 502 error
0
247
2
쿠폰 다시 부탁드려도 될가여?
0
140
2
a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요
0
185
2
2분 44초 질문
0
132
3