250902 TIL

 

❗어떤 문제가 있었는지

• 요구 과제에서의 수행에 있어 한가지 조건을 충족하지 못하고 초과하는 상황이 발생
  • 자기소개 프로필 페이지를 4개의 Div로 구성해야 하나, 4개를 초과한 Div 구성을 만들게 됨
  • 구성과정 중 프로필 이름 아래 자기소개 문구가 지속적으로 이미지 아래로 내려가거나 단의 margin gap이 크게 나타나는 현상이 있음
• To Do List 목록 구현 중 입력값을 중복으로 받아들이는 현상 발생
  • 영어 입력의 경우는 문제 없으나 한글인 경우에서의 문제가 발생하게 됨
  • if (e.isComposing || e.keyCode === 229) return; 을 통해 한글 입력 시에는 키다운 조건을 설정하여 중복입력을 방어해 나아갈 것

---

📝 내가 시도해본 것들

• 프로필 이미지가 들어가는 영역에 이미지와 텍스트를 1개의 div로 구성하고자 하였음
  • 이외에 부수적인 요건으로 section 기능을 활용한 추가 화면 구성이 가능함을 확인
  • 과제의 요건 상 4개의 div로만 구성해야 하기 때문에 section 기능은 제외하여 구성하여야 함 
• 추가 버튼으로 내용 추가를 할 경우에 중복 현상이 발생하는가?
  • 버튼을 직접 클릭하는 과정으로는 중복 현상이 발생하지 않음
  • Enter 로 입력되는 입력값에서의 충돌이 발생하는 것으로 예상

---

💡어떻게 해결했는지

• div의 개수를 4개로 고정한 이후 css의 style에서의 수정과정을 지속적으로 반복함
  • grid를 사용하려 했으나 자연스럽게 문구가 노출되지 않는 이슈가 발생
  • float을 통하여 왼쪽에는 프로필 이미지를 노출시키고, 오른쪽은 자연스럽게 텍스트가 흐르도록 구성하고자 했음
    
    

 

---

👍무엇을 새롭게 알았는지

• 조건에 맞춘 실 과제 진행에 있어 제약조건을 지키며 화면을 구성하는 방법에는 CSS 를 수정하거나, HTML 코드 자체의 변경을 통해서 문단 구성을 올바르게 할 수 있다는 점을 깨달음
• 세부적인 사항들은 꼼꼼히 수정해야 하나 자주 사용하는 문구에 대해서는 나만의 라이브러리를 구성하고 활용할 수 있도록 해야겠음
• 영상 링크를 진행할 경우(유튜브)에는 임베디드 주소로 참조해야 정상적으로 영상이 노출되게 됨
  • 그렇지 않은 경우는 유튜브 보안문제로 정상적으로 화면이 노출되지 않는 현상이 생김
  • 단순하게 iframe 태그를 이용하여 영상을 첨부하는 과정을 거침
• HTML 코드에서 입력값에서의 줄바꿈처리를 하기 위해서는 input type이 아닌 textarea 를 사용해야 한다
  
  

// 기존 구성했던 코드
<form id="todo-form">
                <input type="text" id="todo-input" placeholder="할 일을 입력하세요..." />
                <button type="submit" id="submit-btn">추가</button>
                
                
//변경 이후 코드
<form id="todo-form">
	<textarea id="todo-input" placeholder="할 일을 입력하세요..." rows="2"></textarea>
    <button type="submit" id="submit-btn">추가</button>
</form>

• 코드를 textarea로 변경했을 때 Enter로 입력되던 입력값이 정상적으로 처리되지 않는 상황이 발생하는데 이는 입력키에 따른 이벤트 처리를 추가적으로 진행해 주어야 한다.

 

• 트러블슈터 및 HTML&CSS 내용 정리를 진행하며
  • 기능을 온전히 암기하려 하기 보다는 흐름을 이해하고 어떤 요구사항을 어느 구간에 담아내야 하는지에 대한 이해도가 필요함을 스스로 정리하며 느끼게 됨
  • 과제 제출 정리 과정에서 사용했던 기능, 인용했던 기능들을 단계별 흐름과정으로 정리함으로서 용어의 의미와 처리기능을 정리하는 과정을 진행