[2024.11.25] 눈내리는 크리스마스 폼 만들기 TILs

[dodonot3]

LINK

https://dodonot3.github.io/goorm/html/christmas.html

TILs

• [x] 기본 폼 태크 활용하여 연습하기 (이전 시간 작업인데 병가로 빠졌어서 빠르게 작업했어야 했음)
• [x] CSS 이용하여 폼 페이지 디벨롭
• [x] 도전!💪 더 재밌고 색다르게 표현해보기 + 시간안에 JS 활용해서 업그레이드 해보기

🔔🎄 눈내리는 크리스마스 초대장 폼을 만들어 보았다. 🎄🔔

오늘의 재밌던 점

• 1시간 안에 빠르게 디자인을 하고 퍼블리싱에 들어갔는데....페이지 상단 작업표시줄 넓이를 고려해서 디자인 해야 하는 점을 깜빡했음! ^^

  반응형 화면 설계를 안했기 때문에, 시각 보정으로 개발자 도구에서 계속 속성 편집하면서 14인치 화면에서도 요소가 최대한 깨지지 않도록 반영하였음

• z-index 속성을 많이 활용한 페이지였는데 처음에 그것을 간과하고 html을 작성했다가 계속 html과 CSS를 수정하는 일이 반복 됐었음

  이과정에서 이미지를 %로 표시했다가 버튼이 이미지 보다 상단에 표시 되어야 하는데 html에서 버튼은 폼 요소안에 있으니 이미지를 다시 폼 요소로 옮기면서 부모에 따른 속성값을 받아서 이미지가 작아지는 문제가 발생함

그래서 이미지도 vw vh를 이용해서 표시하기로함! + 14인치까지는 약간의 반응형을 고려해서 작업하고 싶었기 때문

• particles.js를 이용해서 canvas로 눈을 표현하는 부분이 있었는데 이미지랑 겹치는 경우, 이미지 때문에 Click 액션시의 효과가 적용되지 않았음!

  canvas에 z-index 속성을 적용해보았는데 canvas에서는 z-index가 안되는 것을 깨달음

이미지를 background 요소로 빼는 방법으로 한 번 도전해보면 어떨가 생각해보았지만 시간상의 이유로 일단은 우선순위에서 넘김

세상에 이런 오류도 있구나

Git: RPC failed; HTTP 400 curl 22 The requested URL returned error: 400

• path로 표현되었던 리본 이미지 요소는 간단하기에 svg로 export하였었음. 그러나 빨리 해야한다는 생각에 아무 생각없이 사진 img도 svg로 export해버렸고..... 로컬에서 작업했을 때 문제가 없었으나... 이것이 나중에 큰 대참사를 불러왔다..

git push를 하려고 하니 스테이징에도 잘 올라가고 커밋메세지 입력도 잘 되었으나 Git: RPC failed; HTTP 400 curl 22 The requested URL returned error: 400 에러가 지속적으로 발생하여 push가 안됨. Chat GPT는 원격 레포지토리의 연결이 제대로 되지 않았을 것이다 또는 브랜치가 나누어져있어 merge를 이용하라는 답변이 반복이 되었다.

• 👥 (웅성웅성..) 도와주러온 소민이와 함께 열심히 해결하기 위해 짱구를 맞대어봄

1. 이 때문에 기존 레퍼지토리에서 클론을 받아 업데이트해서 푸시하는 방법으로 조금씩 방법을 바꿔가며 지속적인 시도를 해봄 👀(심각1) ..👀(심각2) .... 레퍼지토리를 결국 삭제하고 다시 만들고 연결하고 또 오류나고 다시 또 만들어보면서 에너지가 급속도로 소진되는 중..
2. merge를 하기위해 git log나 git status, branch로 터미널과 git 페이지에서 확인하면서 브랜치로 인한 여러 시도를 해보다가 오히려 브랜치가 나눠지기도 하고... 그래서 더 혼동이 오고 매우 고민이 많았음..

결국 해결함!

• 함께 구글링을 반복해서 하던 끝에 소민이가 이 이슈와 유사한 에러 글을 확인하게 되었다.

• 너무 많은 데이터를 push 하는 경우 일어날 수 있는 문제였고 터미널에 ❯ git config --global http.postBuffer 524288000 를 입력하여 HTTP 요청을 통해 데이터를 전송할 때 사용할 버퍼 크기를 설정하여 524288000 버퍼 크기 (약 500MB)로 버퍼를 조정하여 업로드한 끝에 해결할 수 있었다! https://velog.io/@hiyunseok347/Git-Error-RPC-failed-HTTP-400-curl-22-The-requested-URL-returned-error-400

‼️ 🫂 "됐나? 됐다!! 우와아아아 만세!!! 역시 구글링이 짱이다!!!!"

이 과정에서 문제가 되는 파일을 에디터에서 역추적해보니 SVG 파일인 것을 알아냈고 파일을 다시 살펴보게됨.. img로 올려야하는 파일을 SVG로 올린 것을 깨닫고 이마를 탁 쳤다.

복잡한 SVG는 과도한 에러와 처리 작업을 요한다..

"이래서 지금까지 봐왔던 사이트에서 약간은 복잡한 심볼은 png로 표시한 건가" "이래서 피그마에서 백터 파일을 불러왔을 때 백터가 복잡하면 그렇게 오류가 심했던 건가"

프로덕트 디자이너로서 많은 것을 느끼게 해주는 오류였다..

끝이 아니었다.. 이번엔 서버에서 확인한 Mixed Content 문제

• 처음에는 js 1번 줄 ID를 설정한 부분부터 오류가 나길래 여러번 확인했었으나 코드에는 이상이 없음을 확인하였다.

• Mixed Content는 http와 https의 차이에서 오류가 나는 부분이었다

  HTTPS 페이지가 HTTP로 제공되는 리소스를 로드하려고 할 때 발생한다.
  확인해보니 github.io는 HTTPS로 로드되는데, 내 파일에서는 particle.js cdn을 로드할 때 HTTP로 로드하고 있었다. 그런데 github.io로 확인하려고 하니 첫번째 줄 부터 js 오류가 발생한 것이다..

• cdn.jsdelivr.net은 HTTPS도 지원하고 있음을 확인했고 바로 수정을 적용하니 정상적으로 로드 되었다. <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

http 프로토콜에 대해서 이전에 공부해서 이해가 빨랐고, 공부하지 않았다면 왜 이런 문제가 발생하는지 빨리 이해하지 못했을 것 같다.

작은 것을 좀 더 창의적으로 좀 더 디벨롭해서 표현해보려 했던 도전이, 오류를 통해 아주 많은 것을 배우도록 도와준 힘 낸 하루였다.

[funcsom]

해결하게 돼서 너무 기쁜 이슈였어요! 들인 시간이 아깝다고 느낄 수도 있지만, 이제 이 경험으로 더이상 골머리를 앓지 않아도 된다는 걸 생각하니 한 단계 성장한것 같아요 ☺️ 오.... http로 로드하는 문제때문에 눈내리는게 안보였던거군요... 원인을 찾아서 정말 다행이에요 ㅎㅎ 늦게까지 작업하시던데 정말 본받고 싶은 열정이에요!!

[KwanLee1129]

문제를 해결하기 위한 많은 고민의 흔적이 너무 잘 정리되어 있네용 ㅎ.ㅎ 아직 응애라 무슨 말인지 모르는 게 태반이긴 하지만 ㅋㅋㅋㅋ 정인님의 문제해결능력이 잘 보이는 좋은 글인 건 분명해 보입니다 👍 사이트도 너무 예뻐요 !!!

[RunaUXLabs]

소민이 글 보고 왔어... 범인은 svg의 모든 앵커값 수치 때문이었숴!!!! 깃헙이 '앗 이런 소스 좀...'이럼서 뱉는 오류였나봐요. 400번대 에러메시지길래 일반적인 대답을 해준건데, 이걸로 오히려 시간이 소용되었군요ㅜㅜ 그래도 소민이랑 문제를 해결해서 다행이예요!