TIL 2024-10-02(미니 프로젝트 1.)

1.  디자인 구성 

• 와이어 프레임을 기준으로 디자인 초기 디자인 구성 시도(실패)
  • why? 기존에 쓰던 카드 형식과 다름.
  • 코드 구성 자체가 다르고 사용하는 방법이 아예 다름.
• 와이어 프레임 기준을 크게 벗어나지 않고 기존에 쓰던 사진 모양 형태 선택(성공)
  • 강의에서 배웠던 내용을 토대로 수정.
  • 이미지 수정이 원하는대로 이루어지지 않음.
  • 수정하려면 아예 다른 방법을 다시 배워야함 
• 회원 살펴보기 - 개인 선택 보기에서 단체 보기로 변경
  • why? 개개인 한 명의 프로필에 show, hide 이벤트를 불필요하게 많이 작성.
  • 효율적이지 않아 기각.
  • 클릭 한 번을 화면 전환하는 듯한 효과를 주기 위함.
• 사이드바에서 헤더로 변경
  • 사이드 바 사용 시 동작 구현 기술 필요.
  • 아직 배우지 않았으며 알아보는데 시간이 불필요하게 들어감.
• 회원 카드의 입력해야하는 정보 및 포스팅 박스 구현 (성공)
  • 이미 여러 번 만들었기에 큰 문제 없음

 

 

---

2. 기능 테스트 및 구현

• show(), hide() 기술 테스트 (실패)
  • 처음에 id 및 오타 부분이 있나 확인하였으나 문제없음
  • async function() 제이쿼리 사용 했으나 실패
  • 계속해서 다른 기능들도 시도해본 결과 실패
  • 에러는 뜨지 않아서 console.log(1)로 이벤트가 똑바로 작동하는 지 확인
    • 결과 : 이벤트 자체가 반응하지 않음.
    • 원인 : 코드가 작동하는 순서의 문제.
  • 보통 모든 코드는 위에서 아래로 순서로 읽기 때문에 script가 위에 있기에 먼저 작동하기에 이벤트가 발생하지 않은 것 같다.
    • 해결 방법 : script type=module로 작동.
    • 해결 방법 2 : onclick을 사용하여 수동 작동으로 변경.
• 해결 방법 사용하여 몇 가지 기능 구현 성공.

 

• 삭제 및 수정 기능 구현
  • 추가 기능 구현 성공
  • but 버튼 위치에서 카드가 짤리는 현상 발생.
    • 다음 프로젝트까지 해결 예정.