20.01.06 - 01.10 동안 깨달은 점을 This Week I Learned 형식으로 정리 대부분 TIL(Today I Learned) 형식으로 글을 쓰시는데 평일에는 일 끝나면 자고 집안일 하느라 바빠서 주말에 정리하므로 다른 형식을 차용하였습니다.

form.serialize()와 submit()

이미지 업로드를 구현하는 도중 기본적인 Controller와 같은 건 다 만들었는데 이상하게 이미지 값을 null로 받아오는 것이었다. enctype="multipart/form-data" 이런 식으로 form에도 선언을 해줬고 지금까지는 form.serialize()로 값을 잘 넘겼었는데 이미지 파일을 추가해서 넘기려니 되지 않았다.

차장님이 조금 코드를 손대시더니 바로 작동이 되었는데 바로 form.serialize() 하지 않고 그냥 form.submit()을 하는 것이다. 나중에 찾아보니 serialize는 폼 요소를 문자열로 인코딩하는 함수이므로 안되는 거 같았다. 그리고 애초에 Ajax를 잘못 사용하고 있는 것도 문제였다.

servlet-mapping.xml

권한과 상관없이 사용자가 특정 URL에 접근 가능하게 하려면 어떻게 해야 할까? servlet-mapping.xml에 <exclude-maaping path="/index.do"/> 이런 형식으로 선언을 해주어야 한다. 그리고 LoginInterceptor 관련 클래스에서도 수정해야 할 코드가 있다면 봐주어야 한다.

JS, CSS, JSON 캐시 Cache 방지

이번에 라이브러리 형식으로 기능을 만들면서 JS, JSON을 많이 사용했는데 그렇다 보니 수정을 해줘도 캐시가 남아있어 수정한 기능이 곧바로 동작하지 못하는 현상을 자주 접하게 되었다. 개발자 입장에서는 귀찮기는 하지만 캐시를 없애면 되기에 문제가 아니지만 사용자 입장은 다르다. 사용자에게 캐시를 계속 없애가면서 기능을 사용하라고 할 수는 없기에 새로 업데이트를 하면 캐시 상관없이 동작하게 해야 할 것이다.

원래라면 아래처럼 단순하게 import를 하면 external JS를 불러 사용할 수 있다. <script src="myscripts.js"></script>

캐시 방지를 하고 싶다면 아래처럼 파일 확장자 뒤에 Query String을 붙여주면 된다. <script src="myscripts.js?version=1.0"></script>

?ver=0.1, ?vers=1.3처럼 개발자가 알아서 이름을 지어서 넣어주면 된다.

코딩표기법 카멜, 스네이크, 파스칼

학생떄 혼자 개발할때는 카멜보다는 언더바를 사용하는 스네이크 표기법을 선호했었다. 언더바(_)를 사용할때 함수명이 길어져도 훨씬 보기 편했었던것 같다. 그리고 실제로 Django로 개발할 떄는 함수명을 언더바를 사용하기도 했고…

근데 회사에서는 대부분 카멜을 사용하는것 같다. 물론 이러한 규칙들도 회사마다 다르겠지만 또 막상 카멜을 쓰다보니 편하긴하다.

파스칼만 잘 안쓰이는듯

UnicodeDecodeError: ‘utf-8’ codec can’t decode byte 0xff in position 0: invalid start byte

Python으로 작업하다보면 꽤 자주볼 수 있는 오류 중 하나다. 파일의 저장형식이나 그냥 이상한 문자가 들어있으면 발생하는데 이 경우 보통 encoding="utf-8"을 적어서 처리하라고 한다.

하지만 위 코드를 적어도 잡히지 않은 경우가 대다수였다. 그래서 찾아보니 아래 처럼 errors="ignore"을 적어서 에러를 무시처리 하는 방법을 사용했다. 고도로 정확성을 요구하는 데이터라면 이런 방식을 사용해선 안되겠지만 참고만 하려고 데이터를 다듬어서 사용하는 경우에는 아래와 같이 처리하는게 편하다. with open(path, encoding="utf8", errors='ignore') as f:

CSS Pixel to Percentage

CSS로 이미지 좌표값을 px단위로 전부 설정해놨었는데 페이지 크기에 따라 유동적으로 변하지 않아 % 단위로 전부 변경해야했다. 하지만 아무리 찾아봐도 Converter 같은게 없어서 노가다로 변경하기 시작했는데 하다보니 은근히 패턴이 있어서 메모해두었다.

# Example

top: 45px -> 4.5% (소수점 찍기)
left: 55px -> 2.5% (소수점 찍고 나누기 2)
width: 100px -> 5% (소수점 찍고 나누기 2)
height: 205px -> 20.5% (소수점 찍기)

물론 이건 정확하게 맞춰주는 공식은 아니다. 그리고 심지어 가끔씩은 안맞을때도 있다. 근데 개인적으로 이미지 10개를 바꾼다고 하면 8개 정도는 근사치에 도달한다.

그래서 Excel로 px 값을 관리하고 있었다면 그냥 전부 위 공식을 사용해서 percentage로 변환해주고 나머지 조절은 개발자 도구에서 보면서 실시간으로 맞춰주면 된다.

물론 그냥 처음부터 개발자 도구에서 보고 바꾸는게 편하면 그게 나을 수도 있다.