사이드프로젝트
내일이 스터디 회의날인데 안 된 부분이 많아서 주말에 수정함.
다음 회의까지 처리해야 할 목록
마이페이지, 회원목록 탭 부분 미디어쿼리 적용- 홈 테마 css 설정파일 만들기
selectHome ‘마이홈수정’ 버튼 변경사진 세로 길 때 잘리는 문제 수정사진 용량 넘을 경우 alert : mypage.js 참고: 별도 메소드로 분리 후 에러 수정회원 목록 - ‘수정’ 버튼 삭제- 모든 input 글자 수 제한 추가 (input max-length)
미디어쿼리
max-width, min-width의 사용법
- 우리 프로젝트는 pc화면을 기준으로 먼저 만들어졌기 때문에 화면이 특정 값보다 작아졌을 때를 기준으로 미디어쿼리를 작성하는 것이 편하다. 이럴 땐 max-width를 사용해 해당 픽셀보다 작을 경우를 작성한다.
미디어쿼리 기본사용법
회원목록 미디어쿼리
회원목록 부분은 <table> 태그는 아니지만 표 모양으로 만들어져 있었다. 회원 한 명의 정보가 한 줄로 나열되다 보니 작은 화면에서는 한 줄에 표시하기 어려운 문제가 있었다. 고민하다가 결국 모바일을 위한 레이아웃을 아예 별도로 만들기로 했다.
먼저 html에 새로운 레이아웃을 추가하고, css로 꾸며준다. 해당 태그는 기본적으로 display:none;으로 두고, 미디어쿼리 블록 안에서 display: block;으로 바꾸어주었다.
마이페이지 미디어쿼리
마이페이지도 회원목록처럼 탭으로 만들어져있지만, 정보들이 원래도 한 행에 하나씩 나와있기 때문에 모바일 화면에서는 너비만 조정할 수 있도록 변경했다.
비밀번호 변경 화면은 라벨 길이가 길어서 그냥 라벨과 입력창을 다른 행에 배치했다.
이미지 사이즈 조정
기존에는 <img>태그를 <div>로 한 번 감싸서 div에 너비, 높이를 주고 img의 너비, 높이는 100%로 맞추는 방법을 사용했었다. 그런데 내가 설정한 높이보다 더 세로길이가 긴 img가 잘리는 문제가 있어서 사이즈 조정을 고민하게 되었다.
max-width, max-heigth 활용하기
img에 max 너비, 높이 주기
이미지의 크기를 조정하는 방법을 검색하다가 위 답변을 보고 아이디어를 얻어 처음엔 이렇게 구현했다.
이미지를 감싸는 부모는 max-width로 최대 너비만 화면을 벗어나지 않게 해주고, height는 auto로 주었다.
#postList .list-wrap li .img-wrap {
max-width: 100%;
width: auto;
height: auto;
overflow: hidden;
}
#postList .list-wrap li .img-wrap img {
width: auto;
height: auto;
}이렇게 하니 세로로 긴 이미지가 나오긴 하는데, 문제는 이번엔 가로로 긴 이미지가 잘리기 시작했다.
수정한 방법
애초에 부모는 max너비, 높이를 지정하는데 자식 태그인 이미지는 auto로 크기를 주니 사진의 원래 사이즈대로 튀어나오고, 부모의 overflow:hidden에 의해 튀어나오는 부분이 안보이게 되는 것이었다.
그래서 부모태그에 max-heigth를 지정하고 자식태그인 이미지에는 max-width값을 주니 내가 원하는대로 되었다.
사진의 가로너비가 화면의 100%가 아닌 경우가 생길테니 이미지 중앙정렬도 추가해주었다.
#postList .list-wrap li .img-wrap {
display: flex;
justify-content: center;
max-width: 100%;
max-height: 66rem;
width: auto;
height: auto;
overflow: hidden;
}
#postList .list-wrap li .img-wrap img {
max-width: 100%;
width: auto;
height: auto;
}
파일 업로드 시 사이즈 체크
현재 파일 업로드 시 1mb의 크기 제한이 있다. 그런데 사용자에게 그걸 알려주는 기능이 없어서 실수로 큰 파일을 올리면 바로 에러화면이 뜨는 문제가 있었다. 다른 분이 만들어놓은 비슷한 기능이 있어서 수정해서 사용하는 과정에서 에러가 있었다.
기존 메소드
기존 메소드 안에는 파일의 사이즈를 체크하는 로직과 파일이 이미지인지 체크하는 로직이 같이 들어가있었다. 게시물의 경우 이미지가 아닌 파일을 올릴 수도 있으므로 해당 로직을 별도 메소드로 분리한 후 가져다 쓰려고 했다. 그런데 이상하게 별도 메소드로 분리하니 내가 원하는 것과 다르게 작동하는 부분이 있었다.
// 기존 메소드
function imgValidation(files){
var maxSize = 1048576;
[...files].forEach(file => {
if (!file.type.match("image/.*")) {
alert('이미지 파일만 업로드가 가능합니다.');
return false;
}
if(file.size > maxSize){
alert('파일 사이즈는 1MB까지 등록 가능합니다.');
return false;
}
});
return true;
}
// 분리한 메소드 : return값 에러 - alert가 나온 후 true를 반환
function fileSizeValidation(files) {
var maxSize = 1048576;
[...files].forEach(file => {
if(file.size > maxSize){
alert('파일 사이즈는 1MB까지 등록 가능합니다.');
return false;
}
});
return true;
}수정한 방법
js로 파일 사이즈를 체크하는 방법을 검색하다가 다른 방법을 찾아 메소드를 수정했다. 메소드 안 로직도 잘 돌아가고, return값도 내 의도대로 반환이 되었다. 사실 이전 메소드가 왜 문제가 있었는지는 아직 잘 모르겠지만, 반복문을 돌면서 뭔가 문제가 있지 않았을까 하는 생각이 든다.
function fileSizeValidation(files) {
var maxSize = 1048576;
if([...files][0].size > maxSize) {
alert('파일 사이즈는 1MB까지 등록 가능합니다.');
return false;
}
return true;
}추가 : form에서 e.preventDefault()의 역할
form의 onclick 메소드에서 e.preventDefault()를 호출하면 submit이 아예 안 될거라고 생각했는데 막상 찾아보니 좀 달랐다. submit은 하는데, 화면 reload를 안하는 것이었다.
나중에 생각해보니 form의 onclick을 사용하지 않아도 될 것 같아서 이 부분을 더 찾아보진 않았는데 헷갈리기 쉬운 것 같아서 적어둔다.
