TIL 23-06-08

1. 팀프로젝트
2. 프로그래머스

---

1.

1. 삭제 모달창 만들기

기존 코드는 리뷰카드에 있는 삭제 버튼을 누르면 배열에서 해당 객체를 지우는 방식이었다. 하지만 그렇게 되면 유저정보를 등록하는 의미가 없고 아무나 삭제할 수 있다는 문제가 생긴다. 그러므로 삭제 버튼을 누르면 비밀번호를 입력하고 그 비밀번호와 일치하는 객체를 삭제하는 방식으로 변경하기로 하였다.
나는 기존에 작성한 모달창을 활용해 삭제 버튼 클릭시 비밀번호를 입력하는 모달창을 띄우는 역할을 받았다. 기존의 팀원분께서 작성한 리뷰 삭제 함수 내부에서, 배열을 필터하는 함수를 주석처리한 뒤 모달창을 여는 로직을 추가했다.
모달창 열기는 기존의 리뷰창 열기와 똑같이 작성했다. 그리고 이번에는 인풋이 세개가 아니라 비밀번호 하나만 필요하므로 innerHtml로 비밀번호 입력창만 있는 모달로 변경하여 붙여주었다.

2. 모달창 문제 해결

모달창을 열어서 리뷰를 남긴 후 삭제 모달을 열고, 여기서 비밀번호 넣고 삭제까지 하면 페이지가 리로드 되는데, 삭제창만 열었다가 닫고 다시 리뷰창을 열면 바뀐 삭제모달이 뜨는 문제가 발생했다. 그래서 모달창의 닫기 버튼을 누르면 무조건 리로드 되도록 수정해서 문제를 해결했다.

3. 리뷰카드 글자 탈출

리뷰를 달면 카드가 붙는데, 내용을 길게 적을 경우 div를 탈출하는 문제가 생겼다. 그런데 내가 적을때는 탈출을 안해서 팀원분들께 여쭤봤더니 나는 한글로 써서 안튀어나오고 다른분은 영어로 썼더니 튀어나온 것이었다. 그래서 고민하다가 결국 매니저님께 도움을 요청했다. 원인은 p 태그에서 영어를 쓰면 뭐.. 그런일이 생긴다고 한다. 줄바꿈 속성을 활용해서 word-wrap: break-word; 를 css에 추가하여 해결했다.

4. 제목 말줄임

제목이 긴 영화의 경우 두 줄로 나타나 설명칸을 밀어서 글자가 div 밖으로 튀어나오는 문제가 생겼다. 그래서 다른 조 분께 도움을 요청했고,

overflow: hidden;: 박스에서 넘쳐난 텍스트 숨기기
white-space: nowrap;: 줄바꿈이 없어짐
text-overflow: ellipsis;: ... 말줄임 효과

말줄임 css 를 사용하여 제목을 한줄로 줄였다.
white-space는 공백을 다루는 요소이고, 텍스트가 길어서 부모 요소 안의 가로폭을 넘어가더라도 자동으로 줄바꿈이 일어나게 하고 싶지 않을 때 white-space 속성을 nowrap으로 설정한다고 한다. 별도로 지정하지 않을 경우 normal로 지정되며, pre는 텍스트에 포함된 연속된 띄어쓰기, 들여쓰기, 줄바꿈과 같은 공백 문자들이 HTML 문서 안에 붙여넣은 그대로 나타나게 하기 때문에 웹페이지 상에서 소스 코드의 일부를 있는 그대로 보여주고 싶을 때 유용하다고 한다.
overflow: hidden은 해당 HTML 요소 밖으로 삐져나오는 컨텐츠를 잘라버린다

참고할 만한 비슷한 요소

word-break: break-all;: 어절이 유지되지 않고 끊어져서 줄바꿈 됨

여러줄로 줄이고 싶으면 다음과 같은 방법을 쓰면 된다

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

5. 모듈화 시도

노션과 다른 팀원분이 하신걸 보고 리뷰작성 코드도 모듈화를 시도해 보았다. 그런데 html에 import를 하려고 하니 리뷰쪽은 모두 temp_html로 만들고 있어서 js 파일에 import를 시도했다. 하지만 import 로 작성한 한 줄 전체를 파일에서 인식하지 못했다. 아마 import 하려는 함수가 temp_html 속에서 호출되고 있는것 때문이 아닐까 하는 추측만 했고 해결하지는 못했다.

---

2.

1. 숫자찾기

function solution(num, k) {
    if (String(num).indexOf(k) !== -1) {
        return String(num).indexOf(k)+1
    } else {
        return -1
    }
}

2. 문자열정렬(2)

function solution(my_string) {
    return my_string.toLowerCase().split('').sort().join('');
}