내일배움캠프 AI - 81일차 TIL, 2022.12.23

스파르타 코딩클럽 내일배움캠프 AI 웹개발자양성과정 3회차

2022.12.23. 81일차 - TIL

 

 

1. 프로젝트 기능 개선

1) 모집게시글 리스트에서 축제명 항목 크기 조절해 넘치지 않게 하기

피드백으로 지적받은 문제 중 하나가 바로 모집게시글 리스트에서 축제명이 일정 길이보다 긴 경우, 줄바꿈이 일어나면서 게시글 형식이 깨진다는 것이다. 이것은 프론트의 문제이지만 글자수를 제한하면 될 것이라고 생각해 바로 수정했다 전체적인 style을 다 변경할까 하다가 길이 제한이 필요한 것이 축제 제목 뿐이라 그냥 해당 <li>태그에 style을 적용해주기로 했다.(style로 뺄까 하다가 일단 수정되는지만 확인하기 위해 그냥 태그에 style 속성을 추가했다.)

 

찾아보니 css 말줄임 속성(text-overflow:ellipsis)이 있는데 이때 체크해야할 부분은 다음과 같다.

• width가 제대로 지정되어 있는가
• block 태그이거나, display: block으로 되어있는가
• 글자가 width를 넘어가는 조건을 충족하는가

 

css를 자세히 공부할 필요는 없지만 적어도 코드를 보면 이해는 하고 싶어서 평소에 헷갈리는 내용을 간단히 정리해보면 다음과 같다.

 

css에서 display 속성은 웹페이지에서 엘리먼트들이 어떻게 보여지고 다른 엘리멘트와 어떻게 상호 배치되는지를 결정한다. display 속성값은 inline, block, inline-block으로 나뉜다.

inline: 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치 -> <span>, <a>, <em> 태그 등이 존재

block: 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지 -> <div>, <p>, <h1> 태그 등이 존재

inline-block: 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 나란히 배치되지만, block 엘리먼트처럼 width와 height, margin과 padding으로 상하 간격 지정이 가능 -> <button>, <input>, <select> 태그 등이 존재

 

여기서 <li> 태그는 display 속성이 list-item인데 해당 성질은 block의 특성을 가지고 있기 때문에 여기서는 쓰는 것과 안 쓰는 것의 차이가 없다. 그리고 width도 이미 css로 지정이 되어있기 때문에 굳이 넣지 않아도 된다. 참고로 white-space은 공백을 처리하는 방법으로 nowrap으로 지정하면 normal과 같이 연속된 공백을 하나의 공백으로 채우지만 가로로 긴 ㅜㄹ에서도 줄 바꿈을 하지 않고 표시한다.

<li class="left" 
	style="overflow: hidden; text-overflow:ellipsis; white-space:nowrap;">
    ${festival}
</li>

 

 

2) 마이페이지에서 내가 가입 시 입력한 기존 지역 적용되게하기

프로필 편집 시 기존에 선택한 지역이 표시되지 않고, 해당 항목을 수정없이 편집하기 버튼을 누르면 수정할 수 없는 오류가 발생했다. 그래서 기존에 입력받은 지역을 value로 지정해주고자 했다. 그런데 여기서 코드를 자세히 보니 조금 안 좋은 부분이 있다. 우리는 지역을 charfield로 지정했다. 문제는 동일한 지역이라도 처음에 가입할 때는 '01'로 값을 저장한다면 프로필로 지역을 변경할 때는 '1'로 값을 저장한다는 것이다. 그 이유는 처음 가입 시 선택하는 option의 value가 '01', '02' 이런 식으로 진행되는데 반해 프로필 편집 때는 '1', '2' 이런 식으로 진행되기 때문이다. 아마도 서로가 별도로 코드를 짜다보니 이렇게 코드가 비효율적인 것 같다.(애초에 그냥 해당 필드를 정수형으로 지정해줄 것 그랬다.... 이건 나중에 코드 리팩토링하면서 팀원들과 의논해보자...)  지금보니 프로필을 편집하는 과정에서 선택한 value값을 parseInt로 정수화시키는 부분이 존재한다. 저 부분만 수정하면 해당 필드에는 항상 일정한 양식의 값이 저장된다. 그래서 일단은 기존에 있는 코드에 추가한다는 생각에 다음과 같이 코드를 작성했다.

...
response_json = await response.json();
...

if (typeof(response_json.user_address) == "string") {
	if (Math.floor(parseInt(response_json.user_address)/10) == 0) {
    	let address_str = '0'+String(response_json.user_address);
        document.getElementById("address").value = address_str;
    } else {
        document.getElementById("address").value = String(`${response_json.user_address}`);
    }
}

이렇게 할 필요도 없다. 아래와 같이 수정하면 된다. parseInt를 지우고, 그냥 값을 넣어주면 되는 간단한 문제였다....(코드는 항상 쉽고 간결하고 효율적으로...)

document.getElementById("address").value = `${response_json.user_address}`;

//수정
async function ProfileChangeput(){
	...
    const address = document.getElementById("address").value
    form_data.append('user_address', address)
    ...
}

 

나중에 해당 address값이 정수형으로 필요한 부분에서만 parseInt(`${response_json.user_address}`)를 하면 된다.