230519) 음악 추천 사이트 구현하기

 

1. 웹개발종합반을 수강하며 5주차에 만들었던 팬명록을 조금 수정하여 '코딩할 때 듣기 좋은 음악 추천' 사이트로 변경하였다.

 

2. 기존 제공받은 html 파일의 css가 대부분 bootstrap과 연결되어있다 보니, 어떤 부분이 어떻게 설정이 되어 있는지 확인하기 어려워 css 제어가 쉽지 않았다. (특히 사이즈와 관련된 값의 조절이 어려웠다)

-> 셀렉터를 이용해 css를 덮어쓰기하며, bootstrap의 기존 설정값을 초기화하는 방법으로 우선 해결하였다.

-> bootstrap은 실무에서도 종종 사용되는 듯하다. 아직 bootstrap의 작동 원리에 대해서 잘 알지 못하기 때문에 bootstrap 에 대한 공부도 필요할 듯하다! 남이 사용한 코드를 잘 해석하는 것도 힘!

 

 

3. js와 파이썬을 연결하는 과정에서 큰 어려움을 겪었다.

- 예를 들어, 이용자가 글을 작성할 때, 해당 데이터에 특정한 랜덤id를 부여하고 그 랜덤id를 이용해 해당 글에만 좋아요/삭제 기능이 작동되도록 하고자 했다.

- 하지만 랜덤ID를 부여하는 방법도 알지 못하고, 말그대로 '무작위'하게 부여되는 ID값을 지정하는 방법도 알지 못해 어려움을 겪었다.

- 구글링을 통해 일정한 ID는 document.getElementById 를 이용해 선택할 수 있다는 것을 알아내고 이해했지만, JS에 대한 기초가 전혀 없는 상황이었기 때문에 그 외 다른 문서들을 여러개 구글링을 통해 찾아봐도 기초 단어에 대한 이해도가 없다 보니 그 글을 해석하고 이해할 수가 없었다.

- 팀원들과도 이 문제를 공유했는데, 모두가 비슷한 문제를 겪고 있었다.

- 3시간 정도 이 문제로 씨름을 하다가, 결국 튜터님께 겪고 있는 문제를 상담하게 되었다.

 

//랜덤 ID 부여
let id = Math.random()

//삭제
function delete_comment(id) {
            let formData = new FormData();
            formData.append("id_give", id);

- 그 결과 위와 같은 솔루션을 받았다. 빠른 시간 내에 해당 기능을 구현해야 했고, JS에 대한 기초가 없는 초급자이기에 최대한 기존 코드를 유지하는 방법을 택해야 해서 완벽한 방법은 아니지만 'Math.random()'을 통해 id를 부여하는 방법을 알려 주셨다.

 

- 삭제도 주어진 id를 선택해 구현하는 방법으로 알려 주셨는데, 전체적인 원리가 이해되긴 하지만 아직 JS에 대한 이해도가 없다 보니 구성 단어 하나하나를 이해하기가 어려운 상태이다. 아직 JS를 배우지 않은 상태이기에 전체적 원리만 알아도 충분하다는 말씀을 해 주셔서, 추후 JS에 대한 공부를 어느정도 이행했을 때 해당 부분을 다시 이해하는 시간을 가지고자 한다.

 

 

4. 좋아요 버튼을 #like-comment로 설정하고, js에서 이를 document.getElementById로 선택한 뒤, classList.toggle을 이용하여 좋아요 버튼을 누르면 스크립트가 동작해 class가 붙으며 해당 class에 css가 적용되어 눌림효과가 나타나도록 했다.

 

- 하지만 이렇게 하다 보니 원래 기존에 있던 좋아요의 스타일을 셀렉터로 잡는데 어려움을 겪었다.

- html요소를 잡거나 id요소를 잡으면 이가 class보다 순위가 높은 탓인지 css가 전혀 먹지 않았기 때문이다.

 

-> 어쩔 수 없이 css를 내부 스타일로 넣었는데, 그러다 보니 코드의 가독성이 매우 좋지 않았다.

 

 

5. 좋아요 버튼을 button으로 구현하였는데, width와 height가 동일한 버튼을 만드는 게 정말 쉽지 않았다.

- width, height 값을 설정해도 안에 텍스트 값에 따라 width가 더 늘어났다.

- text-align도 아무런 효과가 없었다

- margin: auto도 이용해 봤으나 무용지물이었다.

 

- pc에서는 정원으로 보이나, 모바일에서는 늘어난 원처럼 보이는 문제도 있었다.

 

-> 결국 padding을 상하/좌우 다르게 설정해 pc/모바일 모두 정원으로 보이도록 해결했는데, 이는 사실 좋지 않은 방법임을 알고 있기에 아쉬웠다.

 

- TIL을 쓰다가 button이 인라인 요소여서 위의 방법이 모두 적용되지 않았던 것 같다고 뒤늦게 깨달았다.

-> 이는 display: block; 으로 쉽게 해결할 수 있는 부분인데, 내부스타일로 css를 적용하다 보니 가독성이 좋지 않았고 button을 활용해 본 적이 거의 없어 button요소가 인라인 요소이며, display: block;을 해 볼 생각조차 하지 못했던 것 같다.